{{-- 地址與座標區塊，供 create / edit 共用 --}}
<div class="card border-0 bg-light rounded-3 p-3 mb-3">
  <div class="fw-semibold mb-3 d-flex align-items-center gap-2">
    <i class="bi bi-geo-alt-fill text-primary"></i> 地址與地圖位置
  </div>

  {{-- 地址輸入 + 查詢按鈕 --}}
  <div class="mb-3">
    <label for="address" class="form-label small fw-semibold">地址</label>
    <div class="input-group">
      <input type="text" name="address" id="address"
             class="form-control @error('address') is-invalid @enderror"
             value="{{ old('address', $client->address ?? '') }}"
             placeholder="例：台北市中正區重慶南路一段122號">
      <button type="button" class="btn btn-outline-primary" id="geocodeBtn">
        <i class="bi bi-search me-1"></i>查詢座標
      </button>
    </div>
    <div class="form-text">輸入地址後點「查詢座標」自動填入經緯度，或直接手動輸入。</div>
    @error('address')
      <div class="invalid-feedback d-block">{{ $message }}</div>
    @enderror
  </div>

  {{-- 緯度 / 經度 --}}
  <div class="row g-3 mb-3">
    <div class="col-sm-6">
      <label for="lat" class="form-label small fw-semibold">緯度 (Latitude)</label>
      <input type="number" name="lat" id="lat"
             class="form-control @error('lat') is-invalid @enderror"
             step="0.000001" min="-90" max="90"
             value="{{ old('lat', isset($client) ? $client->lat : '') }}"
             placeholder="22.000000 ~ 25.500000">
      @error('lat')
        <div class="invalid-feedback">{{ $message }}</div>
      @enderror
    </div>
    <div class="col-sm-6">
      <label for="lng" class="form-label small fw-semibold">經度 (Longitude)</label>
      <input type="number" name="lng" id="lng"
             class="form-control @error('lng') is-invalid @enderror"
             step="0.000001" min="-180" max="180"
             value="{{ old('lng', isset($client) ? $client->lng : '') }}"
             placeholder="120.000000 ~ 122.000000">
      @error('lng')
        <div class="invalid-feedback">{{ $message }}</div>
      @enderror
    </div>
  </div>

  {{-- 地圖預覽 --}}
  <div id="mapWrap" class="{{ (isset($client) && $client->lat) ? '' : 'd-none' }}">
    <div id="locMap" class="border" style="height:260px; border-radius:.5rem;"></div>
    <div class="form-text mt-1">
      <i class="bi bi-info-circle me-1"></i>可在地圖上直接拖曳圖釘調整精確位置。
    </div>
  </div>
</div>

@push('styles')
<link rel="stylesheet" href="/vendor/leaflet/leaflet.css">
@endpush

@push('scripts')
<script src="/vendor/leaflet/leaflet.js"></script>
<script>
(function () {
  const latIn  = document.getElementById('lat');
  const lngIn  = document.getElementById('lng');
  const wrap   = document.getElementById('mapWrap');
  const geocodeBtn = document.getElementById('geocodeBtn');
  const addressIn  = document.getElementById('address');

  let map = null, marker = null;

  function initMap(lat, lng) {
    wrap.classList.remove('d-none');
    if (!map) {
      map = L.map('locMap').setView([lat, lng], 15);
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors',
        maxZoom: 19,
      }).addTo(map);
    } else {
      map.setView([lat, lng], 15);
    }

    if (marker) marker.remove();
    marker = L.marker([lat, lng], { draggable: true }).addTo(map);

    // 拖曳圖釘更新座標
    marker.on('dragend', function () {
      const p = marker.getLatLng();
      latIn.value = p.lat.toFixed(6);
      lngIn.value = p.lng.toFixed(6);
    });

    setTimeout(() => map.invalidateSize(), 50);
  }

  // 若已有座標，初始化地圖
  const initLat = parseFloat(latIn.value);
  const initLng = parseFloat(lngIn.value);
  if (initLat && initLng) {
    initMap(initLat, initLng);
  }

  // 手動輸入座標後重整地圖
  [latIn, lngIn].forEach(el => el.addEventListener('change', () => {
    const la = parseFloat(latIn.value), lo = parseFloat(lngIn.value);
    if (la && lo) initMap(la, lo);
  }));

  // 查詢座標
  geocodeBtn.addEventListener('click', async () => {
    const q = addressIn.value.trim();
    if (!q) { addressIn.focus(); return; }

    geocodeBtn.disabled = true;
    geocodeBtn.innerHTML = '<span class="spinner-border spinner-border-sm"></span> 查詢中…';

    try {
      const url = 'https://nominatim.openstreetmap.org/search?'
                + new URLSearchParams({ q, format: 'json', limit: 5, countrycodes: 'tw' });
      const res  = await fetch(url, { headers: { 'Accept-Language': 'zh-TW,zh;q=0.9' } });
      const data = await res.json();

      if (!data.length) {
        alert('找不到該地址，請嘗試更詳細的地址（例如加上縣市）');
        return;
      }

      const best = data[0];
      const la   = parseFloat(best.lat);
      const lo   = parseFloat(best.lon);
      latIn.value = la.toFixed(6);
      lngIn.value = lo.toFixed(6);
      initMap(la, lo);
    } catch (e) {
      alert('查詢失敗，請確認網路連線或手動輸入座標。');
    } finally {
      geocodeBtn.disabled = false;
      geocodeBtn.innerHTML = '<i class="bi bi-search me-1"></i>查詢座標';
    }
  });
})();
</script>
@endpush