@extends('public.layout')
@section('title','Offices — Noesantara Law Firm')
@section('content')
<div class="container py-5">
  <h1 class="h3 mb-4">Our Offices</h1>
  <div class="mb-4">
    <div id="officeMap" style="height: 480px; width: 100%; border-radius: 12px; overflow: hidden;"></div>
  </div>
  <div class="row g-3">
    @foreach($offices as $o)
      <div class="col-md-6 col-lg-4">
        <div class="card h-100">
          <div class="card-body">
            <h2 class="h5">{{ $o->name }}</h2>
            <div class="text-muted small mb-2">{{ $o->address }}</div>
            @if($o->city || $o->country)
              <div class="text-muted small">{{ trim($o->city.' '.($o->country ? '— '.$o->country : '')) }}</div>
            @endif
            @if($o->phone)
              <div class="small mt-2"><strong>Phone:</strong> <a href="tel:{{ preg_replace('/\s+/', '', $o->phone) }}">{{ $o->phone }}</a></div>
            @endif
            @if($o->email)
              <div class="small"><strong>Email:</strong> <a href="mailto:{{ $o->email }}">{{ $o->email }}</a></div>
            @endif
            <div class="mt-2">
              @if($o->map_url)
                <a class="me-3" href="{{ $o->map_url }}" target="_blank" rel="noopener noreferrer">View map</a>
              @endif
              @php
                $dest = ($o->lat && $o->lng) ? ($o->lat.','.$o->lng) : urlencode(trim(($o->address ? $o->address.', ' : '').($o->city ? $o->city.' ' : '').($o->country ?? '')));
              @endphp
              <a href="https://www.google.com/maps/dir/?api=1&destination={{ $dest }}" target="_blank" rel="noopener">Directions</a>
            </div>
          </div>
        </div>
      </div>
    @endforeach
  </div>
</div>

@endsection

@php
  // Precompute a JSON-safe array for JS so Blade doesn't parse a closure inside @json
  $officeList = $offices->map(function($o) {
    return [
      'name' => $o->name,
      'address' => $o->address,
      'city' => $o->city,
      'country' => $o->country,
      'map_url' => $o->map_url,
  'phone' => $o->phone,
  'email' => $o->email,
  'lat' => $o->lat,
  'lng' => $o->lng,
    ];
  })->values();
@endphp

@push('scripts')
<script>
// Office data for mapping (from backend)
const OFFICES_DATA = @json($officeList);

