@extends('layouts.admin')

@section('content')
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2 align-items-center">
            <div class="col-sm-6">
                <h1 class="m-0 font-weight-bold text-dark" style="letter-spacing: -1px;">
                    <i class="fas fa-user-graduate mr-2 text-success"></i>Data Pendaftar PPDB
                </h1>
                <p class="text-muted small mb-0">MTsN 2 Pekanbaru</p>
            </div>
            <div class="col-sm-6 text-right d-none d-sm-block">
                {{-- TOMBOL DOWNLOAD EXCEL --}}
                <button onclick="downloadExcel()" class="btn btn-success btn-sm shadow-sm mr-2" style="border-radius: 50px; padding: 5px 15px;">
                    <i class="fas fa-file-excel mr-1"></i> Cetak Laporan Excel
                </button>
                <span class="badge badge-pill badge-primary px-3 py-2 shadow-sm">
                    Total: {{ $pendaftar->total() }} Calon Siswa
                </span>
            </div>
        </div>  
    </div>
</div>

<section class="content">
    <div class="container-fluid">
        <div class="card shadow-sm border-0" style="border-radius: 15px; overflow: hidden;">
            
            <div class="card-header bg-white border-0 pt-4 pb-3 d-flex align-items-center">
                <h3 class="card-title font-weight-bold text-dark mb-0" style="font-size: 1.1rem;">Daftar Calon Siswa</h3>
                
                <form action="{{ route('admin.pendaftar.index') }}" method="GET" class="mb-0 ml-auto">
                    <div class="input-group input-group-sm shadow-sm" style="width: 300px; border-radius: 50px; overflow: hidden;">
                        <input type="text" name="search" class="form-control border-0 bg-light px-3" placeholder="Cari Nama, NISN, atau No Daftar..." value="{{ request('search') }}">
                        <div class="input-group-append">
                            <button type="submit" class="btn btn-primary border-0 px-3">
                                <i class="fas fa-search"></i>
                            </button>
                            @if(request('search'))
                                <a href="{{ route('admin.pendaftar.index') }}" class="btn btn-danger border-0 px-3" title="Reset Pencarian">
                                    <i class="fas fa-times"></i>
                                </a>
                            @endif
                        </div>
                    </div>
                </form>
            </div>

            <div class="card-body p-0">
                <div class="table-responsive">
                    <table id="tablePendaftar" class="table table-hover align-middle mb-0 border-top">
                        <thead class="bg-light text-muted text-uppercase small font-weight-bold">
                            <tr>
                                <th class="text-center py-3" width="60">NO</th>
                                <th width="160">NO PENDAFTARAN</th>
                                <th>NAMA LENGKAP</th>
                                <th class="d-none d-md-table-cell">NISN</th>
                                <th class="d-none d-lg-table-cell">ASAL SD/MI</th>
                                <th class="text-center" width="200">AKSI VERIFIKASI</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($pendaftar as $key => $row)
                            <tr>
                                <td class="text-center text-muted font-weight-bold">
                                    {{ $pendaftar->firstItem() + $key }}
                                </td>
                                <td>
                                    <span class="badge badge-primary px-2 py-1 shadow-sm" style="border-radius: 6px; letter-spacing: 1px;">
                                        {{ $row->nomor_pendaftaran ?? 'PPDB-'.sprintf('%04d', optional($row->user->pendaftaranBerkas)->id ?? $row->id) }}
                                    </span>
                                </td>
                                <td>
                                    <div class="font-weight-bold text-uppercase text-dark nama-siswa">{{ $row->nama_lengkap }}</div>
                                    <div class="d-md-none small text-muted">
                                        {{ $row->nisn }} | {{ optional($row->user->dataSekolah)->asal_sekolah ?? '-' }}
                                    </div>
                                    @if($row->status_verifikasi == 'diterima')
                                        <span class="badge badge-success small mt-1">Lolos Berkas</span>
                                    @elseif($row->status_verifikasi == 'ditolak')
                                        <span class="badge badge-danger small mt-1">Ditolak</span>
                                    @endif
                                </td>
                                <td class="d-none d-md-table-cell">
                                    <span class="badge badge-light border text-monospace">{{ $row->nisn }}</span>
                                </td>
                                <td class="d-none d-lg-table-cell asal-sekolah">
                                    {{ optional($row->user->dataSekolah)->asal_sekolah ?? '-' }}
                                </td>
                                <td class="text-center">
                                    <div class="btn-group shadow-sm" style="border-radius: 8px; overflow: hidden;">
                                        <button type="button" class="btn btn-sm btn-info px-3" onclick="showDetail('{{ $row->id }}')" title="Lihat Berkas">
                                            <i class="fas fa-file-alt"></i>
                                        </button>
                                        <button type="button" class="btn btn-sm btn-warning px-3 text-white" onclick="editPendaftar('{{ $row->id }}')" title="Koreksi Data">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button type="button" class="btn btn-sm btn-success px-3" onclick="updateStatus('{{ $row->id }}', 'diterima')" title="Lulus">
                                            <i class="fas fa-check"></i>
                                        </button>
                                        <button type="button" class="btn btn-sm btn-danger px-3" onclick="updateStatus('{{ $row->id }}', 'ditolak')" title="Tidak Lulus">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="6" class="text-center py-5">
                                    <img src="https://cdn-icons-png.flaticon.com/512/7486/7486744.png" width="80" class="opacity-25 mb-3">
                                    @if(request('search'))
                                        <p class="text-muted mb-0">Pendaftar dengan kata kunci "<b>{{ request('search') }}</b>" tidak ditemukan.</p>
                                    @else
                                        <p class="text-muted mb-0">Belum ada pendaftar yang masuk.</p>
                                    @endif
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="card-footer bg-white border-top py-3">
                <div class="d-flex justify-content-between align-items-center flex-wrap">
                    <p class="small text-muted mb-0">
                        Data ke {{ $pendaftar->firstItem() ?? 0 }} sampai {{ $pendaftar->lastItem() ?? 0 }} dari {{ $pendaftar->total() }} pendaftar
                    </p>
                    <div class="mt-2 mt-md-0">
                        {{ $pendaftar->links('pagination::bootstrap-4') }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{{-- Script & Modal Section --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<script>
    // 1. Fungsi Tampilkan Detail
    function showDetail(id) {
        $('#detailContent').html('<div class="text-center py-5"><i class="fas fa-spinner fa-spin fa-3x text-muted"></i><p>Memuat data...</p></div>');
        $('#modalDetail').modal('show');
        
        $.get("{{ url('admin/pendaftar') }}/" + id, function(data) {
            $('#detailContent').html(data);
        });
    }

    // 2. Fungsi Tampilkan Edit
    function editPendaftar(id) {
        $('#editContent').html('<div class="text-center py-5"><i class="fas fa-spinner fa-spin fa-3x text-muted"></i><p>Memuat form...</p></div>');
        $('#modalEdit').modal('show');
        
        $.get("{{ url('admin/pendaftar') }}/" + id + "/edit", function(data) {
            $('#editContent').html(data);
        });
    }

    // 3. Fungsi Preview File
    function previewFile(url, title) {
        $('#previewTitle').text(title);
        $('#previewIframe').attr('src', url);
        $('#modalPreview').modal('show');
    }

    // 4. Fungsi Update Status (Approve/Reject)
    function updateStatus(id, status) {
        const titleText = status === 'diterima' ? 'Luluskan Siswa?' : 'Tolak Berkas?';
        const confirmBtn = status === 'diterima' ? '#28a745' : '#dc3545';

        Swal.fire({
            title: titleText,
            text: "Status verifikasi akan diperbarui dan dapat dilihat oleh pendaftar.",
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: confirmBtn,
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Ya, Proses',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                Swal.fire({
                    title: 'Memproses...',
                    allowOutsideClick: false,
                    didOpen: () => { Swal.showLoading(); }
                });

                $.ajax({
                    url: "{{ url('admin/pendaftar/update-status') }}/" + id,
                    type: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        status: status
                    },
                    success: function(res) {
                        Swal.fire({
                            title: 'Berhasil',
                            text: res.message,
                            icon: 'success'
                        }).then(() => {
                            window.location.reload();
                        });
                    },
                    error: function(xhr) {
                        Swal.fire('Error', 'Terjadi kesalahan sistem: ' + xhr.responseText, 'error');
                    }
                });
            }
        });
    }

    // 5. Fungsi Download Excel (Sudah Disesuaikan Untuk Kolom Baru)
    function downloadExcel() {
        const rows = document.querySelectorAll("#tablePendaftar tbody tr");
        if (rows.length === 0 || rows[0].innerText.includes("Belum ada data")) {
            Swal.fire('Info', 'Data kosong', 'warning');
            return;
        }

        const dataExcel = [["NO", "NO PENDAFTARAN", "NAMA LENGKAP", "NISN", "ASAL SEKOLAH (SD/MI)"]];
        
        rows.forEach((row) => {
            if(row.cells.length > 1) {
                const no = row.cells[0].innerText.trim();
                const no_daftar = row.cells[1].innerText.trim();
                const nama = row.querySelector('.nama-siswa').innerText.trim();
                const nisn = row.querySelector('.text-monospace') ? row.querySelector('.text-monospace').innerText.trim() : '-';
                const sekolah = row.querySelector('.asal-sekolah') ? row.querySelector('.asal-sekolah').innerText.trim() : '-';
                
                dataExcel.push([no, no_daftar, nama, nisn, sekolah]);
            }
        });

        const worksheet = XLSX.utils.aoa_to_sheet(dataExcel);
        const workbook = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(workbook, worksheet, "Pendaftar_MTsN2");
        worksheet['!cols'] = [{ wch: 5 }, { wch: 20 }, { wch: 40 }, { wch: 20 }, { wch: 45 }];
        XLSX.writeFile(workbook, "PPDB_MTsN2_Pekanbaru.xlsx");
    }
</script>

<div class="modal fade" id="modalDetail" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
        <div class="modal-content" style="border-radius: 20px; border: none;">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title font-weight-bold">Detail Berkas Pendaftar</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="detailContent"></div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalEdit" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
        <div class="modal-content" style="border-radius: 20px; border: none;">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title font-weight-bold">Koreksi Data Pendaftar</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body p-0" id="editContent"></div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalPreview" tabindex="-1" role="dialog" aria-hidden="true" style="z-index: 1060;">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="previewTitle">Preview Berkas</h6>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body p-0">
                <iframe id="previewIframe" src="" width="100%" height="500px" frameborder="0"></iframe>
            </div>
        </div>
    </div>
</div>
@endsection