@extends('dashboard.layouts.app')

@section('title', 'Edit Data Taman')

@section('content')
<div class="card">
    <div class="card-header">
        <h5 class="mb-0">Edit Data Taman</h5>
    </div>
    <div class="card-body">
        <form method="POST" action="{{ route('taman.update', $taman) }}" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            <div class="row g-4">
                <div class="col-12">
                    <div class="border rounded-3 p-4 bg-light">
                        <h6 class="text-primary fw-semibold mb-3"><i class="bi bi-card-list me-2"></i>Informasi Dasar</h6>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Nama Taman</label>
                                <input type="text" class="form-control @error('nama_taman') is-invalid @enderror"
                                    name="nama_taman" value="{{ old('nama_taman', $taman->nama_taman) }}">
                                @error('nama_taman')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Nama Lokasi</label>
                                <input type="text" class="form-control @error('lokasi') is-invalid @enderror"
                                    name="lokasi" value="{{ old('lokasi', $taman->lokasi) }}">
                                @error('lokasi')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Luas Taman (m²)</label>
                                <input type="number" class="form-control @error('luas_taman') is-invalid @enderror"
                                    name="luas_taman" value="{{ old('luas_taman', $taman->luas_taman) }}" step="0.01">
                                @error('luas_taman')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Kondisi</label>
                                <select class="form-select @error('kondisi') is-invalid @enderror" name="kondisi">
                                    <option value="">Pilih Kondisi</option>
                                    <option value="Baik" {{ old('kondisi', $taman->kondisi) == 'Baik' ? 'selected' : '' }}>Baik</option>
                                    <option value="Sedang" {{ old('kondisi', $taman->kondisi) == 'Sedang' ? 'selected' : '' }}>Sedang</option>
                                    <option value="Rusak" {{ old('kondisi', $taman->kondisi) == 'Rusak' ? 'selected' : '' }}>Rusak</option>
                                </select>
                                @error('kondisi')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Pengelola</label>
                                <input type="text" class="form-control @error('pengelola') is-invalid @enderror"
                                    name="pengelola" value="{{ old('pengelola', $taman->pengelola) }}">
                                @error('pengelola')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12">
                    <div class="border rounded-3 p-4 bg-light">
                        <h6 class="text-primary fw-semibold mb-3"><i class="bi bi-clipboard-data me-2"></i>Status &amp; Tanggal</h6>
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label">Status Kepemilikan</label>
                                <select class="form-select @error('status_kepemilikan') is-invalid @enderror" name="status_kepemilikan">
                                    <option value="">Pilih Status Kepemilikan</option>
                                    <option value="Pemerintah" {{ old('status_kepemilikan', $taman->status_kepemilikan) == 'Pemerintah' ? 'selected' : '' }}>Pemerintah</option>
                                    <option value="Swasta" {{ old('status_kepemilikan', $taman->status_kepemilikan) == 'Swasta' ? 'selected' : '' }}>Swasta</option>
                                    <option value="Komunitas" {{ old('status_kepemilikan', $taman->status_kepemilikan) == 'Komunitas' ? 'selected' : '' }}>Komunitas</option>
                                </select>
                                @error('status_kepemilikan')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Status Operasional</label>
                                <select class="form-select @error('status_operasional') is-invalid @enderror" name="status_operasional">
                                    <option value="">Pilih Status Operasional</option>
                                    <option value="Aktif" {{ old('status_operasional', $taman->status_operasional) == 'Aktif' ? 'selected' : '' }}>Aktif</option>
                                    <option value="Tidak Aktif" {{ old('status_operasional', $taman->status_operasional) == 'Tidak Aktif' ? 'selected' : '' }}>Tidak Aktif</option>
                                </select>
                                @error('status_operasional')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Biaya Pembangunan (Rp)</label>
                                <input type="number" class="form-control @error('biaya_pembangunan') is-invalid @enderror"
                                    name="biaya_pembangunan" value="{{ old('biaya_pembangunan', $taman->biaya_pembangunan) }}" step="0.01">
                                @error('biaya_pembangunan')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Tanggal Dibangun</label>
                                <input type="date" class="form-control @error('tanggal_dibangun') is-invalid @enderror"
                                    name="tanggal_dibangun" value="{{ old('tanggal_dibangun', $taman->tanggal_dibangun) }}">
                                @error('tanggal_dibangun')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Tanggal Diresmikan</label>
                                <input type="date" class="form-control @error('tanggal_diresmikan') is-invalid @enderror"
                                    name="tanggal_diresmikan" value="{{ old('tanggal_diresmikan', $taman->tanggal_diresmikan) }}">
                                @error('tanggal_diresmikan')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12">
                    <div class="border rounded-3 p-4 bg-light">
                        <h6 class="text-primary fw-semibold mb-3"><i class="bi bi-geo-alt me-2"></i>Lokasi Administratif</h6>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <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', $taman->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">
                                <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>
                                    @foreach ($desas as $desa)
                                        <option value="{{ $desa->id }}" {{ old('desa_id', $taman->desa_id) == $desa->id ? 'selected' : '' }}>
                                            {{ $desa->nama_desa }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('desa_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12">
                    <div class="border rounded-3 p-4 bg-light">
                        <h6 class="text-primary fw-semibold mb-3"><i class="bi bi-compass me-2"></i>Koordinat &amp; Deskripsi</h6>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Latitude</label>
                                <input type="number" class="form-control @error('latitude') is-invalid @enderror"
                                    name="latitude" value="{{ old('latitude', $taman->latitude) }}" step="0.000001">
                                @error('latitude')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Longitude</label>
                                <input type="number" class="form-control @error('longitude') is-invalid @enderror"
                                    name="longitude" value="{{ old('longitude', $taman->longitude) }}" step="0.000001">
                                @error('longitude')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-12">
                                <label class="form-label">Deskripsi</label>
                                <textarea class="form-control @error('deskripsi') is-invalid @enderror"
                                    name="deskripsi" rows="3">{{ old('deskripsi', $taman->deskripsi) }}</textarea>
                                @error('deskripsi')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12">
                    <div class="border rounded-3 p-4 bg-light">
                        <h6 class="text-primary fw-semibold mb-3"><i class="bi bi-diagram-3 me-2"></i>Perencanaan Program</h6>
                        <div class="row g-3">
                            <div class="col-12">
                                <label class="form-label">Strategi</label>
                                <textarea class="form-control @error('strategi') is-invalid @enderror"
                                    name="strategi" rows="3">{{ old('strategi', $taman->strategi) }}</textarea>
                                @error('strategi')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-12">
                                <label class="form-label">Kegiatan</label>
                                <textarea class="form-control @error('kegiatan') is-invalid @enderror"
                                    name="kegiatan" rows="3">{{ old('kegiatan', $taman->kegiatan) }}</textarea>
                                @error('kegiatan')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Subjek Kegiatan</label>
                                <input type="text" class="form-control @error('subjek_kegiatan') is-invalid @enderror"
                                    name="subjek_kegiatan" value="{{ old('subjek_kegiatan', $taman->subjek_kegiatan) }}">
                                @error('subjek_kegiatan')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Tahun</label>
                                <input type="number" class="form-control @error('tahun') is-invalid @enderror"
                                    name="tahun" value="{{ old('tahun', $taman->tahun) }}">
                                @error('tahun')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Durasi</label>
                                <input type="text" class="form-control @error('durasi') is-invalid @enderror"
                                    name="durasi" value="{{ old('durasi', $taman->durasi) }}" maxlength="100">
                                @error('durasi')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Jangka</label>
                                <input type="text" class="form-control @error('jangka') is-invalid @enderror"
                                    name="jangka" value="{{ old('jangka', $taman->jangka) }}">
                                @error('jangka')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Sumber Dana</label>
                                <input type="text" class="form-control @error('sumber_dana') is-invalid @enderror"
                                    name="sumber_dana" value="{{ old('sumber_dana', $taman->sumber_dana) }}">
                                @error('sumber_dana')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Program</label>
                                <input type="text" class="form-control @error('program') is-invalid @enderror"
                                    name="program" value="{{ old('program', $taman->program) }}">
                                @error('program')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12">
                    <div class="border rounded-3 p-4 bg-light">
                        <h6 class="text-primary fw-semibold mb-3"><i class="bi bi-folder2-open me-2"></i>Dokumen Pendukung</h6>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <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
                                @if($taman->geojson_file)
                                    <small class="text-muted">File saat ini: {{ $taman->geojson_file }}</small>
                                @endif
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Foto</label>
                                <input type="file" class="form-control @error('foto') is-invalid @enderror"
                                    name="foto" accept="image/*">
                                @error('foto')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                @if($taman->foto)
                                    <small class="text-muted">Foto saat ini: {{ $taman->foto }}</small>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="d-flex justify-content-between">
                <a href="{{ route('taman.index') }}" class="btn btn-secondary">Kembali</a>
                <button type="submit" class="btn btn-primary">Update</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');
    const selectedKecamatanId = kecamatanSelect.value;
    const selectedDesaId = '{{ old('desa_id', $taman->desa_id) }}';

    // Function to load desas by kecamatan
    function loadDesasByKecamatan(kecamatanId, selectedDesaId = null) {
        // Clear desa options
        desaSelect.innerHTML = '<option value="">Pilih Desa</option>';

        if (kecamatanId) {
            fetch(`{{ route('kecamatan.get-data-desa') }}?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;

                        // Select the desa if it matches the selectedDesaId
                        if (selectedDesaId && desa.id == selectedDesaId) {
                            option.selected = true;
                        }

                        desaSelect.appendChild(option);
                    });
                })
                .catch(error => console.error('Error:', error));
        }
    }

    // Load desas on page load if kecamatan is already selected
    if (selectedKecamatanId) {
        loadDesasByKecamatan(selectedKecamatanId, selectedDesaId);
    }

    // Handle kecamatan change
    kecamatanSelect.addEventListener('change', function() {
        const kecamatanId = this.value;
        loadDesasByKecamatan(kecamatanId);
    });
});
</script>
@endpush