@extends('layouts.app')

@section('title', 'Kelola Sekolah - Superadmin')

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0">Kelola Sekolah</h1>
            <p class="text-muted small mt-1">Kelola data sekolah dan institusi pendidikan</p>
        </div>
        <div class="btn-group" role="group">
            <a href="{{ route('superadmin.schools.export') }}" class="btn btn-success">
                <i class="bi bi-download"></i> Ekspor Excel
            </a>
            <button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#importModal">
                <i class="bi bi-upload"></i> Impor Excel
            </button>
            <a href="{{ route('superadmin.schools.create') }}" class="btn btn-primary">
                <i class="bi bi-plus-circle"></i> Tambah Sekolah
            </a>
        </div>
    </div>

    @if (session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="bi bi-check-circle"></i> {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    @if (session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="bi bi-exclamation-triangle"></i> {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    @if (session('import_errors'))
        <div class="alert alert-warning alert-dismissible fade show" role="alert">
            <h6 class="alert-heading"><i class="bi bi-exclamation-triangle"></i> Detail Error Import:</h6>
            <ul class="mb-0">
                @foreach(session('import_errors') as $error)
                    <li><small>{{ $error }}</small></li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-md-3 col-sm-6 mb-3">
            <div class="card stat-card border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h6 class="card-title text-muted mb-1">Total Sekolah</h6>
                            <h3 class="mb-0">{{ $schools->count() }}</h3>
                            <small class="text-muted"><i class="bi bi-building"></i> Institusi</small>
                        </div>
                        <div class="text-primary opacity-50" style="font-size: 2rem;">
                            <i class="bi bi-building"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6 mb-3">
            <div class="card stat-card success border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h6 class="card-title text-muted mb-1">Sekolah Aktif</h6>
                            <h3 class="mb-0">{{ $schools->where('is_active', true)->count() }}</h3>
                            <small class="text-success"><i class="bi bi-check-circle"></i> Beroperasi</small>
                        </div>
                        <div class="text-success opacity-50" style="font-size: 2rem;">
                            <i class="bi bi-check-circle"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6 mb-3">
            <div class="card stat-card info border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h6 class="card-title text-muted mb-1">Sekolah Negeri</h6>
                            <h3 class="mb-0">{{ $schools->where('status', 'Negeri')->count() }}</h3>
                            <small class="text-info"><i class="bi bi-bank"></i> Pemerintah</small>
                        </div>
                        <div class="text-info opacity-50" style="font-size: 2rem;">
                            <i class="bi bi-bank"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6 mb-3">
            <div class="card stat-card warning border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h6 class="card-title text-muted mb-1">Sekolah Swasta</h6>
                            <h3 class="mb-0">{{ $schools->where('status', 'Swasta')->count() }}</h3>
                            <small class="text-warning"><i class="bi bi-briefcase"></i> Privat</small>
                        </div>
                        <div class="text-warning opacity-50" style="font-size: 2rem;">
                            <i class="bi bi-briefcase"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="card mb-3 border-0 shadow-sm">
        <div class="card-body">
            <form method="GET" action="{{ route('superadmin.schools.index') }}" class="row g-3">
                <div class="col-md-3">
                    <label class="form-label small text-muted">Cari Sekolah</label>
                    <input type="text" class="form-control" name="search" placeholder="Nama atau NPSN..." value="{{ request('search') }}">
                </div>
                <div class="col-md-2">
                    <label class="form-label small text-muted">Jenjang</label>
                    <select class="form-select" name="level">
                        <option value="">Semua</option>
                        <option value="PAUD" {{ request('level') == 'PAUD' ? 'selected' : '' }}>PAUD</option>
                        <option value="SD" {{ request('level') == 'SD' ? 'selected' : '' }}>SD</option>
                        <option value="SMP" {{ request('level') == 'SMP' ? 'selected' : '' }}>SMP</option>
                        <option value="SMA" {{ request('level') == 'SMA' ? 'selected' : '' }}>SMA</option>
                        <option value="SMK" {{ request('level') == 'SMK' ? 'selected' : '' }}>SMK</option>
                        <option value="SLB" {{ request('level') == 'SLB' ? 'selected' : '' }}>SLB</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label small text-muted">Status</label>
                    <select class="form-select" name="status">
                        <option value="">Semua</option>
                        <option value="Negeri" {{ request('status') == 'Negeri' ? 'selected' : '' }}>Negeri</option>
                        <option value="Swasta" {{ request('status') == 'Swasta' ? 'selected' : '' }}>Swasta</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label small text-muted">KCD</label>
                    <select class="form-select" name="kcd_id">
                        <option value="">Semua KCD</option>
                        @foreach(\App\Models\Kcd::orderBy('name')->get() as $kcd)
                            <option value="{{ $kcd->id }}" {{ request('kcd_id') == $kcd->id ? 'selected' : '' }}>{{ $kcd->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="bi bi-search"></i> Filter
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Data Table -->
    <div class="card border-0 shadow-sm">
        <div class="card-header bg-white border-bottom d-flex justify-content-between align-items-center">
            <h5 class="mb-0"><i class="bi bi-list-ul"></i> Daftar Sekolah</h5>
            <small class="text-muted">Total: {{ $schools->count() }} sekolah</small>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead class="table-light">
                        <tr>
                            <th style="width: 5%">No</th>
                            <th style="width: 10%">NPSN</th>
                            <th style="width: 25%">Nama Sekolah</th>
                            <th style="width: 8%">Jenjang</th>
                            <th style="width: 8%">Status</th>
                            <th style="width: 15%">KCD</th>
                            <th style="width: 12%">Kepala Sekolah</th>
                            <th style="width: 7%">Active</th>
                            <th style="width: 10%">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($schools as $index => $school)
                        <tr>
                            <td>{{ $index + 1 }}</td>
                            <td><code>{{ $school->npsn }}</code></td>
                            <td>
                                <strong>{{ $school->name }}</strong>
                                @if($school->email)
                                    <br><small class="text-muted"><i class="bi bi-envelope"></i> {{ $school->email }}</small>
                                @endif
                            </td>
                            <td>
                                <span class="badge bg-{{ 
                                    $school->level == 'PAUD' ? 'info' : 
                                    ($school->level == 'SD' ? 'primary' : 
                                    ($school->level == 'SMP' ? 'success' : 
                                    ($school->level == 'SMA' ? 'warning' : 
                                    ($school->level == 'SMK' ? 'danger' : 'secondary')))) 
                                }}">
                                    {{ $school->level }}
                                </span>
                            </td>
                            <td>
                                <span class="badge bg-{{ $school->status == 'Negeri' ? 'success' : 'warning' }}">
                                    {{ $school->status }}
                                </span>
                            </td>
                            <td>
                                <small>{{ $school->kcd->name ?? '-' }}</small>
                            </td>
                            <td>
                                <small>{{ $school->principal_name ?? '-' }}</small>
                            </td>
                            <td>
                                <form action="{{ route('superadmin.schools.toggle-status', $school->id) }}" method="POST" class="d-inline">
                                    @csrf
                                    <button type="submit" class="btn btn-sm btn-{{ $school->is_active ? 'success' : 'secondary' }}" 
                                            onclick="return confirm('Ubah status sekolah?')"
                                            title="{{ $school->is_active ? 'Aktif - Klik untuk nonaktifkan' : 'Nonaktif - Klik untuk aktifkan' }}">
                                        <i class="bi bi-{{ $school->is_active ? 'check-circle' : 'x-circle' }}"></i>
                                    </button>
                                </form>
                            </td>
                            <td>
                                <div class="btn-group btn-group-sm" role="group">
                                    <a href="{{ route('superadmin.schools.edit', $school->id) }}" 
                                       class="btn btn-outline-primary" title="Edit">
                                        <i class="bi bi-pencil"></i>
                                    </a>
                                    <button type="button" class="btn btn-outline-danger" 
                                            onclick="confirmDelete({{ $school->id }}, '{{ $school->name }}')" 
                                            title="Hapus">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="9" class="text-center text-muted py-5">
                                <i class="bi bi-inbox" style="font-size: 3rem;"></i>
                                <p class="mt-2 mb-0">Tidak ada data sekolah</p>
                                <a href="{{ route('superadmin.schools.create') }}" class="btn btn-sm btn-primary mt-2">
                                    <i class="bi bi-plus-circle"></i> Tambah Sekolah Pertama
                                </a>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Delete Confirmation Form -->
<form id="deleteForm" method="POST" style="display: none;">
    @csrf
    @method('DELETE')
</form>

<!-- Import Modal -->
<div class="modal fade" id="importModal" tabindex="-1" aria-labelledby="importModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-info text-white">
                <h5 class="modal-title" id="importModalLabel">
                    <i class="bi bi-upload"></i> Impor Data Sekolah
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('superadmin.schools.import') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <div class="alert alert-info">
                        <i class="bi bi-info-circle"></i> <strong>Format File:</strong>
                        <ul class="mb-0 mt-2">
                            <li>File harus berformat <strong>Excel (.xlsx, .xls)</strong> atau <strong>CSV</strong></li>
                            <li>Kolom yang diperlukan: NPSN, Nama Sekolah, Jenjang, Status, KCD</li>
                            <li>Download template untuk melihat format yang benar</li>
                        </ul>
                    </div>
                    
                    <div class="mb-3">
                        <label for="importFile" class="form-label">Pilih File Excel/CSV</label>
                        <input type="file" class="form-control" id="importFile" name="file" 
                               accept=".xlsx,.xls,.csv" required>
                        <small class="form-text text-muted">
                            <i class="bi bi-file-earmark-excel"></i> Maksimal 2MB
                        </small>
                    </div>

                    <div class="d-grid">
                        <a href="{{ route('superadmin.schools.download-template') }}" class="btn btn-outline-secondary btn-sm">
                            <i class="bi bi-download"></i> Download Template Excel
                        </a>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="bi bi-x-circle"></i> Batal
                    </button>
                    <button type="submit" class="btn btn-info">
                        <i class="bi bi-upload"></i> Upload & Impor
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
function confirmDelete(id, name) {
    if (confirm(`Apakah Anda yakin ingin menghapus sekolah "${name}"?\n\nData yang terhapus tidak dapat dikembalikan.`)) {
        const form = document.getElementById('deleteForm');
        form.action = `/superadmin/schools/${id}`;
        form.submit();
    }
}
</script>
@endpush