@extends('layout.app')

@section('content')
    <div class="page-header">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">Home</li>
            <li class="breadcrumb-item active">Riwayat Seleksi SPK</li>
        </ol>
    </div>

    {{-- NOTIFIKASI ERROR (Penting jika export kosong ditolak Controller) --}}
    @if (session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="icon-warning"></i> {{ session('error') }}
            <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
        </div>
    @endif

    <div class="row gutters">
        <div class="col-xl-12">
            {{-- Bagian Filter Periode --}}
            <div class="card shadow-sm border-0 mb-4">
                <div class="card-header bg-white">
                    <h5 class="mb-0 text-dark font-weight-bold"><i class="icon-layers text-primary"></i> Pilih Periode Laporan</h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('riwayat.index') }}" method="GET" class="row align-items-end">
                        <div class="col-md-4">
                            <label class="small font-weight-bold text-muted text-uppercase">Arsip Periode</label>
                            <select name="periode_id" class="form-control" onchange="this.form.submit()">
                                @forelse ($listPeriode as $lp)
                                    <option value="{{ $lp->id }}" {{ $selectedPeriodeId == $lp->id ? 'selected' : '' }}>
                                        {{ $lp->nama_periode }} {{ $lp->is_aktif ? '(Sedang Aktif)' : '' }}
                                    </option>
                                @empty
                                    <option value="">Tidak ada periode ditemukan</option>
                                @endforelse
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="small font-weight-bold text-muted text-uppercase">Tampilkan</label>
                            <select name="per_page" class="form-control" onchange="this.form.submit()">
                                @foreach ([10, 25, 50, 100] as $val)
                                    <option value="{{ $val }}" {{ $perPage == $val ? 'selected' : '' }}>{{ $val }} Data</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-5 text-md-right mt-3">
                            <span class="text-muted small">Arsip Laporan: <strong>{{ optional($periode)->nama_periode }}</strong></span>
                        </div>
                    </form>
                </div>
            </div>

            @if ($periode)
                {{-- Statistik Global Periode Terpilih --}}
                <div class="row mb-4 align-items-center">
                    <div class="col-md-8">
                        <div class="d-flex flex-wrap gap-3">
                            <div class="stats-box bg-white text-center px-3 py-2 rounded shadow-sm border-top-utama">
                                <h6 class="mb-0 text-success font-weight-bold">{{ $countUtama }}</h6>
                                <small class="text-muted font-weight-bold">Prioritas Utama</small>
                            </div>
                            <div class="stats-box bg-white text-center px-3 py-2 rounded shadow-sm border-top-cadangan">
                                <h6 class="mb-0 text-info font-weight-bold">{{ $countCadangan }}</h6>
                                <small class="text-muted font-weight-bold">Layak Cadangan</small>
                            </div>
                            <div class="stats-box bg-white text-center px-3 py-2 rounded shadow-sm border-top-tidak">
                                <h6 class="mb-0 text-danger font-weight-bold">{{ $countTidakLayak }}</h6>
                                <small class="text-muted font-weight-bold">Tidak Layak</small>
                            </div>
                            <div class="stats-box bg-dark text-center px-3 py-2 rounded shadow-sm">
                                <h6 class="mb-0 text-white font-weight-bold">{{ number_format($mean, 4) }}</h6>
                                <small class="text-light">Rerata Periode</small>
                            </div>
                            {{-- BOX PASSING GRADE GLOBAL --}}
                            <div class="stats-box text-center px-3 py-2 rounded shadow-sm" style="background-color: #6f42c1; border-top: 3px solid #5a32a3;">
                                <h6 class="mb-0 text-white font-weight-bold">{{ number_format($passingGrade, 4) }}</h6>
                                <small class="text-white">Standar Desa</small>
                            </div>
                        </div>
                    </div>

                    {{-- Tombol Export Dinamis --}}
                    <div class="col-md-4 text-md-right mt-3 mt-md-0">
                        <div class="btn-group shadow-sm">
                            <button type="button" class="btn btn-success dropdown-toggle font-weight-bold" data-toggle="dropdown">
                                <i class="icon-file-text"></i> EXCEL
                            </button>
                            <div class="dropdown-menu dropdown-menu-right">
                                <a class="dropdown-item font-weight-bold text-dark" href="javascript:void(0)"
                                    onclick="confirmExport('{{ route('riwayat.exportExcel', ['periode_id' => $periode->id]) }}', 'Excel', 'Semua Data')">Semua Data</a>

                                @if($results->total() > 0)
                                    <a class="dropdown-item" href="javascript:void(0)"
                                        onclick="confirmExport('{{ route('riwayat.exportExcel', ['periode_id' => $periode->id, 'limit' => 'kuota']) }}', 'Excel', 'Sesuai Kuota')">Sesuai Kuota ({{ $periode->kuota }})</a>
                                    <div class="dropdown-divider"></div>
                                @endif

                                @if($countUtama > 0)
                                    <a class="dropdown-item" href="javascript:void(0)"
                                        onclick="confirmExport('{{ route('riwayat.exportExcel', ['periode_id' => $periode->id, 'status' => 'Layak Prioritas Utama']) }}', 'Excel', 'Prioritas Utama')">Hanya Prioritas Utama</a>
                                @endif
                                @if($countCadangan > 0)
                                    <a class="dropdown-item" href="javascript:void(0)"
                                        onclick="confirmExport('{{ route('riwayat.exportExcel', ['periode_id' => $periode->id, 'status' => 'Layak Cadangan']) }}', 'Excel', 'Layak Cadangan')">Hanya Layak Cadangan</a>
                                @endif
                                @if($countTidakLayak > 0)
                                    <a class="dropdown-item" href="javascript:void(0)"
                                        onclick="confirmExport('{{ route('riwayat.exportExcel', ['periode_id' => $periode->id, 'status' => 'Tidak Layak']) }}', 'Excel', 'Tidak Layak')">Hanya Tidak Layak</a>
                                @endif
                            </div>
                        </div>

                        <div class="btn-group shadow-sm ml-1">
                            <button type="button" class="btn btn-danger dropdown-toggle font-weight-bold" data-toggle="dropdown">
                                <i class="icon-file-pdf"></i> PDF
                            </button>
                            <div class="dropdown-menu dropdown-menu-right">
                                <a class="dropdown-item font-weight-bold text-dark" href="javascript:void(0)"
                                    onclick="confirmExport('{{ route('riwayat.exportPdf', ['periode_id' => $periode->id]) }}', 'PDF', 'Semua Data')">Semua Data</a>

                                @if($results->total() > 0)
                                    <a class="dropdown-item" href="javascript:void(0)"
                                        onclick="confirmExport('{{ route('riwayat.exportPdf', ['periode_id' => $periode->id, 'limit' => 'kuota']) }}', 'PDF', 'Sesuai Kuota')">Sesuai Kuota ({{ $periode->kuota }})</a>
                                    <div class="dropdown-divider"></div>
                                @endif

                                @if($countUtama > 0)
                                    <a class="dropdown-item" href="javascript:void(0)"
                                        onclick="confirmExport('{{ route('riwayat.exportPdf', ['periode_id' => $periode->id, 'status' => 'Layak Prioritas Utama']) }}', 'PDF', 'Prioritas Utama')">Hanya Prioritas Utama</a>
                                @endif
                                @if($countCadangan > 0)
                                    <a class="dropdown-item" href="javascript:void(0)"
                                        onclick="confirmExport('{{ route('riwayat.exportPdf', ['periode_id' => $periode->id, 'status' => 'Layak Cadangan']) }}', 'PDF', 'Layak Cadangan')">Hanya Layak Cadangan</a>
                                @endif
                                @if($countTidakLayak > 0)
                                    <a class="dropdown-item" href="javascript:void(0)"
                                        onclick="confirmExport('{{ route('riwayat.exportPdf', ['periode_id' => $periode->id, 'status' => 'Tidak Layak']) }}', 'PDF', 'Tidak Layak')">Hanya Tidak Layak</a>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Tabel Data --}}
                <div class="card shadow-sm border-0 border-top-primary">
                    <div class="card-header bg-white">
                        <div class="row align-items-center">
                            <div class="col">
                                <h5 class="mb-0 text-dark font-weight-bold">Tabel Riwayat Perangkingan</h5>
                            </div>
                            <div class="col-md-4">
                                <form action="{{ route('riwayat.index') }}" method="GET">
                                    <input type="hidden" name="periode_id" value="{{ $selectedPeriodeId }}">
                                    <div class="input-group">
                                        <input type="text" name="search" class="form-control form-control-sm"
                                            placeholder="Cari Nama/NIK..." value="{{ $search }}">
                                        <div class="input-group-append">
                                            <button class="btn btn-primary btn-sm" type="submit"><i class="icon-search"></i></button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover mb-0">
                                <thead>
                                    <tr class="text-center bg-light text-uppercase small font-weight-bold">
                                        <th width="50">Rank</th>
                                        <th class="text-left">Nama Warga</th>
                                        <th>NIK</th>
                                        <th>Skor (V)</th>
                                        <th>Status Keputusan</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($results as $res)
                                        <tr class="text-center">
                                            <td class="font-weight-bold">{{ $res->ranking }}</td>
                                            <td class="text-left font-weight-bold text-dark">{{ $res->warga->nama }}</td>
                                            <td><code>{{ $res->warga->nik }}</code></td>
                                            <td class="text-primary font-weight-bold">{{ number_format($res->skor_akhir, 4) }}</td>
                                            <td>
                                                @php
                                                    $class = match ($res->status_keputusan) {
                                                        'Layak Prioritas Utama' => 'status-utama',
                                                        'Layak Cadangan' => 'status-cadangan',
                                                        'Dialihkan (Pemerataan)' => 'status-dialihkan',
                                                        default => 'status-tidak',
                                                    };
                                                @endphp
                                                <span class="status-label {{ $class }}">{{ $res->status_keputusan }}</span>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="5" class="text-center py-5">
                                                <p class="text-muted font-italic">Tidak ada data untuk filter ini.</p>
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>

                        {{-- Pagination --}}
                        <div class="mt-4 d-flex justify-content-between align-items-center">
                            <div class="small text-muted text-uppercase font-weight-bold">
                                Menampilkan {{ $results->firstItem() }} - {{ $results->lastItem() }} dari {{ $results->total() }} Data
                            </div>
                            <div>
                                {{ $results->links() }}
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>

    <style>
        .gap-3 { gap: 1rem; }
        .border-top-primary { border-top: 4px solid #3085d6 !important; }
        .border-top-utama { border-top: 3px solid #28a745 !important; }
        .border-top-cadangan { border-top: 3px solid #17a2b8 !important; }
        .border-top-tidak { border-top: 3px solid #dc3545 !important; }
        .stats-box { min-width: 130px; transition: transform 0.2s; }
        .stats-box:hover { transform: translateY(-3px); }
        .status-label { padding: 5px 12px; border-radius: 50px; font-size: 10px; font-weight: bold; text-transform: uppercase; white-space: nowrap; }
        .status-utama { background: #d4edda; color: #155724; }
        .status-cadangan { background: #cce5ff; color: #004085; }
        .status-tidak { background: #f8d7da; color: #721c24; }
        .status-dialihkan { background: #fff3cd; color: #856404; }
        .pagination { margin-bottom: 0; }
    </style>

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        function confirmExport(url, tipe, kategori) {
            Swal.fire({
                title: 'Konfirmasi Export ' + tipe,
                html: `Anda akan mengunduh file <strong>${tipe}</strong> periode <strong>{{ optional($periode)->nama_periode }}</strong><br>Kategori: <span class="text-primary font-weight-bold">${kategori}</span>`,
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Ya, Download',
                cancelButtonText: 'Batal',
                confirmButtonColor: tipe === 'Excel' ? '#28a745' : '#dc3545',
                reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {

                    // KUNCI 1: Beri jeda 200ms agar pop-up pertama tertutup sempurna (Mencegah layar freeze)
                    setTimeout(() => {

                        // Munculkan pop-up loading murni
                        Swal.fire({
                            title: 'Memproses Data...',
                            html: 'Mohon tunggu, file sedang disiapkan.',
                            allowOutsideClick: false,
                            showConfirmButton: false, // KUNCI 2: Sembunyikan tombol OK biar murni loading
                            didOpen: () => { Swal.showLoading() }
                        });

                        // Jalankan proses download file-nya
                        window.location.href = url;

                        // KUNCI 3: Tutup paksa loading-nya setelah 3 detik
                        setTimeout(() => {
                            Swal.close();
                        }, 3000);

                    }, 200); // 200 milidetik jeda

                }
            });
        }
    </script>
@endsection