{{-- resources/views/admin/ppdb/index.blade.php --}}
@extends('admin.layouts.app')
@section('title', 'Data PPDB')

@push('styles')
<style>
    .nav-pills .nav-link {
        transition: all 0.3s ease;
    }
    .nav-pills .nav-link .badge {
        background-color: #6c757d !important;
        color: #fff !important;
        transition: all 0.3s ease;
    }
    .nav-pills .nav-link.active .badge {
        background-color: #ffffff !important;
        color: #0d6efd !important; 
    }
</style>
@endpush

@section('content')
<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="mb-1 fw-bold">Penerimaan Peserta Didik Baru (PPDB)</h4>
            <p class="text-muted mb-0" style="font-size: 14px;">Kelola data pendaftaran siswa baru madrasah.</p>
        </div>
        <a href="{{ route('admin.ppdb.create') }}" class="btn btn-primary btn-sm d-flex align-items-center gap-2 shadow-sm">
            <i class="bi bi-plus-circle"></i> Tambah Pendaftar
        </a>
    </div>

    @php
        $semuaJenjang = \App\Models\JenjangKelas::orderBy('id', 'asc')->get();
        $tabData = ['semua' => ['label' => 'Semua Pendaftar', 'data' => $ppdbs]];

        foreach($semuaJenjang as $j) {
            $tabData['jenjang_' . $j->id] = [
                'label' => $j->nama_jenjang,
                'data' => $ppdbs->filter(fn($p) => $p->jenjang_id == $j->id)
            ];
        }
    @endphp

    <div class="nav-wrapper position-relative mb-4">
        <ul class="nav nav-pills p-1 bg-white border rounded-3 shadow-sm d-flex" role="tablist">
            @foreach($tabData as $key => $tab)
                <li class="nav-item flex-fill text-center" role="presentation">
                    <button class="nav-link w-100 mb-0 px-0 py-2 {{ $loop->first ? 'active fw-bold shadow-sm' : 'text-dark hover-bg-light' }}" 
                            id="tab-{{ $key }}" data-bs-toggle="tab" data-bs-target="#pane-{{ $key }}" type="button" role="tab"
                            style="border-radius: 6px; font-size: 14px;">
                        <i class="bi bi-person-lines-fill me-1"></i> {{ $tab['label'] }} 
                        <span class="badge ms-1 rounded-pill">{{ $tab['data']->count() }}</span>
                    </button>
                </li>
            @endforeach
        </ul>
    </div>

    <div class="card shadow-sm border-0">
        <div class="card-header bg-white pt-3 pb-2 border-bottom d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-2">
            <h6 class="fw-bold text-dark mb-0"><i class="bi bi-card-list me-2"></i>Daftar Calon Siswa</h6>
            <form action="{{ route('admin.ppdb') }}" method="GET" class="d-flex" style="max-width: 320px; width: 100%;">
                <div class="input-group input-group-sm">
                    <input type="text" name="search" class="form-control" placeholder="Cari No. Daftar / Nama..." value="{{ request('search') }}">
                    <button class="btn btn-primary" type="submit"><i class="bi bi-search"></i></button>
                    @if(request('search'))
                        <a href="{{ route('admin.ppdb') }}" class="btn btn-outline-secondary" title="Reset Pencarian"><i class="bi bi-x-circle"></i></a>
                    @endif
                </div>
            </form>
        </div>

        <div class="card-body p-0">
            <div class="tab-content" id="ppdbTabsContent">
                @foreach($tabData as $key => $tab)
                    <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}" id="pane-{{ $key }}" role="tabpanel">
                        <div class="table-responsive">
                            <table class="table table-hover align-middle mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th class="ps-3 text-secondary" style="font-size: 12px;" width="5%">NO</th>
                                        <th class="text-secondary" style="font-size: 12px;">NO. DAFTAR</th>
                                        <th class="text-secondary" style="font-size: 12px;">TAHUN PPDB</th>
                                        <th class="text-secondary" style="font-size: 12px;">TAHUN AJARAN</th>
                                        <th class="text-secondary" style="font-size: 12px;">NAMA LENGKAP</th>
                                        <th class="text-secondary" style="font-size: 12px;">ASAL SEKOLAH</th>
                                        <th class="text-secondary" style="font-size: 12px;">TANGGAL DAFTAR</th>
                                        <th class="text-center text-secondary" style="font-size: 12px;" width="15%">STATUS</th>
                                        <th class="text-center text-secondary" style="font-size: 12px;" width="12%">AKSI</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($tab['data'] as $p)
                                    <tr>
                                        <td class="ps-3 text-muted fw-medium">
                                            {{ ($ppdbs->currentPage() - 1) * $ppdbs->perPage() + $loop->iteration }}
                                        </td>
                                        <td class="fw-bold text-primary">{{ $p->no_pendaftaran }}</td>
                                        <td>
                                            @if($p->tahunAjaran)
                                                <span class="d-block fw-bold text-dark">{{ $p->tahunAjaran->tahun_ppdb_hijriyah ?? '-' }} H</span>
                                                <small class="text-muted">{{ $p->tahunAjaran->tahun_ppdb ?? '-' }} M</small>
                                            @else
                                                <span class="text-muted">-</span>
                                            @endif
                                        </td>
                                        <td>
                                            @if($p->tahunAjaran)
                                                <span class="d-block fw-medium text-dark">{{ $p->tahunAjaran->tahun_ajaran_hijriyah ?? '-' }} H</span>
                                                <small class="text-muted">{{ $p->tahunAjaran->tahun_ajaran ?? '-' }} M</small>
                                            @else
                                                <span class="text-muted">-</span>
                                            @endif
                                        </td>
                                        <td class="fw-bold">{{ $p->nama_lengkap }} <br><small class="text-muted fw-normal">NISN: {{ $p->nisn ?? '-' }}</small></td>
                                        <td>{{ $p->asal_sekolah ?? '-' }}</td>
                                        <td>
                                            <span class="d-block fw-bold text-dark">{{ $p->tanggal_daftar_hijriyah }}</span>
                                            <small class="text-muted">{{ \Carbon\Carbon::parse($p->tanggal_daftar)->format('d M Y') }} M</small>
                                        </td>
                                        <td class="text-center">
                                            <form action="{{ route('admin.ppdb.update', $p->id) }}" method="POST" class="d-inline">
                                                @csrf
                                                @method('PUT')
                                                <input type="hidden" name="tahun_ajaran_id" value="{{ $p->tahun_ajaran_id }}">
                                                <input type="hidden" name="nama_lengkap" value="{{ $p->nama_lengkap }}">
                                                <input type="hidden" name="kelas_id" value="{{ $p->kelas_id }}">
                                                <input type="hidden" name="jenis_kelamin" value="{{ $p->jenis_kelamin }}">
                                                <input type="hidden" name="nisn" value="{{ $p->nisn }}">
                                                <input type="hidden" name="tanggal_lahir" value="{{ $p->tanggal_lahir }}">
                                                
                                                <select name="status" class="form-select form-select-sm text-center fw-bold rounded-pill shadow-sm py-1 border-0
                                                    {{ $p->status == 'Verifikasi' ? 'bg-warning text-dark' : '' }}
                                                    {{ $p->status == 'Diterima' ? 'bg-success text-white' : '' }}
                                                    {{ $p->status == 'Ditolak' ? 'bg-danger text-white' : '' }}
                                                    {{ $p->status == 'Cabut Berkas' ? 'bg-secondary text-white' : '' }}"
                                                    onchange="this.form.submit()" style="font-size: 13px; cursor: pointer; min-width: 130px;">
                                                    <option value="Verifikasi" {{ $p->status == 'Verifikasi' ? 'selected' : '' }}>🟡 Verifikasi</option>
                                                    <option value="Diterima" {{ $p->status == 'Diterima' ? 'selected' : '' }}>🟢 Diterima</option>
                                                    <option value="Ditolak" {{ $p->status == 'Ditolak' ? 'selected' : '' }}>🔴 Ditolak</option>
                                                    <option value="Cabut Berkas" {{ $p->status == 'Cabut Berkas' ? 'selected' : '' }}>⚪ Cabut Berkas</option>
                                                </select>
                                            </form>
                                        </td>
                                        <td class="text-center">
                                            <div class="d-flex justify-content-center gap-1">
                                                <a href="{{ route('admin.ppdb.edit', $p->id) }}" class="btn btn-sm btn-outline-primary" title="Edit Data">
                                                    <i class="bi bi-pencil-square"></i>
                                                </a>
                                                <button type="button" class="btn btn-sm btn-outline-danger" title="Hapus Data" onclick="confirmDelete({{ $p->id }}, '{{ addslashes($p->nama_lengkap) }}')">
                                                    <i class="bi bi-trash"></i>
                                                </button>
                                                <form id="delete-form-{{ $p->id }}" action="{{ route('admin.ppdb.destroy', $p->id) }}" method="POST" class="d-none">
                                                    @csrf
                                                    @method('DELETE')
                                                </form>
                                            </div>
                                        </td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="9" class="text-center py-5 text-muted">
                                            <i class="bi bi-person-x fs-1 d-block mb-2 text-black-50"></i>
                                            Belum ada data pendaftar PPDB untuk kategori ini.
                                        </td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        <div class="card-footer bg-white border-top py-3">
            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                <small class="text-muted fw-medium">
                    Menampilkan {{ $ppdbs->firstItem() ?? 0 }} - {{ $ppdbs->lastItem() ?? 0 }} dari {{ $ppdbs->total() }} data pendaftar
                </small>
                <div>
                    {{ $ppdbs->links('pagination::bootstrap-5') }}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    function confirmDelete(id, nama) {
        Swal.fire({
            title: 'Hapus Pendaftar?',
            text: "Data registrasi atas nama '" + nama + "' akan dihapus permanen!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Ya, Hapus!',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('delete-form-' + id).submit();
            }
        });
    }

    document.addEventListener("DOMContentLoaded", function() {
        @if(session('success'))
            Swal.fire({ icon: 'success', title: 'Berhasil!', text: '{{ session("success") }}', showConfirmButton: false, timer: 2000 });
        @endif
    });
</script>
@endpush