@extends('layouts.admin')

@section('content')
<div class="content-header">
    <div class="container-fluid">
        <div class="card shadow-sm border-0" style="border-radius: 15px;">
            <div class="card-header bg-info text-white d-flex align-items-center justify-content-between" style="border-radius: 15px 15px 0 0;">
                <h3 class="card-title font-weight-bold mb-0 d-flex align-items-center">
                    <i class="fas fa-user-check mr-2"></i> Verifikasi Hasil Seleksi Akhir (Tahap 2)
                    {{-- MENAMPILKAN TOTAL DATA MENGGUNAKAN COUNT() KARENA BUKAN PAGINASI --}}
                    <span class="badge badge-light text-info ml-2 px-2 py-1 shadow-sm" style="border-radius: 8px; font-size: 0.85rem;">
                        Total: {{ $pendaftar->count() }} Siswa
                    </span>
                </h3>
                {{-- Input Search Responsif --}}
                <div class="card-tools">
                    <div class="input-group input-group-sm" style="width: 250px;">
                        <input type="text" id="tableSearch" class="form-control float-right" placeholder="Cari Nama, NISN, atau No. PSU..." style="border-radius: 20px 0 0 20px; border: none;">
                        <div class="input-group-append">
                            <button type="button" class="btn btn-default" style="border-radius: 0 20px 20px 0; border: none; background: white;">
                                <i class="fas fa-search text-info"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0 text-center" id="mainTable">
                        <thead class="bg-light text-muted small font-weight-bold">
                            <tr>
                                <th class="py-3" width="50">NO</th>
                                <th>NO. PENDAFTARAN</th>
                                <th>NAMA SISWA</th>
                                <th>NISN</th>
                                <th>ASAL SEKOLAH</th>
                                <th width="250">AKSI VERIFIKASI</th>
                            </tr>
                        </thead>
                        <tbody id="tableBody">
                            @forelse($pendaftar as $key => $row)
                            @php
                                // PERBAIKAN: Gunakan format nomor pendaftaran yang sama dengan Tahap 1
                                $nomorPendaftaran = $row->nomor_pendaftaran ?? optional($row->user->pendaftaranBerkas)->nomor_pendaftaran ?? "PSU-" . substr($row->nisn ?? '0000', -4) . str_pad($row->user_id, 3, '0', STR_PAD_LEFT);
                                
                                // Menangkap status verifikasi akhir dari database
                                $status = $row->status_ujian ?? 'proses';
                            @endphp
                            <tr class="searchable-row">
                                <td>{{ $key + 1 }}</td>
                                <td class="font-nomor">
                                    <span class="badge badge-dark px-3 py-2" style="letter-spacing: 1px;">
                                        {{ $nomorPendaftaran }}
                                    </span>
                                </td>
                                <td class="text-left font-nama">
                                    <div class="font-weight-bold text-dark">{{ strtoupper($row->nama_lengkap) }}</div>
                                </td>
                                <td class="font-nisn"><code>{{ $row->nisn }}</code></td>
                                <td class="text-muted small">
                                    {{ optional($row->user->dataSekolah)->asal_sekolah ?? '-' }}
                                </td>
                                <td>
                                    <div class="d-flex justify-content-center align-items-center">
                                        {{-- LOGIKA TOMBOL BERDASARKAN STATUS --}}
                                        @if($status == 'proses')
                                            {{-- Belum Diverifikasi --}}
                                            <button onclick="verifikasiAkhir('{{ $row->id }}', 'lulus')" class="btn btn-sm btn-success mr-2 shadow-sm font-weight-bold" style="border-radius: 8px;">
                                                <i class="fas fa-check-circle mr-1"></i> Approve
                                            </button>
                                            <button onclick="verifikasiAkhir('{{ $row->id }}', 'tidak_lulus')" class="btn btn-sm btn-danger shadow-sm font-weight-bold" style="border-radius: 8px;">
                                                <i class="fas fa-times-circle mr-1"></i> Reject
                                            </button>
                                        @elseif($status == 'lulus')
                                            {{-- Sudah Lulus --}}
                                            <button class="btn btn-sm btn-success mr-2 shadow-sm font-weight-bold" style="border-radius: 8px; cursor: default;" disabled>
                                                <i class="fas fa-check mr-1"></i> Approved
                                            </button>
                                            <button onclick="editVerifikasi('{{ $row->id }}')" class="btn btn-sm btn-warning shadow-sm font-weight-bold" style="border-radius: 8px;">
                                                <i class="fas fa-edit mr-1"></i> Edit
                                            </button>
                                        @elseif($status == 'tidak_lulus')
                                            {{-- Sudah Ditolak --}}
                                            <button class="btn btn-sm btn-danger mr-2 shadow-sm font-weight-bold" style="border-radius: 8px; cursor: default;" disabled>
                                                <i class="fas fa-times mr-1"></i> Rejected
                                            </button>
                                            <button onclick="editVerifikasi('{{ $row->id }}')" class="btn btn-sm btn-warning shadow-sm font-weight-bold" style="border-radius: 8px;">
                                                <i class="fas fa-edit mr-1"></i> Edit
                                            </button>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="6" class="py-5 text-muted font-italic">Belum ada data pendaftar yang lolos berkas untuk diuji.</td>
                            </tr>
                            @endforelse
                            <tr id="noData" style="display: none;">
                                <td colspan="6" class="py-5 text-muted">Data pencarian tidak ditemukan...</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- SCRIPT SEARCH & VERIFIKASI --}}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
