@extends('dashboard.layouts.app')

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

@section('content')
<div class="card">
    <div class="card-header">
        <h5 class="mb-0">Tambah Data Jalan</h5>
    </div>
    <div class="card-body">
        <form method="POST" action="{{ route('jalan.store') }}" enctype="multipart/form-data">
            @csrf
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label class="form-label">Nama Jalan</label>
                    <input type="text" class="form-control @error('nama_jalan') is-invalid @enderror"
                        name="nama_jalan" value="{{ old('nama_jalan') }}">
                    @error('nama_jalan')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label">Tipe Jalan</label>
                    <select class="form-select @error('tipe_jalan') is-invalid @enderror" name="tipe_jalan">
                        <option value="">Pilih Tipe</option>
                        <option value="nasional" {{ old('tipe_jalan') == 'nasional' ? 'selected' : '' }}>Jalan Nasional</option>
                        <option value="provinsi" {{ old('tipe_jalan') == 'provinsi' ? 'selected' : '' }}>Jalan Provinsi</option>
                        <option value="kabupaten" {{ old('tipe_jalan') == 'kabupaten' ? 'selected' : '' }}>Jalan Kabupaten</option>
                        <option value="desa" {{ old('tipe_jalan') == 'desa' ? 'selected' : '' }}>Jalan Desa</option>
                    </select>
                    @error('tipe_jalan')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label">Panjang Jalan (m)</label>
                    <input type="number" class="form-control @error('panjang_jalan') is-invalid @enderror"
                        name="panjang_jalan" value="{{ old('panjang_jalan') }}">
                    @error('panjang_jalan')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label">Lebar Jalan (m)</label>
                    <input type="number" class="form-control @error('lebar_jalan') is-invalid @enderror"
                        name="lebar_jalan" value="{{ old('lebar_jalan') }}">
                    @error('lebar_jalan')
                        <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-md-6 mb-3">
                    <label class="form-label">Kondisi Jalan</label>
                    <select class="form-select @error('kondisi_jalan') is-invalid @enderror" name="kondisi_jalan">
                        <option value="">Pilih Kondisi</option>
                        <option value="baik" {{ old('kondisi_jalan') == 'baik' ? 'selected' : '' }}>Baik</option>
                        <option value="sedang" {{ old('kondisi_jalan') == 'sedang' ? 'selected' : '' }}>Sedang</option>
                        <option value="rusak" {{ old('kondisi_jalan') == 'rusak' ? 'selected' : '' }}>Rusak</option>
                        <option value="rusak_berat" {{ old('kondisi_jalan') == 'rusak_berat' ? 'selected' : '' }}>Rusak Berat</option>
                    </select>
                    @error('kondisi_jalan')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label">Tahun Pembangunan</label>
                    <input type="number" class="form-control @error('tahun_pembangunan') is-invalid @enderror"
                        name="tahun_pembangunan" value="{{ old('tahun_pembangunan') }}">
                    @error('tahun_pembangunan')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label">Terakhir Diperbaiki</label>
                    <input type="date" class="form-control @error('terakhir_diperbaiki') is-invalid @enderror"
                        name="terakhir_diperbaiki" value="{{ old('terakhir_diperbaiki') }}">
                    @error('terakhir_diperbaiki')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label">File GeoJSON</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 class="col-12 mb-3">
                    <label class="form-label">Keterangan</label>
                    <textarea class="form-control @error('keterangan') is-invalid @enderror"
                        name="keterangan" rows="3">{{ old('keterangan') }}</textarea>
                    @error('keterangan')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>
            <div class="d-flex justify-content-between">
                <a href="{{ route('jalan.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;

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

        if (kecamatanId) {
            fetch(`{{ route('jalan.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