@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">Profil Bank <span class="text-primary">{{ $user->bank->nama_banks ?? 'Tidak Ada Data Bank' }}</span></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">
                  <div class="col-sm-6">
                    
                    <div class="py-5 text-center">
                      @error('gambar_banks')
                        <div class="text-danger mb-1">{{ $message }}</div>
                      @enderror
                     <div class="card shadow-sm">
                        <img 
                            class="d-block mx-auto p-2" 
                            src="{{ optional($user->bank)->gambar_banks ? asset('storage/' . $user->bank->gambar_banks) : asset('noImage/noImage.png') }}" 
                            alt="Gambar Bank" 
                            style="width: 100%; max-height: 250px; object-fit: contain;"
                        >    
                    </div>
 
                      <!-- Tombol toggle untuk menampilkan form edit -->
                      <button class="btn btn-outline-primary mt-2" type="button" onclick="document.getElementById('editImageForm').classList.toggle('d-none')">Ubah Foto</button>

                      <!-- Form edit gambar -->
                      <form action="{{ route('banks.update-image') }}" class="d-none mt-3" id="editImageForm" method="POST" enctype="multipart/form-data">
                          @csrf
                          @method('PUT')
                          <input type="hidden" name="bank_id" value="{{ $user->bank->id }}">

                          <div class="mb-3">
                              <input type="file" name="gambar_banks" class="form-control" required>
                               <h5>(maksimal 2MB)</h5>
                          </div>

                          <button type="submit" class="btn btn-success">Simpan</button>
                      </form>
              
                    </div>
                  </div>
                  <form class="needs-validation" novalidate="" action="{{ url('') }}/dashboard/banks/{{ $user->bank->id }}/edit"> 
                    <div class="row g-3">
                      <div class="col-sm-6">
                        <label for="firstName" class="form-label">Kapanewon</label>
                        <input type="text" class="form-control" value="{{ $user->bank->kecamatan->nama_kecamatan }}" disabled>
                      </div>
                      <div class="col-sm-6">
                        <label for="lastName" class="form-label">Kalurahan</label>
                        <input type="text" class="form-control" value="{{ $user->bank->kalurahan->nama_kalurahan }}" disabled>
                      </div>
                      <div class="col-8">
                        <label for="address" class="form-label">Alamat</label>
                        <input type="text" class="form-control" value="{{ $user->bank->alamat }}" disabled>
                      </div>
                      @php
                          use Carbon\Carbon;
                          $formattedDate = Carbon::parse($user->bank->tanggal_berdiri)->translatedFormat('d F Y');
                      @endphp
                      <div class="col-4">
                        <label for="address" class="form-label">Tanggal Berdiri</label>
                        <input type="text" class="form-control" value="{{ $formattedDate }}" disabled>
                      </div>
                      <div class="col-sm-4">
                        <label for="firstName" class="form-label">Nama Ketua</label>
                        <input type="text" class="form-control" value="{{ $user->bank->nama_ketua }}" disabled>
                      </div>
                       <div class="col-sm-4">
                        <label for="firstName" class="form-label">Telepon</label>
                        <input type="text" class="form-control" value="{{ $user->bank->contact_person }}" disabled>
                      </div>
                      <div class="col-sm-4">
                        <label for="firstName" class="form-label">Jemput Sampah</label>
                        <input type="text" class="form-control" value="{{ $user->bank->jemput_sampah }}" disabled>
                      </div>
                      <div class="col-sm-4">
                        <label for="firstName" class="form-label">Jumlah Nasabah</label>
                        <input type="text" class="form-control" value="{{ $user->bank->jml_nasabah }}" disabled>
                      </div>
                       <div class="col-sm-4">
                        <label for="firstName" class="form-label">Jumlah Pengurus</label>
                        <input type="text" class="form-control" value="{{ $user->bank->jml_pengurus }}" disabled>
                      </div>
                      <div class="col-sm-4">
                        <label for="firstName" class="form-label">SK / Legalitas</label>
                        <div>
                        @if($user->bank->sk)
                            <h5 class="form-text text-muted mt-1">
                            <a href="{{ asset('storage/' . $user->bank->sk) }}" target="_blank">Lihat File</a>
                            </h5>
                        @endif
                        </div>
                      </div>
                      <div class="col-12">
                        <label for="firstName" class="form-label">Sarana dan Prasarana</label>
                        <textarea class="form-control"  style="height: 150px;" disabled>{{ $user->bank->sarpras }}</textarea>
                      </div>
                      <div class="col-12">
                        <div id="map"></div>
                      </div>
                    </div>

                    <hr class="my-4">

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

    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script>
      const bank = @json($user->bank);

      // Cek jika bank ada dan punya koordinat
      if (bank && bank.latitude && bank.longitude) {
          var map = L.map('map').setView([bank.latitude, bank.longitude], 15); // Zoom dekat

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

          // Tambahkan marker bank
          L.marker([bank.latitude, bank.longitude])
              .addTo(map)
              .bindPopup(`
                  <b>${bank.nama_banks}</b><br>
                  Kecamatan: ${bank.kecamatan?.nama_kecamatan ?? '-'}<br>
                  Kalurahan: ${bank.kalurahan?.nama_kalurahan ?? '-'}<br>
                  Alamat: ${bank.alamat}<br>
                     <a href="https://www.google.com/maps?q=${bank.latitude},${bank.longitude}" target="_blank" rel="noopener noreferrer">
                        Buka dengan Google Maps
                    </a>                `)
              .openPopup();
      } else {
          document.getElementById('map').innerHTML = '<p>Koordinat bank tidak ditemukan.</p>';
      }
      
  </script>


@endsection