@extends('admin.layouts.app')

@section('title', 'Manajemen Jadwal')

@section('content')
<div class="min-h-screen bg-slate-50 px-4 py-5">

    <style>
        
        [x-cloak] { display: none !important; }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translate(-50%, -12px);
            }
            to {
                opacity: 1;
                transform: translate(-50%, 0);
            }
        }

        .animate-slideDown {
            animation: slideDown .35s ease-out;
        }
    </style>

    {{-- Toast Notification --}}
    @if (session('success') || session('error') || $errors->any())
        <div id="toast-message"
            class="fixed top-5 left-1/2 z-50 flex w-[92%] max-w-lg -translate-x-1/2 items-start justify-between gap-4 rounded-2xl px-5 py-4 text-white shadow-2xl animate-slideDown
                @if(session('success'))
                    bg-emerald-600
                @elseif(session('error') || $errors->any())
                    bg-red-600
                @endif">

            <div class="flex gap-3">
                <div class="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-white/15">
                    @if(session('success'))
                        <i class="fas fa-check text-sm"></i>
                    @else
                        <i class="fas fa-exclamation text-sm"></i>
                    @endif
                </div>

                <div>
                    @if (session('success'))
                        <div class="text-sm font-semibold">{{ session('success') }}</div>
                    @endif

                    @if (session('error'))
                        <div class="text-sm font-semibold">{{ session('error') }}</div>
                    @endif

                    @if ($errors->any())
                        <ul class="list-disc list-inside text-sm leading-relaxed">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    @endif
                </div>
            </div>

            <button onclick="closeToast()"
                class="flex h-8 w-8 items-center justify-center rounded-lg text-white/90 transition hover:bg-white/15 hover:text-white">
                &times;
            </button>
        </div>
    @endif

        {{-- Form Jadwal --}}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm">

            {{-- Form Penjadwalan Audit --}}
            <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm">
                <div class="border-b border-slate-100 bg-slate-50 px-5 py-4">
                    <div class="flex items-center gap-3">
                        <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-blue-50 text-blue-600">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                            </svg>
                        </div>

                        <div>
                            <h2 class="text-base font-bold text-slate-800">Penjadwalan Audit</h2>
                            <p class="text-xs text-slate-500">Buat jadwal audit berdasarkan tema dan periode.</p>
                        </div>
                    </div>
                </div>

                <form action="{{ route('admin.jadwal.audit.store') }}" method="POST" class="space-y-4 p-5">
                    @csrf

                    <div>
                        <label class="mb-1.5 block text-xs font-semibold text-slate-600">Tema</label>

                        <div x-data="{ open: false }" class="relative">
                            <select name="tema_id"
                                @focus="open = true"
                                @blur="open = false"
                                @change="open = false"
                                class="h-11 block w-full rounded-xl border border-slate-200 bg-white px-3 pr-10 text-sm text-slate-700 shadow-sm outline-none transition focus:border-blue-500 focus:ring-4 focus:ring-blue-100"
                                style="appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; background-image: none !important;"
                                required>
                                <option value="">-- Pilih Tema --</option>
                                @foreach ($temaList as $tema)
                                    <option value="{{ $tema->id }}">{{ $tema->nama }}</option>
                                @endforeach
                            </select>

                            <span class="pointer-events-none absolute inset-y-0 right-3 flex items-center text-slate-500">
                                <i class="fas fa-chevron-down text-[10px] transition-transform duration-300"
                                :class="open ? 'rotate-180 text-blue-500' : 'rotate-0'"></i>
                            </span>
                        </div>
                    </div>

                    <div>
                        <label class="mb-1.5 block text-xs font-semibold text-slate-600">Tanggal Audit</label>
                        <input type="date" name="tanggal_mulai" id="tanggal_mulai"
                            class="h-11 w-full rounded-xl border border-slate-200 bg-white px-3 text-sm text-slate-700 shadow-sm outline-none transition focus:border-blue-500 focus:ring-4 focus:ring-blue-100"
                            required>
                    </div>

                    <div>
                        <label class="mb-1.5 block text-xs font-semibold text-slate-600">Periode</label>

                        <div class="grid grid-cols-1 items-center gap-3 sm:grid-cols-[1fr_auto_1fr]">
                            <div class="relative">
                                <input type="text" name="bulan_awal" id="bulan_awal"
                                    class="h-11 w-full cursor-not-allowed rounded-xl border border-slate-200 bg-slate-100 px-3 pr-20 text-sm text-slate-500 shadow-sm outline-none"
                                    readonly>

                                <span class="absolute right-3 top-1/2 -translate-y-1/2 rounded-full bg-slate-200 px-2 py-0.5 text-[10px] font-semibold text-slate-500">
                                    Otomatis
                                </span>
                            </div>

                            <div class="flex items-center justify-center">
                                <span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-500">
                                    sampai dengan
                                </span>
                            </div>

                            <div x-data="{ open: false }" class="relative">
                                <select name="bulan_akhir"
                                    @focus="open = true"
                                    @blur="open = false"
                                    @change="open = false"
                                    class="h-11 block w-full rounded-xl border border-slate-200 bg-white px-3 pr-10 text-sm text-slate-700 shadow-sm outline-none transition focus:border-blue-500 focus:ring-4 focus:ring-blue-100"
                                    style="appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; background-image: none !important;"
                                    required>
                                    <option value="" selected disabled>-- Pilih Bulan --</option>

                                    @foreach (range(1, 12) as $bulan)
                                        <option value="{{ $bulan }}">
                                            {{ \Carbon\Carbon::create()->month($bulan)->translatedFormat('F') }}
                                        </option>
                                    @endforeach
                                </select>

                                <span class="pointer-events-none absolute inset-y-0 right-3 flex items-center text-slate-500">
                                    <i class="fas fa-chevron-down text-[10px] transition-transform duration-300"
                                    :class="open ? 'rotate-180 text-blue-500' : 'rotate-0'"></i>
                                </span>
                            </div>
                        </div>
                    </div>

                    <div class="pt-1 flex justify-center">
                        <button type="submit"
                            class="inline-flex h-10 items-center justify-center gap-2 rounded-xl bg-blue-600 px-6 text-sm font-semibold text-white shadow-sm transition hover:bg-blue-700 hover:shadow-md">
                            <i class="fas fa-calendar-plus text-xs"></i>
                            Buat Jadwal Audit
                        </button>
                    </div>
                </form>
            </div>

            {{-- Form Penjadwalan Verifikasi Audit --}}
            <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm">
                <div class="border-b border-slate-100 bg-slate-50 px-5 py-4">
                    <div class="flex items-center gap-3">
                        <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-50 text-green-600">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                            </svg>
                        </div>

                        <div>
                            <h2 class="text-base font-bold text-slate-800">Penjadwalan Verifikasi Audit</h2>
                            <p class="text-xs text-slate-500">Atur tanggal verifikasi dari tema audit aktif.</p>
                        </div>
                    </div>
                </div>

                <form action="{{ route('admin.jadwal.verifikasi.store') }}" method="POST" class="space-y-4 p-5">
                    @csrf

                    <input type="hidden" name="periode_id" id="periode_id">

                    <div>
                        <label class="mb-1.5 block text-xs font-semibold text-slate-600">Tema Periode Audit</label>

                        <div x-data="{ open: false }" class="relative">
                            <select name="tema_id" id="tema_verifikasi"
                                @focus="open = true"
                                @blur="open = false"
                                @change="open = false"
                                class="h-11 block w-full rounded-xl border border-slate-200 bg-white px-3 pr-10 text-sm text-slate-700 shadow-sm outline-none transition focus:border-emerald-500 focus:ring-4 focus:ring-emerald-100"
                                style="appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; background-image: none !important;"
                                required>
                                <option value="">-- Pilih Tema --</option>
                                @foreach ($temaAktif as $item)
                                    @php
                                        $p = $item->periode->first();
                                    @endphp
                                    <option value="{{ $item->id }}"
                                        data-periode-id="{{ $p?->id }}"
                                        data-tanggal="{{ $p?->tanggal_mulai ? \Carbon\Carbon::parse($p->tanggal_mulai)->format('Y-m-d') : '' }}"
                                        data-periode="{{ $p?->nama_periode ?? '' }}">
                                        {{ $item->nama }}
                                    </option>
                                @endforeach
                            </select>

                            <span class="pointer-events-none absolute inset-y-0 right-3 flex items-center text-slate-500">
                                <i class="fas fa-chevron-down text-[10px] transition-transform duration-300"
                                :class="open ? 'rotate-180 text-emerald-500' : 'rotate-0'"></i>
                            </span>
                        </div>
                    </div>

                    <div>
                        <label class="mb-1.5 block text-xs font-semibold text-slate-600">Tanggal Audit</label>
                        <div class="relative">
                            <input type="text" id="tanggal_mulai_verifikasi"
                                class="h-11 w-full cursor-not-allowed rounded-xl border border-slate-200 bg-slate-100 px-3 pr-20 text-sm text-slate-500 shadow-sm outline-none"
                                readonly>

                            <span class="absolute right-3 top-1/2 -translate-y-1/2 rounded-full bg-slate-200 px-2 py-0.5 text-[10px] font-semibold text-slate-500">
                                Otomatis
                            </span>
                        </div>
                    </div>

                    <div>
                        <label class="mb-1.5 block text-xs font-semibold text-slate-600">Periode</label>
                        <div class="relative">
                            <input type="text" id="periode_verifikasi"
                                class="h-11 w-full cursor-not-allowed rounded-xl border border-slate-200 bg-slate-100 px-3 pr-20 text-sm text-slate-500 shadow-sm outline-none"
                                readonly>

                            <span class="absolute right-3 top-1/2 -translate-y-1/2 rounded-full bg-slate-200 px-2 py-0.5 text-[10px] font-semibold text-slate-500">
                                Otomatis
                            </span>
                        </div>
                    </div>

                    <div>
                        <label class="mb-1.5 block text-xs font-semibold text-slate-600">Tanggal Verifikasi</label>
                        <input type="date" name="tanggal_selesai"
                            class="h-11 w-full rounded-xl border border-slate-200 bg-white px-3 text-sm text-slate-700 shadow-sm outline-none transition focus:border-emerald-500 focus:ring-4 focus:ring-emerald-100"
                            required>
                    </div>

                    <div class="pt-5 flex justify-center">
                        <button type="submit"
                            class="inline-flex h-10 items-center justify-center gap-2 rounded-xl bg-blue-600 px-6 text-sm font-semibold text-white shadow-sm transition hover:bg-blue-700 hover:shadow-md">
                            <i class="fas fa-calendar-check text-xs"></i>
                            Buat Jadwal Verifikasi
                        </button>
                    </div>
                </form>
            </div>
        </div>

    {{-- Tabel Jadwal --}}
    <div class="mt-6 overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm">
        <div class="flex flex-col gap-4 border-b border-slate-100 bg-white px-5 py-5 sm:flex-row sm:items-center sm:justify-between">
            <div>
                <h2 class="text-lg font-bold text-slate-800">Daftar Jadwal Audit dan Verifikasi Audit</h2>
                <p class="mt-1 text-xs text-slate-500">Kelola data jadwal audit dan verifikasi.</p>
            </div>

            {{-- Filter Tahun --}}
            <form method="GET" action="{{ route('admin.jadwal.index') }}" class="w-28 shrink-0">
                <div x-data="{ open: false }" class="relative">
                    <select id="filter_tahun" name="tahun"
                        @focus="open = true"
                        @blur="open = false"
                        @change="open = false; $el.form.submit()"
                        class="h-10 block w-full rounded-xl border border-slate-200 bg-slate-50 px-3 pr-8 text-sm font-medium text-slate-700 shadow-sm outline-none transition focus:border-blue-500 focus:bg-white focus:ring-4 focus:ring-blue-100"
                        style="appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; background-image: none !important;">

                        <option value="">Tahun</option>
                        @foreach($tahunList as $tahun)
                            <option value="{{ $tahun }}" {{ $tahunDipilih == $tahun ? 'selected' : '' }}>
                                {{ $tahun }}
                            </option>
                        @endforeach
                    </select>

                    <span class="pointer-events-none absolute inset-y-0 right-3 flex items-center text-slate-500">
                        <i class="fas fa-chevron-down text-[10px] transition-transform duration-300"
                        :class="open ? 'rotate-180 text-blue-500' : 'rotate-0'"></i>
                    </span>
                </div>
            </form>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full min-w-[950px] text-sm">
                <thead>
                    <tr class="border-b border-slate-200 bg-slate-50 text-xs uppercase tracking-wide text-slate-500">
                        <th class="px-5 py-4 text-center font-bold">No</th>
                        <th class="px-5 py-4 text-left font-bold">Tema</th>
                        <th class="px-5 py-4 text-center font-bold">Tanggal Audit</th>
                        <th class="px-5 py-4 text-center font-bold">Tanggal Verifikasi</th>
                        <th class="px-5 py-4 text-center font-bold">Periode</th>
                        <th class="px-5 py-4 text-center font-bold">Status</th>
                        <th class="px-5 py-4 text-center font-bold">Aksi</th>
                    </tr>
                </thead>

                <tbody class="divide-y divide-slate-100">
                    @forelse ($jadwalList as $index => $jadwal)
                        <tr class="transition hover:bg-slate-50"
                            x-data="{
                                editMode: false,
                                tema_id: '{{ $jadwal->tema_id }}',
                                tanggal_mulai: '{{ $jadwal->tanggal_mulai }}',
                                tanggal_selesai: '{{ $jadwal->tanggal_selesai }}',
                                periode: '{{ $jadwal->periode }}'
                            }">

                            <td class="px-5 py-4 text-center text-slate-600">
                                {{ $index + 1 }}
                            </td>

                            {{-- Tema --}}
                            <td class="px-5 py-4">
                                <span x-show="!editMode" class="font-semibold text-slate-700">{{ $jadwal->tema }}</span>

                                <select x-cloak x-show="editMode" x-model="tema_id"
                                    class="h-10 w-full rounded-lg border border-slate-200 bg-white px-3 text-sm text-slate-700 shadow-sm outline-none transition focus:border-blue-500 focus:ring-4 focus:ring-blue-100">
                                    @foreach ($temaList as $tema)
                                        <option value="{{ $tema->id }}">{{ $tema->nama }}</option>
                                    @endforeach
                                </select>
                            </td>

                            {{-- Tanggal Audit --}}
                            <td class="px-5 py-4 text-center">
                                <span x-show="!editMode" class="text-slate-600">{{ $jadwal->tanggal_mulai }}</span>

                                <input x-cloak x-show="editMode" type="date" x-model="tanggal_mulai"
                                    class="h-10 w-full rounded-lg border border-slate-200 bg-white px-3 text-sm text-slate-700 shadow-sm outline-none transition focus:border-blue-500 focus:ring-4 focus:ring-blue-100">
                            </td>

                            {{-- Tanggal Verifikasi --}}
                            <td class="px-5 py-4 text-center">
                                <span x-show="!editMode" class="text-slate-600">{{ $jadwal->tanggal_selesai ?? '-' }}</span>

                                <input x-cloak x-show="editMode" type="date" x-model="tanggal_selesai"
                                    class="h-10 w-full rounded-lg border border-slate-200 bg-white px-3 text-sm text-slate-700 shadow-sm outline-none transition focus:border-blue-500 focus:ring-4 focus:ring-blue-100">
                            </td>

                            {{-- Periode --}}
                            <td class="px-5 py-4 text-center">
                                <span x-show="!editMode" class="text-slate-600">{{ $jadwal->periode }}</span>

                                <input x-cloak x-show="editMode" type="text" x-model="periode"
                                    class="h-10 w-full rounded-lg border border-slate-200 bg-white px-3 text-sm text-slate-700 shadow-sm outline-none transition focus:border-blue-500 focus:ring-4 focus:ring-blue-100">
                            </td>

                            {{-- Status --}}
                            <td class="px-5 py-4 text-center">
                                <form action="{{ route('admin.jadwal.toggle', $jadwal->id) }}" method="POST">
                                    @csrf

                                    <label class="inline-flex cursor-pointer items-center justify-center gap-3">
                                        <input type="checkbox" class="sr-only peer" onchange="this.form.submit()"
                                            {{ $jadwal->status == 'open' ? 'checked' : '' }}>

                                        <div class="relative h-7 w-14 rounded-full border shadow-inner transition duration-300
                                            {{ $jadwal->status == 'open'
                                                ? 'border-red-400 bg-red-500'
                                                : 'border-emerald-400 bg-emerald-500' }}">
                                            <span class="absolute left-1 top-1 h-5 w-5 rounded-full bg-white shadow-md ring-1 ring-black/5 transition duration-300
                                                {{ $jadwal->status == 'open' ? 'translate-x-7' : '' }}">
                                            </span>
                                        </div>

                                        <span class="min-w-[58px] rounded-full border px-3 py-1 text-center text-xs font-bold transition
                                            {{ $jadwal->status == 'open'
                                                ? 'border-red-100 bg-red-50 text-red-600'
                                                : 'border-emerald-100 bg-emerald-50 text-emerald-600' }}">
                                            {{ $jadwal->status == 'open' ? 'Open' : 'Close' }}
                                        </span>
                                    </label>
                                </form>
                            </td>

                            {{-- Aksi --}}
                            <td class="px-5 py-4 text-center">
                                {{-- Mode Biasa --}}
                                <div x-show="!editMode" class="flex items-center justify-center gap-2">
                                    <button @click="editMode = true"
                                        class="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-blue-50 text-blue-600 transition hover:bg-blue-600 hover:text-white"
                                        title="Edit">
                                        <i class="fas fa-edit text-xs"></i>
                                    </button>

                                    <form action="{{ route('admin.jadwal.destroy', $jadwal->id) }}" method="POST"
                                        onsubmit="return confirm('Yakin hapus data ini?')">
                                        @csrf
                                        @method('DELETE')

                                        <button type="submit"
                                            class="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-red-50 text-red-600 transition hover:bg-red-600 hover:text-white"
                                            title="Hapus">
                                            <i class="fas fa-trash text-xs text-red-600 transition group-hover:text-white"></i>
                                        </button>
                                    </form>
                                </div>

                                {{-- Mode Edit --}}
                                <div x-cloak x-show="editMode" class="flex items-center justify-center gap-2">
                                    <form action="{{ route('admin.jadwal.update', $jadwal->id) }}" method="POST" class="flex gap-2">
                                        @csrf
                                        @method('PUT')

                                        <input type="hidden" name="tema_id" :value="tema_id">
                                        <input type="hidden" name="tanggal_mulai" :value="tanggal_mulai">
                                        <input type="hidden" name="tanggal_selesai" :value="tanggal_selesai">
                                        <input type="hidden" name="periode" :value="periode">

                                        <button type="submit"
                                            class="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-emerald-50 text-emerald-600 transition hover:bg-emerald-600 hover:text-white"
                                            title="Simpan">
                                            <i class="fas fa-check text-xs"></i>
                                        </button>
                                    </form>

                                    <button @click="editMode = false"
                                        class="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-slate-100 text-slate-600 transition hover:bg-slate-700 hover:text-white"
                                        title="Batal">
                                        <i class="fas fa-times text-xs"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="px-5 py-10 text-center text-slate-500">
                                Belum ada data
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

