@extends('layouts.main')

@section('content')
    <div class="pagetitle">
        <h1>Data Sebaran Customer</h1>
        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="/">Home</a></li>
                <li class="breadcrumb-item active">Data Sebaran Customer</li>
            </ol>
        </nav>
    </div><!-- End Page Title -->

    <section class="section">
        <!-- Statistics Cards -->
        <div class="row mb-4">
            <div class="col-lg-3 col-md-6">
                <div class="card info-card customers-card">
                    <div class="card-body">
                        <h5 class="card-title">Total Customer</h5>
                        <div class="d-flex align-items-center">
                            <div class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                                <i class="bi bi-people"></i>
                            </div>
                            <div class="ps-3">
                                <h6>{{ $totalCustomers }}</h6>
                                <span class="text-muted small pt-1">Customer</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-3 col-md-6">
                <div class="card info-card sales-card">
                    <div class="card-body">
                        <h5 class="card-title">Dengan Lokasi</h5>
                        <div class="d-flex align-items-center">
                            <div class="card-icon rounded-circle d-flex align-items-center justify-content-center" style="background: #4154f1;">
                                <i class="bi bi-geo-alt-fill text-white"></i>
                            </div>
                            <div class="ps-3">
                                <h6>{{ $customersWithLocation }}</h6>
                                <span class="text-success small pt-1">
                                    {{ $totalCustomers > 0 ? round(($customersWithLocation / $totalCustomers) * 100, 1) : 0 }}%
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-3 col-md-6">
                <div class="card info-card revenue-card">
                    <div class="card-body">
                        <h5 class="card-title">Tanpa Lokasi</h5>
                        <div class="d-flex align-items-center">
                            <div class="card-icon rounded-circle d-flex align-items-center justify-content-center" style="background: #f6c23e;">
                                <i class="bi bi-exclamation-triangle text-white"></i>
                            </div>
                            <div class="ps-3">
                                <h6>{{ $customersWithoutLocation }}</h6>
                                <span class="text-warning small pt-1">Perlu Update</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-3 col-md-6">
                <div class="card info-card revenue-card">
                    <div class="card-body">
                        <h5 class="card-title">Customer Aktif</h5>
                        <div class="d-flex align-items-center">
                            <div class="card-icon rounded-circle d-flex align-items-center justify-content-center" style="background: #2eca6a;">
                                <i class="bi bi-check-circle text-white"></i>
                            </div>
                            <div class="ps-3">
                                <h6>{{ $activeCustomers }}</h6>
                                <span class="text-success small pt-1">Active</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Map Card -->
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h5 class="card-title mb-0">
                                <i class="bi bi-map text-primary"></i> Peta Sebaran Customer
                            </h5>
                            <div class="btn-group" role="group">
                                <button type="button" class="btn btn-sm btn-outline-primary" onclick="fitAllMarkers()">
                                    <i class="bi bi-arrows-fullscreen"></i> Fit All
                                </button>
                                <button type="button" class="btn btn-sm btn-outline-success" onclick="showCustomerList()">
                                    <i class="bi bi-list-ul"></i> Daftar Customer
                                </button>
                            </div>
                        </div>

                        @if($customers->count() > 0)
                            <div id="map" style="height: 600px; width: 100%; border-radius: 8px; border: 2px solid #dee2e6;"></div>
                            
                            <div class="mt-3">
                                <small class="text-muted">
                                    <i class="bi bi-info-circle"></i> 
                                    Menampilkan {{ $customersWithLocation }} customer dengan data lokasi. 
                                    Klik marker untuk melihat detail customer.
                                </small>
                            </div>
                        @else
                            <div class="text-center py-5">
                                <i class="bi bi-geo-alt text-muted" style="font-size: 64px;"></i>
                                <h5 class="text-muted mt-3">Belum Ada Data Lokasi Customer</h5>
                                <p class="text-muted">Pastikan customer memiliki data latitude dan longitude</p>
                                <a href="{{ route('data-customer.index') }}" class="btn btn-primary">
                                    <i class="bi bi-people"></i> Kelola Data Customer
                                </a>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- Customer List Modal -->
        <div class="modal fade" id="customerListModal" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">
                            <i class="bi bi-list-ul"></i> Daftar Customer dengan Lokasi
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="table-responsive">
                            <table class="table table-hover table-sm">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>Nama</th>
                                        <th>Telepon</th>
                                        <th>Status</th>
                                        <th>Lokasi</th>
                                        <th>Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($customers as $index => $customer)
                                    <tr>
                                        <td>{{ $index + 1 }}</td>
                                        <td>
                                            <strong>{{ $customer->name }}</strong><br>
                                            <small class="text-muted">{{ $customer->email }}</small>
                                        </td>
                                        <td>{{ $customer->phone }}</td>
                                        <td>
                                            <span class="badge bg-{{ $customer->status === 'active' ? 'success' : 'danger' }}">
                                                {{ ucfirst($customer->status) }}
                                            </span>
                                        </td>
                                        <td>
                                            <small class="text-muted">
                                                {{ number_format($customer->lat, 4) }}, 
                                                {{ number_format($customer->lon, 4) }}
                                            </small>
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-sm btn-primary" 
                                                    onclick="focusMarker({{ $index }})">
                                                <i class="bi bi-geo-alt"></i>
                                            </button>
                                            <a href="{{ route('data-customer.show', $customer->id) }}" 
                                               class="btn btn-sm btn-info" target="_blank">
                                                <i class="bi bi-eye"></i>
                                            </a>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
