@extends('layouts.admin')

@section('title', 'Penjadwalan Roster Fleksibel')

@section('content')
<div class="space-y-6">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-slate-900 tracking-tight">Penjadwalan Hari Kerja Fleksibel</h1>
            <p class="text-xs text-slate-500 mt-1">Roster bulanan untuk karyawan yang jam kerjanya berganti-ganti setiap hari (shift dinamis)</p>
        </div>
        <div class="flex items-center gap-2">
            <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-emerald-50 border border-emerald-200 text-emerald-700 text-xs font-bold shadow-xs">
                <span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
                <span>Auto-Save Otomatis Aktif</span>
            </span>
        </div>
    </div>

    <!-- Filter Pegawai & Periode Bulan -->
    <div class="p-5 rounded-2xl bg-white border border-slate-200/80 shadow-sm">
        <form method="GET" action="{{ route('admin.pengaturan-absensi.penjadwalan-kerja') }}" id="filterRosterForm" class="grid grid-cols-1 sm:grid-cols-3 md:grid-cols-4 gap-4 items-end">
            <div>
                <label class="block text-xs font-bold text-slate-700 mb-1">Pilih Pegawai Roster</label>
                <select name="pegawai_id" onchange="this.form.submit()" class="w-full px-3 py-2 rounded-xl border border-slate-200 text-xs font-semibold focus:ring-2 focus:ring-primary-500 outline-none bg-white">
                    @foreach($pegawaiList as $p)
                    <option value="{{ $p->id }}" {{ $selectedPegawaiId == $p->id ? 'selected' : '' }}>
                        {{ $p->nama_lengkap }} ({{ $p->nip }}) {{ $p->tipe_jadwal == 'fleksibel_roster' ? '★ Roster' : '' }}
                    </option>
                    @endforeach
                </select>
            </div>

            <div>
                <label class="block text-xs font-bold text-slate-700 mb-1">Bulan</label>
                <select name="bulan" onchange="this.form.submit()" class="w-full px-3 py-2 rounded-xl border border-slate-200 text-xs font-semibold focus:ring-2 focus:ring-primary-500 outline-none bg-white">
                    @for($m = 1; $m <= 12; $m++)
                    <option value="{{ $m }}" {{ $selectedBulan == $m ? 'selected' : '' }}>
                        {{ \Carbon\Carbon::create(null, $m, 1)->translatedFormat('F') }}
                    </option>
                    @endfor
                </select>
            </div>

            <div>
                <label class="block text-xs font-bold text-slate-700 mb-1">Tahun</label>
                <select name="tahun" onchange="this.form.submit()" class="w-full px-3 py-2 rounded-xl border border-slate-200 text-xs font-semibold focus:ring-2 focus:ring-primary-500 outline-none bg-white">
                    @for($y = date('Y') - 1; $y <= date('Y') + 1; $y++)
                    <option value="{{ $y }}" {{ $selectedTahun == $y ? 'selected' : '' }}>{{ $y }}</option>
                    @endfor
                </select>
            </div>

            <div>
                <button type="submit" class="w-full px-4 py-2 rounded-xl bg-slate-900 text-white text-xs font-bold hover:bg-slate-800 transition flex items-center justify-center gap-1.5 shadow-sm">
                    <i data-lucide="filter" class="w-3.5 h-3.5"></i>
                    <span>Terapkan Filter</span>
                </button>
            </div>
        </form>
    </div>

    @if($pegawaiTerpilih)
    <!-- Info Pegawai & Alat Bantu Cepat (Quick Fill Actions) -->
    <div class="p-5 rounded-2xl bg-gradient-to-r from-orange-50/80 via-white to-amber-50/60 border border-orange-200/80 shadow-sm space-y-4">
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
            <div class="flex items-center gap-3.5">
                <div class="w-12 h-12 rounded-2xl bg-gradient-to-tr from-primary-600 to-amber-500 text-white font-black flex items-center justify-center text-base shadow-md shadow-primary-500/20">
                    {{ $pegawaiTerpilih->inisial }}
                </div>
                <div>
                    <div class="flex items-center gap-2">
                        <h2 class="text-base font-bold text-slate-900">{{ $pegawaiTerpilih->nama_lengkap }}</h2>
                        <span class="px-2 py-0.5 rounded-full text-[10px] font-bold bg-primary-100 text-primary-800">
                            {{ ucfirst(str_replace('_', ' ', $pegawaiTerpilih->tipe_jadwal)) }}
                        </span>
                    </div>
                    <p class="text-xs text-slate-500 mt-0.5">
                        NIP: <span class="font-mono font-semibold text-slate-700">{{ $pegawaiTerpilih->nip }}</span> • 
                        {{ $pegawaiTerpilih->departemen->nama_departemen ?? '-' }} • 
                        {{ $pegawaiTerpilih->jabatan->nama_jabatan ?? '-' }}
                    </p>
                </div>
            </div>

            <div class="flex items-center gap-3">
                <div class="px-3.5 py-2 rounded-xl bg-white border border-slate-200 text-right shadow-xs">
                    <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider block">Hari Kerja (Shift)</span>
                    <span id="counterShift" class="text-sm font-extrabold text-primary-700">0</span>
                </div>
                <div class="px-3.5 py-2 rounded-xl bg-white border border-slate-200 text-right shadow-xs">
                    <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider block">Hari Libur (Off)</span>
                    <span id="counterLibur" class="text-sm font-extrabold text-rose-600">0</span>
                </div>
                <div class="px-3.5 py-2 rounded-xl bg-white border border-slate-200 text-right shadow-xs">
                    <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider block">Periode Roster</span>
                    <span class="text-xs font-extrabold text-slate-800">{{ $startDate->translatedFormat('F Y') }}</span>
                </div>
            </div>
        </div>

        <!-- Toolbar Pengisian Cepat (Quick Fill Bulk) -->
        <div class="pt-3 border-t border-orange-100 flex flex-wrap items-center justify-between gap-3 text-xs">
            <div class="flex items-center gap-2">
                <span class="font-bold text-slate-700 flex items-center gap-1.5">
                    <i data-lucide="zap" class="w-3.5 h-3.5 text-amber-500"></i>
                    <span>Terapkan Cepat:</span>
                </span>
                <select id="quickShiftSelect" class="px-2.5 py-1.5 rounded-lg border border-slate-300 text-xs font-semibold bg-white outline-none focus:ring-1 focus:ring-primary-500">
                    <option value="OFF">🛑 Libur (Day Off)</option>
                    @foreach($jamKerjaList as $jk)
                    <option value="{{ $jk->id }}">{{ $jk->nama_jam_kerja }} ({{ substr($jk->jam_masuk, 0, 5) }} - {{ substr($jk->jam_pulang, 0, 5) }})</option>
                    @endforeach
                </select>
                <button type="button" onclick="applyQuickFill('weekdays')" class="px-3 py-1.5 rounded-lg bg-white border border-slate-200 hover:bg-slate-50 text-slate-700 font-semibold transition shadow-xs flex items-center gap-1">
                    <span>Ke Hari Kerja (Senin - Jumat)</span>
                </button>
                <button type="button" onclick="applyQuickFill('weekends')" class="px-3 py-1.5 rounded-lg bg-white border border-slate-200 hover:bg-slate-50 text-slate-700 font-semibold transition shadow-xs flex items-center gap-1">
                    <span>Ke Akhir Pekan (Sabtu - Minggu)</span>
                </button>
                <button type="button" onclick="applyQuickFill('all')" class="px-3 py-1.5 rounded-lg bg-white border border-slate-200 hover:bg-slate-50 text-slate-700 font-semibold transition shadow-xs flex items-center gap-1">
                    <span>Ke Semua Tanggal</span>
                </button>
            </div>
            <div class="text-[11px] text-slate-400 italic flex items-center gap-1">
                <i data-lucide="info" class="w-3 h-3 text-slate-400"></i>
                <span>Setiap perubahan dropdown di bawah otomatis langsung tersimpan ke server.</span>
            </div>
        </div>
    </div>

    <!-- GRID KALENDER BULANAN (1 s/d End of Month) -->
    <div class="p-6 rounded-2xl bg-white border border-slate-200/80 shadow-sm space-y-4">
        <div class="flex items-center justify-between pb-3 border-b border-slate-100">
            <h3 class="text-sm font-bold text-slate-900 flex items-center gap-2">
                <i data-lucide="calendar-days" class="w-4 h-4 text-primary-600"></i>
                <span>Kalender Roster {{ $startDate->translatedFormat('F Y') }}</span>
            </h3>
            <span class="text-xs text-slate-500 font-medium">Total {{ $startDate->daysInMonth }} Hari</span>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-7 gap-3.5">
            @php
                $currentDay = $startDate->copy();
            @endphp

            @while($currentDay->lte($endDate))
                @php
                    $dayNum = $currentDay->format('j');
                    $dateStr = $currentDay->toDateString();
                    $isWeekend = in_array($currentDay->dayOfWeek, [0, 6]);
                    $roster = $rosterData->get($dayNum);
                    $shiftId = $roster ? $roster->jam_kerja_id : null;
                    $isOff = $roster ? (bool)$roster->hari_libur : false;
                @endphp

                <div id="card-roster-{{ $dateStr }}" 
                     data-date="{{ $dateStr }}"
                     data-is-weekend="{{ $isWeekend ? '1' : '0' }}"
                     class="roster-card p-3 rounded-2xl border transition-all duration-200 flex flex-col justify-between space-y-2.5 shadow-2xs {{ $isOff ? 'bg-rose-50/50 border-rose-200/90' : ($shiftId ? 'bg-primary-50/40 border-primary-300' : ($isWeekend ? 'bg-slate-50/90 border-slate-200' : 'bg-white border-slate-200 hover:border-slate-300')) }}">
                    
                    <!-- Header Card Tanggal & Status Badge -->
                    <div class="flex items-center justify-between">
                        <div class="flex items-center gap-1.5">
                            <span class="w-7 h-7 rounded-xl {{ $isWeekend ? 'bg-slate-200 text-slate-700' : 'bg-primary-100 text-primary-800' }} font-extrabold text-xs flex items-center justify-center">
                                {{ $dayNum }}
                            </span>
                            <span class="text-[10px] font-bold {{ $isWeekend ? 'text-rose-500' : 'text-slate-500' }} uppercase">
                                {{ $currentDay->translatedFormat('l') }}
                            </span>
                        </div>
                        
                        <!-- Badge Indikator Status Simpan -->
                        <div id="indicator-{{ $dateStr }}" class="flex items-center">
                            @if($isOff)
                                <span class="px-1.5 py-0.5 rounded-md text-[9px] font-extrabold bg-rose-100 text-rose-700">OFF</span>
                            @elseif($shiftId)
                                <span class="px-1.5 py-0.5 rounded-md text-[9px] font-extrabold bg-primary-100 text-primary-800">SHIFT</span>
                            @else
                                <span class="px-1.5 py-0.5 rounded-md text-[9px] font-bold bg-slate-100 text-slate-500">BELUM</span>
                            @endif
                        </div>
                    </div>

                    <!-- Dropdown Pilih Shift -->
                    <div>
                        <select id="select-roster-{{ $dateStr }}" 
                                onchange="updateRoster('{{ $pegawaiTerpilih->id }}', '{{ $dateStr }}', this.value)" 
                                class="w-full px-2.5 py-1.5 rounded-xl border border-slate-200 text-[11px] font-semibold outline-none focus:ring-2 focus:ring-primary-500 bg-white transition cursor-pointer">
                            <option value="OFF" {{ $isOff || !$shiftId ? 'selected' : '' }}>🛑 Libur (Day Off)</option>
                            @foreach($jamKerjaList as $jk)
                            <option value="{{ $jk->id }}" {{ $shiftId == $jk->id && !$isOff ? 'selected' : '' }}>
                                {{ $jk->nama_jam_kerja }} ({{ substr($jk->jam_masuk, 0, 5) }} - {{ substr($jk->jam_pulang, 0, 5) }})
                            </option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Teks Keterangan Shift / Jam Kerja di Bawah Dropdown -->
                    <div id="label-shift-{{ $dateStr }}" class="text-[11px] text-center font-bold min-h-[16px] truncate">
                        @if($isOff || !$shiftId)
                        <span class="text-rose-600">Hari Libur (Day Off)</span>
                        @else
                        <span class="text-primary-800">
                            {{ $roster->jamKerja?->nama_jam_kerja ?? 'Shift Aktif' }}
                            @if($roster->jamKerja)
                                <span class="block text-[10px] text-slate-500 font-medium">({{ substr($roster->jamKerja->jam_masuk, 0, 5) }} - {{ substr($roster->jamKerja->jam_pulang, 0, 5) }})</span>
                            @endif
                        </span>
                        @endif
                    </div>
                </div>

                @php $currentDay->addDay(); @endphp
            @endwhile
        </div>
    </div>
    @endif
