<x-filament-panels::page>
    {{-- Szűrő panel --}}
    <div class="mb-4 rounded-xl border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
            <div>
                <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
                    Beszállító
                </label>
                <select
                    wire:model.live="supplierId"
                    class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                >
                    <option value="">— Válasszon beszállítót —</option>
                    @foreach ($this->getSuppliers() as $id => $name)
                        <option value="{{ $id }}" @selected($supplierId == $id)>{{ $name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
                    Profitcenter
                </label>
                <select
                    wire:model.live="profitCenterId"
                    class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                >
                    <option value="">— Válasszon profitcentert —</option>
                    @foreach ($this->getProfitCenters() as $id => $name)
                        <option value="{{ $id }}" @selected($profitCenterId == $id)>{{ $name }}</option>
                    @endforeach
                </select>
            </div>
        </div>
    </div>

    {{-- Szállítási korlátozások --}}
    <div class="mb-4 rounded-xl border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
        <h3 class="mb-3 text-sm font-semibold text-gray-700 dark:text-gray-300">Szállítási korlátozások</h3>
        <div class="flex flex-wrap items-center gap-6 text-sm">
            @if ($supplierId && ($supplier = $this->getSupplier()))
                <div class="flex items-center gap-2">
                    <span class="text-gray-500 dark:text-gray-400">Szállítási korlátozás:</span>
                    @if ($supplier->hasDeliveryConstraint)
                        <span class="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-800 dark:bg-green-900 dark:text-green-200">Igen</span>
                    @else
                        <span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600 dark:bg-gray-700 dark:text-gray-300">Nem</span>
                    @endif
                </div>
                @if ($supplier->hasDeliveryConstraint)
                    <div class="flex items-center gap-2">
                        <span class="text-gray-500 dark:text-gray-400">Leadási határidő:</span>
                        <span class="font-semibold text-gray-800 dark:text-gray-200">{{ $supplier->orderCutOffTime }}:00</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <span class="text-gray-500 dark:text-gray-400">Szállítási átfutási idő:</span>
                        <span class="font-semibold text-gray-800 dark:text-gray-200">{{ $supplier->deliveryLeadTime }} óra</span>
                    </div>
                @endif
            @endif
            <div class="flex items-center gap-2">
                <label class="text-gray-500 dark:text-gray-400" for="selectedDate">Dátum:</label>
                <input
                    type="date"
                    id="selectedDate"
                    wire:model.live="selectedDate"
                    class="rounded-lg border border-gray-300 bg-white px-2 py-1 text-sm text-gray-900 shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                >
            </div>
            <div class="flex items-center gap-2">
                <label class="text-gray-500 dark:text-gray-400" for="selectedTime">Időpont:</label>
                <input
                    type="time"
                    id="selectedTime"
                    wire:model.live="selectedTime"
                    class="rounded-lg border border-gray-300 bg-white px-2 py-1 text-sm text-gray-900 shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                >
            </div>
            @php($nextDelivery = $this->getNextDeliveryDate())
            @if ($nextDelivery)
                <div class="flex items-center gap-2">
                    <span class="text-gray-500 dark:text-gray-400">Következő szállítási nap:</span>
                    <span class="font-semibold text-green-700 dark:text-green-400">{{ $nextDelivery }}</span>
                </div>
            @elseif ($supplierId && $profitCenterId)
                <div class="flex items-center gap-2">
                    <span class="text-xs text-red-500">Nem található következő szállítási nap.</span>
                </div>
            @endif
        </div>
    </div>

    {{-- Jelmagyarázat --}}
    <div class="mb-4 flex flex-wrap items-center gap-4 text-sm">
        <span class="font-semibold text-gray-700 dark:text-gray-300">Jelmagyarázat:</span>
        <span class="inline-flex items-center gap-1.5">
            <span class="inline-block w-4 h-4 rounded" style="background-color: #4CAF50;"></span>
            Szállítási nap
        </span>
        <span class="inline-flex items-center gap-1.5">
            <span class="inline-block w-4 h-4 rounded" style="background-color: #EF4444;"></span>
            Ünnepnap
        </span>
        <span class="inline-flex items-center gap-1.5">
            <span class="inline-block w-4 h-4 rounded" style="background-color: #F59E0B;"></span>
            Áthelyezett munkanap
        </span>
        <span class="inline-flex items-center gap-1.5">
            <span class="inline-block w-4 h-4 rounded" style="background-color: #3B82F6;"></span>
            Következő szállítási nap
        </span>
        <span class="inline-flex items-center gap-1.5">
            <span class="inline-block w-4 h-4 rounded" style="background-color: #E5E7EB;"></span>
            Hétvége (inaktív)
        </span>
    </div>

    {{-- Naptár widget spinner overlay-jel --}}
    <div class="relative"
         x-data="{ loading: false }"
         x-init="
             window.addEventListener('filament-fullcalendar--refresh', () => { loading = true; });
             $wire.on('calendar-events-done', () => { loading = false; });
         ">
        <div x-show="loading"
             x-transition:enter="transition-opacity duration-150"
             x-transition:leave="transition-opacity duration-300"
             class="absolute inset-0 z-10 flex items-center justify-center rounded-xl bg-white/80 dark:bg-gray-900/80"
             style="min-height: 200px; display: none;">
            <div class="flex flex-col items-center gap-3">
                <svg class="h-10 w-10 animate-spin text-primary-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.84 3 7.938l3-2.647z"></path>
                </svg>
                <span class="text-sm font-medium text-gray-600 dark:text-gray-300">Naptár betöltése...</span>
            </div>
        </div>

        @php($nextDeliveryRaw = $this->getNextDeliveryDateRaw())
        @livewire(\App\Filament\Widgets\DeliveryCalendarWidget::class, [
            'supplierId' => $supplierId,
            'profitCenterId' => $profitCenterId,
            'nextDeliveryDate' => $nextDeliveryRaw,
        ])
    </div>

    <style>
        /* Kompakt multi-hónap nézet a képhez hasonlóan */
        .filament-fullcalendar {
            --fc-small-font-size: 0.8em;
            --fc-page-bg-color: transparent;
            --fc-neutral-bg-color: transparent;
        }
        /* Hónap fejléc */
        .filament-fullcalendar .fc-multimonth-title {
            font-size: 0.9rem !important;
            font-weight: 600;
            padding: 4px 0 !important;
            color: #453821;
        }
        /* Kompaktabb cellaméretek */
        .filament-fullcalendar .fc-multimonth .fc-daygrid-day {
            min-height: 0 !important;
        }
        .filament-fullcalendar .fc-multimonth .fc-daygrid-day-frame {
            min-height: 24px !important;
            padding: 1px !important;
        }
        .filament-fullcalendar .fc-multimonth .fc-daygrid-day-top {
            justify-content: center;
        }
        .filament-fullcalendar .fc-multimonth .fc-daygrid-day-number {
            font-size: 0.75rem;
            font-weight: 600;
            padding: 1px 3px !important;
        }
        /* Napfejléc (H, K, Sz, Cs, P, Szo, V) */
        .filament-fullcalendar .fc-multimonth .fc-col-header-cell {
            font-size: 0.7rem;
            padding: 2px 0 !important;
            font-weight: 700;
            color: #6B7280;
        }
        /* Háttér események jobban kitöltik a cellát */
        .filament-fullcalendar .fc-multimonth .fc-bg-event {
            opacity: 0.85 !important;
            border-radius: 3px;
        }
        /* Mai nap kiemelés */
        .filament-fullcalendar .fc-day-today {
            background-color: rgba(59, 130, 246, 0.1) !important;
        }
        .filament-fullcalendar .fc-day-today .fc-daygrid-day-number {
            font-weight: 800;
            color: #1D4ED8;
        }
        /* Hónapok közötti térköz csökkentése */
        .filament-fullcalendar .fc-multimonth-month {
            padding: 0 4px !important;
        }
        /* Fejléc toolbar */
        .filament-fullcalendar .fc-toolbar {
            margin-bottom: 0.5em !important;
        }
        .filament-fullcalendar .fc-toolbar-title {
            font-size: 1rem !important;
            color: #453821;
        }
        /* Szegély finomítás */
        .filament-fullcalendar .fc-multimonth {
            border: none !important;
        }
        .filament-fullcalendar .fc-multimonth-daygrid {
            border: none !important;
        }
        /* Hétvége napok szürke szöveg */
        .filament-fullcalendar .fc-day-sat .fc-daygrid-day-number,
        .filament-fullcalendar .fc-day-sun .fc-daygrid-day-number {
            color: #9CA3AF;
        }
    </style>
</x-filament-panels::page>
