@push('css')
<style>
    #scheduleCalendarModal .modal-dialog {
        max-width: 430px;
    }
    #schedule_calendar_container {
        display: flex;
        justify-content: center;
    }
    #schedule_calendar_container .lightpick {
        /* width: 100%;
        max-width: 430px; */
        box-shadow: none;
    }
    #schedule_calendar_container .lightpick__month{
        background-color: var(--background_2);
    }

    .transform-scaleY-minus{
        transform: scaleY(-1);
        display: inline-block;
    }
    /* .lightpick__day.is-start-date, .lightpick__day.is-end-date, .lightpick__day.is-start-date:hover, .lightpick__day.is-end-date:hover{
        background-color: var(--background_1) !important;
        color: var(--text_2) !important;
    } */
    /* .lightpick__month{
        width: 100% !important;
    } */
</style>
@endpush

<div class="modal fade" id="scheduleCalendarModal" tabindex="-1" aria-labelledby="scheduleCalendarModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content background_2">
      <div class="modal-header py-2 px-3 align-items-start"">
        <div class="w-100 text-center">
            <h5 class="modal-title mb-1" id="scheduleCalendarModalLabel">
                {{ isset($cart) && $cart->is_delivery == 0 ? __('lang.pickupDate') : __('lang.delivery_time') }}
            </h5>
            <div id="pickup_branch_label" class="text_3 font-14" style="display:none"></div>
            <div id="pickup_branch_text" class="text_3 font-14 address-multiline" style="display:none"></div>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="mb-3">
            {{-- <label class="form-label text-muted">{{ __('lang.select_date') }}</label> --}}
            <div id="schedule_calendar_container"></div>
        </div>
        @php
            $from = isset($setting) && isset($setting->scheduling_time_from) ? $setting->scheduling_time_from : '';
            $to = isset($setting) && isset($setting->scheduling_time_to) ? $setting->scheduling_time_to : '';
            $fromLabel = $from ? date('h:i', strtotime($from)) . ' ' . (date('A', strtotime($from)) == 'AM' ? __('lang.am') : __('lang.pm')) : '';
            $toLabel = $to ? date('h:i', strtotime($to)) . ' ' . (date('A', strtotime($to)) == 'AM' ? __('lang.am') : __('lang.pm')) : '';
        @endphp
        @if($from && $to)
        <div id="delivery_hours_note" class="text-center text_3 font-14 mb-2" style="{{ isset($cart) && $cart->is_delivery == 0 ? 'display:none' : '' }}">
            {{ __('lang.delivery_hours_note', ['from' => $fromLabel, 'to' => $toLabel]) }}
        </div>
        @endif
        <hr id="schedule_time_hr" style="{{ isset($cart) && $cart->is_delivery == 0 ? 'display:none' : '' }}">
        <div class="mb-3 schedule-time-wrapper" style="{{ isset($cart) && $cart->is_delivery == 0 ? 'display:none' : '' }}">
            {{-- <label class="form-label text-muted">{{ __('lang.select_time') }}</label> --}}
            <div class="d-flex justify-content-center align-items-center gap-2">
                <div class="d-flex flex-column align-items-center">
                    <button type="button" class="btn btn-sm px-2" id="hour_up"> <i class="polaris-max-icon-arrow-down transform-scaleY-minus" ></i> </button>
                    <span id="hour_display" class="font-18">10</span>
                    <button type="button" class="btn btn-sm px-2" id="hour_down"><i class="polaris-max-icon-arrow-down"></i></button>
                </div>
                <span class="font-18 text_1">:</span>
                <div class="d-flex flex-column align-items-center">
                    <button type="button" class="btn btn-sm px-2 text_1" id="minute_up"><i class="polaris-max-icon-arrow-down transform-scaleY-minus"></i></button>
                    <span id="minute_display" class="font-18">30</span>
                    <button type="button" class="btn btn-sm px-2 text_1" id="minute_down"><i class="polaris-max-icon-arrow-down"></i></button>
                </div>
                <div class="d-flex flex-column align-items-center ms-3">
                    <button type="button" class="btn btn-sm px-2 text_1" id="ampm_up"><i class="polaris-max-icon-arrow-down transform-scaleY-minus"></i></button>
                        <span id="ampm_display" class="font-18">{{ __('lang.am') }}</span>
                        {{-- <button type="button" class="btn btn-sm px-2" id="ampm_toggle">{{ __('lang.am') }}</button> --}}
                    <button type="button" class="btn btn-sm px-2 text_1" id="ampm_down"><i class="polaris-max-icon-arrow-down"></i></button>
                </div>
            </div>
        </div>
      </div>
      <div class="d-flex justify-content-center align-items-center p-3 gap-3">
        <button type="button" class="btn rounded-pill border-1 w-50" id="schedule_cancel_btn">{{ __('lang.cancel') }}</button>
        <button type="button" class="btn main-btn rounded-pill w-50" id="schedule_apply_btn">{{ __('lang.apply') }}</button>
      </div>
    </div>
  </div>
</div>

@push('css')
<style>
    .lightpick__month{
        width: 100% !important;
    }
