@extends('adminlte::page')

@section('title', 'Data Pendaftar | Smart Cendekia')

@section('content_header')
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center pt-3 pb-2">
        <div>
            <h1 class="text-dark font-weight-bold mb-1" style="font-family: 'Inter', sans-serif; font-size: 1.5rem;">
                Data Pendaftar
            </h1>
            <p class="text-muted small mb-0 font-weight-500">
                Kelola calon santri, verifikasi berkas, dan migrasi data kelulusan berdasarkan Standar Nasional.
            </p>
        </div>
        <div class="mt-3 mt-md-0 d-flex align-items-center">
            <ol class="breadcrumb bg-transparent p-0 m-0 d-none d-md-flex">
                <li class="breadcrumb-item"><a href="{{ route('dashboard') }}" class="text-muted">Home</a></li>
                <li class="breadcrumb-item active text-purple font-weight-bold">Pendaftar</li>
            </ol>
        </div>
    </div>
@stop

@section('content')
<div class="container-fluid px-0">
    
    {{-- Flash Messages --}}
    @if(session('success'))
        <div class="alert bg-light-success text-success border-0 shadow-sm mb-4 rounded-lg fade show d-flex align-items-center" role="alert">
            <i class="fas fa-check-circle mr-3 fa-lg"></i>
            <div>
                <h6 class="font-weight-bold mb-0">Berhasil!</h6>
                <small>{{ session('success') }}</small>
            </div>
            <button type="button" class="close ml-auto" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    @endif

    {{-- FILTER CARD --}}
    <div class="card border-0 shadow-sm mb-4" style="border-radius: 20px;">
        <div class="card-body p-4">
            <form action="{{ route('admin.ppdb.pendaftar') }}" method="GET">
                <div class="row align-items-end">
                    
                    {{-- Filter Gelombang --}}
                    <div class="col-md-2 mb-3 mb-md-0">
                        <label class="text-muted text-xs font-weight-bold text-uppercase mb-1">Gelombang</label>
                        <select name="gelombang_id" class="form-control form-control-solid select2-bs4" onchange="this.form.submit()">
                            <option value="">-- Semua --</option>
                            @foreach($gelombangs as $g)
                                <option value="{{ $g->id }}" {{ request('gelombang_id') == $g->id ? 'selected' : '' }}>{{ $g->nama_gelombang }}</option>
                            @endforeach
                        </select>
                    </div>

                    {{-- [BARU] Filter Jalur Pendaftaran --}}
                    <div class="col-md-2 mb-3 mb-md-0">
                        <label class="text-muted text-xs font-weight-bold text-uppercase mb-1">Jalur Daftar</label>
                        <select name="jalur_pendaftaran" class="form-control form-control-solid select2-bs4" onchange="this.form.submit()">
                            <option value="">-- Semua --</option>
                            <option value="zonasi" {{ request('jalur_pendaftaran') == 'zonasi' ? 'selected' : '' }}>Zonasi</option>
                            <option value="afirmasi" {{ request('jalur_pendaftaran') == 'afirmasi' ? 'selected' : '' }}>Afirmasi</option>
                            <option value="prestasi" {{ request('jalur_pendaftaran') == 'prestasi' ? 'selected' : '' }}>Prestasi</option>
                            <option value="perpindahan" {{ request('jalur_pendaftaran') == 'perpindahan' ? 'selected' : '' }}>Perpindahan Tugas</option>
                        </select>
                    </div>
                    
                    {{-- Filter Verifikasi --}}
                    <div class="col-md-2 mb-3 mb-md-0">
                        <label class="text-muted text-xs font-weight-bold text-uppercase mb-1">Verifikasi</label>
                        <select name="status_verifikasi" class="form-control form-control-solid select2-bs4" onchange="this.form.submit()">
                            <option value="">-- Semua --</option>
                            <option value="pending" {{ request('status_verifikasi') == 'pending' ? 'selected' : '' }}>Menunggu Verifikasi</option>
                            <option value="verified" {{ request('status_verifikasi') == 'verified' ? 'selected' : '' }}>Terverifikasi</option>
                            <option value="rejected" {{ request('status_verifikasi') == 'rejected' ? 'selected' : '' }}>Ditolak</option>
                        </select>
                    </div>
                    
                    {{-- Filter Kelulusan --}}
                    <div class="col-md-2 mb-3 mb-md-0">
                        <label class="text-muted text-xs font-weight-bold text-uppercase mb-1">Kelulusan</label>
                        <select name="status_kelulusan" class="form-control form-control-solid select2-bs4" onchange="this.form.submit()">
                            <option value="">-- Semua --</option>
                            <option value="lulus" {{ request('status_kelulusan') == 'lulus' ? 'selected' : '' }}>Lulus</option>
                            <option value="tidak_lulus" {{ request('status_kelulusan') == 'tidak_lulus' ? 'selected' : '' }}>Tidak Lulus</option>
                            <option value="cadangan" {{ request('status_kelulusan') == 'cadangan' ? 'selected' : '' }}>Cadangan</option>
                        </select>
                    </div>
                    
                    {{-- Pencarian --}}
                    <div class="col-md-4">
                        <label class="text-muted text-xs font-weight-bold text-uppercase mb-1">Pencarian NIK/Nama</label>
                        <div class="input-group">
                            <input type="text" name="search" class="form-control form-control-solid" placeholder="Ketik nama atau NIK..." value="{{ request('search') }}">
                            <div class="input-group-append">
                                <button type="submit" class="btn btn-apex-purple shadow-sm"><i class="fas fa-search"></i> Cari</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    {{-- TABEL DATA --}}
    <div class="card border-0 shadow-sm" style="border-radius: 20px; overflow: hidden;">
        <div class="card-header bg-white border-0 py-4 px-4 d-flex justify-content-between align-items-center">
            <h6 class="font-weight-bold text-dark mb-0">
                <i class="fas fa-users text-purple mr-2"></i> Daftar Calon Santri
            </h6>
            <span class="badge bg-light-purple text-purple px-3 py-2 rounded-pill font-weight-bold">
                Total: {{ $pendahtars->total() }} Data
            </span>
        </div>
        
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0 w-100">
                    <thead class="bg-light">
                        <tr class="text-uppercase text-muted text-xs font-weight-bold" style="letter-spacing: 0.5px;">
                            <th class="pl-4 py-3 border-0">Informasi Santri</th>
                            <th class="border-0">Jalur & Asal</th>
                            <th class="border-0">Tujuan</th>
                            <th class="text-center border-0">Verifikasi</th>
                            <th class="text-center border-0">Status Akhir</th>
                            <th class="text-center pr-4 border-0">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($pendahtars as $siswa)
                        <tr>
                            {{-- KOLOM 1: INFO SANTRI --}}
                            <td class="pl-4 py-3">
                                <div class="d-flex align-items-center">
                                    <div class="symbol symbol-40px mr-3">
                                        <div class="symbol-label bg-light-primary text-primary font-weight-bold rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                            {{ substr($siswa->nama_lengkap, 0, 1) }}
                                        </div>
                                    </div>
                                    <div>
                                        <span class="text-dark font-weight-bold d-block text-sm mb-1">
                                            {{ Str::limit($siswa->nama_lengkap, 25) }}
                                            @if($siswa->is_migrated)
                                                <i class="fas fa-check-circle text-success ml-1" title="Sudah Masuk Data Siswa"></i>
                                            @endif
                                        </span>
                                        <span class="text-muted d-block text-xs font-monospace"><i class="fas fa-id-card mr-1"></i> {{ $siswa->nik }}</span>
                                    </div>
                                </div>
                            </td>

                            {{-- KOLOM 2: JALUR & ASAL SEKOLAH --}}
                            <td>
                                {{-- [UPDATE] Menampilkan Badge Jalur Nasional --}}
                                @php
                                    $jalur = strtolower($siswa->jalur_pendaftaran);
                                    $badgeClass = 'bg-light-secondary text-muted';
                                    if($jalur == 'zonasi') $badgeClass = 'bg-light-info text-info';
                                    elseif($jalur == 'prestasi') $badgeClass = 'bg-light-warning text-warning';
                                    elseif($jalur == 'afirmasi') $badgeClass = 'bg-light-success text-success';
                                    elseif($jalur == 'perpindahan') $badgeClass = 'bg-light-primary text-primary';
                                @endphp
                                
                                <span class="badge {{ $badgeClass }} px-2 py-1 rounded-pill mb-1 d-inline-block text-uppercase" style="font-size: 0.65rem;">
                                    <i class="fas fa-route mr-1"></i> {{ $siswa->jalur_pendaftaran ?? 'UMUM' }}
                                </span>
                                
                                {{-- Jika Jalur Zonasi, tampilkan jaraknya --}}
                                @if($jalur == 'zonasi' && $siswa->jarak_ke_sekolah)
                                    <span class="text-xs text-muted d-inline-block ml-1">({{ $siswa->jarak_ke_sekolah }} KM)</span>
                                @endif

                                <span class="text-dark d-block text-xs font-weight-bold mt-1"><i class="fas fa-school text-muted mr-1"></i> {{ Str::limit($siswa->asal_sekolah, 20) }}</span>
                            </td>

                            {{-- KOLOM 3: TUJUAN SEKOLAH --}}
                            <td>
                                @if($siswa->sekolah)
                                    <span class="badge bg-light-primary text-primary px-2 py-1 rounded-pill font-weight-bold" style="font-size: 0.7rem;">
                                        {{ $siswa->sekolah->nama_sekolah }}
                                    </span>
                                @else
                                    <span class="text-muted font-italic text-xs">-</span>
                                @endif
                                <span class="text-muted d-block text-xs mt-1">{{ $siswa->wave->nama_gelombang ?? '-' }}</span>
                            </td>

                            {{-- KOLOM 4: VERIFIKASI --}}
                            <td class="text-center">
                                @if($siswa->status_verifikasi == 'verified')
                                    <span class="badge bg-light-success text-success px-2 py-1 rounded-pill font-weight-bold border-0" style="font-size: 0.7rem;">
                                        <i class="fas fa-check-circle mr-1"></i> Valid
                                    </span>
                                @elseif($siswa->status_verifikasi == 'rejected')
                                    <span class="badge bg-light-danger text-danger px-2 py-1 rounded-pill font-weight-bold border-0" style="font-size: 0.7rem;">
                                        <i class="fas fa-times-circle mr-1"></i> Ditolak
                                    </span>
                                @else
                                    <span class="badge bg-light-warning text-warning px-2 py-1 rounded-pill font-weight-bold border-0" style="font-size: 0.7rem;">
                                        <i class="fas fa-clock mr-1"></i> Pending
                                    </span>
                                @endif
                            </td>

                            {{-- KOLOM 5: KELULUSAN --}}
                            <td class="text-center">
                                @if($siswa->status_kelulusan == 'lulus')
                                    <span class="badge bg-success px-3 py-1 rounded-pill font-weight-bold shadow-sm" style="font-size: 0.7rem;">LULUS</span>
                                @elseif($siswa->status_kelulusan == 'tidak_lulus')
                                    <span class="badge bg-danger px-3 py-1 rounded-pill font-weight-bold shadow-sm" style="font-size: 0.7rem;">GAGAL</span>
                                @elseif($siswa->status_kelulusan == 'cadangan')
                                    <span class="badge bg-warning px-3 py-1 rounded-pill font-weight-bold shadow-sm text-white" style="font-size: 0.7rem;">CADANGAN</span>
                                @else
                                    <span class="text-muted font-italic text-xs">Proses</span>
                                @endif
                            </td>

                            {{-- KOLOM 6: AKSI --}}
                            <td class="text-center pr-4">
                                <div class="btn-group">
                                    {{-- TOMBOL VERIFIKASI / DETAIL --}}
                                    <a href="{{ route('admin.ppdb.show', $siswa->id) }}" 
                                       class="btn btn-icon btn-light-info text-info btn-sm rounded-circle shadow-sm hover-lift mr-1" 
                                       title="Lihat Berkas / Verifikasi">
                                        <i class="fas fa-eye"></i>
                                    </a>

                                    {{-- TOMBOL MIGRASI (Hanya jika Lulus & Belum Migrasi) --}}
                                    @if($siswa->status_kelulusan == 'lulus' && !$siswa->is_migrated)
                                        <button type="button" 
                                                class="btn btn-icon btn-light-success text-success btn-sm rounded-circle shadow-sm hover-lift mr-1" 
                                                data-toggle="modal" 
                                                data-target="#modalLulus{{ $siswa->id }}"
                                                title="Migrasi ke Siswa">
                                            <i class="fas fa-user-plus"></i>
                                        </button>
                                    @elseif($siswa->is_migrated)
                                        <button class="btn btn-icon btn-light-secondary text-muted btn-sm rounded-circle shadow-sm mr-1" disabled title="Sudah Terdaftar">
                                            <i class="fas fa-check"></i>
                                        </button>
                                    @endif

                                    {{-- TOMBOL HAPUS --}}
                                    <form action="{{ route('admin.ppdb.pendaftar.destroy', $siswa->id) }}" method="POST" class="d-inline" onsubmit="return confirm('PERINGATAN: Yakin ingin menghapus permanen data {{ $siswa->nama_lengkap }} beserta semua dokumennya?');">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="btn btn-icon btn-light-danger text-danger btn-sm rounded-circle shadow-sm hover-lift" title="Hapus Permanen">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </form>
                                </div>

                                {{-- MODAL MIGRASI --}}
                                @if($siswa->status_kelulusan == 'lulus' && !$siswa->is_migrated)
                                <div class="modal fade text-left" id="modalLulus{{ $siswa->id }}" tabindex="-1" role="dialog">
                                    <div class="modal-dialog modal-dialog-centered" role="document">
                                        <div class="modal-content border-0 shadow-lg" style="border-radius: 20px;">
                                            <div class="modal-header bg-success text-white border-0 pt-4 pb-3 px-4" style="border-radius: 20px 20px 0 0;">
                                                <h6 class="modal-title font-weight-bold"><i class="fas fa-user-graduate mr-2"></i> Daftarkan Siswa Baru</h6>
                                                <button type="button" class="close text-white opacity-75" data-dismiss="modal" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                            <form action="{{ route('admin.ppdb.tetapkan-lulus', $siswa->id) }}" method="POST">
                                                @csrf
                                                <div class="modal-body p-4">
                                                    <div class="alert bg-light-primary border-0 rounded-lg d-flex align-items-start mb-4 p-3">
                                                        <i class="fas fa-info-circle text-primary mt-1 mr-3 fa-lg"></i>
                                                        <div class="text-dark small" style="line-height: 1.5;">
                                                            Anda akan memindahkan data <strong>{{ $siswa->nama_lengkap }}</strong> ke Data Induk Siswa.<br>
                                                            Status akun akan berubah otomatis menjadi <strong>Akun Siswa</strong>.
                                                        </div>
                                                    </div>

                                                    <div class="form-group mb-3">
                                                        <label class="text-xs font-weight-bold text-uppercase text-muted">NIS Baru <span class="text-danger">*</span></label>
                                                        <input type="text" name="nis_baru" class="form-control form-control-solid" required placeholder="Contoh: 2024001">
                                                        <small class="text-muted d-block mt-1">NISN: {{ $siswa->nisn }} (Akan dicopy otomatis)</small>
                                                    </div>

                                                    <div class="form-group mb-0">
                                                        <label class="text-xs font-weight-bold text-uppercase text-muted">Masuk ke Kelas <span class="text-danger">*</span></label>
                                                        <select name="kelas_id" class="form-control form-control-solid select2-bs4" required>
                                                            <option value="">-- Pilih Kelas --</option>
                                                            @foreach(\App\Models\Kelas::all() as $kelas)
                                                                <option value="{{ $kelas->id }}">{{ $kelas->nama_kelas }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="modal-footer bg-white border-0 pt-0 pb-4 px-4">
                                                    <button type="button" class="btn btn-light text-muted font-weight-bold rounded-pill px-4" data-dismiss="modal">Batal</button>
                                                    <button type="submit" class="btn btn-success font-weight-bold rounded-pill px-4 shadow-sm hover-lift">
                                                        <i class="fas fa-save mr-2"></i> Simpan & Migrasi
                                                    </button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                                @endif
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="6" class="text-center py-5">
                                <div class="d-flex flex-column align-items-center justify-content-center">
                                    <div class="bg-light rounded-circle d-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                                        <i class="fas fa-inbox fa-2x text-muted opacity-50"></i>
                                    </div>
                                    <h6 class="text-muted font-weight-bold">Belum ada data pendaftar</h6>
                                    <p class="text-muted small mb-0">Silakan cek filter pencarian Anda atau tunggu pendaftar baru.</p>
                                </div>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        
        <div class="card-footer bg-white border-0 py-4 d-flex justify-content-center">
            {{ $pendahtars->withQueryString()->links('pagination::bootstrap-4') }}
        </div>
    </div>
</div>
@stop

@section('css')
<style>
    /* UTILITIES TEMA APEX */
    .btn-apex-purple {
        background: linear-gradient(90deg, #2E1451 0%, #5B247A 100%);
        color: white; border: none; transition: all 0.3s ease;
    }
    .btn-apex-purple:hover {
        background: linear-gradient(90deg, #5B247A 0%, #2E1451 100%);
        color: white; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(91, 36, 122, 0.3);
    }
    
    /* Colors */
    .text-purple { color: #5B247A !important; }
    .bg-light-purple { background-color: rgba(91, 36, 122, 0.1) !important; }
    .bg-light-primary { background-color: #E1F0FF !important; }
    .text-primary { color: #3699FF !important; }
    .bg-light-success { background-color: #E8FFF3 !important; }
    .text-success { color: #50CD89 !important; }
    .bg-light-danger { background-color: #FFE2E5 !important; }
    .text-danger { color: #F64E60 !important; }
    .bg-light-warning { background-color: #FFF4DE !important; }
    .text-warning { color: #FFA800 !important; }
    .bg-light-info { background-color: #E1F0FF !important; }
    .text-info { color: #00bcd4 !important; }
    .bg-light-secondary { background-color: #F3F6F9 !important; }

    /* Form Inputs */
    .form-control-solid {
        background-color: #F5F8FA; border-color: #F5F8FA; color: #5E6278; border-radius: 10px; height: 40px; font-size: 0.9rem;
    }
    .form-control-solid:focus { background-color: #EEF3F7; border-color: #EEF3F7; box-shadow: none; }

    /* Select2 Fix */
    .select2-container--bootstrap4 .select2-selection--single {
        background-color: #F5F8FA !important; border: 1px solid #F5F8FA !important; height: 40px !important;
        border-radius: 10px !important; padding-top: 6px;
    }

    /* Buttons */
    .btn-icon {
        width: 32px; height: 32px; padding: 0;
        display: inline-flex; align-items: center; justify-content: center;
    }
    .btn-light-info { background-color: #E1F0FF; color: #00bcd4; border: none; }
    .btn-light-success { background-color: #E8FFF3; color: #50CD89; border: none; }
    .btn-light-secondary { background-color: #F3F6F9; color: #A1A5B7; border: none; }
    .btn-light-danger { background-color: #FFE2E5; color: #F64E60; border: none; }

    /* Hover Lift */
    .hover-lift:hover { transform: translateY(-2px); transition: all 0.2s; }
    
    /* Font */
    .font-monospace { font-family: 'Consolas', monospace; }
</style>
@stop

@section('js')
<script>
    $(document).ready(function() {
        // Init Select2
        $('.select2-bs4').select2({
            theme: 'bootstrap4',
            width: '100%'
        });
    });
</script>
@stop