@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">Tambah Data Bank</h1>
    </div>

    @if(session()->has('success'))
      <div class="alert alert-success col-lg-8" role="alert">
        {{ session('success') }}
      </div>
    @elseif(session()->has('error'))
      <div class="alert alert-danger col-lg-8" role="alert">
        {{ session('error') }}
    @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="{{ url('') }}/admin_bank" class="mb-5" enctype="multipart/form-data">
                    @csrf
                    <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()" required>
                        <img id="imgPreview" class="img-fluid mt-3 col-sm-5" style="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') }}" required>
                      </div>
                      <div class="col-sm-6">
                        <label for="firstName" 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') == $kecamatan->id ? 'selected' : '' }}>
                                    {{ $kecamatan->nama_kecamatan }}
                                </option>
                            @endforeach
                        </select>
                      </div>
                      <div class="col-sm-6">
                        <label for="lastName" 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') == $kalurahan->id ? 'selected' : '' }}>
                                    {{ $kalurahan->nama_kalurahan }}
                                </option>
                            @endforeach
                        </select>
                      </div>
                      <div class="col-8">
                        <label for="address" class="form-label">Alamat</label>
                        <input type="text" name="alamat" class="form-control" value="{{ old('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') }}" required>
                       </div>
                      <div class="col-sm-4">
                        <label for="firstName" class="form-label">Nama Ketua</label>
                        <input type="text" name="nama_ketua" class="form-control" value="{{ old('nama_ketua') }}" required>
                      </div>
                       <div class="col-sm-4">
                        <label for="firstName" class="form-label">Telepon</label>
                        <input type="text" name="contact_person" class="form-control" value="{{ old('contact_person') }}" required>
                      </div>
                      <div class="col-sm-4">
                        <label for="jemputSampah" class="form-label">Jemput Sampah</label>
                        <select class="form-select" id="jemputSampah" name="jemput_sampah" required>
                            <option value="">-- Pilih --</option>
                            <option value="Iya" {{ old('jemputSampah')  == 'Iya' ? 'selected' : '' }}>Iya</option>
                            <option value="Tidak" {{ old('jemputSampah') == 'Tidak' ? 'selected' : '' }}>Tidak</option>
                        </select>
                      </div>

                      <div class="col-sm-4">
                        <label for="firstName" class="form-label">Jumlah Nasabah</label>
                        <input type="number" name="jml_nasabah" class="form-control" value="{{ old('jml_nasabah') }}" required>
                      </div>
                       <div class="col-sm-4">
                        <label for="firstName" class="form-label">Jumlah Pengurus</label>
                        <input type="number" name="jml_pengurus" class="form-control" value="{{ old('jml_pengurus') }}" required>
                      </div>
                      <div class="col-sm-4">
                        <label for="skLegalitas" class="form-label">SK / Legalitas (mak. 2 MB, PDF)</label>
                        <input type="file" class="form-control" id="skLegalitas" name="sk" accept=".pdf,.jpg,.png,.jpeg" >
                      </div>

                      <div class="col-12">
                        <label for="firstName" class="form-label">Sarana dan Prasarana</label>
                        <textarea class="form-control" name="sarpras" style="height: 150px;" required>{{ old('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') }}" 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') }}" required>
                            </div>
                        </div>
                        <div id="map"></div>
                      </div>
                    </div>

                    <hr class="my-4">

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

    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <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.src = '';
                preview.style.display = 'none';
            }
        }
    </script>

    <script>
        // Inisialisasi peta
        const map = L.map('map').setView([-7.864816357398951, 110.15669762287146], 15);
        // Tambahkan layer peta
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; OpenStreetMap contributors'
        }).addTo(map);

        // Tambahkan marker default jika ada old value dari form
        let oldLat = document.getElementById('latitude').value;
        let oldLng = document.getElementById('longitude').value;

        if (oldLat && oldLng) {
            window.clickedMarker = L.marker([oldLat, oldLng], { draggable: true }).addTo(map).bindPopup('Lokasi lama').openPopup();
            map.setView([oldLat, oldLng], 15);
            
            // Update input saat marker digeser
            window.clickedMarker.on('dragend', function (e) {
                const position = e.target.getLatLng();
                document.getElementById('latitude').value = position.lat;
                document.getElementById('longitude').value = position.lng;
            });
        }

        // Event klik di peta
        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}<br>
                `).openPopup();

            // Tambahkan event drag ke marker baru
            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