@php
    $isRange = !empty($field['air-datepicker']['range']);

    if ($isRange) {
        [$startFieldName, $endFieldName] = is_array($field['name'])
            ? $field['name']
            : explode(',', $field['name']);
    } else {
        $mainFieldName = $field['name'];
    }

    $sqlDateFormat = !empty($field['air-datepicker']['timepicker'])
        ? 'Y-m-d H:i:s'
        : 'Y-m-d';

    if (!function_exists('formatAirDate')) {
        function formatAirDate($entry, $dateFieldName, $sqlDateFormat) {
            if (isset($entry) && !empty($entry->{$dateFieldName})) {
                $dateField = $entry->{$dateFieldName};
                if ($dateField instanceof \Carbon\CarbonInterface) {
                    return $dateField->format($sqlDateFormat);
                }
                return date($sqlDateFormat, strtotime($dateField));
            }
            return null;
        }
    }

    if ($isRange) {
        $start_value = $end_value = $start_default = $end_default = null;

        if (isset($field['value'])) {
            if (isset($entry) && !is_array($field['value'])) {
                $start_value = formatAirDate($entry, $startFieldName, $sqlDateFormat);
                $end_value = formatAirDate($entry, $endFieldName, $sqlDateFormat);
            } elseif (is_array($field['value'])) {
                // Inside repeatable or when value is passed as array
                $start_value = current($field['value']);
                $end_value = next($field['value']);
            }
        }
        $start_default = $field['default'][0] ?? null;
        $end_default = $field['default'][1] ?? null;
    } else {
        if (isset($field['value']) && ($field['value'] instanceof \Carbon\CarbonInterface)) {
            $field['value'] = $field['value']->format($sqlDateFormat);
        }
        $field['value'] = old_empty_or_null($field['name'], '') ?? $field['value'] ?? $field['default'] ?? '';
    }

    $airConfig = array_replace_recursive([
        'dateFormat' => 'yyyy-MM-dd',
        'autoClose'   => true,
        'firstDay'    => 0,
        'buttons'     => ['today', 'clear'],
    ], $field['air-datepicker'] ?? []);

    // When timepicker is enabled and no explicit timeFormat is set, default to HH:mm.
    if (!empty($airConfig['timepicker']) && empty($airConfig['timeFormat'])) {
        $airConfig['timeFormat'] = 'HH:mm';
    }

    if (isset($airConfig['locale'])) {
        if (is_array($airConfig['locale'])) {
            $airDatepickerLocale = $airConfig['locale']; // Use the passed locale object directly
        }
        unset($airConfig['locale']);
    } else {
        $airDatepickerLocale = null;
    }

    if (!$airDatepickerLocale) {
        $localeFromTrans = trans('backpack::crud.date_time');
        $airDatepickerLocale = [
            'days'        => $localeFromTrans['days'] ?? ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
            'daysShort'   => $localeFromTrans['daysShort'] ?? ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
            'daysMin'     => $localeFromTrans['daysMin'] ?? ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
            'months'      => $localeFromTrans['months'] ?? ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
            'monthsShort' => $localeFromTrans['monthsShort'] ?? ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            'today'       => trans('backpack::crud.today'),
            'clear'       => trans('backpack::crud.clear'),
            'dateFormat'  => $localeFromTrans['dateFormat'] ?? 'MM/dd/yyyy',
            'timeFormat'  => $localeFromTrans['timeFormat'] ?? 'hh:mm aa',
            'firstDay'    => $localeFromTrans['firstDay'] ?? ($airConfig['firstDay'] ?? 0),
        ];
    }
@endphp

