{{--
    New calendar/time-picker, built from scratch per the Figma "Schedule for Later"
    design, kept alongside the original Lightpick modal (delivery-time-modal.blade.php)
    per explicit agreement: neither is deleted until this one has been tested against
    the old one and a choice is made. Only openScheduleModal() in delivery-time.blade.php
    was changed to open this modal instead of the old one -- the old modal's own markup
    and initScheduleCalendar() script are untouched and still run, just unused for now.
    Reuses the same contract the old modal set up: this sets
    alpineComponent.getSelectedDateTime() (returns "YYYY-MM-DD HH:mm:00" or false),
    which the existing openScheduleModal()/applySchedule() flow in delivery-time.blade.php
    already calls -- no business logic (working-hours validation, etc.) duplicated here.
--}}
@push('css')
<style>
    #scheduleCalendarModalV2 .modal-dialog {
        max-width: 400px;
    }
    #scheduleCalendarModalV2 .modal-content {
        border-radius: 16px;
    }
    .calendar-v2-day {
        aspect-ratio: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        cursor: pointer;
        font-size: 14px;
    }
    .calendar-v2-day.is-muted {
        opacity: 0.35;
        cursor: default;
    }
    .calendar-v2-day.is-disabled {
        opacity: 0.25;
        cursor: not-allowed;
        pointer-events: none;
    }
    .calendar-v2-spinner-btn {
        border: none;
        background: transparent;
        line-height: 1;
        padding: 2px 8px;
    }
    /* Title block centered, close button pinned to the corner instead of the
       header's default flex space-between (which pushed the title to one side). */
    #scheduleCalendarModalV2 .modal-header {
        position: relative;
        justify-content: center;
        text-align: center;
    }
    #scheduleCalendarModalV2 .modal-header .btn-close {
        position: absolute;
        top: 1rem;
        inset-inline-end: 1rem;
    }
    /* Bootstrap's .form-select caret sits in a fixed padding reserved for it,
       but combined with w-auto (shrink-to-content) that padding could end up
       too tight for a 4-digit year, so the arrow overlapped the digits. */
    #scheduleCalendarModalV2 select.form-select {
        padding-inline-end: 1.75rem;
        background-position: left .5rem center;
    }
</style>
@endpush

