@props([
    'name',
    'value' => '',
    'mode' => 'date',
    'required' => false,
    'id' => null,
])

@php
    $id = $id ?? $name;
    $mode = $mode === 'datetime' ? 'datetime' : 'date';
    $useJalali = app()->getLocale() === 'fa';
    $nativeType = $mode === 'datetime' ? 'datetime-local' : 'date';
    $nativeValue = $value;
    if ($mode === 'datetime' && is_string($nativeValue) && $nativeValue !== '' && ! str_contains($nativeValue, 'T')) {
        $nativeValue = str_replace(' ', 'T', substr($nativeValue, 0, 16));
    }
    $currentJy = function_exists('verta') ? (int) verta()->year : 1404;
    $months = __('admin.datepicker_months');
    $weekdays = __('admin.datepicker_weekdays');
@endphp

@if (! $useJalali)
    <input
        type="{{ $nativeType }}"
        id="{{ $id }}"
        name="{{ $name }}"
        value="{{ $nativeValue }}"
        class="admin-input"
        @required($required)
        {{ $attributes }}
    />
@else
    <div
        class="admin-jdp"
        x-data="adminJalaliDatepicker({
            value: @js($value),
            mode: @js($mode),
            required: @js((bool) $required),
            labels: {
                today: @js(__('admin.datepicker_today')),
                now: @js(__('admin.datepicker_now')),
                clear: @js(__('admin.datepicker_clear')),
                confirm: @js(__('admin.datepicker_confirm')),
                hour: @js(__('admin.datepicker_hour')),
                minute: @js(__('admin.datepicker_minute')),
                prevMonth: @js(__('admin.datepicker_prev_month')),
                nextMonth: @js(__('admin.datepicker_next_month')),
                weekdays: @js(__('admin.datepicker_weekdays')),
                months: @js(__('admin.datepicker_months')),
            },
        })"
        x-ref="wrap"
        @keydown.escape.window="open && close()"
    >
        <input type="hidden" name="{{ $name }}" :value="value" />
        <button
            type="button"
            id="{{ $id }}"
            class="admin-jdp__trigger admin-input"
            x-ref="trigger"
            @click="toggle()"
            :aria-expanded="open.toString()"
            aria-haspopup="dialog"
            aria-label="{{ __('admin.datepicker_open') }}"
            {{ $attributes }}
        >
            <span class="admin-jdp__value" :class="{ 'is-placeholder': !display }" x-text="display || @js($mode === 'datetime' ? __('admin.datepicker_placeholder_time') : __('admin.datepicker_placeholder'))"></span>
            <span class="admin-jdp__icon" aria-hidden="true">
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M8 3v2m8-2v2M4.5 9h15M6 5h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Z"/>
                </svg>
            </span>
        </button>

        <template x-teleport="body">
            <div
                class="admin-jdp__layer"
                x-show="open"
                x-cloak
                x-transition.opacity.duration.150ms
            >
                <div class="admin-jdp__backdrop" @click="close()"></div>
                <div
                    class="admin-jdp__panel"
                    x-ref="panel"
                    :class="{ 'is-sheet': mobile }"
                    :style="mobile ? '' : panelStyle"
                    role="dialog"
                    aria-modal="true"
                    @click.stop
                    x-transition:enter="admin-jdp__anim"
                    x-transition:enter-start="admin-jdp__anim-from"
                    x-transition:enter-end="admin-jdp__anim-to"
                >
                    <div class="admin-jdp__nav">
                        <button type="button" class="admin-jdp__nav-btn" @click="nextMonth()" :title="labels.nextMonth" aria-label="{{ __('admin.datepicker_next_month') }}">›</button>
                        <div class="admin-jdp__nav-selects">
                            <select class="admin-jdp__select" x-model.number="viewMonth" aria-label="{{ __('admin.date') }}">
                                @foreach ($months as $index => $month)
                                    <option value="{{ $index + 1 }}">{{ $month }}</option>
                                @endforeach
                            </select>
                            <select class="admin-jdp__select" x-model.number="viewYear">
                                @for ($year = $currentJy - 60; $year <= $currentJy + 20; $year++)
                                    <option value="{{ $year }}">{{ admin_persian_digits((string) $year) }}</option>
                                @endfor
                            </select>
                        </div>
                        <button type="button" class="admin-jdp__nav-btn" @click="prevMonth()" :title="labels.prevMonth" aria-label="{{ __('admin.datepicker_prev_month') }}">‹</button>
                    </div>

                    <div class="admin-jdp__week">
                        @foreach ($weekdays as $weekday)
                            <span>{{ $weekday }}</span>
                        @endforeach
                    </div>

                    <div class="admin-jdp__grid">
                        <template x-for="(cell, index) in cells" :key="index">
                            <button
                                type="button"
                                class="admin-jdp__day"
                                :class="{
                                    'is-empty': cell.empty,
                                    'is-selected': cell.selected,
                                    'is-today': cell.today,
                                    'is-friday': cell.friday,
                                }"
                                :disabled="cell.empty"
                                @click="pickDay(cell.day)"
                                x-text="cell.empty ? '' : cell.label"
                            ></button>
                        </template>
                    </div>

                    @if ($mode === 'datetime')
                        <div class="admin-jdp__time">
                            <label class="admin-jdp__time-field">
                                <span>{{ __('admin.datepicker_hour') }}</span>
                                <select :value="selected?.hour ?? 0" @change="setHour($event.target.value)">
                                    @for ($hour = 0; $hour < 24; $hour++)
                                        <option value="{{ $hour }}">{{ admin_persian_digits(str_pad((string) $hour, 2, '0', STR_PAD_LEFT)) }}</option>
                                    @endfor
                                </select>
                            </label>
                            <span class="admin-jdp__time-sep">:</span>
                            <label class="admin-jdp__time-field">
                                <span>{{ __('admin.datepicker_minute') }}</span>
                                <select :value="selected?.minute ?? 0" @change="setMinute($event.target.value)">
                                    @for ($minute = 0; $minute < 60; $minute++)
                                        <option value="{{ $minute }}">{{ admin_persian_digits(str_pad((string) $minute, 2, '0', STR_PAD_LEFT)) }}</option>
                                    @endfor
                                </select>
                            </label>
                        </div>
                    @endif

                    <div class="admin-jdp__actions">
                        <button type="button" class="admin-jdp__chip" @click="setToday()">
                            {{ $mode === 'datetime' ? __('admin.datepicker_now') : __('admin.datepicker_today') }}
                        </button>
                        <button type="button" class="admin-jdp__chip" x-show="clearable" @click="clear()">{{ __('admin.datepicker_clear') }}</button>
                        <button type="button" class="admin-jdp__chip admin-jdp__chip--primary" @click="confirm()">{{ __('admin.datepicker_confirm') }}</button>
                    </div>
                </div>
            </div>
        </template>
    </div>
@endif