</div>

<!-- Floating Toast Notification Element -->
<div id="rosterToast" class="fixed bottom-6 right-6 z-50 transform translate-y-20 opacity-0 transition-all duration-300 pointer-events-none">
    <div class="px-4 py-3 rounded-2xl shadow-xl flex items-center gap-3 border bg-slate-900 text-white border-slate-700 min-w-[280px]">
        <div id="toastIcon" class="w-8 h-8 rounded-xl bg-emerald-500/20 text-emerald-400 flex items-center justify-center shrink-0">
            <i data-lucide="check-circle" class="w-5 h-5"></i>
        </div>
        <div>
            <p id="toastTitle" class="text-xs font-bold text-white">Auto-Save Berhasil</p>
            <p id="toastMessage" class="text-[11px] text-slate-300">Jadwal tanggal berhasil diperbarui</p>
        </div>
    </div>
</div>

@push('scripts')
<script>
    // 1. Hitung Ringkasan Roster saat Halaman Dimuat
    document.addEventListener('DOMContentLoaded', () => {
        recalculateRosterStats();
    });

    function recalculateRosterStats() {
        let countShift = 0;
        let countLibur = 0;

        document.querySelectorAll('.roster-card select').forEach(select => {
            if (select.value === 'OFF') {
                countLibur++;
            } else {
                countShift++;
            }
        });

        const shiftEl = document.getElementById('counterShift');
        const liburEl = document.getElementById('counterLibur');
        if (shiftEl) shiftEl.textContent = countShift;
        if (liburEl) liburEl.textContent = countLibur;
    }

    // 2. Fungsi Toast Notification
    let toastTimeout = null;
    function showToast(title, message, isError = false) {
        const toast = document.getElementById('rosterToast');
        const titleEl = document.getElementById('toastTitle');
        const msgEl = document.getElementById('toastMessage');
        const iconEl = document.getElementById('toastIcon');

        if (!toast || !titleEl || !msgEl || !iconEl) return;

        titleEl.textContent = title;
        msgEl.textContent = message;

        if (isError) {
            iconEl.className = 'w-8 h-8 rounded-xl bg-rose-500/20 text-rose-400 flex items-center justify-center shrink-0';
            iconEl.innerHTML = '<i data-lucide="alert-triangle" class="w-5 h-5"></i>';
        } else {
            iconEl.className = 'w-8 h-8 rounded-xl bg-emerald-500/20 text-emerald-400 flex items-center justify-center shrink-0';
            iconEl.innerHTML = '<i data-lucide="check-circle" class="w-5 h-5"></i>';
        }
        if (window.lucide) { lucide.createIcons(); }

        toast.classList.remove('translate-y-20', 'opacity-0');
        toast.classList.add('translate-y-0', 'opacity-100');

        clearTimeout(toastTimeout);
        toastTimeout = setTimeout(() => {
            toast.classList.remove('translate-y-0', 'opacity-100');
            toast.classList.add('translate-y-20', 'opacity-0');
        }, 2500);
    }

    // 3. Update Roster Otomatis via AJAX
    async function updateRoster(pegawaiId, tanggal, value) {
        const isOff = (value === 'OFF');
        const jamKerjaId = isOff ? null : value;

        const card = document.getElementById(`card-roster-${tanggal}`);
        const indicator = document.getElementById(`indicator-${tanggal}`);
        const label = document.getElementById(`label-shift-${tanggal}`);
        const select = document.getElementById(`select-roster-${tanggal}`);

        // Tampilkan status saving
        if (indicator) {
            indicator.innerHTML = '<span class="px-1.5 py-0.5 rounded-md text-[9px] font-bold bg-amber-100 text-amber-800 animate-pulse">Menyimpan...</span>';
        }

        try {
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
            
            const response = await fetch("{{ route('admin.pengaturan-absensi.penjadwalan-kerja.store') }}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken,
                    'Accept': 'application/json'
                },
                body: JSON.stringify({
                    pegawai_id: pegawaiId,
                    tanggal: tanggal,
                    jam_kerja_id: jamKerjaId,
                    hari_libur: isOff ? 1 : 0
                })
            });

            const data = await response.json();

            if (!response.ok || !data.success) {
                throw new Error(data.message || 'Gagal menyimpan ke server');
            }

            // Sukses: perbarui UI card
            if (isOff) {
                if (card) {
                    card.className = card.className.replace(/bg-primary-50\/40|border-primary-300|bg-white|border-slate-200/g, '');
                    card.classList.add('bg-rose-50/50', 'border-rose-200/90');
                }
                if (indicator) {
                    indicator.innerHTML = '<span class="px-1.5 py-0.5 rounded-md text-[9px] font-extrabold bg-rose-100 text-rose-700">OFF</span>';
                }
                if (label) {
                    label.innerHTML = '<span class="text-rose-600">Hari Libur (Day Off)</span>';
                }
            } else {
                if (card) {
                    card.className = card.className.replace(/bg-rose-50\/50|border-rose-200\/90|bg-white|border-slate-200/g, '');
                    card.classList.add('bg-primary-50/40', 'border-primary-300');
                }
                if (indicator) {
                    indicator.innerHTML = '<span class="px-1.5 py-0.5 rounded-md text-[9px] font-extrabold bg-primary-100 text-primary-800">SHIFT</span>';
                }
                if (label) {
                    const shiftName = data.data.nama_jam_kerja || 'Shift Aktif';
                    const jamMasuk = data.data.jam_masuk || '';
                    const jamPulang = data.data.jam_pulang || '';
                    const jamStr = (jamMasuk && jamPulang) ? ` (${jamMasuk} - ${jamPulang})` : '';
                    label.innerHTML = `<span class="text-primary-800">${shiftName}<span class="block text-[10px] text-slate-500 font-medium">${jamStr}</span></span>`;
                }
            }

            recalculateRosterStats();
            showToast('Tersimpan Otomatis', data.message || 'Jadwal berhasil diperbarui');
        } catch (err) {
            console.error(err);
            if (indicator) {
                indicator.innerHTML = '<span class="px-1.5 py-0.5 rounded-md text-[9px] font-bold bg-rose-100 text-rose-700">GAGAL</span>';
            }
            showToast('Gagal Menyimpan', err.message, true);
        }
    }

    // 4. Fitur Quick Fill (Terapkan Cepat ke Kumpulan Tanggal)
    async function applyQuickFill(type) {
        const selectQuick = document.getElementById('quickShiftSelect');
        const targetValue = selectQuick.value;
        const targetIsOff = (targetValue === 'OFF');
        const targetJamKerjaId = targetIsOff ? null : targetValue;
        const pegawaiId = "{{ $pegawaiTerpilih->id ?? '' }}";

        if (!pegawaiId) return;

        const targetCards = [];
        document.querySelectorAll('.roster-card').forEach(card => {
            const isWeekend = (card.getAttribute('data-is-weekend') === '1');
            const dateStr = card.getAttribute('data-date');

            if (type === 'all') {
                targetCards.push({ card, dateStr });
            } else if (type === 'weekdays' && !isWeekend) {
                targetCards.push({ card, dateStr });
            } else if (type === 'weekends' && isWeekend) {
                targetCards.push({ card, dateStr });
            }
        });

        if (targetCards.length === 0) return;

        const confirmMsg = `Terapkan shift ini ke ${targetCards.length} tanggal sekaligus?`;
        if (!confirm(confirmMsg)) return;

        const targetDates = targetCards.map(item => item.dateStr);

        try {
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
            const res = await fetch("{{ route('admin.pengaturan-absensi.penjadwalan-kerja.bulk') }}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken,
                    'Accept': 'application/json'
                },
                body: JSON.stringify({
                    pegawai_id: pegawaiId,
                    target_dates: targetDates,
                    jam_kerja_id: targetJamKerjaId,
                    hari_libur: targetIsOff ? 1 : 0
                })
            });

            const data = await res.json();
            if (!res.ok || !data.success) {
                throw new Error(data.message || 'Gagal menerapkan jadwal bulk');
            }

            // Update DOM semua tanggal yang ditargetkan
            targetCards.forEach(item => {
                const select = document.getElementById(`select-roster-${item.dateStr}`);
                if (select) {
                    select.value = targetValue;
                }
                const card = item.card;
                const indicator = document.getElementById(`indicator-${item.dateStr}`);
                const label = document.getElementById(`label-shift-${item.dateStr}`);

                if (targetIsOff) {
                    card.className = card.className.replace(/bg-primary-50\/40|border-primary-300|bg-white|border-slate-200/g, '');
                    card.classList.add('bg-rose-50/50', 'border-rose-200/90');
                    if (indicator) indicator.innerHTML = '<span class="px-1.5 py-0.5 rounded-md text-[9px] font-extrabold bg-rose-100 text-rose-700">OFF</span>';
                    if (label) label.innerHTML = '<span class="text-rose-600">Hari Libur (Day Off)</span>';
                } else {
                    card.className = card.className.replace(/bg-rose-50\/50|border-rose-200\/90|bg-white|border-slate-200/g, '');
                    card.classList.add('bg-primary-50/40', 'border-primary-300');
                    if (indicator) indicator.innerHTML = '<span class="px-1.5 py-0.5 rounded-md text-[9px] font-extrabold bg-primary-100 text-primary-800">SHIFT</span>';
                    const selectedOption = selectQuick.options[selectQuick.selectedIndex];
                    const text = selectedOption ? selectedOption.text : 'Shift Aktif';
                    if (label) label.innerHTML = `<span class="text-primary-800">${text}</span>`;
                }
            });

            recalculateRosterStats();
            showToast('Terapkan Cepat Sukses', data.message);
        } catch (err) {
            console.error(err);
            showToast('Gagal Terapkan Cepat', err.message, true);
        }
    }
</script>
@endpush
@endsection