<?php

/**
 * Better ACF Datepicker (replaces jQuery's datepicker)
 */
class acf_field_datepicker extends acf_field {

  $css_path = get_template_directory_uri() . '/css/datepicker.css';
  $js_path = get_template_directory_uri() . '/js/datepicker.js';

  function __construct() {

    // vars
    $this->name = 'date_picker';
    $this->label = __('Date Picker');
    $this->category = __('jQuery', 'acf');
    $this->defaults = array(
      'weekstart' => 0,
      'multiple' => 0,
      'inline' => 0,
      'calendars' => 1,
      'position' => 1,
      'paginate' => false,
    );

    // remove old date_picker
    remove_all_filters('acf/load_field_defaults/type=' . $this->name, 10);
    remove_all_actions('acf/create_field/type=' . $this->name, 10);
    remove_all_actions('acf/create_field_options/type=' . $this->name, 10);

    // do not delete!
    parent::__construct();

    // settings
    $this->settings = array(
      'path' => apply_filters('acf/helpers/get_path', __FILE__),
      'dir' => apply_filters('acf/helpers/get_dir', __FILE__),
      'version' => '1.0.0'
    );
  }

  function create_options( $field ) {
    global $wp_locale;

    $key = $field['name'];

    ?>
<tr class="field_option field_option_<?= $this->name; ?>">
  <td class="label">
    <label>Week Starts On</label>
  </td>
  <td>
    <?php do_action('acf/create_field', array(
      'type'    => 'select',
      'name'    => 'fields[' . $key . '][weekstart]',
      'value'   => $field['weekstart'],
      'choices' => array_values( $wp_locale->weekday ),
    )); ?>
  </td>
</tr>
<tr class="field_option field_option_<?= $this->name; ?>">
  <td class="label">
    <label>Allow Multiple?</label>
    <p class="description">Allow multiple dates to be selected</p>
  </td>
  <td>
    <?php do_action('acf/create_field', array(
      'type'    => 'radio',
      'name'    => 'fields[' . $key . '][multiple]',
      'value'   => $field['multiple'],
      'layout'  => 'horizontal',
      'choices' => array(
        true  => 'Yes',
        false => 'No',
      ),
    )); ?>

  </td>
</tr>
<tr class="field_option field_option_<?= $this->name; ?>">
  <td class="label">
    <label>Inline Calendar?</label>
    <p class="description">Hide the input and show only the calendar</p>
  </td>
  <td>
    <?php do_action('acf/create_field', array(
      'type'    => 'radio',
      'name'    => 'fields[' . $key . '][inline]',
      'value'   => $field['inline'],
      'layout'  => 'horizontal',
      'choices' => array(
        true  => 'Yes',
        false => 'No',
      ),
    )); ?>
  </td>
</tr>
<tr class="field_option field_option_<?= $this->name; ?>">
  <td class="label">
    <label>Number of Calendars</label>
    <p class="description">How many calendars to show at a time</p>
    <p>Useful with "Inline Calendar" enabled.</p>
  </td>
  <td>
    <?php do_action('acf/create_field', array(
      'type'  => 'number',
      'name'  => 'fields[' . $key . '][calendars]',
      'value' => $field['calendars'],
      'min'   =>  1,
      'step'  =>  1,
    )); ?>
  </td>
</tr>
<tr class="field_option field_option_<?= $this->name; ?>">
  <td class="label">
    <label>Main Calendar Position</label>
    <p class="description">When using mutiple calendars, which calendar is considered the main calendar?</p>
  </td>
  <td>
    <?php do_action('acf/create_field', array(
      'type'  => 'number',
      'name'  => 'fields[' . $key . '][position]',
      'value' => $field['position'],
      'max'   => $field['calendars'],
      'min'   =>  1,
      'step'  =>  1,
    )); ?>
    <script>
      jQuery('#acf-field-<?= $key; ?>_calendars').on('change', function() {
        jQuery('#acf-field-<?= $key; ?>_position').prop({
          max: this.value,
          value: function() {
            return Math.min(this.value, this.max);
          }
        });
      });
    </script>
  </td>
</tr>
<tr class="field_option field_option_<?= $this->name; ?>">
  <td class="label">
    <label>Arrow Pagination</label>
    <p class="description">Only applies to mutiple calendars</p>
  </td>
  <td>
    <?php do_action('acf/create_field', array(
      'type'    => 'radio',
      'name'    => 'fields[' . $key . '][paginate]',
      'value'   => $field['paginate'],
      'layout'  => 'horizontal',
      'choices' => array(
        false => 'By Month',
        true  => 'By Calendar Range',
      ),
    )); ?>
  </td>
</tr>
    <?php
  }

  function create_field( $field ) {
    $field = array_merge($this->defaults, $field);

    ?>
    <input type="text" class="js-datepicker" id="<?= $field['id']; ?>" value="<?= $field['value']; ?>" name="<?= $field['name']; ?>"
      data-multiple="<?= $field['multiple']; ?>" data-calendars="<?= $field['calendars']; ?>" data-index="<?= $field['position'] - 1; ?>"
      data-week-start="<?= $field['weekstart']; ?>" data-inline="<?= $field['inline']; ?>" data-paginate="<?= $field['paginate'] ? $field['calendars'] : 1; ?>">
    <script>(window.datepickers = window.datepickers || []).push(new DatePicker('#<?= $field['id']; ?>'));</script>
    <?php
  }

  function input_admin_enqueue_scripts() {
    wp_enqueue_script( 'datepicker', $this->js_path, false, $this->settings['version'] );
    wp_enqueue_style( 'datepicker', $this->css_path, false, $this->settings['version'] );
  }
}

// create field
new acf_field_datepicker();