@extends('layouts.main')

@section('content')
    <div class="pagetitle">
        <h1>Data Sebaran Worker</h1>
        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="/">Home</a></li>
                <li class="breadcrumb-item active">Data Sebaran Worker</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 Worker</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>{{ $totalWorkers }}</h6>
                                <span class="text-muted small pt-1">Worker Aktif</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>{{ $workersWithLocationCount }}</h6>
                                <span class="text-success small pt-1">
                                    {{ $totalWorkers > 0 ? round(($workersWithLocationCount / $totalWorkers) * 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">Sedang Bekerja</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-tools text-white"></i>
                            </div>
                            <div class="ps-3">
                                <h6>{{ $workersOnGoing }}</h6>
                                <span class="text-warning small pt-1">On Going</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">Worker Tersedia</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>{{ $workersFree }}</h6>
                                <span class="text-success small pt-1">Free</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 Worker Real-Time
                            </h5>
                            <div class="btn-group" role="group">
                                <button type="button" class="btn btn-sm btn-outline-primary" onclick="fitAllWorkerMarkers()">
                                    <i class="bi bi-arrows-fullscreen"></i> Fit All
                                </button>
                                <button type="button" class="btn btn-sm btn-outline-success" onclick="showWorkerList()">
                                    <i class="bi bi-list-ul"></i> Daftar Worker
                                </button>
                            </div>
                        </div>

                        @if($workersWithLocation->count() > 0)
                            <!-- Debug Info -->
                            <div class="alert alert-info mb-3">
                                <strong>Debug Info:</strong><br>
                                Total workers in collection: {{ $workersWithLocation->count() }}<br>
                                @foreach($workersWithLocation as $idx => $w)
                                    Worker {{ $idx + 1 }}: {{ $w->name }} | 
                                    Location: {{ $w->latest_location ? 'YES' : 'NO' }} |
                                    @if($w->latest_location)
                                        Lat: {{ $w->latest_location->lat }}, Lng: {{ $w->latest_location->lng }}
                                    @endif
                                    <br>
                                @endforeach
                            </div>
                            
                            <div id="worker-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 {{ $workersWithLocationCount }} worker dengan data lokasi real-time dari GPS tracking. 
                                    Klik marker untuk melihat detail worker dan status pekerjaan.
                                </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 Worker</h5>
                                <p class="text-muted">Worker belum mengirimkan lokasi melalui aplikasi mobile</p>
                                <a href="{{ route('data-worker.index') }}" class="btn btn-primary">
                                    <i class="bi bi-people"></i> Kelola Data Worker
                                </a>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- Worker List Modal -->
        <div class="modal fade" id="workerListModal" 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 Worker 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>Client & Pekerjaan</th>
                                        <th>Tipe</th>
                                        <th>Status</th>
                                        <th>Update Terakhir</th>
                                        <th>Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($workersWithLocation as $index => $worker)
                                    <tr>
                                        <td>{{ $index + 1 }}</td>
                                        <td>
                                            <strong>{{ $worker->name }}</strong><br>
                                            <small class="text-muted">{{ $worker->phone }}</small>
                                        </td>
                                        <td>
                                            @if($worker->current_job)
                                                <strong class="text-primary">{{ $worker->current_job->client_name }}</strong><br>
                                                <small class="text-muted">{{ Str::limit($worker->current_job->title, 40) }}</small>
                                            @elseif($worker->rombongan_assignment)
                                                <strong class="text-primary">{{ $worker->rombongan_assignment['order']->client_name }}</strong><br>
                                                <small class="text-muted">{{ Str::limit($worker->rombongan_assignment['order']->title, 40) }}</small>
                                            @else
                                                <span class="text-muted">-</span>
                                            @endif
                                        </td>
                                        <td>
                                            @if($worker->current_job)
                                                <span class="badge bg-primary">
                                                    <i class="bi bi-person"></i> Individu
                                                </span>
                                            @elseif($worker->rombongan_assignment)
                                                <span class="badge bg-info mb-2">
                                                    <i class="bi bi-people-fill"></i> Rombongan: {{ $worker->rombongan_assignment['rombongan']->name }}
                                                </span>
                                                <br>
                                                <div class="mt-1">
                                                    @foreach($worker->rombongan_assignment['members'] as $member)
                                                        <div class="d-flex align-items-center mb-1 {{ $member['is_current_worker'] ? 'bg-light p-1 rounded' : '' }}">
                                                            @if($member['role'] === 'ketua')
                                                                <i class="bi bi-person-badge text-primary me-1"></i>
                                                            @else
                                                                <i class="bi bi-person text-secondary me-1"></i>
                                                            @endif
                                                            <small>
                                                                <strong>{{ $member['user']->name }}</strong>
                                                                @if($member['location'])
                                                                    <span class="text-success">✓</span>
                                                                    <span class="text-muted">({{ $member['location']->updated_at->diffForHumans() }})</span>
                                                                @else
                                                                    <span class="text-danger">✗ No GPS</span>
                                                                @endif
                                                            </small>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            @else
                                                <span class="text-muted">-</span>
                                            @endif
                                        </td>
                                        <td>
                                            <span class="badge bg-{{ $worker->status_color }}">
                                                {{ $worker->status_label }}
                                            </span>
                                        </td>
                                        <td>
                                            <small class="text-muted">
                                                {{ $worker->latest_location->updated_at->diffForHumans() }}
                                            </small>
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-sm btn-primary" 
                                                    onclick="focusWorkerMarker({{ $index }})">
                                                <i class="bi bi-geo-alt"></i>
                                            </button>
                                            <a href="{{ route('data-worker.show', $worker->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($workersWithLocation->count() > 0)
<script>
// Namespace untuk menghindari konflik dengan customer map
window.WorkerDistributionMapApp = (function() {
    let workerMap;
    let workerMarkers = [];
    let workerInfoWindows = [];

    // Worker data
    const workersData = @json($workersWithLocation);
    
    // Debug: Log workers data
    console.log('=== WORKER DISTRIBUTION MAP DEBUG ===');
    console.log('Total workers with location:', workersData.length);
    console.log('Workers data:', workersData);
    
    workersData.forEach((worker, idx) => {
        console.log(`Worker ${idx + 1}:`, {
            name: worker.name,
            has_location: !!worker.latest_location,
            lat: worker.latest_location?.lat,
            lng: worker.latest_location?.lng,
            category: worker.category_jasa
        });
    });

    // Validate coordinate
    function isValidCoordinate(lat, lng) {
        const latitude = parseFloat(lat);
        const longitude = parseFloat(lng);
        
        return !isNaN(latitude) && 
               !isNaN(longitude) && 
               isFinite(latitude) && 
               isFinite(longitude) &&
               latitude >= -90 && 
               latitude <= 90 && 
               longitude >= -180 && 
               longitude <= 180;
    }

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

        console.log('Initializing worker distribution map with', workersData.length, 'workers');

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

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

        // Create markers for each worker
        let validMarkersCount = 0;
        workersData.forEach((worker, index) => {
            const created = createWorkerDistributionMarker(worker, index);
            if (created) validMarkersCount++;
            
            // If worker is in rombongan, create markers for other members too
            if (worker.rombongan_assignment && worker.rombongan_assignment.members) {
                worker.rombongan_assignment.members.forEach(member => {
                    // Skip the current worker (already created above)
                    if (!member.is_current_worker && member.location) {
                        const memberCreated = createRombonganMemberMarker(member, worker.rombongan_assignment);
                        if (memberCreated) validMarkersCount++;
                    }
                });
            }
        });

        // Fit map to show all markers
        if (validMarkersCount > 0) {
            fitAllWorkerDistributionMarkers();
        } else {
            console.warn('No valid worker locations found');
        }
    }

    // Create marker for worker
    function createWorkerDistributionMarker(worker, index) {
        if (!worker.latest_location) {
            console.warn(`Worker ${worker.name} has no location data`);
            return false;
        }

        // Validate coordinates - USING lat and lng (not latitude/longitude)
        if (!isValidCoordinate(worker.latest_location.lat, worker.latest_location.lng)) {
            console.error(`Invalid coordinates for worker ${worker.name}: 
                lat=${worker.latest_location.lat}, 
                lng=${worker.latest_location.lng}`);
            return false;
        }

        const position = { 
            lat: parseFloat(worker.latest_location.lat), 
            lng: parseFloat(worker.latest_location.lng) 
        };
        
        console.log(`Creating marker for ${worker.name} at`, position);

        // Choose marker color based on work status
        const markerIcon = worker.work_status === 'free'
            ? 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png' // Free = Blue
            : 'http://maps.google.com/mapfiles/ms/icons/yellow-dot.png'; // On Going = Yellow

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

        // Create info window content
        const photoUrl = worker.photo_profile 
            ? `{{ asset('storage/') }}/${worker.photo_profile}`
            : 'https://ui-avatars.com/api/?name=' + encodeURIComponent(worker.name) + '&size=80&background=4154f1&color=fff';

        // Format update time
        const updateTime = new Date(worker.latest_location.updated_at);
        const timeAgo = formatTimeAgo(updateTime);

        // Build job info if exists
        let jobInfo = '';
        if (worker.current_job) {
            // Individual assignment
            jobInfo = `
                <hr class="my-2">
                <div class="small">
                    <span class="badge bg-primary mb-2"><i class="bi bi-person"></i> Individu</span><br>
                    <strong><i class="bi bi-person-circle"></i> Client:</strong><br>
                    <span class="text-primary">${escapeHtml(worker.current_job.client_name)}</span><br>
                    <strong class="mt-1 d-block"><i class="bi bi-briefcase"></i> Pekerjaan:</strong><br>
                    <span class="text-dark">${escapeHtml(worker.current_job.title)}</span><br>
                    <small class="text-muted">Order ID: #${worker.current_job.id}</small>
                </div>
            `;
        } else if (worker.rombongan_assignment) {
            // Rombongan assignment
            const rombonganData = worker.rombongan_assignment;
            
            // Build members list with location status
            let membersList = '';
            if (rombonganData.members && rombonganData.members.length > 0) {
                membersList = '<div class="mt-2" style="max-height: 150px; overflow-y: auto;">';
                rombonganData.members.forEach(member => {
                    const icon = member.role === 'ketua' 
                        ? '<i class="bi bi-person-badge text-primary"></i>' 
                        : '<i class="bi bi-person text-secondary"></i>';
                    const highlight = member.is_current_worker ? 'background: #e3f2fd; padding: 2px 5px; border-radius: 3px;' : '';
                    const locationStatus = member.location 
                        ? `<span class="text-success">✓</span> <small class="text-muted">${formatTimeAgo(new Date(member.location.updated_at))}</small>`
                        : `<span class="text-danger">✗ No GPS</span>`;
                    
                    membersList += `
                        <div style="${highlight} margin-bottom: 3px;">
                            ${icon} <strong>${escapeHtml(member.user.name)}</strong><br>
                            <small style="margin-left: 20px;">${locationStatus}</small>
                        </div>
                    `;
                });
                membersList += '</div>';
            }
            
            jobInfo = `
                <hr class="my-2">
                <div class="small">
                    <span class="badge bg-info mb-2"><i class="bi bi-people-fill"></i> Rombongan</span><br>
                    <strong><i class="bi bi-people-fill"></i> Tim:</strong> ${escapeHtml(rombonganData.rombongan.name)}<br>
                    <strong><i class="bi bi-people"></i> Anggota Tim:</strong>
                    ${membersList}
                    <hr class="my-1">
                    <strong><i class="bi bi-person-circle"></i> Client:</strong><br>
                    <span class="text-primary">${escapeHtml(rombonganData.order.client_name)}</span><br>
                    <strong class="mt-1 d-block"><i class="bi bi-briefcase"></i> Pekerjaan:</strong><br>
                    <span class="text-dark">${escapeHtml(rombonganData.order.title)}</span><br>
                    <small class="text-muted">Order ID: #${rombonganData.order.id}</small>
                </div>
            `;
        }

        const categoryName = worker.category_jasa ? escapeHtml(worker.category_jasa.nama) : '-';
        
        const infoContent = `
            <div style="padding: 10px; max-width: 320px;">
                <div class="d-flex align-items-start">
                    <img src="${photoUrl}" alt="${escapeHtml(worker.name)}" 
                         onerror="this.src='https://ui-avatars.com/api/?name=${encodeURIComponent(worker.name)}&size=80&background=4154f1&color=fff'"
                         style="width: 60px; height: 60px; object-fit: cover; border-radius: 50%; margin-right: 10px;">
                    <div>
                        <h6 class="mb-1"><strong>${escapeHtml(worker.name)}</strong></h6>
                        <p class="mb-1 small">
                            <i class="bi bi-telephone"></i> ${escapeHtml(worker.username)}
                        </p>
                        <span class="badge bg-${worker.status_color} mb-2">
                            ${escapeHtml(worker.status_label)}
                        </span>
                    </div>
                </div>
                ${jobInfo}
                <hr class="my-2">
                <p class="mb-1 small text-muted">
                    <i class="bi bi-clock"></i> Update: ${timeAgo}<br>
                    <i class="bi bi-pin-map"></i> 
                    ${position.lat.toFixed(6)}, ${position.lng.toFixed(6)}
                </p>
                <div class="d-flex gap-2 mt-2">
                    <a href="{{ url('admin/data-worker') }}/${worker.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=${position.lat},${position.lng}" 
                       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
            workerInfoWindows.forEach(iw => iw.close());
            // Open this info window
            infoWindow.open(workerMap, marker);
        });

        // Store marker and info window
        workerMarkers.push(marker);
        workerInfoWindows.push(infoWindow);
        
        return true;
    }

    // Create marker for rombongan member (other than main worker)
    function createRombonganMemberMarker(member, rombonganData) {
        if (!member.location) {
            return false;
        }

        // Validate coordinates
        if (!isValidCoordinate(member.location.lat, member.location.lng)) {
            console.error(`Invalid coordinates for member ${member.user.name}`);
            return false;
        }

        const position = { 
            lat: parseFloat(member.location.lat), 
            lng: parseFloat(member.location.lng) 
        };

        console.log(`Creating rombongan member marker for ${member.user.name} at`, position);

        // Orange marker for rombongan members
        const markerIcon = 'http://maps.google.com/mapfiles/ms/icons/orange-dot.png';

        // Create marker
        const marker = new google.maps.Marker({
            position: position,
            map: workerMap,
            title: `${member.user.name} (${rombonganData.rombongan.name})`,
            icon: {
                url: markerIcon,
                scaledSize: new google.maps.Size(35, 35)
            },
            animation: google.maps.Animation.DROP
        });

        // Format update time
        const updateTime = new Date(member.location.updated_at);
        const timeAgo = formatTimeAgo(updateTime);

        // Build member info
        const roleIcon = member.role === 'ketua' 
            ? '<i class="bi bi-person-badge text-primary"></i>' 
            : '<i class="bi bi-person text-secondary"></i>';

        const infoContent = `
            <div style="padding: 10px; max-width: 300px;">
                <div class="mb-2">
                    <span class="badge bg-info mb-2">
                        <i class="bi bi-people-fill"></i> Anggota Rombongan
                    </span>
                </div>
                <h6 class="mb-1">${roleIcon} <strong>${escapeHtml(member.user.name)}</strong></h6>
                <p class="mb-1 small">
                    <i class="bi bi-telephone"></i> ${escapeHtml(member.user.phone)}<br>
                    <i class="bi bi-people-fill"></i> Tim: ${escapeHtml(rombonganData.rombongan.name)}
                </p>
                <hr class="my-2">
                <div class="small">
                    <strong><i class="bi bi-person-circle"></i> Client:</strong><br>
                    <span class="text-primary">${escapeHtml(rombonganData.order.client_name)}</span><br>
                    <strong class="mt-1 d-block"><i class="bi bi-briefcase"></i> Pekerjaan:</strong><br>
                    <span class="text-dark">${escapeHtml(rombonganData.order.title)}</span>
                </div>
                <hr class="my-2">
                <p class="mb-1 small text-muted">
                    <i class="bi bi-clock"></i> Update: ${timeAgo}<br>
                    <i class="bi bi-pin-map"></i> 
                    ${position.lat.toFixed(6)}, ${position.lng.toFixed(6)}
                </p>
                <div class="d-flex gap-2 mt-2">
                    <a href="{{ url('admin/data-worker') }}/${member.user.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=${position.lat},${position.lng}" 
                       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() {
            workerInfoWindows.forEach(iw => iw.close());
            infoWindow.open(workerMap, marker);
        });

        // Store marker and info window
        workerMarkers.push(marker);
        workerInfoWindows.push(infoWindow);
        
        return true;
    }

    // Escape HTML to prevent XSS
    function escapeHtml(text) {
        const map = {
            '&': '&amp;',
            '<': '&lt;',
            '>': '&gt;',
            '"': '&quot;',
            "'": '&#039;'
        };
        return String(text).replace(/[&<>"']/g, m => map[m]);
    }

    // Format time ago
    function formatTimeAgo(date) {
        const seconds = Math.floor((new Date() - date) / 1000);
        
        let interval = seconds / 31536000;
        if (interval > 1) return Math.floor(interval) + " tahun lalu";
        
        interval = seconds / 2592000;
        if (interval > 1) return Math.floor(interval) + " bulan lalu";
        
        interval = seconds / 86400;
        if (interval > 1) return Math.floor(interval) + " hari lalu";
        
        interval = seconds / 3600;
        if (interval > 1) return Math.floor(interval) + " jam lalu";
        
        interval = seconds / 60;
        if (interval > 1) return Math.floor(interval) + " menit lalu";
        
        return Math.floor(seconds) + " detik lalu";
    }

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

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

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

    // Focus on specific marker
    function focusOnWorkerMarker(index) {
        if (index >= 0 && index < workerMarkers.length) {
            // Close worker list modal
            const modalElement = document.getElementById('workerListModal');
            if (modalElement) {
                const modal = bootstrap.Modal.getInstance(modalElement);
                if (modal) modal.hide();
            }

            // Get marker position
            const position = workerMarkers[index].getPosition();
            
            // Validate position before centering
            if (position && isValidCoordinate(position.lat(), position.lng())) {
                // Center map on marker
                workerMap.setCenter(position);
                workerMap.setZoom(16);

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

                // Open info window for this marker
                workerInfoWindows[index].open(workerMap, workerMarkers[index]);

                // Bounce marker
                workerMarkers[index].setAnimation(google.maps.Animation.BOUNCE);
                setTimeout(() => {
                    workerMarkers[index].setAnimation(null);
                }, 1400);
            } else {
                console.error('Invalid marker position');
            }
        }
    }

    // Show worker list modal
    function showList() {
        const modalElement = document.getElementById('workerListModal');
        if (modalElement) {
            const modal = new bootstrap.Modal(modalElement);
            modal.show();
        }
    }

    // Public API
    return {
        init: initWorkerDistributionMap,
        fitAll: fitAllWorkerDistributionMarkers,
        focus: focusOnWorkerMarker,
        showList: showList
    };
})();

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

// Global functions untuk button onclick
function fitAllWorkerMarkers() {
    WorkerDistributionMapApp.fitAll();
}

function focusWorkerMarker(index) {
    WorkerDistributionMapApp.focus(index);
}

function showWorkerList() {
    WorkerDistributionMapApp.showList();
}

// Jika Google Maps sudah dimuat sebelumnya
if (typeof google !== 'undefined' && google.maps) {
    // Tunggu DOM ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initWorkerDistributionMapCallback);
    } else {
        initWorkerDistributionMapCallback();
    }
}
</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=initWorkerDistributionMapCallback&loading=async';
        script.async = true;
        script.defer = true;
        document.head.appendChild(script);
    } else {
        // Jika sudah dimuat, langsung init
        initWorkerDistributionMapCallback();
    }
})();
</script>
@endif
@endpush