@include('crud::fields.inc.wrapper_start')

    {{-- Hidden inputs for form submission (SQL format) --}}
    @if ($isRange)
        <input
            class="air-datepicker-range-start"
            type="hidden"
            bp-field-name="{{ $startFieldName }}"
            name="{{ $startFieldName }}"
            value="{{ old_empty_or_null($startFieldName, null) ?? $start_value ?? $start_default ?? '' }}"
        >
        <input
            class="air-datepicker-range-end"
            type="hidden"
            bp-field-name="{{ $endFieldName }}"
            name="{{ $endFieldName }}"
            value="{{ old_empty_or_null($endFieldName, null) ?? $end_value ?? $end_default ?? '' }}"
        >
    @else
        <input
            type="hidden"
            bp-field-main-input
            name="{{ $mainFieldName }}"
            value="{{ $field['value'] }}"
        >
    @endif

    <label>{!! $field['label'] !!}</label>
    @include('crud::fields.inc.translatable_icon')

    <div class="input-group">
        <input
            data-air-datepicker="{{ json_encode($airConfig) }}"
            data-init-function="bpFieldInitAirDatepickerElement"
            data-is-range="{{ $isRange ? 'true' : 'false' }}"
            data-sql-date-format="{{ $sqlDateFormat === 'Y-m-d H:i:s' ? 'yyyy-MM-dd HH:mm' : 'yyyy-MM-dd' }}"
            data-ranges='@json($ranges ?? [])'
            data-locale='@json($airDatepickerLocale)'
            type="text"
            inputmode="none"
            @include('crud::fields.inc.attributes')
        >
        <span class="input-group-text">
            <span class="la la-calendar"></span>
        </span>
    </div>

    {{-- HINT --}}
    @if (isset($field['hint']))
        <p class="help-block">{!! $field['hint'] !!}</p>
    @endif

@include('crud::fields.inc.wrapper_end')


