@extends('layouts.app')

@section('title', 'Disposisi 3 - Kepala Subbidang')

@section('content')
    <div class="max-w-7xl mx-auto space-y-6">

        {{-- Header Page --}}
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
            <div>
                <h1 class="text-2xl font-bold text-slate-900">Disposisi 3: Kepala Subbidang</h1>
                <p class="text-sm text-gray-500">Tahap akhir disposisi dokumen pengesahan SHS untuk ditindaklanjuti dan
                    diverifikasi oleh staf verifikator.</p>
            </div>
            @if ($totalMenunggu > 0)
                <div
                    class="flex items-center gap-2 px-3.5 py-2 bg-amber-50 border border-amber-200 rounded-xl text-amber-800 text-xs font-semibold">
                    <i class="fa-solid fa-clock-rotate-left text-amber-600"></i>
                    <span>{{ $totalMenunggu }} dokumen menunggu Disposisi 3</span>
                </div>
            @endif
        </div>

        {{-- Alert Notifikasi --}}
        @if (session('success'))
            <div
                class="p-4 bg-emerald-50 border-l-4 border-emerald-500 text-emerald-800 rounded-r-lg text-sm font-medium shadow-sm">
                <i class="fa-solid fa-circle-check mr-2"></i> {{ session('success') }}
            </div>
        @endif

        @if (session('error'))
            <div class="p-4 bg-rose-50 border-l-4 border-rose-500 text-rose-800 rounded-r-lg text-sm font-medium shadow-sm">
                <i class="fa-solid fa-circle-exclamation mr-2"></i> {{ session('error') }}
            </div>
        @endif

        {{-- Form Filter & Search --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
            <form method="GET" action="{{ route('kasubbid.disposisi3.index') }}"
                class="flex flex-col sm:flex-row items-center gap-3">
                <div class="relative flex-1 w-full">
                    <i
                        class="fa-solid fa-magnifying-glass absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-400 text-xs"></i>
                    <input type="text" name="search" value="{{ request('search') }}"
                        placeholder="Cari SKPD, nama dokumen, atau no. surat..."
                        class="w-full pl-9 pr-3.5 py-2 border rounded-lg text-sm focus:ring-2 focus:ring-blue-500 outline-none">
                </div>

                <div class="w-full sm:w-64">
                    <select name="status"
                        class="w-full px-3.5 py-2 border rounded-lg text-sm focus:ring-2 focus:ring-blue-500 outline-none bg-white">
                        <option value="">-- Semua Status --</option>
                        <option value="menunggu_disposisi_3"
                            {{ request('status') == 'menunggu_disposisi_3' ? 'selected' : '' }}>Menunggu Disposisi 3
                        </option>
                        <option value="disposisi_selesai" {{ request('status') == 'disposisi_selesai' ? 'selected' : '' }}>
                            Disposisi Selesai</option>
                        <option value="dikembalikan_kasubbid"
                            {{ request('status') == 'dikembalikan_kasubbid' ? 'selected' : '' }}>Dikembalikan</option>
                    </select>
                </div>

                <div class="flex items-center gap-2 w-full sm:w-auto">
                    <button type="submit"
                        class="px-4 py-2 bg-slate-800 hover:bg-slate-900 text-white text-sm font-semibold rounded-lg shadow transition-all flex items-center gap-1.5 w-full sm:w-auto justify-center">
                        <i class="fa-solid fa-filter"></i> Filter
                    </button>
                    @if (request()->hasAny(['search', 'status']))
                        <a href="{{ route('kasubbid.disposisi3.index') }}"
                            class="px-3 py-2 bg-gray-100 hover:bg-gray-200 text-gray-600 text-sm font-semibold rounded-lg border transition-all"
                            title="Reset Filter">
                            <i class="fa-solid fa-rotate-right"></i>
                        </a>
                    @endif
                </div>
            </form>
        </div>

        {{-- Tabel Dokumen Disposisi 3 --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-100 bg-slate-50 flex items-center justify-between">
                <h3 class="text-sm font-bold text-slate-800 flex items-center gap-2">
                    <i class="fa-solid fa-inbox text-blue-600"></i> Antrean Dokumen Disposisi 3
                </h3>
                <span class="text-xs font-semibold px-2.5 py-1 bg-blue-100 text-blue-800 rounded-full">
                    Total: {{ $dokumenList->total() }} Dokumen
                </span>
            </div>

            <div class="overflow-x-auto">
                <table class="w-full text-left border-collapse">
                    <thead>
                        <tr class="bg-gray-50 border-b text-xs font-bold text-gray-500 uppercase tracking-wider">
                            <th class="p-4">SKPD Pengirim</th>
                            <th class="p-4">Nama Dokumen</th>
                            <th class="p-4">Riwayat Disposisi 1 & 2</th>
                            <th class="p-4">No. Surat / Tahun</th>
                            <th class="p-4 text-center">Status</th>
                            <th class="p-4 text-center">Aksi</th>
                        </tr>
                    </thead>
                    <tbody class="text-sm divide-y divide-gray-100">
                        @forelse($dokumenList as $item)
                            <tr class="hover:bg-slate-50 transition-colors">
                                <td class="p-4">
                                    <p class="font-bold text-slate-800">{{ $item->user->name ?? 'SKPD' }}</p>
                                    <p class="text-[11px] text-gray-400">{{ $item->user->email ?? '-' }}</p>
                                </td>
                                <td class="p-4">
                                    <p class="font-semibold text-slate-800">{{ $item->nama_dokumen }}</p>
                                    @if ($item->catatan_skpd)
                                        <p class="text-xs text-gray-400 mt-0.5 italic">"{{ $item->catatan_skpd }}"</p>
                                    @endif
                                </td>
                                <td class="p-4 space-y-1.5 max-w-xs">
                                    @if ($item->catatan_disposisi_1)
                                        <div class="bg-slate-100 rounded p-1.5 text-[11px] text-slate-700">
                                            <span class="font-bold text-[10px] text-blue-700">Dispo 1 (Ka. BPAD):</span>
                                            <p class="italic">"{{ $item->catatan_disposisi_1 }}"</p>
                                        </div>
                                    @endif
                                    @if ($item->catatan_disposisi_2)
                                        <div
                                            class="bg-emerald-50 border border-emerald-200 rounded p-1.5 text-[11px] text-emerald-900">
                                            <span class="font-bold text-[10px] text-emerald-700">Dispo 2 (Ka.
                                                Bidang):</span>
                                            <p class="italic">"{{ $item->catatan_disposisi_2 }}"</p>
                                        </div>
                                    @endif
                                </td>
                                <td class="p-4">
                                    <p class="font-mono text-xs text-slate-700">{{ $item->nomor_surat ?? '-' }}</p>
                                    <p class="font-bold text-xs text-blue-700">Tahun {{ $item->tahun_anggaran }}</p>
                                </td>
                                <td class="p-4 text-center">
                                    @if ($item->status === 'menunggu_disposisi_3')
                                        <span
                                            class="px-2.5 py-1 rounded-full text-[10px] font-bold uppercase bg-amber-100 text-amber-800 border border-amber-200">
                                            Menunggu Disposisi 3
                                        </span>
                                    @elseif ($item->status === 'disposisi_selesai')
                                        <span
                                            class="px-2.5 py-1 rounded-full text-[10px] font-bold uppercase bg-emerald-100 text-emerald-800 border border-emerald-300">
                                            Selesai Disposisi
                                        </span>
                                    @elseif ($item->status === 'dikembalikan_kasubbid')
                                        <span
                                            class="px-2.5 py-1 rounded-full text-[10px] font-bold uppercase bg-rose-100 text-rose-800">
                                            Dikembalikan
                                        </span>
                                    @endif
                                </td>
                                <td class="p-4 text-center">
                                    <div class="flex items-center justify-center gap-1.5">
                                        <a href="{{ \Illuminate\Support\Facades\Storage::disk('public')->url($item->file_pdf) }}"
                                            target="_blank"
                                            class="px-2.5 py-1.5 bg-sky-50 hover:bg-sky-100 text-sky-700 rounded-lg text-xs font-semibold transition-all flex items-center gap-1"
                                            title="Lihat Dokumen Scan PDF">
                                            <i class="fa-solid fa-file-pdf text-rose-600"></i> Buka PDF
                                        </a>

                                        @if ($item->status === 'menunggu_disposisi_3')
                                            <button type="button"
                                                onclick="openModalDisposisi3({{ $item->id }}, '{{ addslashes($item->nama_dokumen) }}', '{{ addslashes($item->user->name ?? 'SKPD') }}')"
                                                class="px-3 py-1.5 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg text-xs font-bold transition-all shadow flex items-center gap-1"
                                                title="Selesaikan Disposisi 3">
                                                <i class="fa-solid fa-check-double"></i> Selesaikan
                                            </button>

                                            <button type="button"
                                                onclick="openModalTolak({{ $item->id }}, '{{ addslashes($item->nama_dokumen) }}')"
                                                class="p-2 bg-rose-50 hover:bg-rose-100 text-rose-700 rounded-lg text-xs font-semibold transition-all"
                                                title="Kembalikan Dokumen">
                                                <i class="fa-solid fa-xmark"></i>
                                            </button>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="p-12 text-center text-gray-400">
                                    <div class="flex flex-col items-center justify-center gap-2">
                                        <i class="fa-solid fa-inbox text-4xl text-gray-300"></i>
                                        <p class="text-xs italic">Tidak ada dokumen yang menunggu Disposisi 3.</p>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="px-6 py-4 border-t border-gray-100 bg-slate-50 flex items-center justify-between">
                <div class="text-xs text-gray-500">
                    Menampilkan <span class="font-bold text-slate-800">{{ $dokumenList->firstItem() ?? 0 }}</span> sampai
                    <span class="font-bold text-slate-800">{{ $dokumenList->lastItem() ?? 0 }}</span> dari <span
                        class="font-bold text-slate-800">{{ $dokumenList->total() }}</span> total dokumen
                </div>
                <div>
                    {{ $dokumenList->links() }}
                </div>
            </div>
        </div>

    </div>

    {{-- Modal Disposisi 3 Ka. Subbidang --}}
    <div id="modalDisposisi3"
        class="fixed inset-0 bg-slate-900/50 backdrop-blur-sm hidden flex items-center justify-center z-50 p-4">
        <div class="bg-white rounded-xl shadow-xl border border-gray-200 w-full max-w-md p-6">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-base font-bold text-slate-800 flex items-center gap-2">
                    <i class="fa-solid fa-stamp text-emerald-600"></i> Lembar Disposisi 3: Ka. Subbidang
                </h3>
                <button type="button" onclick="closeModalDisposisi3()" class="text-gray-400 hover:text-gray-600">
                    <i class="fa-solid fa-xmark text-lg"></i>
                </button>
            </div>

            <form id="formDisposisi3" method="POST" action="" class="space-y-4">
                @csrf
                <div class="bg-slate-50 border rounded-lg p-3 text-xs space-y-1">
                    <p class="text-gray-500">Pengirim: <strong id="dispNamaSkpd" class="text-slate-800"></strong></p>
                    <p class="text-gray-500">Dokumen: <strong id="dispNamaDokumen" class="text-slate-800"></strong></p>
                </div>

                <div>
                    <label class="block text-xs font-bold text-slate-700 uppercase mb-1">Catatan Akhir ke
                        Verifikator</label>
                    <textarea name="instruksi_disposisi" rows="3"
                        placeholder="Contoh: Dokumen lengkap dan sah. Silakan tim verifikator memproses input data usulan..."
                        class="w-full p-2.5 border rounded-lg text-sm focus:ring-2 focus:ring-emerald-500 outline-none"></textarea>
                </div>

                <div class="flex justify-end gap-2 pt-2">
                    <button type="button" onclick="closeModalDisposisi3()"
                        class="px-4 py-2 text-sm font-semibold text-gray-600 hover:bg-gray-100 rounded-lg">Batal</button>
                    <button type="submit"
                        class="px-5 py-2 text-sm font-semibold text-white bg-emerald-600 hover:bg-emerald-700 rounded-lg shadow flex items-center gap-1.5">
                        <i class="fa-solid fa-check-double"></i> Selesaikan Disposisi
                    </button>
                </div>
            </form>
        </div>
    </div>

    {{-- Modal Kembalikan Dokumen --}}
    <div id="modalTolak"
        class="fixed inset-0 bg-slate-900/50 backdrop-blur-sm hidden flex items-center justify-center z-50 p-4">
        <div class="bg-white rounded-xl shadow-xl border border-gray-200 w-full max-w-md p-6">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-base font-bold text-slate-800 flex items-center gap-2">
                    <i class="fa-solid fa-circle-xmark text-rose-600"></i> Kembalikan Dokumen
                </h3>
                <button type="button" onclick="closeModalTolak()" class="text-gray-400 hover:text-gray-600">
                    <i class="fa-solid fa-xmark text-lg"></i>
                </button>
            </div>

            <form id="formTolak" method="POST" action="" class="space-y-4">
                @csrf
                <p class="text-xs text-gray-600">Dokumen: <strong id="tolakNamaDokumen" class="text-slate-800"></strong>
                </p>

                <div>
                    <label class="block text-xs font-bold text-slate-700 uppercase mb-1">Catatan Pengembalian <span
                            class="text-rose-500">*</span></label>
                    <textarea name="catatan" required rows="3" placeholder="Tuliskan alasan pengembalian berkas..."
                        class="w-full p-2.5 border rounded-lg text-sm focus:ring-2 focus:ring-rose-500 outline-none"></textarea>
                </div>

                <div class="flex justify-end gap-2 pt-2">
                    <button type="button" onclick="closeModalTolak()"
                        class="px-4 py-2 text-sm font-semibold text-gray-600 hover:bg-gray-100 rounded-lg">Batal</button>
                    <button type="submit"
                        class="px-5 py-2 text-sm font-semibold text-white bg-rose-600 hover:bg-rose-700 rounded-lg shadow">
                        Kembalikan Dokumen
                    </button>
                </div>
            </form>
        </div>
    </div>

    <script>
        function openModalDisposisi3(id, namaDokumen, namaSkpd) {
            const modal = document.getElementById('modalDisposisi3');
            const form = document.getElementById('formDisposisi3');
            document.getElementById('dispNamaDokumen').textContent = namaDokumen;
            document.getElementById('dispNamaSkpd').textContent = namaSkpd;

            form.action = `/dashboard/kasubbid/disposisi-3/${id}/proses`;
            modal.classList.remove('hidden');
        }

        function closeModalDisposisi3() {
            document.getElementById('modalDisposisi3').classList.add('hidden');
        }

        function openModalTolak(id, namaDokumen) {
            const modal = document.getElementById('modalTolak');
            const form = document.getElementById('formTolak');
            document.getElementById('tolakNamaDokumen').textContent = namaDokumen;

            form.action = `/dashboard/kasubbid/disposisi-3/${id}/tolak`;
            modal.classList.remove('hidden');
        }

        function closeModalTolak() {
            document.getElementById('modalTolak').classList.add('hidden');
        }
    </script>
@endsection