@extends('layouts.app')

@section('title', 'Tambah 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">Tambah Sekolah</li>
            </ol>
        </nav>
        <h1 class="h3 mb-0">Tambah Sekolah Baru</h1>
        <p class="text-muted small mt-1">Masukkan data sekolah/institusi pendidikan baru</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-building"></i> Form Data Sekolah</h5>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('superadmin.schools.store') }}">
                        @csrf
                        
                        <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') }}" 
                                       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') == $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') == $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') }}" 
                                   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') == 'PAUD' ? 'selected' : '' }}>PAUD</option>
                                    <option value="SD" {{ old('level') == 'SD' ? 'selected' : '' }}>SD</option>
                                    <option value="SMP" {{ old('level') == 'SMP' ? 'selected' : '' }}>SMP</option>
                                    <option value="SMA" {{ old('level') == 'SMA' ? 'selected' : '' }}>SMA</option>
                                    <option value="SMK" {{ old('level') == 'SMK' ? 'selected' : '' }}>SMK</option>
                                    <option value="SLB" {{ old('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') == 'Negeri' ? 'selected' : '' }}>Negeri</option>
                                    <option value="Swasta" {{ old('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') }}</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') }}" 
                                       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') }}" 
                                       placeholder="email@sekolah.sch.id">
                                @error('email')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-4">
                            <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') }}" 
                                       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') }}" 
                                       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') }}" 
                                       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') ? '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') }}" 
                                                   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="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> Simpan Sekolah
                            </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-info text-white">
                    <h6 class="mb-0"><i class="bi bi-info-circle"></i> Informasi</h6>
                </div>
                <div class="card-body">
                    <p class="small mb-2"><strong>Field Wajib:</strong></p>
                    <ul class="small mb-0">
                        <li>NPSN (harus unik)</li>
                        <li>Nama Sekolah</li>
                        <li>Jenjang Pendidikan</li>
                        <li>Status (Negeri/Swasta)</li>
                        <li>KCD (Kawasan Pendidikan)</li>
                    </ul>
                </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>Pastikan NPSN sesuai dengan data Dapodik</li>
                        <li>Pilih KCD sesuai wilayah geografis sekolah</li>
                        <li>Data kontak (email, telepon) membantu komunikasi</li>
                        <li>Status sekolah dapat diubah setelah disimpan</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
// Filter Kab/Kota berdasarkan KCD yang dipilih
document.addEventListener('DOMContentLoaded', function() {
    const kcdSelect = document.getElementById('kcd_id');
    const kabKotaSelect = document.getElementById('kab_kota_id');
    
    if (kcdSelect && kabKotaSelect) {
        // Get selected KCD code
        function getSelectedKcdCode() {
            const selectedKcd = kcdSelect.options[kcdSelect.selectedIndex];
            if (!selectedKcd || !selectedKcd.value) return null;
            
            // Get KCD code from data attribute
            return selectedKcd.getAttribute('data-kcd-code');
        }
        
        // Filter Kab/Kota options
        function filterKabKota() {
            const kcdCode = getSelectedKcdCode();
            console.log('Selected KCD Code:', kcdCode);
            const kabKotaOptions = kabKotaSelect.querySelectorAll('option');
            
            let visibleCount = 0;
            kabKotaOptions.forEach(option => {
                if (option.value === '') {
                    // Always show the placeholder option
                    option.style.display = '';
                    return;
                }
                
                const optionKcdCode = option.getAttribute('data-kcd-code');
                console.log('Option:', option.text, 'KCD Code:', optionKcdCode);
                
                if (!kcdCode) {
                    // If no KCD selected, show all
                    option.style.display = '';
                    visibleCount++;
                } else if (!optionKcdCode) {
                    // If Kab/Kota has no mapping, hide it (should have mapping)
                    option.style.display = 'none';
                } else if (optionKcdCode === kcdCode) {
                    // If matches, show it
                    option.style.display = '';
                    visibleCount++;
                } else {
                    // If doesn't match, hide it
                    option.style.display = 'none';
                    // If this option was selected, deselect it
                    if (option.selected) {
                        kabKotaSelect.value = '';
                    }
                }
            });
            console.log('Visible Kab/Kota options:', visibleCount);
        }
        
        // Listen to KCD changes
        kcdSelect.addEventListener('change', filterKabKota);
        
        // Initial filter on page load
        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