// Simple geocode cache for common cities
const CITY_COORDS = {
    'Jakarta': [-6.2, 106.816666],
    'Bandung': [-6.914744, 107.60981],
    'Surabaya': [-7.257472, 112.75209],
    'Medan': [3.595196, 98.672226],
    'Denpasar': [-8.65, 115.216667],
    'Makassar': [-5.147665, 119.432732],
    'Semarang': [-6.966667, 110.416664],
    'Yogyakarta': [-7.801389, 110.364722],
    'Palembang': [-2.991934, 104.756554],
    'Balikpapan': [-1.265386, 116.8312],
    'Banjarmasin': [-3.319437, 114.59075],
    'Pontianak': [0.026333, 109.342503],
    'Pekanbaru': [0.533333, 101.45],
    'Manado': [1.474830, 124.845240],
    'Batam': [1.045626, 104.030453],
    'Malang': [-7.98, 112.626502],
    'Solo': [-7.566667, 110.816666],
    'Cirebon': [-6.6969, 108.557],
    'Padang': [-0.947083, 100.417183],
    'Samarinda': [ -0.502183, 117.153709],
    'Tangerang': [-6.178306, 106.63],
    'Bogor': [-6.595038, 106.816635],
    'Bali': [-8.409518, 115.188919],
    'Aceh': [5.55, 95.316666],
    'Kupang': [-10.1633, 123.6075],
    'Jayapura': [-2.53371, 140.71813],
    'Ambon': [-3.7, 128.1667],
    'Mataram': [-8.5833, 116.1167],
    'Palangkaraya': [-2.2096, 113.9145],
    'Palu': [-0.89, 119.87],
    'Jambi': [-1.6, 103.6167],
    'Bengkulu': [-3.8, 102.2667],
    'Ternate': [0.8, 127.3667],
    'Kendari': [-3.9778, 122.5158],
    'Tarakan': [3.3, 117.6333],
    'Sorong': [-0.8833, 131.25],
    'Pangkalpinang': [-2.1333, 106.1167],
    'Cilacap': [-7.7167, 109.0167],
    'Probolinggo': [-7.75, 113.2167],
    'Cianjur': [-6.8167, 107.1333],
    'Garut': [-7.2167, 107.9],
    'Tasikmalaya': [-7.3333, 108.2],
    'Sukabumi': [-6.9167, 106.9333],
    'Purwokerto': [-7.4214, 109.2365],
    'Magelang': [-7.4833, 110.2167],
    'Kudus': [-6.8, 110.8333],
    'Blitar': [-8.1, 112.1667],
    'Kediri': [-7.8167, 112.0167],
    'Pamekasan': [-7.0833, 113.4667],
    'Sidoarjo': [-7.45, 112.7167],
    'Gresik': [-7.1667, 112.65],
    'Mojokerto': [-7.4667, 112.4333],
    'Pasuruan': [-7.65, 112.9],
    'Banyuwangi': [-8.2167, 114.3667],
    'Jember': [-8.1667, 113.7],
    'Lumajang': [-8.1333, 113.2167],
    'Bondowoso': [-7.9167, 113.8167],
    'Situbondo': [-7.7, 114.0167],
    'Tulungagung': [-8.0833, 111.9167],
    'Trenggalek': [-8.05, 111.7167],
    'Madiun': [-7.6167, 111.5333],
    'Ngawi': [-7.4, 111.35],
    'Ponorogo': [-7.8667, 111.4667],
    'Pacitan': [-8.2167, 111.1],
    'Wonosobo': [-7.3667, 109.9],
    'Temanggung': [-7.2833, 110.1667],
    'Banjarnegara': [-7.3833, 109.6833],
    'Purbalingga': [-7.3833, 109.3667],
    'Cilacap': [-7.7167, 109.0167],
    'Kebumen': [-7.6667, 109.6667],
    'Purworejo': [-7.7167, 110.0167],
    'Klaten': [-7.7167, 110.6167],
    'Boyolali': [-7.5333, 110.6167],
    'Sragen': [-7.3667, 111.0167],
    'Karanganyar': [-7.6167, 110.9667],
    'Wonogiri': [-7.7667, 110.9167],
    'Salatiga': [-7.3167, 110.5],
    'Kudus': [-6.8, 110.8333],
    'Jepara': [-6.5667, 110.6667],
    'Demak': [-6.8833, 110.6333],
    'Rembang': [-6.7, 111.35],
    'Pati': [-6.75, 111.0333],
    'Blora': [-6.9667, 111.4167],
    'Grobogan': [-7.0833, 111.0833],
    'Kendal': [-6.9167, 110.2167],
    'Batang': [-6.4833, 109.7333],
    'Pekalongan': [-6.8833, 109.6667],
    'Pemalang': [-6.8833, 109.3833],
    'Tegal': [-6.8667, 109.1333],
    'Brebes': [-6.8667, 108.95],
    'Cirebon': [-6.6969, 108.557],
    'Indramayu': [-6.35, 108.3333],
    'Majalengka': [-6.8333, 108.2333],
    'Subang': [-6.5667, 107.7667],
    'Sumedang': [-6.8333, 107.9167],
    'Ciamis': [-7.3333, 108.3667],
    'Banjar': [-7.3667, 108.5333],
    'Pangandaran': [-7.7, 108.5],
    'Kuningan': [-7.0167, 108.5667],
    'Garut': [-7.2167, 107.9],
    'Tasikmalaya': [-7.3333, 108.2],
    'Sukabumi': [-6.9167, 106.9333],
    'Bogor': [-6.595038, 106.816635],
    'Depok': [-6.4025, 106.7942],
    'Bekasi': [-6.2383, 106.9756],
    'Karawang': [-6.3, 107.4],
    'Purwakarta': [-6.55, 107.45],
    'Cikarang': [-6.2495, 107.1481],
    'Cilegon': [-6.0167, 106.0167],
    'Serang': [-6.1167, 106.15],
    'Pandeglang': [-6.3333, 106.1],
    'Lebak': [-6.5667, 106.25],
    'Tangerang': [-6.178306, 106.63],
    'Jakarta': [-6.2, 106.816666],
};

