@extends('layouts/layoutMaster')

@section('title', __('Warehouses 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>
    #warehousesMap { width: 100%; height: 100vh; }
    .info-popup h6 { margin: 0 0 6px; font-weight: 600; }
    .info-popup .label { color: #6c757d; font-size: 12px; display: block; }
    .info-popup .value { font-size: 14px; }
    .warehouse-marker { background: #3b82f6; border: 2px solid #fff; width: 22px; height: 22px; box-shadow: 0 2px 6px rgba(0,0,0,0.3); }
    .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('warehousesMap');
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '&copy; OpenStreetMap contributors' }).addTo(map);

      const warehouseIcon = L.divIcon({ className: 'warehouse-marker', iconSize: [22, 22], iconAnchor: [11, 11], popupAnchor: [0, -11] });

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

      const layerGroup = L.layerGroup().addTo(map);
      const markers = warehouses.map(w => {
        const m = L.marker(w.coords, { icon: warehouseIcon });
        const popupHtml = `
          <div class=\"info-popup\">
            <h6><a href=\"${w.edit_url}\">${w.name}</a></h6>
            <div><span class=\"label\">{{ __('Capacity') }}</span><span class=\"value text-capitalize\">${w.capacityType}</span></div>
            <div><span class=\"label\">{{ __('Storage') }}</span><span class=\"value text-capitalize\">${w.storageType}</span></div>
            <div><span class=\"label\">{{ __('Address') }}</span><span class=\"value\">${w.address ?? ''}</span></div>
            <div class=\"mt-1\"><span class=\"label\">{{ __('Contact') }}</span><span class=\"value\">${w.contact ?? ''}</span></div>
          </div>`;
        m.bindPopup(popupHtml, { closeButton: true, minWidth: 240 });
        return { data: w, marker: m };
      });

      function refreshMarkers(visible) {
        layerGroup.clearLayers();
        visible.forEach(v => layerGroup.addLayer(v.marker));
        const noRes = document.getElementById('noResultsWarehouses');
        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('searchWarehouses').value.toLowerCase().trim();
        const selectedCapacity = Array.from(document.querySelectorAll('input[name="capacityType[]"]:checked')).map(i => i.value);
        const selectedStorage = Array.from(document.querySelectorAll('input[name="storageType[]"]:checked')).map(i => i.value);
        const capAll = selectedCapacity.includes('all') || selectedCapacity.length === 0;
        const storAll = selectedStorage.includes('all') || selectedStorage.length === 0;
        const visible = markers.filter(({data}) => {
          const nameMatch = !term || data.name.toLowerCase().includes(term);
          const capMatch = capAll || selectedCapacity.includes(data.capacityType);
          const storMatch = storAll || selectedStorage.includes(data.storageType);
          return nameMatch && capMatch && storMatch;
        });
        refreshMarkers(visible);
      }

      // Init with all markers
      refreshMarkers(markers);

      // Events
      document.getElementById('searchWarehouses').addEventListener('input', applyFilters);
      document.querySelectorAll('input[name="capacityType[]"], input[name="storageType[]"]').forEach(cb => cb.addEventListener('change', function(){
        if (this.name === 'capacityType[]' && this.value === 'all' && this.checked) {
          document.querySelectorAll('input[name="capacityType[]"]').forEach(el => { if (el.value !== 'all') el.checked = false; });
        }
        if (this.name === 'storageType[]' && this.value === 'all' && this.checked) {
          document.querySelectorAll('input[name="storageType[]"]').forEach(el => { if (el.value !== 'all') el.checked = false; });
        }
        if (this.value !== 'all' && this.checked) {
          const allId = this.name === 'capacityType[]' ? 'capacityAll' : 'storageAll';
          const allCb = document.getElementById(allId);
          if (allCb) allCb.checked = false;
        }
        applyFilters();
      }));

      document.getElementById('clearWarehouses').addEventListener('click', function(){
        document.getElementById('searchWarehouses').value = '';
        document.getElementById('capacityAll').checked = true;
        document.querySelectorAll('input[name="capacityType[]"]').forEach(el => { if (el.value !== 'all') el.checked = false; });
        document.getElementById('storageAll').checked = true;
        document.querySelectorAll('input[name="storageType[]"]').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="searchWarehouses">{{ __('Search by name') }}</label>
          <input type="text" id="searchWarehouses" class="form-control" placeholder="{{ __('Type to filter...') }}">
        </div>
        <div class="col-md-6 mb-2">
          <div class="row">
            <div class="col-md-6">
              <label class="form-label d-block">{{ __('Capacity Type') }}</label>
              <div class="d-flex flex-wrap">
                <div class="form-check me-3">
                  <input class="form-check-input" type="checkbox" id="capacityAll" name="capacityType[]" value="all" checked>
                  <label class="form-check-label" for="capacityAll">{{ __('All') }}</label>
                </div>
                <div class="form-check me-3">
                  <input class="form-check-input" type="checkbox" id="capacitySmall" name="capacityType[]" value="small">
                  <label class="form-check-label" for="capacitySmall">{{ __('Small') }}</label>
                </div>
                <div class="form-check me-3">
                  <input class="form-check-input" type="checkbox" id="capacityMedium" name="capacityType[]" value="medium">
                  <label class="form-check-label" for="capacityMedium">{{ __('Medium') }}</label>
                </div>
                <div class="form-check me-3">
                  <input class="form-check-input" type="checkbox" id="capacityLarge" name="capacityType[]" value="large">
                  <label class="form-check-label" for="capacityLarge">{{ __('Large') }}</label>
                </div>
              </div>
            </div>
            {{-- <div class="col-md-6">
              <label class="form-label d-block">{{ __('Storage Type') }}</label>
              <div class="d-flex flex-wrap">
                <div class="form-check me-3">
                  <input class="form-check-input" type="checkbox" id="storageAll" name="storageType[]" value="all" checked>
                  <label class="form-check-label" for="storageAll">{{ __('All') }}</label>
                </div>
                <div class="form-check me-3">
                  <input class="form-check-input" type="checkbox" id="storageDry" name="storageType[]" value="dry">
                  <label class="form-check-label" for="storageDry">{{ __('Dry') }}</label>
                </div>
                <div class="form-check me-3">
                  <input class="form-check-input" type="checkbox" id="storageChilled" name="storageType[]" value="chilled">
                  <label class="form-check-label" for="storageChilled">{{ __('Chilled') }}</label>
                </div>
                <div class="form-check me-3">
                  <input class="form-check-input" type="checkbox" id="storageFrozen" name="storageType[]" value="frozen">
                  <label class="form-check-label" for="storageFrozen">{{ __('Frozen') }}</label>
                </div>
                <div class="form-check me-3">
                  <input class="form-check-input" type="checkbox" id="storageMixed" name="storageType[]" value="mixed">
                  <label class="form-check-label" for="storageMixed">{{ __('Mixed') }}</label>
                </div>
              </div>
            </div> --}}
          </div>
        </div>
        <div class="col-md-2 mb-2">
          <label class="form-label d-block">&nbsp;</label>
          <button type="button" id="clearWarehouses" class="btn btn-secondary w-100">{{ __('Clear') }}</button>
        </div>
      </div>
      <div id="noResultsWarehouses" class="alert alert-warning no-results mb-0">{{ __('No results found') }}</div>
    </div>
  </div>
  <div id="warehousesMap"></div>
@endsection