@extends('dashboard.layouts.main')

@section('container')
    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">Edit Data Bank</h1>
    </div>

    @if(session()->has('success'))
        <div class="alert alert-success col-lg-8">{{ session('success') }}</div>
    @elseif(session()->has('error'))
        <div class="alert alert-danger col-lg-8">{{ session('error') }}</div>
    @endif

    <div class="table-responsive col-lg-12">
        <div class="album py-5 bg-light">
            <div class="container">
                <main>
                    <div class="row g-5">
                        <div class="col-md-7 col-lg-8">
                            @if ($errors->any())
                                <div class="alert alert-danger col-lg-8">
                                    <ul class="mb-0">
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif

                            <form method="post" action="{{ route('admin_bank.update', $bank->id) }}" class="mb-5" enctype="multipart/form-data">
                                @csrf
                                @method('PUT')
                                <div class="row g-3">
                                    <div class="col-12">
                                        <label for="gambar_banks" class="form-label">Foto Bank</label>
                                        <input class="form-control" type="file" id="gambar_banks" name="gambar_banks" accept="image/*" onchange="previewImage()">
                                        <img id="imgPreview" src="{{ asset('storage/' . $bank->gambar_banks) }}" class="img-fluid mt-3 col-sm-5" style="{{ $bank->gambar_banks ? '' : 'display:none;' }}" />
                                    </div>

                                    <div class="col-12">
                                        <label for="nama_banks" class="form-label">Nama Bank</label>
                                        <input type="text" name="nama_banks" class="form-control" value="{{ old('nama_banks', $bank->nama_banks) }}" required>
                                    </div>

                                    <div class="col-sm-6">
                                        <label for="kecamatan_id" class="form-label">Kapanewon</label>
                                        <select name="kecamatan_id" class="form-control" required>
                                            <option value="">-- Pilih Kapanewon --</option>
                                            @foreach($kecamatans as $kecamatan)
                                                <option value="{{ $kecamatan->id }}" {{ old('kecamatan_id', $bank->kecamatan_id) == $kecamatan->id ? 'selected' : '' }}>
                                                    {{ $kecamatan->nama_kecamatan }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-sm-6">
                                        <label for="kalurahan_id" class="form-label">Kalurahan</label>
                                        <select name="kalurahan_id" class="form-control" required>
                                            <option value="">-- Pilih Kalurahan --</option>
                                            @foreach($kalurahans as $kalurahan)
                                                <option value="{{ $kalurahan->id }}" {{ old('kalurahan_id', $bank->kalurahan_id) == $kalurahan->id ? 'selected' : '' }}>
                                                    {{ $kalurahan->nama_kalurahan }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-8">
                                        <label for="alamat" class="form-label">Alamat</label>
                                        <input type="text" name="alamat" class="form-control" value="{{ old('alamat', $bank->alamat) }}" required>
                                    </div>

                                    <div class="col-4">
                                        <label for="tanggal_berdiri" class="form-label">Tanggal Berdiri</label>
                                        <input type="date" name="tanggal_berdiri" class="form-control" value="{{ old('tanggal_berdiri', $bank->tanggal_berdiri) }}" required>
                                    </div>

                                    <div class="col-sm-4">
                                        <label for="nama_ketua" class="form-label">Nama Ketua</label>
                                        <input type="text" name="nama_ketua" class="form-control" value="{{ old('nama_ketua', $bank->nama_ketua) }}" required>
                                    </div>

                                    <div class="col-sm-4">
                                        <label for="contact_person" class="form-label">Telepon</label>
                                        <input type="text" name="contact_person" class="form-control" value="{{ old('contact_person', $bank->contact_person) }}" required>
                                    </div>

                                    <div class="col-sm-4">
                                        <label for="jemput_sampah" class="form-label">Jemput Sampah</label>
                                        <select class="form-select" name="jemput_sampah" required>
                                            <option value="">-- Pilih --</option>
                                            <option value="Iya" {{ old('jemput_sampah', $bank->jemput_sampah) == 'Iya' ? 'selected' : '' }}>Iya</option>
                                            <option value="Tidak" {{ old('jemput_sampah', $bank->jemput_sampah) == 'Tidak' ? 'selected' : '' }}>Tidak</option>
                                        </select>
                                    </div>

                                    <div class="col-sm-4">
                                        <label for="jml_nasabah" class="form-label">Jumlah Nasabah</label>
                                        <input type="number" name="jml_nasabah" class="form-control" value="{{ old('jml_nasabah', $bank->jml_nasabah) }}" required>
                                    </div>

                                    <div class="col-sm-4">
                                        <label for="jml_pengurus" class="form-label">Jumlah Pengurus</label>
                                        <input type="number" name="jml_pengurus" class="form-control" value="{{ old('jml_pengurus', $bank->jml_pengurus) }}" required>
                                    </div>

                                    <div class="col-sm-4">
                                        <label for="sk" class="form-label">SK / Legalitas</label>
                                        <input type="file" class="form-control" name="sk" accept=".pdf,.jpg,.png,.jpeg">
                                    </div>

                                    <div class="col-12">
                                        <label for="sarpras" class="form-label">Sarana dan Prasarana</label>
                                        <textarea class="form-control" name="sarpras" style="height: 150px;" required>{{ old('sarpras', $bank->sarpras) }}</textarea>
                                    </div>

                                    <div class="col-12">
                                        <h3 class="my-3">Peta Lokasi Bank</h3>
                                        <div class="row mb-2">
                                            <div class="col-sm-6">
                                                <label for="longitude" class="form-label">Longitude</label>
                                                <input type="text" class="form-control" id="longitude" name="longitude" value="{{ old('longitude', $bank->longitude) }}" required>
                                            </div>
                                            <div class="col-sm-6">
                                                <label for="latitude" class="form-label">Latitude</label>
                                                <input type="text" class="form-control" id="latitude" name="latitude" value="{{ old('latitude', $bank->latitude) }}" required>
                                            </div>
                                        </div>
                                        <div id="map"></div>
                                    </div>
                                </div>

                                <hr class="my-4">

                                <button class="w-100 btn btn-primary btn-lg" type="submit">Update</button>
                            </form>
                        </div>
                    </div>
                </main>
            </div>
        </div>
    </div>

    <script>
        function previewImage() {
            const input = document.getElementById('gambar_banks');
            const preview = document.getElementById('imgPreview');
            const file = input.files[0];

            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    preview.src = e.target.result;
                    preview.style.display = 'block';
                }
                reader.readAsDataURL(file);
            } else {
                preview.style.display = 'none';
            }
        }
    </script>

    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script>
        const map = L.map('map').setView([{{ $bank->latitude ?? '-7.8648' }}, {{ $bank->longitude ?? '110.1566' }}], 15);

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; OpenStreetMap contributors'
        }).addTo(map);

        if (document.getElementById('latitude').value && document.getElementById('longitude').value) {
            window.clickedMarker = L.marker([document.getElementById('latitude').value, document.getElementById('longitude').value], { draggable: true })
                .addTo(map)
                .bindPopup('Lokasi lama')
                .openPopup();

            window.clickedMarker.on('dragend', function (e) {
                const position = e.target.getLatLng();
                document.getElementById('latitude').value = position.lat;
                document.getElementById('longitude').value = position.lng;
            });
        }

        map.on('click', function(e) {
            const { lat, lng } = e.latlng;
            document.getElementById('latitude').value = lat;
            document.getElementById('longitude').value = lng;

            if (window.clickedMarker) {
                map.removeLayer(window.clickedMarker);
            }

            window.clickedMarker = L.marker([lat, lng], { draggable: true })
                .addTo(map)
                .bindPopup(`<b>Lokasi dipilih</b><br>Latitude: ${lat}<br>Longitude: ${lng}`)
                .openPopup();

            window.clickedMarker.on('dragend', function (e) {
                const position = e.target.getLatLng();
                document.getElementById('latitude').value = position.lat;
                document.getElementById('longitude').value = position.lng;
            });
        });
    </script>
@endsection