$(document).ready(function(){
    // Fitur Search Responsif
    $("#tableSearch").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        var visibleRows = 0;

        $("#tableBody .searchable-row").filter(function() {
            var match = $(this).text().toLowerCase().indexOf(value) > -1;
            $(this).toggle(match);
            if(match) visibleRows++;
        });

        // Tampilkan pesan jika data tidak ada
        if(visibleRows === 0 && value !== "") {
            $("#noData").show();
        } else {
            $("#noData").hide();
        }
    });
});

function verifikasiAkhir(id, status) {
    const title = status === 'lulus' ? 'Luluskan Siswa?' : 'Tolak Siswa?';
    const textDesc = status === 'lulus' ? 'Siswa ini akan dinyatakan Lulus Seleksi Akhir.' : 'Siswa ini akan dinyatakan Tidak Lulus.';
    const btnColor = status === 'lulus' ? '#28a745' : '#dc3545';

    Swal.fire({
        title: title,
        text: textDesc,
        icon: 'question',
        showCancelButton: true,
        confirmButtonText: 'Ya, Proses!',
        cancelButtonText: 'Batal',
        confirmButtonColor: btnColor,
    }).then((result) => {
        if (result.isConfirmed) {
            Swal.fire({ title: 'Memproses...', allowOutsideClick: false, didOpen: () => { Swal.showLoading(); } });

            $.post("{{ url('/admin/update-status-ujian') }}/" + id, {
                _token: "{{ csrf_token() }}",
                status: status,
                pesan: status === 'lulus' ? 'Selamat! Anda LULUS Seleksi Akhir.' : 'Mohon maaf, Anda BELUM LULUS Seleksi Akhir.'
            }, function(res) {
                Swal.fire({
                    title: 'Berhasil', 
                    text: res.message, 
                    icon: 'success',
                    timer: 1500,
                    showConfirmButton: false
                }).then(() => location.reload());
            }).fail(function(xhr) {
                Swal.fire('Gagal', 'Terjadi kesalahan sistem', 'error');
            });
        }
    });
}

function editVerifikasi(id) {
    Swal.fire({
        title: 'Ubah Keputusan',
        text: "Anda ingin mengubah status kelulusan siswa ini menjadi apa?",
        icon: 'warning',
        showDenyButton: true,
        showCancelButton: true,
        confirmButtonText: '<i class="fas fa-check"></i> Luluskan',
        denyButtonText: '<i class="fas fa-times"></i> Tolak',
        cancelButtonText: 'Batal',
        confirmButtonColor: '#28a745',
        denyButtonColor: '#dc3545',
    }).then((result) => {
        if (result.isConfirmed) {
            // Ubah jadi Lulus
            verifikasiAkhirProses(id, 'lulus');
        } else if (result.isDenied) {
            // Ubah jadi Tidak Lulus
            verifikasiAkhirProses(id, 'tidak_lulus');
        }
    });
}

function verifikasiAkhirProses(id, status) {
    Swal.fire({ title: 'Memperbarui data...', allowOutsideClick: false, didOpen: () => { Swal.showLoading(); } });

    $.post("{{ url('/admin/update-status-ujian') }}/" + id, {
        _token: "{{ csrf_token() }}",
        status: status,
        pesan: status === 'lulus' ? 'Selamat! Anda LULUS Seleksi Akhir.' : 'Mohon maaf, Anda BELUM LULUS Seleksi Akhir.'
    }, function(res) {
        Swal.fire({
            title: 'Berhasil Diperbarui', 
            text: res.message, 
            icon: 'success',
            timer: 1500,
            showConfirmButton: false
        }).then(() => location.reload());
    }).fail(function(xhr) {
        Swal.fire('Gagal', 'Terjadi kesalahan sistem', 'error');
    });
}
</script>
@endsection