function initOfficeMap() {
  const indonesiaCenter = { lat: -2.5, lng: 118 };
  const map = new google.maps.Map(document.getElementById('officeMap'), {
    center: indonesiaCenter,
    zoom: 5,
    mapTypeControl: false,
    streetViewControl: false,
    fullscreenControl: false,
  });

  const bounds = new google.maps.LatLngBounds();

  OFFICES_DATA.forEach(function(o) {
    let latlng = null;
    const lat = parseFloat(o.lat);
    const lng = parseFloat(o.lng);
    if (!Number.isNaN(lat) && !Number.isNaN(lng)) {
      latlng = { lat, lng };
    } else if (o.city && CITY_COORDS[o.city]) {
      latlng = { lat: CITY_COORDS[o.city][0], lng: CITY_COORDS[o.city][1] };
    } else if (o.country && String(o.country).toLowerCase().includes('indonesia')) {
      latlng = indonesiaCenter; // fallback center
    }
    if (latlng) {
      const marker = new google.maps.Marker({ position: latlng, map: map, title: o.name });
      const dest = (!Number.isNaN(lat) && !Number.isNaN(lng)) ? `${lat},${lng}` : encodeURIComponent(`${o.address || ''} ${o.city || ''} ${o.country || ''}`.trim());
      const parts = [];
      parts.push(`<div style=\"min-width:240px\">`);
      parts.push(`<strong>${o.name}</strong>`);
      if (o.address) parts.push(`<div>${o.address}</div>`);
      if (o.city || o.country) parts.push(`<div class='text-muted small'>${[o.city, o.country].filter(Boolean).join(' — ')}</div>`);
      if (o.phone) parts.push(`<div class='small mt-1'><strong>Phone:</strong> <a href='tel:${String(o.phone).replace(/\s+/g,'')}' target='_blank'>${o.phone}</a></div>`);
      if (o.email) parts.push(`<div class='small'><strong>Email:</strong> <a href='mailto:${o.email}' target='_blank'>${o.email}</a></div>`);
      const links = [];
      if (o.map_url) links.push(`<a href='${o.map_url}' target='_blank' rel='noopener'>Open map</a>`);
      links.push(`<a href='https://www.google.com/maps/dir/?api=1&destination=${dest}' target='_blank' rel='noopener'>Directions</a>`);
      parts.push(`<div class='mt-2'>${links.join(' · ')}</div>`);
      parts.push(`</div>`);
      const html = parts.join('');
      const infowindow = new google.maps.InfoWindow({ content: html });
      marker.addListener('click', () => infowindow.open({ anchor: marker, map }));
      bounds.extend(latlng);
    }
  });

  if (!bounds.isEmpty()) {
    map.fitBounds(bounds, { top: 24, right: 24, bottom: 24, left: 24 });
  }
}
</script>
@php($gmapKey = \App\Models\Setting::get('google_maps_api_key',''))
@if(!empty($gmapKey))
  <script async defer src="https://maps.googleapis.com/maps/api/js?key={{ $gmapKey }}&callback=initOfficeMap"></script>
@else
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const el = document.getElementById('officeMap');
      if (el) {
        el.innerHTML = '<div class="alert alert-warning m-3">Google Maps API key is not set. Please set it in Settings → General → Google Maps API Key.</div>';
      }
    });
  </script>
@endif
@endpush