@extends('layouts.app')

@section('title', 'Daftar Sekolah - Admin Dinas')

@section('content')
<div class="container-fluid">
    <!-- Success/Error Messages -->
    @if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        <i class="bi bi-check-circle-fill"></i> {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    @endif

    @if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <i class="bi bi-exclamation-triangle-fill"></i> {{ session('error') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></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" aria-label="Close"></button>
    </div>
    @endif

    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0">Daftar Sekolah</h1>
            <p class="text-muted small mt-1">Kelola data sekolah di dinas Anda</p>
        </div>
        <div class="btn-group" role="group">
            <a href="{{ route('admin-dinas.sekolah.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('admin-dinas.sekolah.create') }}" class="btn btn-primary">
                <i class="bi bi-plus-circle"></i> Tambah Sekolah
            </a>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-md-3 col-sm-6 mb-3">
            <div class="card stat-card">
                <div class="card-body">
                    <h6 class="card-title text-muted mb-2">Total Sekolah</h6>
                    <h3 class="mb-0">{{ $totalSekolah }}</h3>
                    <small class="text-muted"><i class="bi bi-info-circle"></i> Di dinas ini</small>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6 mb-3">
            <div class="card stat-card success">
                <div class="card-body">
                    <h6 class="card-title text-muted mb-2">Negeri</h6>
                    <h3 class="mb-0">{{ $negeri }}</h3>
                    <small class="text-success"><i class="bi bi-check-circle"></i> Sekolah Negeri</small>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6 mb-3">
            <div class="card stat-card info">
                <div class="card-body">
                    <h6 class="card-title text-muted mb-2">Swasta</h6>
                    <h3 class="mb-0">{{ $swasta }}</h3>
                    <small class="text-info"><i class="bi bi-building"></i> Sekolah Swasta</small>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6 mb-3">
            <div class="card stat-card warning">
                <div class="card-body">
                    <h6 class="card-title text-muted mb-2">Belum KCD</h6>
                    <h3 class="mb-0">{{ $belumKcd }}</h3>
                    <small class="text-warning"><i class="bi bi-exclamation-circle"></i> Perlu mapping</small>
                </div>
            </div>
        </div>
    </div>

    <!-- Data Table -->
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">Daftar Sekolah</h5>
            <div class="input-group" style="max-width: 300px;">
                <span class="input-group-text bg-white border-end-0">
                    <i class="bi bi-search"></i>
                </span>
                <input type="text" class="form-control border-start-0" placeholder="Cari sekolah...">
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead class="table-light">
                        <tr>
                            <th>NPSN</th>
                            <th>Nama Sekolah</th>
                            <th>Status</th>
                            <th>Kab/Kota</th>
                            <th>Kepala Sekolah</th>
                            <th>KCD</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($schools as $school)
                        <tr>
                            <td>
                                <strong>{{ $school->npsn }}</strong>
                            </td>
                            <td>
                                <div>
                                    <strong>{{ $school->name }}</strong>
                                    @if($school->profile_locked)
                                    <i class="bi bi-lock-fill text-warning ms-1" title="Profil Terkunci - Diupdate pada {{ $school->profile_updated_at?->format('d/m/Y H:i') }}"></i>
                                    @endif
                                    @if($school->address)
                                    <br>
                                    <small class="text-muted">{{ Str::limit($school->address, 50) }}</small>
                                    @endif
                                </div>
                            </td>
                            <td>
                                <span class="badge {{ $school->status == 'Negeri' ? 'bg-success' : 'bg-warning' }}">
                                    {{ $school->status }}
                                </span>
                            </td>
                            <td>{{ $school->kabKota?->name ?? '-' }}</td>
                            <td>{{ $school->principal_name ?? '-' }}</td>
                            <td>
                                @if($school->kcd)
                                <span class="badge bg-info">{{ $school->kcd->name }}</span>
                                @else
                                <span class="badge bg-secondary">Belum KCD</span>
                                @endif
                            </td>
                            <td>
                                <div class="btn-group" role="group">
                                    <a href="{{ route('admin-dinas.sekolah.show', $school->id) }}" class="btn btn-sm btn-outline-info" title="Lihat Detail">
                                        <i class="bi bi-eye"></i>
                                    </a>
                                    
                                    @if($school->profile_locked)
                                    <form action="{{ route('admin-dinas.sekolah.unlock', $school->id) }}" method="POST" class="d-inline" title="Buka Kunci Profil">
                                        @csrf
                                        <button type="submit" class="btn btn-sm btn-outline-warning">
                                            <i class="bi bi-unlock"></i>
                                        </button>
                                    </form>
                                    @else
                                    <button type="button" class="btn btn-sm btn-outline-secondary" disabled title="Profil Belum Terkunci">
                                        <i class="bi bi-lock-fill text-muted"></i>
                                    </button>
                                    @endif
                                    
                                    <a href="{{ route('admin-dinas.sekolah.edit', $school->id) }}" class="btn btn-sm btn-outline-primary" title="Edit">
                                        <i class="bi bi-pencil"></i>
                                    </a>
                                    
                                    <form action="{{ route('admin-dinas.sekolah.destroy', $school->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Apakah Anda yakin ingin menghapus sekolah {{ $school->name }}?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-sm btn-outline-danger" title="Hapus">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="7" class="text-center py-4">
                                <i class="bi bi-inbox text-muted" style="font-size: 3rem;"></i>
                                <p class="text-muted mt-2">Belum ada data sekolah</p>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <nav aria-label="Pagination">
                <ul class="pagination justify-content-center mt-4">
                    <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
                    <li class="page-item active"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item"><a class="page-link" href="#">Next</a></li>
                </ul>
            </nav>
        </div>
    </div>
</div>

<!-- Add Sekolah Modal -->
<div class="modal fade" id="addSekolahModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header border-bottom">
                <h5 class="modal-title">Tambah Sekolah Baru</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="addSekolahForm">
                    <!-- Data Sekolah Section -->
                    <h6 class="mb-3 fw-bold text-primary"><i class="bi bi-building"></i> Data Sekolah</h6>
                    
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label">NPSN <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="npsn" placeholder="Nomor Pokok Sekolah Nasional" required>
                            <small class="text-muted">Contoh: 20219183</small>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Nama Sekolah <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="name" placeholder="Nama lengkap sekolah" required>
                        </div>
                    </div>
                    
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label">Jenjang Pendidikan <span class="text-danger">*</span></label>
                            <select class="form-select" name="level" required>
                                <option value="">-- Pilih Jenjang --</option>
                                <option value="PAUD">PAUD</option>
                                <option value="SD">SD</option>
                                <option value="SMP">SMP</option>
                                <option value="SMA">SMA</option>
                                <option value="SMK">SMK</option>
                                <option value="SLB">SLB</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Status <span class="text-danger">*</span></label>
                            <select class="form-select" name="status" required>
                                <option value="">-- Pilih Status --</option>
                                <option value="Negeri">Negeri</option>
                                <option value="Swasta">Swasta</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label">KCD <span class="text-danger">*</span></label>
                            <select class="form-select" id="add_kcd_id" name="kcd_id" required>
                                <option value="">-- Pilih KCD --</option>
                                @foreach($kcds as $kcd)
                                    <option value="{{ $kcd->id }}" data-kcd-code="{{ $kcd->code }}">
                                        {{ $kcd->code }} - {{ $kcd->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Kab/Kota</label>
                            <select class="form-select" id="add_kab_kota_id" name="kab_kota_id">
                                <option value="">-- Pilih Kab/Kota --</option>
                                @foreach($kabKotas as $kabKota)
                                    <option value="{{ $kabKota->id }}" data-kcd-code="{{ $kabKota->kcd_code }}">
                                        {{ $kabKota->name }}
                                    </option>
                                @endforeach
                            </select>
                            <small class="text-muted">Akan difilter sesuai KCD</small>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Alamat Sekolah</label>
                        <textarea class="form-control" name="address" rows="2" placeholder="Alamat lengkap sekolah"></textarea>
                    </div>
                    
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label">No. Telepon Sekolah</label>
                            <input type="tel" class="form-control" name="phone" placeholder="Contoh: 022-1234567">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Email Sekolah</label>
                            <input type="email" class="form-control" name="email" placeholder="email@sekolah.sch.id">
                        </div>
                    </div>
                    
                    <!-- Data Kepala Sekolah Section -->
                    <hr class="my-4">
                    <h6 class="mb-3 fw-bold text-primary"><i class="bi bi-person-badge"></i> Data Kepala Sekolah</h6>
                    
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label">Nama Kepala Sekolah</label>
                            <input type="text" class="form-control" name="principal_name" placeholder="Nama lengkap">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">NIP Kepala Sekolah</label>
                            <input type="text" class="form-control" name="principal_nip" placeholder="18 digit angka" pattern="\d{18}" maxlength="18" title="NIP harus 18 digit angka">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer border-top">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-primary">Simpan Sekolah</button>
            </div>
        </div>
    </div>
</div>

<!-- Edit Modal -->
<div class="modal fade" id="editModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form id="editForm" method="POST">
                @csrf
                @method('PUT')
                <div class="modal-header border-bottom">
                    <h5 class="modal-title">Edit Data Sekolah</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <!-- Data Sekolah Section -->
                    <h6 class="mb-3 fw-bold text-primary"><i class="bi bi-building"></i> Data Sekolah</h6>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">NPSN <span class="text-danger">*</span></label>
                            <input type="text" id="edit_npsn" class="form-control" disabled>
                            <small class="text-muted">NPSN tidak dapat diubah</small>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Nama Sekolah <span class="text-danger">*</span></label>
                            <input type="text" name="name" id="edit_name" class="form-control" required>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Jenjang Pendidikan <span class="text-danger">*</span></label>
                            <select class="form-select" name="level" id="edit_level" required>
                                <option value="">-- Pilih Jenjang --</option>
                                <option value="PAUD">PAUD</option>
                                <option value="SD">SD</option>
                                <option value="SMP">SMP</option>
                                <option value="SMA">SMA</option>
                                <option value="SMK">SMK</option>
                                <option value="SLB">SLB</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Status <span class="text-danger">*</span></label>
                            <select class="form-select" name="status" id="edit_status" required>
                                <option value="">-- Pilih Status --</option>
                                <option value="Negeri">Negeri</option>
                                <option value="Swasta">Swasta</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">KCD <span class="text-danger">*</span></label>
                            <select class="form-select" id="edit_kcd_id" name="kcd_id" required>
                                <option value="">-- Pilih KCD --</option>
                                @foreach($kcds as $kcd)
                                    <option value="{{ $kcd->id }}" data-kcd-code="{{ $kcd->code }}">
                                        {{ $kcd->code }} - {{ $kcd->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Kab/Kota <span class="text-danger">*</span></label>
                            <select class="form-select" id="edit_kab_kota_id" name="kab_kota_id" required>
                                <option value="">-- Pilih Kab/Kota --</option>
                                @foreach($kabKotas as $kabKota)
                                    <option value="{{ $kabKota->id }}" data-kcd-code="{{ $kabKota->kcd_code }}">
                                        {{ $kabKota->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Alamat Sekolah <span class="text-danger">*</span></label>
                        <textarea class="form-control" name="address" id="edit_address" rows="2" required></textarea>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">No. Telepon Sekolah</label>
                            <input type="tel" name="phone" id="edit_phone" class="form-control" placeholder="(0xxx) xxxx xxxx">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Email Sekolah</label>
                            <input type="email" name="email" id="edit_email" class="form-control" placeholder="email@sekolah.sch.id">
                        </div>
                    </div>
                    
                    <!-- Data Kepala Sekolah Section -->
                    <hr class="my-4">
                    <h6 class="mb-3 fw-bold text-primary"><i class="bi bi-person-badge"></i> Data Kepala Sekolah</h6>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Nama Kepala Sekolah</label>
                            <input type="text" name="principal_name" id="edit_principal_name" class="form-control">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">NIP Kepala Sekolah</label>
                            <input type="text" name="principal_nip" id="edit_principal_nip" class="form-control" pattern="\d{18}" maxlength="18" title="NIP harus 18 digit angka">
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-top">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Simpan Perubahan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    // Populate edit modal when edit button clicked
    document.querySelectorAll('.edit-btn').forEach(button => {
        button.addEventListener('click', function() {
            const id = this.dataset.id;
            const npsn = this.dataset.npsn;
            const name = this.dataset.name;
            const level = this.dataset.level;
            const status = this.dataset.status;
            const kcdId = this.dataset.kcdId;
            const kabKotaId = this.dataset.kabKotaId;
            const address = this.dataset.address;
            const phone = this.dataset.phone || '';
            const email = this.dataset.email || '';
            const principalName = this.dataset.principalName || '';
            const principalNip = this.dataset.principalNip || '';
            
            // Set form action
            const form = document.getElementById('editForm');
            form.action = `/admin-dinas/sekolah/${id}`;
            
            // Populate form fields
            document.getElementById('edit_npsn').value = npsn;
            document.getElementById('edit_name').value = name;
            document.getElementById('edit_level').value = level;
            document.getElementById('edit_status').value = status;
            document.getElementById('edit_kcd_id').value = kcdId;
            document.getElementById('edit_address').value = address;
            document.getElementById('edit_phone').value = phone;
            document.getElementById('edit_email').value = email;
            document.getElementById('edit_principal_name').value = principalName;
            document.getElementById('edit_principal_nip').value = principalNip;
            
            // Trigger KCD change to filter Kab/Kota, then set Kab/Kota value
            const kcdSelect = document.getElementById('edit_kcd_id');
            const selectedKcdOption = kcdSelect.options[kcdSelect.selectedIndex];
            const kcdCode = selectedKcdOption ? selectedKcdOption.getAttribute('data-kcd-code') : null;
            
            const kabKotaSelect = document.getElementById('edit_kab_kota_id');
            filterKabKota(kabKotaSelect, kcdCode);
            
            // Set Kab/Kota value after filtering
            setTimeout(() => {
                document.getElementById('edit_kab_kota_id').value = kabKotaId;
            }, 10);
        });
    });

    // Filter Kab/Kota based on selected KCD - for EDIT form
    document.getElementById('edit_kcd_id').addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        const kcdCode = selectedOption.getAttribute('data-kcd-code');
        const kabKotaSelect = document.getElementById('edit_kab_kota_id');
        
        filterKabKota(kabKotaSelect, kcdCode);
    });
    
    // Filter Kab/Kota based on selected KCD - for ADD form
    document.getElementById('add_kcd_id').addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        const kcdCode = selectedOption.getAttribute('data-kcd-code');
        const kabKotaSelect = document.getElementById('add_kab_kota_id');
        
        filterKabKota(kabKotaSelect, kcdCode);
    });

    // Reusable filter function
    function filterKabKota(kabKotaSelect, kcdCode) {
        // Reset and show all options first
        Array.from(kabKotaSelect.options).forEach(option => {
            if (option.value === '') {
                option.style.display = 'block';
                return;
            }
            
            const optionKcdCode = option.getAttribute('data-kcd-code');
            
            if (!kcdCode) {
                // If no KCD selected, show all
                option.style.display = 'block';
            } else if (optionKcdCode === kcdCode) {
                // Show matching Kab/Kota
                option.style.display = 'block';
            } else {
                // Hide non-matching
                option.style.display = 'none';
            }
        });
        
        // Reset selection if current selection is now hidden
        if (kabKotaSelect.selectedIndex > 0) {
            const currentOption = kabKotaSelect.options[kabKotaSelect.selectedIndex];

<!-- 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('admin-dinas.sekolah.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('admin-dinas.sekolah.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>
            if (currentOption.style.display === 'none') {
                kabKotaSelect.value = '';
            }
        }
    }
</script>
@endsection