</style>
@endpush

<script>
    function initScheduleCalendar(alpineComponent) {
        const calendarContainer = document.getElementById('schedule_calendar_container');
        const isPickup = !!alpineComponent.isPickup;
        if (calendarContainer && window.Lightpick) {
            const minDate = isPickup ? moment() : moment().add(1, 'days');
            alpineComponent.picker = new Lightpick({
                field: document.createElement('input'),
                parentEl: calendarContainer,
                singleDate: true,
                inline: true,
                minDate: minDate,
                format: 'YYYY-MM-DD',
                onSelect: function(date){
                    alpineComponent.selectedDateOnly = date ? date.format('YYYY-MM-DD') : '';
                }
            });
            if (alpineComponent.scheduledDate) {
                const d = moment(alpineComponent.scheduledDate);
                if (d.isValid()) {
                    alpineComponent.picker.setDate(d);
                    alpineComponent.selectedDateOnly = d.format('YYYY-MM-DD');
                }
            }
        }

        let hour = 10;
        let minute = 30;
        let isAM = true;

        if (alpineComponent.scheduledDate) {
            const d = new Date(alpineComponent.scheduledDate);
            if (!isNaN(d.getTime())) {
                let h = d.getHours();
                const m = d.getMinutes();
                isAM = h < 12;
                if (h === 0) h = 12;
                if (h > 12) h = h - 12;
                hour = h;
                minute = m - (m % 5);
            }
        }

        const modalEl = document.getElementById('scheduleCalendarModal');
        const hourDisplay = document.getElementById('hour_display');
        const minuteDisplay = document.getElementById('minute_display');
        const ampmDisplay = document.getElementById('ampm_display');
        const timeWrapper = modalEl ? modalEl.querySelector('.schedule-time-wrapper') : null;
        const timeHr = document.getElementById('schedule_time_hr');
        // const ampmToggle = document.getElementById('ampm_toggle');

        const render = () => {
            if (hourDisplay) hourDisplay.textContent = String(hour).padStart(2, '0');
            if (minuteDisplay) minuteDisplay.textContent = String(minute).padStart(2, '0');
            if (ampmDisplay) ampmDisplay.textContent = isAM ? "{{ __('lang.am') }}" : "{{ __('lang.pm') }}";
        };

        // Hide/Show time selection based on pickup status
        if (isPickup) {
            if (timeWrapper) timeWrapper.style.display = 'none';
            if (timeHr) timeHr.style.display = 'none';
        } else {
            // For delivery, respect the cart setting if available, otherwise show
            // Note: The blade template already sets initial display based on cart->is_delivery,
            // but here we are in JS context where alpineComponent.isPickup is the truth.
            // If isPickup is false (Delivery), we should show time unless specific logic says otherwise.
            // However, the blade template logic `isset($cart) && $cart->is_delivery == 0` implies "If Pickup, hide".
            // So if isPickup is false, we generally show it.
            if (timeWrapper) timeWrapper.style.display = '';
            if (timeHr) timeHr.style.display = '';
            render();
        }

        const wrap = (v, min, max, step) => {
            v += step;
            if (v > max) v = min;
            if (v < min) v = max;
            return v;
        };

        const hourUp = document.getElementById('hour_up');
        const hourDown = document.getElementById('hour_down');
        const minuteUp = document.getElementById('minute_up');
        const minuteDown = document.getElementById('minute_down');
        const ampmUp = document.getElementById('ampm_up');
        const ampmDown = document.getElementById('ampm_down');

        if (!isPickup) {
            if (hourUp) hourUp.onclick = () => { hour = wrap(hour, 1, 12, 1); render(); };
            if (hourDown) hourDown.onclick = () => { hour = wrap(hour, 1, 12, -1); render(); };
            if (minuteUp) minuteUp.onclick = () => { minute = wrap(minute, 0, 55, 5); render(); };
            if (minuteDown) minuteDown.onclick = () => { minute = wrap(minute, 0, 55, -5); render(); };
            if (ampmUp) ampmUp.onclick = () => { isAM = true; render(); };
            if (ampmDown) ampmDown.onclick = () => { isAM = false; render(); };
        }

        alpineComponent.getSelectedDateTime = function(){
            const dateStr = alpineComponent.selectedDateOnly || (alpineComponent.picker && alpineComponent.picker.getDate() ? alpineComponent.picker.getDate().format('YYYY-MM-DD') : '');

            // Validate that a date is selected
            if (!dateStr) {
                try {
                    showErrorToastify('{{ __('lang.pleaseSelectDate') }}');
                } catch(e) {
                    alert('{{ __('lang.pleaseSelectDate') }}');
                }
                return false; // Return false to indicate validation failure
            }

            if (alpineComponent.isPickup) {
                return `${dateStr} 00:00:00`;
            }
            let h = hour % 12;
            if (!isAM) h += 12;
            const hh = String(h).padStart(2, '0');
            const mm = String(minute).padStart(2, '0');
            return `${dateStr} ${hh}:${mm}:00`;
        };
    }
</script>