@extends('dashboard.layouts.app')

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

@section('content')
<div class="card">
    <div class="card-header">
        <h5 class="mb-0">Tambah Data Taman</h5>
    </div>
    <div class="card-body">
        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        @if(session('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <strong><i class="bi bi-exclamation-triangle me-2"></i>Gagal Menyimpan Data!</strong><br>
                {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <form method="POST" action="{{ route('taman.store') }}" enctype="multipart/form-data">
            @csrf
            <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') }}">
                                @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') }}">
                                @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') }}" 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') == 'Baik' ? 'selected' : '' }}>Baik</option>
                                    <option value="Sedang" {{ old('kondisi') == 'Sedang' ? 'selected' : '' }}>Sedang</option>
                                    <option value="Rusak" {{ old('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') }}">
                                @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') == 'Pemerintah' ? 'selected' : '' }}>Pemerintah</option>
                                    <option value="Swasta" {{ old('status_kepemilikan') == 'Swasta' ? 'selected' : '' }}>Swasta</option>
                                    <option value="Komunitas" {{ old('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') == 'Aktif' ? 'selected' : '' }}>Aktif</option>
                                    <option value="Tidak Aktif" {{ old('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') }}" 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') }}">
                                @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') }}">
                                @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') == $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>
                                </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') }}" 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') }}" 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') }}</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') }}</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') }}</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') }}">
                                @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') }}">
                                @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') }}">
                                @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') }}">
                                @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') }}">
                                @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') }}">
                                @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
                            </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
                            </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">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('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;
                        desaSelect.appendChild(option);
                    });
                })
                .catch(error => console.error('Error:', error));
        }
    });
});
</script>
@endpush