@if($customers->count() > 0)
<script>
// Namespace untuk menghindari konflik
window.CustomerMapApp = (function() {
    let customerMap;
    let customerMarkers = [];
    let customerInfoWindows = [];

    // Customer data
    const customersData = @json($customers);

    // Initialize map
    function initCustomerMap() {
        // Pastikan element map ada
        const mapElement = document.getElementById('map');
        if (!mapElement) {
            console.error('Map element not found!');
            return;
        }

        // Default center (Indonesia)
        const defaultCenter = { lat: -2.5489, lng: 118.0149 };

        // Create map
        customerMap = new google.maps.Map(mapElement, {
            center: defaultCenter,
            zoom: 5,
            mapTypeControl: true,
            streetViewControl: true,
            fullscreenControl: true,
            zoomControl: true
        });

        // Create markers for each customer
        customersData.forEach((customer, index) => {
            createCustomerMarker(customer, index);
        });

        // Fit map to show all markers
        if (customerMarkers.length > 0) {
            fitAllCustomerMarkers();
        }
    }

    // Create marker for customer
    function createCustomerMarker(customer, index) {
        const position = { 
            lat: parseFloat(customer.lat), 
            lng: parseFloat(customer.lon) 
        };

        // Choose marker color based on status
        const markerIcon = customer.status === 'active' 
            ? 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'
            : 'http://maps.google.com/mapfiles/ms/icons/red-dot.png';

        // Create marker
        const marker = new google.maps.Marker({
            position: position,
            map: customerMap,
            title: customer.name,
            icon: {
                url: markerIcon,
                scaledSize: new google.maps.Size(40, 40)
            },
            animation: google.maps.Animation.DROP
        });

        // Create info window content
        const photoUrl = customer.photo_profile 
            ? `{{ asset('storage/') }}/${customer.photo_profile}`
            : 'https://via.placeholder.com/80';

        const infoContent = `
            <div style="padding: 10px; max-width: 300px;">
                <div class="d-flex align-items-start">
                    <img src="${photoUrl}" alt="${customer.name}" 
                         style="width: 60px; height: 60px; object-fit: cover; border-radius: 50%; margin-right: 10px;">
                    <div>
                        <h6 class="mb-1"><strong>${customer.name}</strong></h6>
                        <p class="mb-1 small">
                            <i class="bi bi-telephone"></i> ${customer.phone}<br>
                            <i class="bi bi-envelope"></i> ${customer.email}
                        </p>
                        <span class="badge bg-${customer.status === 'active' ? 'success' : 'danger'} mb-2">
                            ${customer.status === 'active' ? 'Aktif' : 'Nonaktif'}
                        </span>
                    </div>
                </div>
                <hr class="my-2">
                <p class="mb-1 small">
                    <i class="bi bi-house-door"></i> ${customer.address}
                </p>
                <hr class="my-2">
                <p class="mb-2 small text-muted">
                    <i class="bi bi-pin-map"></i> 
                    ${parseFloat(customer.lat).toFixed(6)}, ${parseFloat(customer.lon).toFixed(6)}
                </p>
                <div class="d-flex gap-2">
                    <a href="{{ url('admin/data-customer') }}/${customer.id}" 
                       class="btn btn-sm btn-primary" target="_blank">
                        <i class="bi bi-eye"></i> Detail
                    </a>
                    <a href="https://www.google.com/maps?q=${customer.lat},${customer.lon}" 
                       class="btn btn-sm btn-success" target="_blank">
                        <i class="bi bi-map"></i> Google Maps
                    </a>
                </div>
            </div>
        `;

        // Create info window
        const infoWindow = new google.maps.InfoWindow({
            content: infoContent
        });

        // Show info window on marker click
        marker.addListener('click', function() {
            // Close all other info windows
            customerInfoWindows.forEach(iw => iw.close());
            // Open this info window
            infoWindow.open(customerMap, marker);
        });

        // Store marker and info window
        customerMarkers.push(marker);
        customerInfoWindows.push(infoWindow);
    }

    // Fit map to show all markers
    function fitAllCustomerMarkers() {
        if (customerMarkers.length === 0) return;

        const bounds = new google.maps.LatLngBounds();
        customerMarkers.forEach(marker => {
            bounds.extend(marker.getPosition());
        });
        customerMap.fitBounds(bounds);

        // Adjust zoom if only one marker
        if (customerMarkers.length === 1) {
            customerMap.setZoom(15);
        }
    }

    // Focus on specific marker
    function focusOnMarker(index) {
        if (index >= 0 && index < customerMarkers.length) {
            // Close customer list modal
            const modalElement = document.getElementById('customerListModal');
            const modal = bootstrap.Modal.getInstance(modalElement);
            if (modal) modal.hide();

            // Center map on marker
            customerMap.setCenter(customerMarkers[index].getPosition());
            customerMap.setZoom(16);

            // Close all info windows
            customerInfoWindows.forEach(iw => iw.close());

            // Open info window for this marker
            customerInfoWindows[index].open(customerMap, customerMarkers[index]);

            // Bounce marker
            customerMarkers[index].setAnimation(google.maps.Animation.BOUNCE);
            setTimeout(() => {
                customerMarkers[index].setAnimation(null);
            }, 1400);
        }
    }

    // Show customer list modal
    function showList() {
        const modal = new bootstrap.Modal(document.getElementById('customerListModal'));
        modal.show();
    }

    // Public API
    return {
        init: initCustomerMap,
        fitAll: fitAllCustomerMarkers,
        focus: focusOnMarker,
        showList: showList
    };
})();