</div>

{{-- Script --}}
<script src="//unpkg.com/alpinejs" defer></script>

<script>
    // ====== Toast Notification ======
    function closeToast() {
        const toast = document.getElementById('toast-message');
        if (toast) {
            toast.style.transition = "opacity 0.5s ease, transform 0.5s ease";
            toast.style.opacity = "0";
            toast.style.transform = "translate(-50%, -12px)";
            setTimeout(() => toast.remove(), 500);
        }
    }

    setTimeout(closeToast, 10000);

    // ====== Form Penjadwalan Audit (isi bulan_awal otomatis) ======
    const tanggalMulai = document.getElementById('tanggal_mulai');
    const bulanAwal    = document.getElementById('bulan_awal');

    if (tanggalMulai && bulanAwal) {
        tanggalMulai.addEventListener('change', function() {
            const date = new Date(this.value);
            if (!isNaN(date)) {
                bulanAwal.value = date.toLocaleString('id-ID', { month: 'long' });
            } else {
                bulanAwal.value = '';
            }
        });
    }

    // ====== Form Penjadwalan Verifikasi ======
    const temaVerifikasi = document.getElementById('tema_verifikasi');
    const periodeHidden  = document.getElementById('periode_id');
    const tglMulaiInput  = document.getElementById('tanggal_mulai_verifikasi');
    const periodeLabel   = document.getElementById('periode_verifikasi');

    function syncVerifikasiFields() {
        if (!temaVerifikasi) return;

        const opt = temaVerifikasi.options[temaVerifikasi.selectedIndex];
        if (!opt) return;

        periodeHidden.value = opt.dataset.periodeId || '';
        tglMulaiInput.value = opt.dataset.tanggal || '';
        periodeLabel.value  = opt.dataset.periode || '';
    }

    if (temaVerifikasi) {
        temaVerifikasi.addEventListener('change', syncVerifikasiFields);

        if (temaVerifikasi.value) {
            syncVerifikasiFields();
        }
    }
</script>
@endsection