@extends('admin.layout')

@section('title', 'Jadwal Harian')
@section('subtitle', 'Atur shift aktif untuk setiap hari')

@section('content')
    @php
        $monthNames = ['Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember'];
        $dayNames = ['Sen','Sel','Rab','Kam','Jum','Sab','Min'];
        $prevMonth = $month == 1 ? 12 : $month - 1;
        $prevYear = $month == 1 ? $year - 1 : $year;
        $nextMonth = $month == 12 ? 1 : $month + 1;
        $nextYear = $month == 12 ? $year + 1 : $year;
        $daysInMonth = $startOfMonth->daysInMonth;
        $startDayOfWeek = ($startOfMonth->dayOfWeek + 6) % 7; // Monday = 0
    @endphp

    {{-- Month Navigation --}}
    <div class="flex items-center justify-between mb-5">
        <a href="{{ route('admin.scheduler', ['month' => $prevMonth, 'year' => $prevYear]) }}"
            class="w-10 h-10 rounded-xl bg-white border border-gray-200 hover:bg-sky-50 hover:border-sky-300 flex items-center justify-center text-gray-500 hover:text-sky-600 transition-all">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
        </a>
        <h2 class="text-xl font-bold text-gray-800">{{ $monthNames[$month - 1] }} {{ $year }}</h2>
        <a href="{{ route('admin.scheduler', ['month' => $nextMonth, 'year' => $nextYear]) }}"
            class="w-10 h-10 rounded-xl bg-white border border-gray-200 hover:bg-sky-50 hover:border-sky-300 flex items-center justify-center text-gray-500 hover:text-sky-600 transition-all">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
        </a>
    </div>

    {{-- Shift Legend --}}
    <div class="flex flex-wrap items-center gap-3 mb-4">
        @foreach ($shifts as $shift)
            @php
                $colors = ['bg-sky-100 text-sky-700', 'bg-emerald-100 text-emerald-700', 'bg-amber-100 text-amber-700', 'bg-purple-100 text-purple-700', 'bg-rose-100 text-rose-700'];
                $colorClass = $colors[$loop->index % count($colors)];
            @endphp
            <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-semibold {{ $colorClass }}">
                <span class="w-2 h-2 rounded-full {{ str_replace('100', '400', explode(' ', $colorClass)[0]) }}"></span>
                {{ $shift->name }}
            </span>
        @endforeach
    </div>

    {{-- Calendar Grid --}}
    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
        {{-- Day Headers --}}
        <div class="grid grid-cols-7 bg-gray-50 border-b border-gray-100">
            @foreach ($dayNames as $dayName)
                <div class="px-2 py-3 text-center text-xs font-semibold text-gray-500 uppercase">{{ $dayName }}</div>
            @endforeach
        </div>

        {{-- Calendar Days --}}
        <div class="grid grid-cols-7">
            @for ($i = 0; $i < $startDayOfWeek; $i++)
                <div class="border-b border-r border-gray-50 h-20 bg-gray-25"></div>
            @endfor

            @for ($day = 1; $day <= $daysInMonth; $day++)
                @php
                    $dateStr = sprintf('%04d-%02d-%02d', $year, $month, $day);
                    $schedule = $schedules[$dateStr] ?? null;
                    $isToday = $dateStr === now()->format('Y-m-d');
                @endphp
                <div class="border-b border-r border-gray-50 h-20 p-2 {{ $isToday ? 'bg-sky-50/50' : 'hover:bg-gray-50' }} transition-colors relative group">
                    <div class="flex items-center justify-between mb-1">
                        <span class="text-sm font-semibold {{ $isToday ? 'text-sky-600 bg-sky-100 w-7 h-7 rounded-full flex items-center justify-center' : 'text-gray-700' }}">
                            {{ $day }}
                        </span>
                    </div>

                    @if ($schedule)
                        @php
                            $shiftIdx = $shifts->search(fn($s) => $s->id === $schedule->shift_id);
                            $colorClass = $colors[$shiftIdx % count($colors)] ?? $colors[0];
                        @endphp
                        <div class="px-2 py-1 rounded-lg text-xs font-semibold {{ $colorClass }} truncate mb-1">
                            {{ $schedule->shift->name }}
                        </div>
                        <form method="POST" action="{{ route('admin.scheduler.destroy') }}" class="hidden group-hover:block absolute top-1 right-1" onsubmit="event.preventDefault(); confirmDelete('{{ $dateStr }}', this)">
                            @csrf @method('DELETE')
                            <input type="hidden" name="date" value="{{ $dateStr }}">
                            <button type="submit" class="w-5 h-5 rounded bg-red-100 hover:bg-red-200 flex items-center justify-center text-red-500 text-xs" title="Hapus">×</button>
                        </form>
                    @endif

                    {{-- Quick assign popup trigger --}}
                    <button type="button" onclick="openAssign('{{ $dateStr }}', '{{ $day }} {{ $monthNames[$month - 1] }}')"
                        class="hidden group-hover:flex absolute bottom-1 right-1 w-6 h-6 rounded-lg bg-sky-100 hover:bg-sky-200 items-center justify-center text-sky-500 text-xs" title="Atur shift">
                        +
                    </button>
                </div>
            @endfor

            @php $remaining = (7 - (($startDayOfWeek + $daysInMonth) % 7)) % 7; @endphp
            @for ($i = 0; $i < $remaining; $i++)
                <div class="border-b border-r border-gray-50 h-20 bg-gray-25"></div>
            @endfor
        </div>
    </div>

    {{-- Assign Modal --}}
    <div id="assignModal" class="fixed inset-0 bg-black/30 backdrop-blur-sm z-50 flex items-center justify-center hidden">
        <div class="bg-white rounded-2xl p-6 w-full max-w-sm shadow-2xl mx-4">
            <h3 class="text-lg font-bold text-gray-800 mb-1">Atur Shift</h3>
            <p class="text-sm text-gray-400 mb-4" id="assignDateLabel">Tanggal</p>
            <form method="POST" action="{{ route('admin.scheduler.store') }}">
                @csrf
                <input type="hidden" name="date" id="assignDateInput">
                <div class="space-y-2 mb-5">
                    @foreach ($shifts as $shift)
                        <label class="flex items-center gap-3 p-3 bg-gray-50 rounded-xl hover:bg-sky-50 cursor-pointer transition-colors">
                            <input type="radio" name="shift_id" value="{{ $shift->id }}" required
                                class="w-4 h-4 border-gray-300 text-sky-500 focus:ring-sky-400">
                            <div>
                                <span class="text-sm font-medium text-gray-800">{{ $shift->name }}</span>
                                <span class="text-xs text-gray-400 ml-1">{{ \Carbon\Carbon::parse($shift->default_start_time)->format('H:i') }}-{{ \Carbon\Carbon::parse($shift->default_end_time)->format('H:i') }}</span>
                            </div>
                        </label>
                    @endforeach
                </div>
                <div class="flex gap-3">
                    <button type="submit" class="flex-1 py-2.5 bg-sky-500 hover:bg-sky-600 text-white font-semibold text-sm rounded-xl transition-all">Simpan</button>
                    <button type="button" onclick="closeAssign()" class="flex-1 py-2.5 bg-gray-100 hover:bg-gray-200 text-gray-600 font-semibold text-sm rounded-xl transition-all">Batal</button>
                </div>
            </form>
        </div>
    </div>

    @push('scripts')
    <script>
        const attendanceDates = @json($attendanceDates);
        const today = "{{ now()->format('Y-m-d') }}";

        function getWarningMessages(date) {
            let messages = [];
            if (date < today) messages.push("Tanggal ini sudah lewat.");
            if (attendanceDates.includes(date)) messages.push("Sudah ada relawan yang absen pada tanggal ini.");
            return messages;
        }

        function confirmDelete(date, formElement) {
            const messages = getWarningMessages(date);
            if (messages.length > 0) {
                let htmlMsg = '<div class="text-left text-sm text-gray-600 space-y-3 mb-2">' + 
                    messages.map(m => '<div class="flex items-start gap-2 bg-rose-50 p-3 rounded-xl border border-rose-100 text-rose-700"><svg class="w-5 h-5 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg><span>' + m + '</span></div>').join('') + 
                    '<p class="mt-5 text-xs text-gray-500">Catatan: Data absen yang sudah tercatat <b class="text-gray-700">tidak akan terhapus</b> dari sistem.</p></div>';

                Swal.fire({
                    title: 'Yakin hapus jadwal?',
                    html: htmlMsg,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#ef4444',
                    cancelButtonColor: '#f1f5f9',
                    cancelButtonText: '<span class="text-gray-700">Batal</span>',
                    confirmButtonText: 'Ya, Tetap Hapus',
                    customClass: {
                        popup: 'rounded-2xl',
                        confirmButton: 'rounded-xl font-bold shadow-md shadow-red-500/30 px-5 py-2.5',
                        cancelButton: 'rounded-xl font-bold border border-gray-200 px-5 py-2.5'
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        formElement.submit();
                    }
                });
            } else {
                formElement.submit();
            }
        }

        function openAssign(date, label) {
            const messages = getWarningMessages(date);
            if (messages.length > 0) {
                let htmlMsg = '<div class="text-left text-sm text-gray-600 space-y-3 mb-2">' + 
                    messages.map(m => '<div class="flex items-start gap-2 bg-rose-50 p-3 rounded-xl border border-rose-100 text-rose-700"><svg class="w-5 h-5 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg><span>' + m + '</span></div>').join('') + 
                    '<p class="mt-5 text-xs text-gray-500">Catatan: Data absen yang sudah tercatat <b class="text-gray-700">tidak akan terhapus</b> dari sistem.</p></div>';

                Swal.fire({
                    title: 'Yakin ganti jadwal?',
                    html: htmlMsg,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#0ea5e9',
                    cancelButtonColor: '#f1f5f9',
                    cancelButtonText: '<span class="text-gray-700">Batal</span>',
                    confirmButtonText: 'Ya, Tetap Ganti',
                    customClass: {
                        popup: 'rounded-2xl',
                        confirmButton: 'rounded-xl font-bold shadow-md shadow-sky-500/30 px-5 py-2.5',
                        cancelButton: 'rounded-xl font-bold border border-gray-200 px-5 py-2.5'
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        showAssignModal(date, label);
                    }
                });
            } else {
                showAssignModal(date, label);
            }
        }

        function showAssignModal(date, label) {
            document.getElementById('assignDateInput').value = date;
            document.getElementById('assignDateLabel').textContent = label;
            document.getElementById('assignModal').classList.remove('hidden');
        }

        function closeAssign() {
            document.getElementById('assignModal').classList.add('hidden');
        }
        
        document.getElementById('assignModal').addEventListener('click', function(e) {
            if (e.target === this) closeAssign();
        });
    </script>
    @endpush
@endsection