{{-- ########################################## --}}
{{-- Extra CSS and JS for this particular field --}}
{{-- If a field type is shown multiple times on a form, the CSS and JS will only be loaded once --}}

{{-- FIELD CSS --}}
@push('crud_fields_styles')
    @basset('https://cdn.jsdelivr.net/npm/air-datepicker@3.6.0/air-datepicker.min.css')
    @bassetBlock('backpack/pro/fields/air-datepicker-field.css')
    <style>
        /* Match Backpack's field styling */
        .air-datepicker {
            --adp-font-family: inherit;
            --adp-font-size: 0.875rem;
            --adp-border-radius: var(--tblr-border-radius, 4px);
            --adp-cell-border-radius: var(--tblr-border-radius, 4px);
            --adp-accent-color: var(--tblr-primary, #4eb5e6);
            --adp-background-color: var(--tblr-body-bg, #fff);
            --adp-background-color-hover: var(--tblr-light, #f0f0f0);
            --adp-background-color-active: var(--tblr-gray-200, #eaeaea);
            --adp-color: var(--tblr-body-color, #4a4a4a);
            --adp-color-secondary: var(--tblr-secondary, #9c9c9c);
            --adp-border-color: var(--tblr-border-color, #dbdbdb);
            --adp-border-color-inner: var(--tblr-border-color, #efefef);
            --adp-day-name-color: var(--tblr-primary, #ff9a19);
            --adp-cell-background-color-selected: var(--tblr-primary, #5cc4ef);
            --adp-cell-background-color-selected-hover: color-mix(in srgb, var(--tblr-primary, #5cc4ef) 85%, #000);
            --adp-cell-background-color-in-range: color-mix(in srgb, var(--tblr-primary, #5cc4ef) 10%, transparent);
            --adp-cell-background-color-in-range-hover: color-mix(in srgb, var(--tblr-primary, #5cc4ef) 20%, transparent);
            --adp-btn-color: var(--tblr-primary, var(--adp-accent-color));
            --adp-btn-color-hover: var(--tblr-body-color, var(--adp-color));
            --adp-btn-background-color-hover: var(--tblr-light, var(--adp-background-color-hover));
            --adp-time-track-color: var(--tblr-border-color, #dedede);
            --adp-time-track-color-hover: var(--tblr-secondary, #b1b1b1);
            --adp-color-current-date: var(--tblr-primary, var(--adp-accent-color));
            --adp-background-color-in-range-focused: color-mix(in srgb, var(--tblr-primary, #5cc4ef) 20%, transparent);
            --adp-color-other-month: var(--tblr-gray-300, #dedede);
            --adp-color-disabled: var(--tblr-gray-400, #aeaeae);
            --adp-color-other-month-hover: var(--tblr-gray-400, #c5c5c5);
        }

        /* Pointer arrow — must match calendar background and border for the "arrow" illusion.
           The pointer is a rotated square, half-hidden behind the calendar body. */
        .air-datepicker--pointer {
            --adp-pointer-background: var(--tblr-body-bg, #fff);
        }
        .air-datepicker--pointer::after {
            background: var(--tblr-body-bg, #fff) !important;
            border-color: var(--tblr-border-color, #dbdbdb) !important;
        }

        /* Inline mode border */
        .air-datepicker.-inline- {
            border-color: var(--tblr-border-color, #dbdbdb);
        }
    </style>
    @endBassetBlock
@endpush

{{-- FIELD JS --}}
@push('crud_fields_scripts')
    @basset('https://cdn.jsdelivr.net/npm/air-datepicker@3.6.0/air-datepicker.min.js')

    @bassetBlock('backpack/pro/fields/air-datepicker-field.js')
    <script>
        function bpFieldInitAirDatepickerElement(element) {
            const $element = $(element);
            const $wrapper = $element.closest('.input-group').parent();
            const isRange = $element.data('is-range') === true;
            const sqlDateFormat = $element.data('sql-date-format');
            const rangesConfig = $element.data('ranges');
            const localeObject = $element.data('locale');
            let airConfig = $element.data('air-datepicker') || {};

            if (localeObject && Object.keys(localeObject).length > 0) {
                airConfig.locale = localeObject;
            }

            // Ensures the locale object doesn't override the developer's explicit format choices.
            if (airConfig.locale) {
                if (airConfig.dateFormat) {
                    airConfig.locale.dateFormat = airConfig.dateFormat;
                }
                if (airConfig.timeFormat) {
                    airConfig.locale.timeFormat = airConfig.timeFormat;
                }
                if (airConfig.firstDay !== undefined) {
                    airConfig.locale.firstDay = airConfig.firstDay;
                }
            }

            let $startInput, $endInput;
            if (isRange) {
                $startInput = $wrapper.find('.air-datepicker-range-start');
                $endInput = $wrapper.find('.air-datepicker-range-end');

                // Set selectedDates from existing values
                const startVal = $startInput.val();
                const endVal = $endInput.val();
                if (startVal && endVal) {
                    airConfig.selectedDates = [new Date(startVal), new Date(endVal)];
                }

                // Set startDate/endDate for the calendar view
                airConfig.startDate = airConfig.selectedDates
                    ? airConfig.selectedDates[0]
                    : new Date();
            } else {
                // Single mode: hidden input is the main field
                const $hiddenInput = $wrapper.find('input[type="hidden"][bp-field-main-input]');

                // Set selectedDates from existing value
                const existingVal = $hiddenInput.val();
                if (existingVal) {
                    airConfig.selectedDates = [new Date(existingVal)];
                }
            }

            const buttons = airConfig.buttons || [];
            const rangeButtons = buildRangeButtons(rangesConfig, sqlDateFormat);
            airConfig.buttons = [...buttons, ...rangeButtons];

            const userOnSelect = airConfig.onSelect;
            airConfig.onSelect = function({ date, formattedDate, datepicker }) {
                if (isRange) {
                    // date is [startDate, endDate], or an empty array when the
                    // picker is cleared
                    if (Array.isArray(date) && date.length === 2) {
                        const startFormatted = datepicker.formatDate(date[0], sqlDateFormat);
                        const endFormatted = datepicker.formatDate(date[1], sqlDateFormat);

                        $startInput.val(startFormatted).trigger('change');
                        $endInput.val(endFormatted).trigger('change');
                    } else if (Array.isArray(date) && date.length === 0) {
                        // picker cleared: empty both hidden inputs instead of
                        // keeping the previously selected values
                        $startInput.val('').trigger('change');
                        $endInput.val('').trigger('change');
                    }
                } else {
                    // date is a single Date, or undefined when the picker is
                    // cleared. In that case formatDate() would fall back to
                    // the view date (today), so guard it and empty the input.
                    const $hiddenInput = $wrapper.find('input[type="hidden"][bp-field-main-input]');
                    const formatted = date ? datepicker.formatDate(date, sqlDateFormat) : '';
                    $hiddenInput.val(formatted).trigger('change');
                }

                // Call user's original onSelect if provided
                if (typeof userOnSelect === 'function') {
                    userOnSelect.call(this, { date, formattedDate, datepicker });
                }
            };

            try {
                const dp = new AirDatepicker($element[0], airConfig);

                // Store instance reference for external access
                $element.data('air-datepicker-instance', dp);

                if (isRange) {
                    $startInput.on('CrudField:disable', function() {
                        if ($endInput.prop('disabled')) {
                            $element.attr('disabled', 'disabled');
                        }
                    });
                    $endInput.on('CrudField:disable', function() {
                        if ($startInput.prop('disabled')) {
                            $element.attr('disabled', 'disabled');
                        }
                    });
                    $startInput.on('CrudField:enable', function() {
                        if (!$endInput.prop('disabled')) {
                            $element.removeAttr('disabled');
                        }
                    });
                    $endInput.on('CrudField:enable', function() {
                        if (!$startInput.prop('disabled')) {
                            $element.removeAttr('disabled');
                        }
                    });
                } else {
                    const $hiddenInput = $wrapper.find('input[type="hidden"][bp-field-main-input]');
                    $hiddenInput.on('CrudField:disable', function() {
                        $element.attr('disabled', 'disabled');
                    });
                    $hiddenInput.on('CrudField:enable', function() {
                        $element.removeAttr('disabled');
                    });
                }

                $element.on('keydown', function(e) {
                    e.preventDefault();
                    return false;
                });

            } catch (error) {
                console.error('AirDatepicker initialization error:', error);
            }
        }

        /**
         * Converts PHP-configured range presets into air-datepicker custom buttons.
         * Ranges are PHP array of [name => [startDateString, endDateString]].
         */
        function buildRangeButtons(rangesConfig, sqlDateFormat) {
            if (!rangesConfig || typeof rangesConfig !== 'object' || Object.keys(rangesConfig).length === 0) {
                return [];
            }

            const buttons = [];

            for (const [label, dates] of Object.entries(rangesConfig)) {
                if (!Array.isArray(dates) || dates.length !== 2) continue;

                buttons.push({
                    content: label,
                    className: 'air-datepicker-range-preset',
                    onClick: function(dp) {
                        const startDate = new Date(dates[0]);
                        const endDate = new Date(dates[1]);

                        if (isNaN(startDate.getTime()) || isNaN(endDate.getTime())) {
                            console.warn('AirDatepicker: Invalid range date for preset "' + label + '"');
                            return;
                        }

                        dp.selectDate([startDate, endDate]);
                        dp.setViewDate(startDate);
                    }
                });
            }

            return buttons;
        }

        /**
         * Returns the air-datepicker instance of a field, by field name.
         * The instance is stored on the visible input, in jQuery data, by
         * `bpFieldInitAirDatepickerElement`.
         *
         * Returns the instance, or false if the field (or its instance)
         * was not found.
         */
        function bpFieldAirDatepickerInstance(fieldName) {
            const $input = $(`[bp-field-name="${fieldName}"] input[data-air-datepicker]`).first();

            return $input.length ? ($input.data('air-datepicker-instance') || false) : false;
        }
    </script>
    @endBassetBlock
@endpush

{{-- End of Extra CSS and JS --}}