{{--
=====================================================
Etebarit - by Gisoo Web Solutions
------------------------------------------------------
Gisoo.net
------------------------------------------------------
Copyright (c) 2026 Gisoo Web Solutions
=====================================================
This code is protected by copyright
=====================================================
File: jalali-date.blade.php
------------------------------------------------------
Use: A Jalali (Shamsi) date field: a button that opens a
     real calendar modal. The visible value is in Persian
     digits; the submitted value is ASCII "YYYY/MM/DD",
     which the server reads with morilog/jalali.
=====================================================
--}}

@props([
    'name',
    'value' => '',
    'placeholder' => null,
    'accent' => 'primary',
])

@php
    $placeholder ??= __('front.calendar.select');
    // Only primary/secondary are supported; both sets of colour classes exist
    // elsewhere in the build, so Tailwind generates them.
    $accentClass = $accent === 'secondary' ? 'secondary-500' : 'primary-600';
@endphp

<div x-data="jalaliDate({ value: @js((string) $value), months: @js(__('front.calendar.months')), weekdays: @js(__('front.calendar.weekdays')) })" class="relative">
    <input type="hidden" name="{{ $name }}" x-bind:value="value">

    {{-- Trigger --}}
    <button type="button" x-on:click="open = true"
            {{ $attributes->merge(['class' => 'flex w-full items-center justify-between gap-2 rounded-xl border-[1.5px] border-[#e3e1ec] bg-[#fbfbfd] px-3.5 py-2.5 text-[13px] outline-none transition hover:border-primary-600']) }}>
        <span x-text="display || @js($placeholder)" x-bind:class="value ? 'text-ink' : 'text-ink-faint'"></span>
        <svg class="size-4 shrink-0 text-ink-faint" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4.5" width="18" height="17" rx="2.5"/><path d="M3 9h18M8 3v3M16 3v3"/></svg>
    </button>

    {{-- Calendar modal --}}
    <template x-teleport="body">
        <div x-cloak x-show="open" x-transition.opacity
             class="fixed inset-0 z-dialog flex items-center justify-center bg-ink/45 p-5"
             x-on:click.self="open = false" x-on:keydown.escape.window="open = false">
            <div class="w-full max-w-[340px] overflow-hidden rounded-[20px] bg-white shadow-2xl" x-show="open" x-transition.scale.origin.center>
                {{-- Header: month/year with nav. In RTL, "previous" sits on the
                     right pointing right, "next" on the left pointing left. --}}
                <div class="flex items-center justify-between gap-2 border-b border-line px-4 py-3.5">
                    <div class="flex items-center gap-1">
                        <button type="button" x-on:click="prevYear()" class="flex size-8 items-center justify-center rounded-lg text-ink-faint transition hover:bg-page" aria-label="{{ __('front.calendar.select') }}">
                            <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 6l6 6-6 6M6 6l6 6-6 6"/></svg>
                        </button>
                        <button type="button" x-on:click="prevMonth()" class="flex size-8 items-center justify-center rounded-lg text-ink-soft transition hover:bg-page" aria-label="{{ __('front.calendar.select') }}">
                            <svg class="size-4.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6-6 6"/></svg>
                        </button>
                    </div>
                    <span class="text-[14px] font-bold" x-text="monthLabel"></span>
                    <div class="flex items-center gap-1">
                        <button type="button" x-on:click="nextMonth()" class="flex size-8 items-center justify-center rounded-lg text-ink-soft transition hover:bg-page" aria-label="{{ __('front.calendar.select') }}">
                            <svg class="size-4.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6l-6 6 6 6"/></svg>
                        </button>
                        <button type="button" x-on:click="nextYear()" class="flex size-8 items-center justify-center rounded-lg text-ink-faint transition hover:bg-page" aria-label="{{ __('front.calendar.select') }}">
                            <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 6l-6 6 6 6M18 6l-6 6 6 6"/></svg>
                        </button>
                    </div>
                </div>

                <div class="p-4">
                    {{-- Weekday headers --}}
                    <div class="mb-1.5 grid grid-cols-7 gap-1 text-center text-[11px] font-bold text-ink-faint">
                        <template x-for="(w, i) in weekdays" :key="i"><span x-text="w"></span></template>
                    </div>
                    {{-- Day grid --}}
                    <div class="grid grid-cols-7 gap-1">
                        <template x-for="(day, i) in cells" :key="i">
                            <button type="button" x-bind:disabled="! day" x-on:click="pick(day)"
                                    x-bind:class="! day ? 'invisible' : (isSelected(day) ? 'bg-{{ $accentClass }} text-white font-bold' : (isToday(day) ? 'bg-page font-bold text-{{ $accentClass }}' : 'text-ink-soft hover:bg-page'))"
                                    class="flex h-9 items-center justify-center rounded-lg text-[13px] transition"
                                    x-text="day ? faDay(day) : ''"></button>
                        </template>
                    </div>
                </div>

                {{-- Footer --}}
                <div class="flex items-center justify-between gap-2 border-t border-line px-4 py-3">
                    <button type="button" x-on:click="clear()" class="rounded-lg px-3 py-1.5 text-[12.5px] font-bold text-ink-muted transition hover:text-secondary-500">{{ __('front.calendar.clear') }}</button>
                    <button type="button" x-on:click="jumpToday()" class="rounded-lg bg-page px-4 py-1.5 text-[12.5px] font-bold text-{{ $accentClass }} transition hover:opacity-80">{{ __('front.calendar.today') }}</button>
                </div>
            </div>
        </div>
    </template>
</div>