@extends('dashboard.layouts.app')

@section('title', 'Tambah Data Sekolah')

@section('content')
<div class="card">
    <div class="card-header">
        <h5 class="mb-0">Tambah Data Sekolah</h5>
    </div>
    <div class="card-body">
        <form method="POST" action="{{ route('sekolah.store') }}" enctype="multipart/form-data">
            @csrf
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label class="form-label">NPSN</label>
                    <input type="number" class="form-control @error('npsn') is-invalid @enderror"
                        name="npsn" value="{{ old('npsn') }}">
                    @error('npsn')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label">Nama Sekolah</label>
                    <input type="text" class="form-control @error('nama_sekolah') is-invalid @enderror"
                        name="nama_sekolah" value="{{ old('nama_sekolah') }}">
                    @error('nama_sekolah')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label">Jenjang</label>
                    <select class="form-select @error('jenjang') is-invalid @enderror" name="jenjang">
                        <option value="">Pilih Jenjang</option>
                        <option value="SD" {{ old('jenjang') == 'SD' ? 'selected' : '' }}>SD</option>
                        <option value="SMP" {{ old('jenjang') == 'SMP' ? 'selected' : '' }}>SMP</option>
                        <option value="SMA" {{ old('jenjang') == 'SMA' ? 'selected' : '' }}>SMA</option>
                        <option value="SMK" {{ old('jenjang') == 'SMK' ? 'selected' : '' }}>SMK</option>
                    </select>
                    @error('jenjang')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label">Status</label>
                    <select class="form-select @error('status') is-invalid @enderror" name="status">
                        <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-6 mb-3">
                    <label class="form-label">Kecamatan</label>
                    <select class="form-select @error('kecamatan_id') is-invalid @enderror"
                        name="kecamatan_id" id="kecamatan_id">
                        <option value="">Pilih Kecamatan</option>
                        @foreach ($kecamatans as $kecamatan)
                            <option value="{{ $kecamatan->id }}" {{ old('kecamatan_id') == $kecamatan->id ? 'selected' : '' }}>
                                {{ $kecamatan->nama_kecamatan }}
                            </option>
                        @endforeach
                    </select>
                    @error('kecamatan_id')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label">Desa</label>
                    <select class="form-select @error('desa_id') is-invalid @enderror"
                        name="desa_id" id="desa_id">
                        <option value="">Pilih Desa</option>
                    </select>
                    @error('desa_id')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-12 mb-3">
                    <label class="form-label">Alamat</label>
                    <textarea class="form-control @error('alamat') is-invalid @enderror"
                        name="alamat" rows="2">{{ old('alamat') }}</textarea>
                    @error('alamat')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-md-4 mb-3">
                    <label class="form-label">Kota</label>
                    <input type="text" class="form-control @error('kota') is-invalid @enderror"
                        name="kota" value="{{ old('kota') }}">
                    @error('kota')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-md-4 mb-3">
                    <label class="form-label">Provinsi</label>
                    <input type="text" class="form-control @error('provinsi') is-invalid @enderror"
                        name="provinsi" value="{{ old('provinsi') }}">
                    @error('provinsi')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-md-4 mb-3">
                    <label class="form-label">Kode Pos</label>
                    <input type="number" class="form-control @error('kode_pos') is-invalid @enderror"
                        name="kode_pos" value="{{ old('kode_pos') }}">
                    @error('kode_pos')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label">Telepon</label>
                    <input type="number" class="form-control @error('telepon') is-invalid @enderror"
                        name="telepon" value="{{ old('telepon') }}">
                    @error('telepon')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label">Email</label>
                    <input type="email" class="form-control @error('email') is-invalid @enderror"
                        name="email" value="{{ old('email') }}">
                    @error('email')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label">Website</label>
                    <input type="url" class="form-control @error('website') is-invalid @enderror"
                        name="website" value="{{ old('website') }}">
                    @error('website')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label">Akreditasi</label>
                    <select class="form-select @error('akreditasi') is-invalid @enderror" name="akreditasi">
                        <option value="">Pilih Akreditasi</option>
                        <option value="a" {{ old('akreditasi') == 'a' ? 'selected' : '' }}>A</option>
                        <option value="b" {{ old('akreditasi') == 'b' ? 'selected' : '' }}>B</option>
                        <option value="c" {{ old('akreditasi') == 'c' ? 'selected' : '' }}>C</option>
                        <option value="d" {{ old('akreditasi') == 'd' ? 'selected' : '' }}>D</option>
                    </select>
                    @error('akreditasi')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label">Tahun Berdiri</label>
                    <input type="number" class="form-control @error('tahun_berdiri') is-invalid @enderror"
                        name="tahun_berdiri" value="{{ old('tahun_berdiri') }}">
                    @error('tahun_berdiri')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label">Kepala Sekolah</label>
                    <input type="text" class="form-control @error('kepala_sekolah') is-invalid @enderror"
                        name="kepala_sekolah" value="{{ old('kepala_sekolah') }}">
                    @error('kepala_sekolah')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label">File GeoJSON <span class="text-danger">*</span></label>
                    <input type="file" class="form-control @error('geojson_file') is-invalid @enderror"
                        name="geojson_file" accept=".geojson,.json">
                    @error('geojson_file')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>
            <div class="d-flex justify-content-between">
                <a href="{{ route('sekolah.index') }}" class="btn btn-secondary">Kembali</a>
                <button type="submit" class="btn btn-primary">Simpan</button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const kecamatanSelect = document.getElementById('kecamatan_id');
    const desaSelect = document.getElementById('desa_id');

    kecamatanSelect.addEventListener('change', function() {
        const kecamatanId = this.value;
        console.log(kecamatanId);

        // Clear desa options
        desaSelect.innerHTML = '<option value="">Pilih Desa</option>';

        if (kecamatanId) {
            fetch(`{{ route('sekolah.get-desas') }}?kecamatan_id=${kecamatanId}`)
                .then(response => response.json())
                .then(desas => {
                    desas.forEach(desa => {
                        const option = document.createElement('option');
                        option.value = desa.id;
                        option.textContent = desa.nama_desa;
                        desaSelect.appendChild(option);
                    });
                })
                .catch(error => console.error('Error:', error));
        }
    });
});
</script>
@endpush