@php
    use Illuminate\Support\Facades\Storage;
@endphp

<x-app-layout>
    @if ($errors->any())
        @foreach ($errors->all() as $error)
            @php
                notify()->error($error, 'Gagal');
            @endphp
        @endforeach
    @endif

    <div class="d-md-flex justify-content-between align-items-center">
        <h5 class="mb-0">Edit Data Bangunan Gedung</h5>

        <nav aria-label="breadcrumb" class="d-inline-block mt-2 mt-sm-0">
            <ul class="breadcrumb bg-transparent rounded mb-0 p-0">
                <li class="breadcrumb-item text-capitalize"><a href="{{ route('dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item text-capitalize"><a href="{{ route('gedung.index') }}">Data Bangunan Gedung</a></li>
                <li class="breadcrumb-item text-capitalize active" aria-current="page">Edit Data</li>
            </ul>
        </nav>
    </div>

    <div class="row">
        <div class="col-lg-12 mt-4">
            <div class="card rounded shadow">
                <div class="p-4 border-bottom">
                    <h5 class="title mb-0"> Form Edit Data Bangunan Gedung </h5>
                </div>
                <form action="{{ route('gedung.update', $gedung) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    <div class="row mt-2 p-4">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="nama_gedung_utama" class="form-label">Nama Gedung <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('nama_gedung_utama') is-invalid @enderror"
                                       id="nama_gedung_utama" name="nama_gedung_utama"
                                       value="{{ old('nama_gedung_utama', $gedung->nama_gedung_utama) }}"
                                       placeholder="Masukkan nama gedung" required>
                                @error('nama_gedung_utama')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="kecamatan_id" class="form-label">Kecamatan <span class="text-danger">*</span></label>
                                <select class="form-control @error('kecamatan_id') is-invalid @enderror"
                                        id="kecamatan_id" name="kecamatan_id" required>
                                    <option value="">Pilih Kecamatan</option>
                                    @foreach($kecamatans as $kecamatan)
                                        <option value="{{ $kecamatan->id }}"
                                                {{ old('kecamatan_id', $gedung->kecamatan_id) == $kecamatan->id ? 'selected' : '' }}>
                                            {{ $kecamatan->nama_kecamatan }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('kecamatan_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="desa_id" class="form-label">Desa <span class="text-danger">*</span></label>
                                <select class="form-control @error('desa_id') is-invalid @enderror" 
                                        id="desa_id" name="desa_id" required>
                                    <option value="">Loading...</option>
                                </select>
                                @error('desa_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="gambar_gedung_utama" class="form-label">Gambar Gedung</label>
                                <input type="file" class="form-control @error('gambar_gedung_utama') is-invalid @enderror"
                                       id="gambar_gedung_utama" name="gambar_gedung_utama"
                                       accept="image/*">
                                <div class="form-text">Format: JPG, PNG, GIF. Maksimal 2MB</div>
                                @if($gedung->gambar_gedung_utama)
                                    <div class="mt-2">
                                        <small class="text-muted">Gambar saat ini:</small><br>
                                        <div class="d-flex justify-content-center">
                                            <img src="{{ Storage::url($gedung->gambar_gedung_utama) }}" 
                                                 alt="Gambar Gedung" 
                                                 class="img-thumbnail" 
                                                 style="width: 100px; height: 100px; object-fit: cover;">
                                        </div>
                                    </div>
                                @endif
                                <div id="preview-container" class="mt-2" style="display: none;">
                                    <small class="text-muted">Preview gambar baru:</small><br>
                                    <div class="d-flex justify-content-center">
                                        <img id="preview-image" src="" alt="Preview" 
                                             class="img-thumbnail" 
                                             style="width: 150px; height: 150px; object-fit: cover;">
                                    </div>
                                </div>
                                @error('gambar_gedung_utama')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="mb-3">
                                <label for="alamat_gedung_utama" class="form-label">Alamat Gedung <span class="text-danger">*</span></label>
                                <textarea class="form-control @error('alamat_gedung_utama') is-invalid @enderror"
                                          id="alamat_gedung_utama" name="alamat_gedung_utama" rows="3"
                                          placeholder="Masukkan alamat lengkap gedung" required>{{ old('alamat_gedung_utama', $gedung->alamat_gedung_utama) }}</textarea>
                                @error('alamat_gedung_utama')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-lg-12 mt-2 mb-0">
                            <a href="{{ route('gedung.index') }}" class="btn btn-secondary">Batal</a>
                            <button type="submit" class="btn btn-primary">Simpan</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    @push('scripts')
        <script>
            function loadDesaByKecamatan(kecamatanId, selectedDesaId = null) {
                const desaSelect = document.getElementById('desa_id');
                
                if (kecamatanId) {
                    desaSelect.innerHTML = '<option value="">Loading...</option>';
                    
                    fetch(`/desa-by-kecamatan/${kecamatanId}`, {
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                        }
                    })
                        .then(response => response.json())
                        .then(data => {
                            desaSelect.innerHTML = '<option value="">Pilih Desa</option>';
                            data.forEach(desa => {
                                const option = document.createElement('option');
                                option.value = desa.id;
                                option.textContent = desa.nama_desa;
                                if (selectedDesaId && desa.id == selectedDesaId) {
                                    option.selected = true;
                                }
                                desaSelect.appendChild(option);
                            });
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            desaSelect.innerHTML = '<option value="">Error loading desa</option>';
                        });
                } else {
                    desaSelect.innerHTML = '<option value="">Pilih Kecamatan terlebih dahulu</option>';
                }
            }

            document.getElementById('kecamatan_id').addEventListener('change', function() {
                loadDesaByKecamatan(this.value);
            });

            document.addEventListener('DOMContentLoaded', function() {
                const kecamatanId = document.getElementById('kecamatan_id').value;
                const selectedDesaId = {{ $gedung->desa_id }};
                loadDesaByKecamatan(kecamatanId, selectedDesaId);
            });

            document.getElementById('gambar_gedung_utama').addEventListener('change', function(e) {
                const file = e.target.files[0];
                const previewContainer = document.getElementById('preview-container');
                const previewImage = document.getElementById('preview-image');
                
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        previewImage.src = e.target.result;
                        previewContainer.style.display = 'block';
                    };
                    reader.readAsDataURL(file);
                } else {
                    previewContainer.style.display = 'none';
                }
            });
        </script>
    @endpush
</x-app-layout>