<div class="modal fade" id="scheduleCalendarModalV2" tabindex="-1" aria-labelledby="scheduleCalendarModalV2Label" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content background_2" x-data="scheduleCalendarManagerV2()" x-init="init()">
      <div class="modal-header py-3 px-4">
        <div>
            <h5 class="modal-title mb-1" id="scheduleCalendarModalV2Label">
                <span x-show="isPickup">{{ __('lang.pickupDate') }}</span>
                <span x-show="!isPickup">{{ __('lang.delivery_time') }}</span>
            </h5>
            <div class="text_3 font-14">{{ __('lang.chooseYourPreferredDateTime') }}</div>
            <div id="pickup_branch_label_v2" class="text_3 font-14" style="display:none"></div>
            <div id="pickup_branch_text_v2" 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 pt-0">

        <div class="d-flex align-items-center justify-content-between mb-3">
            <select class="form-select w-auto border-0 fb-700 font-16 text_1" x-model.number="viewMonth" @change="render()">
                <template x-for="(name, index) in monthNames" :key="index">
                    <option :value="index" x-text="name"></option>
                </template>
            </select>
            <select class="form-select w-auto border-0 fb-700 font-16 text_1" x-model.number="viewYear" @change="render()">
                <template x-for="y in yearOptions" :key="y">
                    <option :value="y" x-text="y"></option>
                </template>
            </select>
        </div>

        <div class="d-grid mb-1" style="grid-template-columns: repeat(7, 1fr);">
            <template x-for="dow in dayNames" :key="dow">
                <div class="text-center text_3 font-12 fb-700 py-1" x-text="dow"></div>
            </template>
        </div>
        <div class="d-grid" style="grid-template-columns: repeat(7, 1fr);">
            <template x-for="(cell, index) in cells" :key="index">
                <div class="calendar-v2-day"
                    :class="{
                        'is-muted': !cell.inMonth,
                        'is-disabled': cell.disabled,
                        'main-btn': cell.selected
                    }"
                    @click="!cell.disabled && cell.inMonth ? selectDay(cell) : null"
                    x-text="cell.day">
                </div>
            </template>
        </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 class="text-center text_3 font-14 my-3" x-show="!isPickup">
            {{ __('lang.delivery_hours_note', ['from' => $fromLabel, 'to' => $toLabel]) }}
        </div>
        @endif

        <div class="mb-2" x-show="!isPickup">
            <hr>
            <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="calendar-v2-spinner-btn" @click="stepHour(1)"><i class="polaris-max-icon-arrow-down transform-scaleY-minus" style="display:inline-block;transform:scaleY(-1)"></i></button>
                    <span class="font-18" x-text="String(hour).padStart(2,'0')"></span>
                    <button type="button" class="calendar-v2-spinner-btn" @click="stepHour(-1)"><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="calendar-v2-spinner-btn text_1" @click="stepMinute(5)"><i class="polaris-max-icon-arrow-down transform-scaleY-minus" style="display:inline-block;transform:scaleY(-1)"></i></button>
                    <span class="font-18" x-text="String(minute).padStart(2,'0')"></span>
                    <button type="button" class="calendar-v2-spinner-btn text_1" @click="stepMinute(-5)"><i class="polaris-max-icon-arrow-down"></i></button>
                </div>
                <div class="d-flex gap-1 ms-3">
                    <button type="button" class="btn btn-sm rounded-pill px-3" :class="isAM ? 'main-btn' : 'border-1'" @click="isAM = true">{{ __('lang.am') }}</button>
                    <button type="button" class="btn btn-sm rounded-pill px-3" :class="!isAM ? 'main-btn' : 'border-1'" @click="isAM = false">{{ __('lang.pm') }}</button>
                </div>
            </div>
        </div>
      </div>
      <div class="p-3 pt-0">
        <button type="button" class="btn main-btn rounded-pill w-100" id="schedule_apply_btn_v2">{{ __('lang.confirmSchedule') }}</button>
      </div>
    </div>
  </div>
</div>

