@extends('layouts.app')

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

@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('admin-dinas.sekolah.index') }}">Daftar 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-10">
            <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('admin-dinas.sekolah.store') }}">
                        @csrf
                        
                        <!-- Data Dasar Sekolah -->
                        <div class="mb-4">
                            <h6 class="border-bottom pb-2 mb-3"><i class="bi bi-info-circle"></i> Data Dasar Sekolah</h6>
                            
                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <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-8">
                                    <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>

                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <label for="level" class="form-label">Jenjang <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="SLB" {{ old('level') == 'SLB' ? 'selected' : '' }}>SLB</option>
                                        <option value="SMA" {{ old('level') == 'SMA' ? 'selected' : '' }}>SMA</option>
                                        <option value="SMK" {{ old('level') == 'SMK' ? 'selected' : '' }}>SMK</option>
                                    </select>
                                    @error('level')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-4">
                                    <label for="status" class="form-label">Status <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 class="col-md-4">
                                    <label for="kcd_id" class="form-label">KCD <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="row mb-3">
                                <div class="col-md-12">
                                    <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
                                </div>
                            </div>

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

                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="email" class="form-label">Email</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 class="col-md-6">
                                    <label for="phone" class="form-label">No Telp</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>
                        </div>

                        <!-- Data Kepala Sekolah -->
                        <div class="mb-4">
                            <h6 class="border-bottom pb-2 mb-3"><i class="bi bi-person-badge"></i> Data Kepala Sekolah</h6>
                            
                            <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') }}" 
                                           placeholder="Nama lengkap">
                                    @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="18 digit NIP">
                                    @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="08xxxxxxxxxx">
                                    @error('principal_phone')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Unit Layanan Disabilitas (ULD) -->
                        <div class="mb-4" id="uld_section" style="display: none;">
                            <h6 class="border-bottom pb-2 mb-3"><i class="bi bi-universal-access"></i> Unit Layanan Disabilitas (ULD)</h6>
                            
                            <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-4">
                                    <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="Jumlah ULD aktif">
                                    @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 class="d-flex justify-content-between align-items-center pt-3 border-top">
                            <a href="{{ route('admin-dinas.sekolah.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>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const kcdSelect = document.getElementById('kcd_id');
    const kabKotaSelect = document.getElementById('kab_kota_id');
    
    if (kcdSelect && kabKotaSelect) {
        function getSelectedKcdCode() {
            const selectedKcd = kcdSelect.options[kcdSelect.selectedIndex];
            if (!selectedKcd || !selectedKcd.value) return null;
            return selectedKcd.getAttribute('data-kcd-code');
        }
        
        function filterKabKota() {
            const kcdCode = getSelectedKcdCode();
            const kabKotaOptions = kabKotaSelect.querySelectorAll('option');
            
            kabKotaOptions.forEach(option => {
                if (option.value === '') {
                    option.style.display = '';
                    return;
                }
                
                const optionKcdCode = option.getAttribute('data-kcd-code');
                
                if (!kcdCode) {
                    option.style.display = '';
                } else if (!optionKcdCode) {
                    option.style.display = 'none';
                } else if (optionKcdCode === kcdCode) {
                    option.style.display = '';
                } else {
                    option.style.display = 'none';
                    if (option.selected) {
                        kabKotaSelect.value = '';
                    }
                }
            });
        }
        
        kcdSelect.addEventListener('change', filterKabKota);
        filterKabKota();
    }
    
    // Toggle ULD section based on school level
    const levelSelect = document.getElementById('level');
    const uldSection = document.getElementById('uld_section');
    const hasUldCheckbox = document.getElementById('has_uld');
    const uldCountWrapper = document.getElementById('uld_count_wrapper');
    const uldCountInput = document.getElementById('uld_count');
    
    if (levelSelect && uldSection) {
        function toggleUldSection() {
            if (levelSelect.value === 'SLB') {
                uldSection.style.display = 'block';
            } else {
                uldSection.style.display = 'none';
                // Reset ULD fields when hidden
                if (hasUldCheckbox) hasUldCheckbox.checked = false;
                if (uldCountWrapper) uldCountWrapper.style.display = 'none';
                if (uldCountInput) {
                    uldCountInput.required = false;
                    uldCountInput.value = '';
                }
            }
        }
        
        levelSelect.addEventListener('change', toggleUldSection);
        toggleUldSection();
    }
    
    // ULD checkbox toggle
    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);
        toggleUldCount();
    }
});
</script>
@endpush