@extends('adminlte::page')

@section('title', 'Ranking Zonasi | 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;">
                <i class="fas fa-map-marked-alt text-purple mr-2"></i> Klasemen Jalur Zonasi
            </h1>
            <p class="text-muted small mb-0 font-weight-500">
                Peringkat pendaftar diurutkan otomatis berdasarkan jarak garis lurus (Haversine) terdekat ke sekolah.
            </p>
        </div>
        <div class="mt-3 mt-md-0">
            <a href="{{ route('admin.ppdb.export') }}" class="btn btn-apex-purple shadow-sm px-4 rounded-pill font-weight-bold">
                <i class="fas fa-file-excel mr-2"></i> Export Data Pendaftar
            </a>
        </div>
    </div>
@stop

@section('content')
<div class="container-fluid px-0">
    
    {{-- CARD UTAMA --}}
    <div class="card border-0 shadow-sm mb-5" style="border-radius: 20px; overflow: hidden;">
        
        {{-- HEADER & FILTER --}}
        <div class="card-header bg-white border-bottom-0 py-4 px-4 d-flex flex-column flex-md-row justify-content-between align-items-center">
            <h3 class="card-title font-weight-bold text-dark mb-3 mb-md-0">Daftar Pendaftar Zonasi</h3>
            
            <div class="card-tools d-flex align-items-center bg-light p-2" style="border-radius: 15px;">
                <span class="text-muted font-weight-bold text-xs text-uppercase mr-3 ml-2">
                    <i class="fas fa-filter mr-1"></i> Filter Unit:
                </span>
                <select name="sekolah_id" class="form-control form-control-solid font-weight-bold text-purple" 
                        style="width: 250px; border-radius: 10px; cursor: pointer;"
                        onchange="filterRanking(this.value)">
                    <option value="">-- Semua Unit Sekolah --</option>
                    @foreach($sekolahs as $sek)
                        <option value="{{ $sek->id }}" {{ $sekolah_id == $sek->id ? 'selected' : '' }}>
                            {{ $sek->nama_sekolah }}
                        </option>
                    @endforeach
                </select>
            </div>
        </div>

        {{-- TABEL DATA --}}
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle w-100 mb-0">
                    <thead class="bg-light">
                        <tr class="text-uppercase text-muted text-[11px] font-weight-bold" style="letter-spacing: 0.5px;">
                            <th width="8%" class="pl-4 py-3 text-center">Rank</th>
                            <th width="25%" class="py-3">Calon Santri</th>
                            <th width="20%" class="py-3">Lembaga Tujuan</th>
                            <th width="15%" class="py-3 text-center">Koordinat</th>
                            <th width="15%" class="py-3 text-center">Jarak (KM)</th>
                            <th width="17%" class="py-3 text-center">Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($pendaftarZonasi as $index => $pendaftar)
                            <tr style="border-bottom: 1px solid #f3f6f9;">
                                {{-- RANK COLUMN --}}
                                <td class="text-center align-middle pl-4">
                                    @if($index == 0)
                                        <div class="d-inline-flex align-items-center justify-content-center bg-light-warning text-warning rounded-circle font-weight-bold shadow-sm" style="width: 35px; height: 35px; font-size: 14px;">
                                            <i class="fas fa-trophy"></i>
                                        </div>
                                    @elseif($index < 3)
                                        <div class="d-inline-flex align-items-center justify-content-center bg-light-primary text-primary rounded-circle font-weight-bold shadow-sm" style="width: 35px; height: 35px; font-size: 14px;">
                                            {{ $index + 1 }}
                                        </div>
                                    @else
                                        <div class="d-inline-flex align-items-center justify-content-center bg-light text-muted rounded-circle font-weight-bold" style="width: 35px; height: 35px; font-size: 14px;">
                                            {{ $index + 1 }}
                                        </div>
                                    @endif
                                </td>
                                
                                {{-- NAMA & NIK --}}
                                <td class="py-3 align-middle">
                                    <div class="d-flex align-items-center">
                                        <div class="bg-light-purple text-purple rounded-lg d-flex align-items-center justify-content-center font-weight-bold mr-3" style="width: 45px; height: 45px; font-size: 16px;">
                                            {{ strtoupper(substr($pendaftar->nama_lengkap, 0, 1)) }}
                                        </div>
                                        <div>
                                            <span class="d-block font-weight-bold text-dark mb-1" style="font-size: 14px;">{{ $pendaftar->nama_lengkap }}</span>
                                            <div class="d-flex align-items-center text-muted" style="font-size: 11px;">
                                                <i class="fas fa-id-card mr-1 text-gray-400"></i> {{ $pendaftar->nik }}
                                                <span class="mx-2 text-gray-300">|</span>
                                                <span class="text-purple font-weight-bold">#{{ $pendaftar->no_daftar }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </td>

                                {{-- SEKOLAH TUJUAN --}}
                                <td class="align-middle font-weight-500 text-dark">
                                    <i class="fas fa-university text-gray-400 mr-2"></i>
                                    {{ $pendaftar->sekolah ? $pendaftar->sekolah->nama_sekolah : '-' }}
                                </td>

                                {{-- KOORDINAT --}}
                                <td class="text-center align-middle text-muted font-weight-500" style="font-size: 11px; font-family: monospace;">
                                    <div class="bg-light rounded px-2 py-1 d-inline-block">
                                        {{ $pendaftar->latitude ?? '-' }}<br>
                                        {{ $pendaftar->longitude ?? '-' }}
                                    </div>
                                </td>

                                {{-- JARAK (KM) --}}
                                <td class="text-center align-middle">
                                    @if($pendaftar->jarak_ke_sekolah)
                                        <span class="badge bg-light-danger text-danger px-3 py-2 rounded-pill font-weight-bold" style="font-size: 12px;">
                                            <i class="fas fa-location-arrow mr-1"></i> {{ $pendaftar->jarak_ke_sekolah }} KM
                                        </span>
                                    @else
                                        <span class="badge bg-light text-muted px-3 py-2 rounded-pill">
                                            Tidak Terbaca
                                        </span>
                                    @endif
                                </td>

                                {{-- STATUS --}}
                                <td class="text-center align-middle pr-4">
                                    @if($pendaftar->status_verifikasi == 'verified')
                                        <span class="badge bg-light-success text-success px-3 py-1.5 rounded-pill font-weight-bold border border-success">Terverifikasi</span>
                                    @elseif($pendaftar->status_verifikasi == 'pending')
                                        <span class="badge bg-light-warning text-warning px-3 py-1.5 rounded-pill font-weight-bold border border-warning">Menunggu</span>
                                    @else
                                        <span class="badge bg-light-danger text-danger px-3 py-1.5 rounded-pill font-weight-bold border border-danger">Ditolak</span>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="text-center py-5">
                                    <div class="d-inline-flex align-items-center justify-content-center bg-light-purple text-purple rounded-circle mb-3" style="width: 80px; height: 80px;">
                                        <i class="fas fa-folder-open fa-2x"></i>
                                    </div>
                                    <h5 class="font-weight-bold text-dark">Belum Ada Pendaftar</h5>
                                    <p class="text-muted">Tidak ada calon santri yang mendaftar melalui jalur zonasi di unit ini.</p>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            
            {{-- FOOTER INFO --}}
            <div class="bg-light px-4 py-3 border-top d-flex align-items-center text-muted" style="font-size: 11px;">
                <i class="fas fa-info-circle text-purple mr-2"></i> 
                <strong>Catatan:</strong> Jarak dihitung otomatis menggunakan sistem koordinat GPS (Haversine Formula). Semakin kecil nilai KM, semakin tinggi peringkat calon santri.
            </div>
        </div>
    </div>
</div>
@stop

@section('css')
<style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
    body { font-family: 'Inter', sans-serif; background-color: #F3F6F9; }
    
    /* GRADIENT BUTTON */
    .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); 
    }

    /* SOFT COLORS */
    .text-purple { color: #5B247A !important; }
    .bg-light-purple { background-color: #F8F5FF !important; }
    
    .bg-light-success { background-color: #E8FFF3 !important; }
    .text-success { color: #18C47A !important; }
    
    .bg-light-warning { background-color: #FFF8DD !important; }
    .text-warning { color: #F6C000 !important; }
    
    .bg-light-danger { background-color: #FFE2E5 !important; }
    .text-danger { color: #F64E60 !important; }

    .bg-light-primary { background-color: #E1F0FF !important; }
    .text-primary { color: #3699FF !important; }

    /* FORM SOLID */
    .form-control-solid {
        background-color: #fff; border: 1px solid #ebedf3; color: #5E6278;
        transition: all 0.2s ease;
    }
    .form-control-solid:focus { background-color: #EEF3F7; border-color: #5B247A; box-shadow: none; }

    .table-hover tbody tr:hover { background-color: rgba(91, 36, 122, 0.02); }
    .font-weight-500 { font-weight: 500; }
    .text-\[11px\] { font-size: 11px; }
</style>
@stop

@section('js')
<script>
    // Logika Filter Anti-404
    function filterRanking(sekolahId) {
        // Ambil route dasar (tanpa ID)
        let baseUrl = "{{ url('admin/ppdb/manage/ranking-zonasi') }}";
        
        // Jika ada sekolah yang dipilih, gabungkan URL-nya
        if (sekolahId) {
            window.location.href = baseUrl + '/' + sekolahId;
        } else {
            // Jika memilih "Semua Unit", kembalikan ke URL dasar
            window.location.href = baseUrl;
        }
    }
</script>
@stop