@extends('layouts.app')

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

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="mb-4">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ route('superadmin.schools.index') }}">Kelola Sekolah</a></li>
                <li class="breadcrumb-item active">Edit Sekolah</li>
            </ol>
        </nav>
        <h1 class="h3 mb-0">Edit Data Sekolah</h1>
        <p class="text-muted small mt-1">Perbarui informasi sekolah: <strong>{{ $school->name }}</strong></p>
    </div>

    @if ($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <strong><i class="bi bi-exclamation-triangle"></i> Terdapat kesalahan:</strong>
            <ul class="mb-0 mt-2">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="row">
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-bottom">
                    <h5 class="mb-0"><i class="bi bi-pencil-square"></i> Form Edit Sekolah</h5>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('superadmin.schools.update', $school->id) }}">
                        @csrf
                        @method('PUT')
                        
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="npsn" class="form-label">NPSN <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('npsn') is-invalid @enderror" 
                                       id="npsn" name="npsn" value="{{ old('npsn', $school->npsn) }}" 
                                       placeholder="Nomor Pokok Sekolah Nasional" required>
                                @error('npsn')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="text-muted">Contoh: 20219183</small>
                            </div>
                            
                            <div class="col-md-6">
                                <label for="kcd_id" class="form-label">KCD (Kawasan) <span class="text-danger">*</span></label>
                                <select class="form-select @error('kcd_id') is-invalid @enderror" 
                                        id="kcd_id" name="kcd_id" required>
                                    <option value="">-- Pilih KCD --</option>
                                    @foreach($kcds as $kcd)
                                        <option value="{{ $kcd->id }}" 
                                                data-kcd-code="{{ $kcd->code }}" 
                                                {{ old('kcd_id', $school->kcd_id) == $kcd->id ? 'selected' : '' }}>
                                            {{ $kcd->code }} - {{ $kcd->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('kcd_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="kab_kota_id" class="form-label">Kab/Kota</label>
                            <select class="form-select @error('kab_kota_id') is-invalid @enderror" 
                                    id="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 }}" 
                                            {{ old('kab_kota_id', $school->kab_kota_id) == $kabKota->id ? 'selected' : '' }}>
                                        {{ $kabKota->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('kab_kota_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="text-muted">Kab/Kota akan difilter sesuai KCD yang dipilih</small>
                        </div>

                        <div class="mb-3">
                            <label for="name" class="form-label">Nama Sekolah <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('name') is-invalid @enderror" 
                                   id="name" name="name" value="{{ old('name', $school->name) }}" 
                                   placeholder="Nama lengkap sekolah" required>
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="level" class="form-label">Jenjang Pendidikan <span class="text-danger">*</span></label>
                                <select class="form-select @error('level') is-invalid @enderror" 
                                        id="level" name="level" required>
                                    <option value="">-- Pilih Jenjang --</option>
                                    <option value="PAUD" {{ old('level', $school->level) == 'PAUD' ? 'selected' : '' }}>PAUD</option>
                                    <option value="SD" {{ old('level', $school->level) == 'SD' ? 'selected' : '' }}>SD</option>
                                    <option value="SMP" {{ old('level', $school->level) == 'SMP' ? 'selected' : '' }}>SMP</option>
                                    <option value="SMA" {{ old('level', $school->level) == 'SMA' ? 'selected' : '' }}>SMA</option>
                                    <option value="SMK" {{ old('level', $school->level) == 'SMK' ? 'selected' : '' }}>SMK</option>
                                    <option value="SLB" {{ old('level', $school->level) == 'SLB' ? 'selected' : '' }}>SLB</option>
                                </select>
                                @error('level')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label for="status" class="form-label">Status Sekolah <span class="text-danger">*</span></label>
                                <select class="form-select @error('status') is-invalid @enderror" 
                                        id="status" name="status" required>
                                    <option value="">-- Pilih Status --</option>
                                    <option value="Negeri" {{ old('status', $school->status) == 'Negeri' ? 'selected' : '' }}>Negeri</option>
                                    <option value="Swasta" {{ old('status', $school->status) == 'Swasta' ? 'selected' : '' }}>Swasta</option>
                                </select>
                                @error('status')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="address" class="form-label">Alamat</label>
                            <textarea class="form-control @error('address') is-invalid @enderror" 
                                      id="address" name="address" rows="3" 
                                      placeholder="Alamat lengkap sekolah">{{ old('address', $school->address) }}</textarea>
                            @error('address')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="phone" class="form-label">Nomor Telepon</label>
                                <input type="text" class="form-control @error('phone') is-invalid @enderror" 
                                       id="phone" name="phone" value="{{ old('phone', $school->phone) }}" 
                                       placeholder="Contoh: 022-1234567">
                                @error('phone')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label for="email" class="form-label">Email Sekolah</label>
                                <input type="email" class="form-control @error('email') is-invalid @enderror" 
                                       id="email" name="email" value="{{ old('email', $school->email) }}" 
                                       placeholder="email@sekolah.sch.id">
                                @error('email')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label for="principal_name" class="form-label">Nama Kepala Sekolah</label>
                                <input type="text" class="form-control @error('principal_name') is-invalid @enderror" 
                                       id="principal_name" name="principal_name" value="{{ old('principal_name', $school->principal_name) }}" 
                                       placeholder="Nama lengkap kepala sekolah">
                                @error('principal_name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-4">
                                <label for="principal_nip" class="form-label">NIP Kepala Sekolah</label>
                                <input type="text" class="form-control @error('principal_nip') is-invalid @enderror" 
                                       id="principal_nip" name="principal_nip" value="{{ old('principal_nip', $school->principal_nip) }}" 
                                       placeholder="Contoh: 196512311990031015">
                                @error('principal_nip')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-4">
                                <label for="principal_phone" class="form-label">HP Kepala Sekolah</label>
                                <input type="text" class="form-control @error('principal_phone') is-invalid @enderror" 
                                       id="principal_phone" name="principal_phone" value="{{ old('principal_phone', $school->principal_phone) }}" 
                                       placeholder="Contoh: 08123456789">
                                @error('principal_phone')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="mb-3">
                            <div class="card border">
                                <div class="card-header bg-light">
                                    <h6 class="mb-0">Unit Layanan Disabilitas (ULD)</h6>
                                </div>
                                <div class="card-body">
                                    <div class="mb-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="has_uld" name="has_uld" 
                                                   value="1" {{ old('has_uld', $school->has_uld) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="has_uld">
                                                Sekolah memiliki Unit Layanan Disabilitas (ULD)
                                            </label>
                                        </div>
                                    </div>

                                    <div class="row" id="uld_count_wrapper" style="display: none;">
                                        <div class="col-md-6">
                                            <label for="uld_count" class="form-label">Jumlah ULD <span class="text-danger">*</span></label>
                                            <input type="number" class="form-control @error('uld_count') is-invalid @enderror" 
                                                   id="uld_count" name="uld_count" value="{{ old('uld_count', $school->uld_count) }}" 
                                                   min="0" placeholder="Masukkan jumlah ULD">
                                            @error('uld_count')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            <small class="text-muted">Jumlah Unit Layanan Disabilitas yang aktif</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="mb-4">
                            <label class="form-label">Status Aktif</label>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="hidden" name="is_active" value="0">
                                <input class="form-check-input" type="checkbox" id="is_active" name="is_active" 
                                       value="1" {{ old('is_active', $school->is_active) ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_active">
                                    Sekolah Aktif (dapat digunakan dalam sistem)
                                </label>
                            </div>
                            <small class="text-muted">Sekolah yang nonaktif tidak akan muncul dalam pilihan atau laporan</small>
                        </div>

                        <div class="d-flex justify-content-between align-items-center pt-3 border-top">
                            <a href="{{ route('superadmin.schools.index') }}" class="btn btn-outline-secondary">
                                <i class="bi bi-arrow-left"></i> Kembali
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-save"></i> Perbarui Data
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card border-0 shadow-sm mb-3">
                <div class="card-header bg-secondary text-white">
                    <h6 class="mb-0"><i class="bi bi-clock-history"></i> Info Sekolah</h6>
                </div>
                <div class="card-body">
                    <table class="table table-sm table-borderless mb-0">
                        <tr>
                            <td class="text-muted">NPSN:</td>
                            <td><code>{{ $school->npsn }}</code></td>
                        </tr>
                        <tr>
                            <td class="text-muted">Jenjang:</td>
                            <td><span class="badge bg-primary">{{ $school->level }}</span></td>
                        </tr>
                        <tr>
                            <td class="text-muted">Status:</td>
                            <td><span class="badge bg-{{ $school->status == 'Negeri' ? 'success' : 'warning' }}">{{ $school->status }}</span></td>
                        </tr>
                        <tr>
                            <td class="text-muted">Dibuat:</td>
                            <td><small>{{ $school->created_at->format('d M Y H:i') }}</small></td>
                        </tr>
                        <tr>
                            <td class="text-muted">Diperbarui:</td>
                            <td><small>{{ $school->updated_at->format('d M Y H:i') }}</small></td>
                        </tr>
                    </table>
                </div>
            </div>

            <div class="card border-0 shadow-sm">
                <div class="card-header bg-warning text-dark">
                    <h6 class="mb-0"><i class="bi bi-lightbulb"></i> Tips</h6>
                </div>
                <div class="card-body">
                    <ul class="small mb-0">
                        <li>Perhatikan saat mengubah NPSN</li>
                        <li>Status aktif mempengaruhi visibilitas sekolah</li>
                        <li>Data KCD dapat diubah jika terjadi realokasi</li>
                        <li>Pastikan data kontak selalu terkini</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const kcdSelect = document.getElementById('kcd_id');
        const kabKotaSelect = document.getElementById('kab_kota_id');
        
        // Function to get selected KCD code from the KCD dropdown
        function getSelectedKcdCode() {
            const selectedOption = kcdSelect.options[kcdSelect.selectedIndex];
            if (!selectedOption || !selectedOption.value) {
                return null;
            }
            
            // Get KCD code from data attribute
            return selectedOption.getAttribute('data-kcd-code');
        }
        
        // Function to filter Kab/Kota based on selected KCD
        function filterKabKota() {
            const selectedKcdCode = getSelectedKcdCode();
            console.log('Selected KCD Code:', selectedKcdCode);
            const kabKotaOptions = kabKotaSelect.querySelectorAll('option');
            
            let hasVisibleOptions = false;
            let currentSelectionVisible = false;
            
            // Show/hide options based on KCD code match
            kabKotaOptions.forEach(option => {
                if (!option.value) {
                    // Always show the empty "Pilih Kab/Kota" option
                    option.style.display = '';
                    return;
                }
                
                const optionKcdCode = option.getAttribute('data-kcd-code');
                console.log('Option:', option.text, 'KCD Code:', optionKcdCode);
                
                if (!selectedKcdCode) {
                    // If no KCD selected, show all
                    option.style.display = '';
                    hasVisibleOptions = true;
                } else if (!optionKcdCode) {
                    // If Kab/Kota has no mapping, hide it
                    option.style.display = 'none';
                } else if (optionKcdCode === selectedKcdCode) {
                    option.style.display = '';
                    hasVisibleOptions = true;
                    if (option.selected) {
                        currentSelectionVisible = true;
                    }
                } else {
                    option.style.display = 'none';
                }
            });
            
            console.log('Has visible options:', hasVisibleOptions);
            
            // If current selection is now hidden, deselect it
            if (!currentSelectionVisible && kabKotaSelect.value) {
                kabKotaSelect.value = '';
            }
        }
        
        // Listen for changes on KCD dropdown
        kcdSelect.addEventListener('change', filterKabKota);
        
        // Run filter on page load to handle edit form with pre-selected values
        filterKabKota();
        
        // ULD checkbox toggle
        const hasUldCheckbox = document.getElementById('has_uld');
        const uldCountWrapper = document.getElementById('uld_count_wrapper');
        const uldCountInput = document.getElementById('uld_count');
        
        if (hasUldCheckbox && uldCountWrapper) {
            function toggleUldCount() {
                if (hasUldCheckbox.checked) {
                    uldCountWrapper.style.display = 'block';
                    uldCountInput.required = true;
                } else {
                    uldCountWrapper.style.display = 'none';
                    uldCountInput.required = false;
                    uldCountInput.value = '';
                }
            }
            
            hasUldCheckbox.addEventListener('change', toggleUldCount);
            
            // Initial state
            toggleUldCount();
        }
    });
</script>
@endpush