@extends('layouts/layoutMaster')

@section('title', __('Captains Map'))

@section('vendor-style')
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
    <style>
      #captainsMap { width: 100%; height: 100vh; }
      .driver-popup h6 { margin: 0 0 6px; font-weight: 600; }
      .driver-popup .label { color: #6c757d; font-size: 12px; display: block; }
      .driver-popup .value { font-size: 14px; }
      .map-controls .form-check { margin-right: 1rem; }
      .no-results { display:none; }
    </style>
@endsection

@section('vendor-script')
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
@endsection

@section('page-script')
    <script>
      document.addEventListener('DOMContentLoaded', function () {
        const map = L.map('captainsMap');
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '&copy; OpenStreetMap contributors' }).addTo(map);

        // Real drivers data from backend
        const drivers = @json($drivers);

        const layerGroup = L.layerGroup().addTo(map);
        const markers = drivers.map(d => {
          const m = L.marker(d.coords);
          const popupHtml = `
            <div class="driver-popup">
              <h6><a href=\"${d.edit_url}\">${d.name}</a></h6>
              <div><span class=\"label\">{{ __('Phone') }}</span><span class=\"value\">${d.phone}</span></div>
              <div class=\"mt-1\"><span class=\"label\">{{ __('Location') }}</span><span class=\"value\">${d.address ?? ''}</span></div>
              <div class=\"mt-1\"><span class=\"label\">{{ __('Status') }}</span><span class=\"value text-capitalize\">${d.status}</span></div>
            </div>`;
          m.bindPopup(popupHtml, { closeButton: true, minWidth: 220 });
          return { data: d, marker: m };
        });

        function refreshMarkers(visible) {
          layerGroup.clearLayers();
          visible.forEach(v => layerGroup.addLayer(v.marker));
          const noRes = document.getElementById('noResultsCaptains');
          if (visible.length) {
            noRes.style.display = 'none';
            const group = L.featureGroup(visible.map(v => v.marker));
            map.fitBounds(group.getBounds().pad(0.2));
          } else {
            noRes.style.display = 'block';
          }
        }

        function applyFilters() {
          const term = document.getElementById('searchCaptains').value.toLowerCase().trim();
          const selected = Array.from(document.querySelectorAll('input[name="status[]"]:checked')).map(i => i.value);
          const matchAll = selected.includes('all') || selected.length === 0;
          const visible = markers.filter(({data}) => {
            const nameMatch = !term || data.name.toLowerCase().includes(term);
            const statusMatch = matchAll || selected.includes(data.status);
            return nameMatch && statusMatch;
          });
          refreshMarkers(visible);
        }

        // Init with all markers
        refreshMarkers(markers);

        // Events
        document.getElementById('searchCaptains').addEventListener('input', applyFilters);
        document.querySelectorAll('input[name="status[]"]').forEach(cb => cb.addEventListener('change', function(){
          if (this.value === 'all' && this.checked) {
            document.querySelectorAll('input[name="status[]"]').forEach(el => { if (el.value !== 'all') el.checked = false; });
          } else if (this.value !== 'all' && this.checked) {
            const allCb = document.getElementById('statusAll');
            if (allCb) allCb.checked = false;
          }
          applyFilters();
        }));
        document.getElementById('clearCaptains').addEventListener('click', function(){
          document.getElementById('searchCaptains').value = '';
          document.getElementById('statusAll').checked = true;
          document.querySelectorAll('input[name="status[]"]').forEach(el => { if (el.value !== 'all') el.checked = false; });
          applyFilters();
        });
      });
    </script>
@endsection

@section('content')
  <div class="card mb-3">
    <div class="card-body">
      <div class="row align-items-end map-controls">
        <div class="col-md-4 mb-2">
          <label class="form-label" for="searchCaptains">{{ __('Search by name') }}</label>
          <input type="text" id="searchCaptains" class="form-control" placeholder="{{ __('Type to filter...') }}">
        </div>
        <div class="col-md-6 mb-2">
          <label class="form-label d-block">{{ __('Status') }}</label>
          <div class="d-flex flex-wrap">
            <div class="form-check me-3">
              <input class="form-check-input" type="checkbox" id="statusAll" name="status[]" value="all" checked>
              <label class="form-check-label" for="statusAll">{{ __('All') }}</label>
            </div>
            <div class="form-check me-3">
              <input class="form-check-input" type="checkbox" id="statusAvailable" name="status[]" value="available">
              <label class="form-check-label" for="statusAvailable">{{ __('Available') }}</label>
            </div>
            <div class="form-check me-3">
              <input class="form-check-input" type="checkbox" id="statusBusy" name="status[]" value="busy">
              <label class="form-check-label" for="statusBusy">{{ __('Busy') }}</label>
            </div>
            <div class="form-check me-3">
              <input class="form-check-input" type="checkbox" id="statusOffline" name="status[]" value="offline">
              <label class="form-check-label" for="statusOffline">{{ __('Offline') }}</label>
            </div>
          </div>
        </div>
        <div class="col-md-2 mb-2">
          <label class="form-label d-block">&nbsp;</label>
          <button type="button" id="clearCaptains" class="btn btn-secondary w-100">{{ __('Clear') }}</button>
        </div>
      </div>
      <div id="noResultsCaptains" class="alert alert-warning no-results mb-0">{{ __('No results found') }}</div>
    </div>
  </div>
  <div id="captainsMap"></div>
@endsection