@extends('layouts.main')
@section('content')
  @push('style')
    <link rel="stylesheet" href="{{asset('assets/css/auto_style.css')}}">
    <link rel="stylesheet" href="{{asset('assets/css/toastr.min.css')}}">
    <link rel="stylesheet" href="{{asset('assets/datatables/datatables.min.css')}}">
    <link rel="stylesheet" href="{{asset('assets/css/themify-icons.css')}}">
    <style>
    #searchCustomer {
        text-transform: capitalize;
    }

    .custom-infowindow {
        padding: 8px 12px;
        font-size: 13px;
        line-height: 1.4;
    }

    .custom-infowindow strong {
        font-size: 14px;
        color: #1976d2;
    }

    .custom-infowindow small {
        color: #555;
    }
    </style>
  @endpush
  <div class="preloader" id="preloader" >
    <div class="loading">
      <img src="{{ asset('assets/img/loading-buffering.gif') }}" width="80">
      <p>Harap Tunggu</p>
    </div>
  </div>
  <div class="content__header content__boxed overlapping">
    <div class="content__wrap">
      <!-- Breadcrumb -->
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-0">
          <li class="breadcrumb-item"><a href="{{ route('index-dashboard') }}">Home</a></li>
          <li class="breadcrumb-item" aria-current="page">{{ $titleMenu }}</li>
          <li class="breadcrumb-item active" aria-current="page">{{ $title }}</li>
        </ol>
      </nav>
      <!-- END : Breadcrumb -->
      <h1 class="page-title mb-0 mt-2">{{ $titleMenu }} {{$title}}</h1>
      <p class="lead"></p>
    </div>
  </div>

  <div class="content__boxed">
    <div class="content__wrap">
      <div class="row">
        <div class="col-sm-12 mt-2">
          <div class="card">
            <div class="card bg-info" style="min-height:5px; border-radius:1px;"></div>
            <div class="card-body">
              <h5 class="card-title fs-4">Data Lokasi Customer</h5>
                <!-- Tambahkan ini: Kotak pencarian -->
                <div class="row mb-3">
                    <div class="col-md-6">
                        <div class="input-group">
                            <span class="input-group-text"><i class="ti ti-search"></i></span>
                            <input type="text" id="searchCustomer" class="form-control" placeholder="Cari customer..." autocomplete="off">
                            <button class="btn btn-outline-secondary" type="button" id="clearSearch">
                                <i class="ti ti-close"></i>
                            </button>
                        </div>
                    </div>
                    <div class="col-md-6 text-end">
                        <small class="text-muted">Total: <strong id="totalCustomers">{{ $customers->count() }}</strong> customer</small>
                        <span class="mx-2">|</span>
                        <small class="text-muted">Ditampilkan: <strong id="visibleCustomers">{{ $customers->count() }}</strong></small>
                    </div>
                </div>

                <div class="col-md-12" style="margin-top:1em">
                    <div id="map" style="width:100%; height:650px; border:1px solid #ccc; border-radius:8px;"></div>
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

<!-- pattern="[0-9]{4}-[0-9]{3}-[0-9]{3}-[0-9]{3} -->
@push('script')
  <script src="{{ asset('assets/js/jquery.min.js') }}"></script>
  <script src="{{ asset('assets/js/jquery.autocomplete.min.js') }}"></script>
  <script src="{{ asset('assets/js/toastr.min.js') }}"></script>
  <script src="{{ asset('assets/js/switchery.min.js') }}"></script>
  <script src="{{ asset('assets/datatables/datatables.min.js') }}"></script>
  <script src="{{ asset('assets/js/mapInput.js') }}"></script>
  <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBp4MDXGN2T7ZPDOnDFf_FUuOzwzJ8wYBU&libraries=places&callback=initMap">
  </script>
  <script>
    $(document).ready(function () {
        $(".preloader").fadeOut(500);
    });
  </script>
  <script>
    var map;
    var markers = [];
    var infowindows = [];

    // Data customers dari database
    const customers = @json($customers);

    function initMap() {
        if (map) {
            markers.forEach(marker => marker.setMap(null));
            markers = [];
            infowindows = [];
        }

        const defaultCenter = { lat: -2.548926, lng: 118.0148634 };

        map = new google.maps.Map(document.getElementById('map'), {
            zoom: 5,
            center: defaultCenter,
            mapTypeId: 'roadmap'
        });

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

        const customIcon = {
            url: '{{ asset('assets/img/ic-pin.png') }}',
            scaledSize: new google.maps.Size(60, 80),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(30, 80)  // Sesuaikan jika perlu (tengah bawah icon 60px lebar)
        };

        customers.forEach(customer => {
            if (!customer.latitude || !customer.longitude) return;

            const position = {
                lat: parseFloat(customer.latitude),
                lng: parseFloat(customer.longitude)
            };

            const marker = new google.maps.Marker({
                position: position,
                map: map,
                icon: customIcon,
                title: customer.customer_name
            });

            let content = `
                <div class="custom-infowindow">
                    <strong>${customer.customer_name}</strong><br>
                    <small>${customer.address || 'Alamat tidak tersedia'}</small>
                </div>
            `;

            const infowindow = new google.maps.InfoWindow({
                content: content,
                maxWidth: 200
            });

            marker.addListener('click', () => {
                infowindows.forEach(iw => iw.close());
                infowindow.open(map, marker);
            });

            // Simpan nama di marker untuk filtering
            marker.customerName = customer.customer_name.toLowerCase();

            markers.push(marker);
            infowindows.push(infowindow);
            bounds.extend(position);
        });

        // Fit bounds awal
        if (markers.length > 0) {
            map.fitBounds(bounds);
            adjustZoom();
        }

        // === FITUR PENCARIAN ===
        const searchInput = document.getElementById('searchCustomer');
        const clearBtn = document.getElementById('clearSearch');
        const visibleCount = document.getElementById('visibleCustomers');

        searchInput.addEventListener('input', function() {
            const query = this.value.trim().toLowerCase();
            let visibleMarkers = 0;
            let visibleBounds = new google.maps.LatLngBounds();

            markers.forEach((marker, index) => {
                if (query === '' || marker.customerName.includes(query)) {
                    marker.setVisible(true);
                    visibleMarkers++;
                    visibleBounds.extend(marker.getPosition());
                } else {
                    marker.setVisible(false);
                    infowindows[index].close(); // Tutup infowindow jika marker disembunyikan
                }
            });

            visibleCount.textContent = visibleMarkers;

            // Zoom ke marker yang terlihat
            if (visibleMarkers > 0) {
                if (visibleMarkers === 1) {
                    // Jika hanya 1, zoom dekat
                    const visibleMarker = markers.find(m => m.getVisible());
                    map.setCenter(visibleMarker.getPosition());
                    map.setZoom(16);
                } else {
                    map.fitBounds(visibleBounds);
                    adjustZoom();
                }
            } else {
                // Jika tidak ada hasil, kembali ke view Indonesia
                map.setCenter(defaultCenter);
                map.setZoom(5);
            }
        });

        // Tombol clear
        clearBtn.addEventListener('click', function() {
            searchInput.value = '';
            searchInput.dispatchEvent(new Event('input')); // Trigger ulang filter
        });

        function adjustZoom() {
            google.maps.event.addListenerOnce(map, 'bounds_changed', function() {
                if (map.getZoom() > 16) map.setZoom(16);
            });
        }
    }
  </script>
@endpush

@endsection