<script>
    function scheduleCalendarManagerV2(){
        return {
            viewMonth: (new Date()).getMonth(),
            viewYear: (new Date()).getFullYear(),
            selected: null, // {day, month, year}
            hour: 10,
            minute: 30,
            isAM: true,
            isPickup: false,
            minDate: null,
            monthNames: [
                "{{ __('lang.month_january') }}", "{{ __('lang.month_february') }}", "{{ __('lang.month_march') }}",
                "{{ __('lang.month_april') }}", "{{ __('lang.month_may') }}", "{{ __('lang.month_june') }}",
                "{{ __('lang.month_july') }}", "{{ __('lang.month_august') }}", "{{ __('lang.month_september') }}",
                "{{ __('lang.month_october') }}", "{{ __('lang.month_november') }}", "{{ __('lang.month_december') }}"
            ],
            dayNames: [
                "{{ __('lang.day_su') }}", "{{ __('lang.day_mo') }}", "{{ __('lang.day_tu') }}", "{{ __('lang.day_we') }}",
                "{{ __('lang.day_th') }}", "{{ __('lang.day_fr') }}", "{{ __('lang.day_sa') }}"
            ],
            cells: [],
            yearOptions: [],
            init(){
                const now = new Date();
                this.yearOptions = [now.getFullYear(), now.getFullYear() + 1];
                this.render();
            },
            setup(alpineComponent){
                this.isPickup = !!alpineComponent.isPickup;
                this.minDate = this.isPickup ? new Date() : (() => { const d = new Date(); d.setDate(d.getDate()+1); return d; })();

                if (alpineComponent.scheduledDate) {
                    const d = new Date(alpineComponent.scheduledDate.replace(' ', 'T'));
                    if (!isNaN(d.getTime())) {
                        this.viewMonth = d.getMonth();
                        this.viewYear = d.getFullYear();
                        this.selected = { day: d.getDate(), month: d.getMonth(), year: d.getFullYear() };
                        let h = d.getHours();
                        this.isAM = h < 12;
                        if (h === 0) h = 12;
                        if (h > 12) h -= 12;
                        this.hour = h;
                        this.minute = d.getMinutes() - (d.getMinutes() % 5);
                    }
                }
                this.render();

                alpineComponent.getSelectedDateTime = () => {
                    if (!this.selected) {
                        try { showErrorToastify('{{ __('lang.pleaseSelectDate') }}'); } catch(e) { alert('{{ __('lang.pleaseSelectDate') }}'); }
                        return false;
                    }
                    const dateStr = `${this.selected.year}-${String(this.selected.month+1).padStart(2,'0')}-${String(this.selected.day).padStart(2,'0')}`;
                    if (this.isPickup) {
                        return `${dateStr} 00:00:00`;
                    }
                    let h = this.hour % 12;
                    if (!this.isAM) h += 12;
                    return `${dateStr} ${String(h).padStart(2,'0')}:${String(this.minute).padStart(2,'0')}:00`;
                };
            },
            isSameDay(a, b){
                return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
            },
            render(){
                const firstOfMonth = new Date(this.viewYear, this.viewMonth, 1);
                const startOffset = firstOfMonth.getDay(); // 0 = Sunday
                const daysInMonth = new Date(this.viewYear, this.viewMonth + 1, 0).getDate();
                const daysInPrevMonth = new Date(this.viewYear, this.viewMonth, 0).getDate();

                const cells = [];
                for (let i = startOffset - 1; i >= 0; i--) {
                    cells.push({ day: daysInPrevMonth - i, inMonth: false, disabled: true, selected: false });
                }
                for (let d = 1; d <= daysInMonth; d++) {
                    const date = new Date(this.viewYear, this.viewMonth, d);
                    const disabled = this.minDate ? date < new Date(this.minDate.getFullYear(), this.minDate.getMonth(), this.minDate.getDate()) : false;
                    const selected = !!(this.selected && this.selected.day === d && this.selected.month === this.viewMonth && this.selected.year === this.viewYear);
                    cells.push({ day: d, month: this.viewMonth, year: this.viewYear, inMonth: true, disabled, selected });
                }
                let nextDay = 1;
                while (cells.length % 7 !== 0) {
                    cells.push({ day: nextDay++, inMonth: false, disabled: true, selected: false });
                }
                this.cells = cells;
            },
            selectDay(cell){
                this.selected = { day: cell.day, month: cell.month, year: cell.year };
                this.render();
            },
            stepHour(delta){
                let h = this.hour + delta;
                if (h > 12) h = 1;
                if (h < 1) h = 12;
                this.hour = h;
            },
            stepMinute(delta){
                let m = this.minute + delta;
                if (m > 55) m = 0;
                if (m < 0) m = 55;
                this.minute = m;
            }
        }
    }

    function initScheduleCalendarV2(alpineComponent) {
        const modalEl = document.getElementById('scheduleCalendarModalV2');
        if (!modalEl) return;
        // x-data lives on .modal-content (a grandchild of #scheduleCalendarModalV2,
        // the outer .modal wrapper) -- Alpine only sets _x_dataStack on the element
        // that actually declares x-data, never on an ancestor of it, so reading it
        // off modalEl itself always came back undefined and tryWire() retried
        // forever without ever finding it. setup() (which wires isPickup,
        // getSelectedDateTime, and the calendar's initial month/selection) never
        // ran as a result -- this modal was effectively disconnected from
        // deliveryTimeManager entirely, silently.
        const dataEl = modalEl.querySelector('.modal-content');
        if (!dataEl) return;
        // Alpine's x-init="init()" has already run by the time bootstrap shows this
        // modal; grab its Alpine component instance to wire the date/time contract.
        const tryWire = () => {
            if (dataEl._x_dataStack && dataEl._x_dataStack[0]) {
                dataEl._x_dataStack[0].setup(alpineComponent);
            } else {
                setTimeout(tryWire, 20);
            }
        };
        tryWire();
    }
</script>