// Initialize when Google Maps is loaded and DOM is ready
function initMap() {
    // Pastikan DOM sudah siap
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', function() {
            if (typeof google !== 'undefined' && google.maps) {
                CustomerMapApp.init();
            }
        });
    } else {
        if (typeof google !== 'undefined' && google.maps) {
            CustomerMapApp.init();
        }
    }
}

// Global functions untuk button onclick
function fitAllMarkers() {
    CustomerMapApp.fitAll();
}

function focusMarker(index) {
    CustomerMapApp.focus(index);
}

function showCustomerList() {
    CustomerMapApp.showList();
}

// Jika Google Maps sudah dimuat sebelumnya
if (typeof google !== 'undefined' && google.maps) {
    // Tunggu DOM ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initMap);
    } else {
        initMap();
    }
}
</script>

<!-- Load Google Maps hanya jika belum dimuat -->
<script>
(function() {
    // Cek apakah Google Maps sudah dimuat
    if (typeof google === 'undefined' || !google.maps) {
        const script = document.createElement('script');
        script.src = 'https://maps.googleapis.com/maps/api/js?key={{ config("google.maps.api_key") }}&callback=initMap&loading=async';
        script.async = true;
        script.defer = true;
        document.head.appendChild(script);
    } else {
        // Jika sudah dimuat, langsung init
        initMap();
    }
})();
</script>
@endif
@endpush