@extends('layout.app')

@section('title', 'Peta Pelanggan & Infrastruktur - Sistem Manajemen ISP')

@section('styles')
<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<style>
    /* Map styles - Argon Dashboard React Theme */
    #map {
        height: 600px;
        width: 100%;
        border-radius: 0.5rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }
    
    .map-legend {
        background: white;
        padding: 1rem;
        border-radius: 0.5rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        border: 1px solid #e9ecef;
    }
    
    
    .legend-icon {
        width: 32px;
        height: 32px;
        margin-right: 12px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 14px;
        flex-shrink: 0;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .legend-icon .material-symbols-rounded {
        font-size: 18px !important;
        font-weight: normal;
        font-style: normal;
        line-height: 1;
        letter-spacing: normal;
        text-transform: none;
        display: inline-block;
        white-space: nowrap;
        word-wrap: normal;
        direction: ltr;
        -webkit-font-feature-settings: 'liga';
        -webkit-font-smoothing: antialiased;
    }
    
    .legend-item {
        display: flex;
        align-items: center;
        margin-bottom: 0.75rem;
        color: #525f7f;
        font-size: 0.875rem;
    }
    
    .legend-item:last-child {
        margin-bottom: 0;
    }
    
    .filter-controls {
        background: white;
        padding: 1.25rem;
        border-radius: 0.5rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        border: 1px solid #e9ecef;
        margin-bottom: 1.5rem;
    }
    
    .filter-controls .form-check {
        margin-bottom: 0;
        padding: 0.5rem 0.75rem;
        border-radius: 0.375rem;
        transition: background-color 0.2s;
    }
    
    .filter-controls .form-check:hover {
        background-color: #f8f9fa;
    }
    
    .filter-controls .form-check-input {
        width: 1.125rem;
        height: 1.125rem;
        margin-top: 0.125rem;
        margin-right: 0.5rem;
        cursor: pointer;
        border: 2px solid #dee2e6;
        flex-shrink: 0;
    }
    
    .filter-controls .form-check-input:checked {
        background-color: #5e72e4;
        border-color: #5e72e4;
    }
    
    .filter-controls .form-check-input:focus {
        border-color: #5e72e4;
        box-shadow: 0 0 0 0.2rem rgba(94, 114, 228, 0.25);
    }
    
    .filter-controls .form-check-label {
        font-size: 0.875rem;
        margin-left: 0;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        user-select: none;
    }
    
    .filter-controls .form-check-label i {
        font-size: 20px !important;
        line-height: 1;
        width: 20px;
        height: 20px;
        min-width: 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-weight: normal;
        font-style: normal;
        vertical-align: middle;
    }
    
    .filter-controls .form-check-label span {
        font-weight: 500;
        color: #525f7f;
        line-height: 1.5;
        white-space: nowrap;
    }
    
    .filter-controls .form-check {
        display: flex;
        align-items: center;
    }
    
    .filter-controls .form-check-input {
        margin-top: 0;
        align-self: center;
    }
    
    .leaflet-popup-content {
        min-width: 250px;
        max-width: 350px;
    }
    
    .popup-header {
        font-weight: 700;
        font-size: 1rem;
        margin-bottom: 0.625rem;
        padding-bottom: 0.5rem;
        border-bottom: 2px solid #5e72e4;
        color: #525f7f;
    }
    
    .popup-info {
        margin: 0.3125rem 0;
        font-size: 0.875rem;
        color: #525f7f;
    }
    
    .popup-photo {
        width: 100%;
        max-width: 280px;
        height: 150px;
        object-fit: cover;
        border-radius: 0.375rem;
        margin: 0.5rem 0;
        cursor: pointer;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        transition: transform 0.2s;
    }
    
    .popup-photo:hover {
        transform: scale(1.05);
    }
    
    .popup-photo-container {
        text-align: center;
        margin: 0.5rem 0;
    }
    
    .popup-photos-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
        margin: 0.5rem 0;
    }
    
    .popup-photo-small {
        width: 100%;
        height: 80px;
        object-fit: cover;
        border-radius: 0.25rem;
        cursor: pointer;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        transition: transform 0.2s;
    }
    
    .popup-photo-small:hover {
        transform: scale(1.1);
        z-index: 10;
        position: relative;
    }
    
    .popup-photo-label {
        font-size: 0.75rem;
        color: #8898aa;
        margin-top: 0.25rem;
    }
    
    /* Chart container */
    .card canvas {
        max-height: 200px;
    }
    
    /* Statistics Cards */
    .stat-card {
        transition: transform 0.2s, box-shadow 0.2s;
    }
    
    .stat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    }
    
    .stat-card .card-header {
        padding: 1rem 1.25rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }
    
    .stat-icon {
        width: 48px;
        height: 48px;
        min-width: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.5rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
    
    .stat-icon i {
        font-size: 24px;
        line-height: 1;
        font-weight: normal;
    }
    
    /* Card Headers */
    .card-header h6 {
        font-size: 0.875rem;
        font-weight: 600;
        color: #344767;
        display: flex;
        align-items: center;
    }
    
    .card-header h6 i {
        font-size: 20px;
        line-height: 1;
        margin-right: 0.5rem;
        color: #5e72e4;
    }
    
    /* Map Card */
    .map-card {
        border: none;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    }
    
    .map-card .card-body {
        padding: 0;
    }
</style>
@endsection

@section('content')
@php
    // Get theme color from controller or database
    $themeColor = DB::table('settings')->where('key', 'theme_color')->value('value') ?? 'primary';
    $themeGradient = 'bg-gradient-' . $themeColor;
@endphp

<div class="container-fluid py-4">
    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-xl-3 col-lg-6 col-md-6 mb-3">
            <div class="card stat-card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="flex-grow-1">
                            <p class="text-sm mb-1 text-capitalize text-muted" style="font-size: 0.75rem; font-weight: 500;">Total Pelanggan</p>
                            <h4 class="mb-0 font-weight-bold" id="totalCustomers" style="font-size: 1.5rem; color: #344767;">0</h4>
                        </div>
                        <div class="stat-icon bg-gradient-primary">
                            <i class="material-symbols-rounded text-white">people</i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-lg-6 col-md-6 mb-3">
            <div class="card stat-card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="flex-grow-1">
                            <p class="text-sm mb-1 text-capitalize text-muted" style="font-size: 0.75rem; font-weight: 500;">Infrastruktur</p>
                            <h4 class="mb-0 font-weight-bold" id="totalInfra" style="font-size: 1.5rem; color: #344767;">0</h4>
                        </div>
                        <div class="stat-icon bg-gradient-info">
                            <i class="material-symbols-rounded text-white">business</i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-lg-6 col-md-6 mb-3">
            <div class="card stat-card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="flex-grow-1">
                            <p class="text-sm mb-1 text-capitalize text-muted" style="font-size: 0.75rem; font-weight: 500;">Jalur Fiber</p>
                            <h4 class="mb-0 font-weight-bold" id="totalFiber" style="font-size: 1.5rem; color: #344767;">0</h4>
                        </div>
                        <div class="stat-icon bg-gradient-success">
                            <i class="material-symbols-rounded text-white">route</i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-lg-6 col-md-6 mb-3">
            <div class="card stat-card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="flex-grow-1">
                            <p class="text-sm mb-1 text-capitalize text-muted" style="font-size: 0.75rem; font-weight: 500;">Status Aktif</p>
                            <h4 class="mb-0 font-weight-bold" style="font-size: 1.5rem; color: #344767;">95%</h4>
                        </div>
                        <div class="stat-icon bg-gradient-warning">
                            <i class="material-symbols-rounded text-white">check_circle</i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col">
            <div class="card map-card">
                <div class="card-header pb-3">
                    <h6 class="mb-0 font-weight-bold d-flex align-items-center">
                        <i class="material-symbols-rounded">map</i>
                        Peta Pelanggan & Infrastruktur
                    </h6>
                </div>

                <div class="card-body pt-0">
                    <!-- Filter Controls -->
                    <div class="filter-controls">
                        <div class="row align-items-center g-2">
                            <div class="col-md-2 col-sm-6 col-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="showCustomers" checked>
                                    <label class="form-check-label" for="showCustomers">
                                        <i class="material-symbols-rounded text-primary">people</i>
                                        <span>Pelanggan</span>
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-2 col-sm-6 col-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="showInfrastructure" checked>
                                    <label class="form-check-label" for="showInfrastructure">
                                        <i class="material-symbols-rounded text-success">business</i>
                                        <span>Infrastruktur</span>
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-2 col-sm-6 col-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="showFiber" checked>
                                    <label class="form-check-label" for="showFiber">
                                        <i class="material-symbols-rounded text-info">route</i>
                                        <span>Jalur Fiber</span>
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-2 col-sm-6 col-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="showOlt" checked>
                                    <label class="form-check-label" for="showOlt">
                                        <i class="material-symbols-rounded text-danger">dns</i>
                                        <span>OLT</span>
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-2 col-sm-6 col-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="showGenieacs" checked>
                                    <label class="form-check-label" for="showGenieacs">
                                        <i class="material-symbols-rounded text-warning">wifi</i>
                                        <span>GenieACS</span>
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-2 col-sm-6 col-12">
                                <select class="form-control form-control-sm" id="statusFilter" style="height: 38px;">
                                    <option value="all">Semua Status</option>
                                    <option value="Aktif">Aktif</option>
                                    <option value="Nonaktif">Nonaktif</option>
                                    <option value="Suspend">Suspend</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-9">
                            <!-- Map Container -->
                            <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                                <div class="card-body p-0">
                                    <div id="map"></div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-lg-3">
                            <!-- Legend -->
                            <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                                <div class="card-header pb-3">
                                    <h6 class="mb-0 font-weight-bold d-flex align-items-center">
                                        <i class="material-symbols-rounded">info</i>
                                        Keterangan
                                    </h6>
                                </div>
                                <div class="card-body pt-3">
                                
                                <div class="legend-item">
                                    <div class="legend-icon" style="background-color: #28a745;">
                                        <i class="material-symbols-rounded">person</i>
                                    </div>
                                    <span>Pelanggan Aktif</span>
                                </div>
                                
                                <div class="legend-item">
                                    <div class="legend-icon" style="background-color: #dc3545;">
                                        <i class="material-symbols-rounded">person_off</i>
                                    </div>
                                    <span>Pelanggan Nonaktif</span>
                                </div>
                                
                                <div class="legend-item">
                                    <div class="legend-icon" style="background-color: #ffc107;">
                                        <i class="material-symbols-rounded">pause_circle</i>
                                    </div>
                                    <span>Pelanggan Suspend</span>
                                </div>
                                
                                <hr class="my-3">
                                
                                <div class="legend-item">
                                    <div class="legend-icon" style="background-color: #17a2b8;">
                                        <i class="material-symbols-rounded">tower</i>
                                    </div>
                                    <span>BTS/Tower</span>
                                </div>
                                
                                <div class="legend-item">
                                    <div class="legend-icon" style="background-color: #6c757d;">
                                        <i class="material-symbols-rounded">dns</i>
                                    </div>
                                    <span>POP/Data Center</span>
                                </div>
                                
                                <div class="legend-item">
                                    <div class="legend-icon" style="background-color: #007bff;">
                                        <i class="material-symbols-rounded">route</i>
                                    </div>
                                    <span>Jalur Fiber</span>
                                </div>
                                
                                <hr class="my-3">
                                
                                <div class="legend-item">
                                    <div class="legend-icon" style="background-color: #dc3545;">
                                        <i class="material-symbols-rounded">dns</i>
                                    </div>
                                    <span>OLT Device</span>
                                </div>
                                
                                <div class="legend-item">
                                    <div class="legend-icon" style="background-color: #ffc107;">
                                        <i class="material-symbols-rounded">wifi</i>
                                    </div>
                                    <span>GenieACS Device</span>
                                </div>
                                
                                <div class="legend-item">
                                    <div class="legend-icon" style="background-color: #20c997;">
                                        <i class="material-symbols-rounded">monitoring</i>
                                    </div>
                                    <span>NetXMS Node</span>
                                </div>
                                </div>
                            </div>
                            
                            <!-- Statistics Charts -->
                            <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                                <div class="card-header pb-3">
                                    <h6 class="mb-0 font-weight-bold d-flex align-items-center">
                                        <i class="material-symbols-rounded">pie_chart</i>
                                        Distribusi Pelanggan
                                    </h6>
                                </div>
                                <div class="card-body pt-3">
                                    <canvas id="customerStatusChart" height="200"></canvas>
                                </div>
                            </div>
                            
                            <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                                <div class="card-header pb-3">
                                    <h6 class="mb-0 font-weight-bold d-flex align-items-center">
                                        <i class="material-symbols-rounded">bar_chart</i>
                                        Distribusi Infrastruktur
                                    </h6>
                                </div>
                                <div class="card-body pt-3">
                                    <canvas id="infrastructureChart" height="200"></canvas>
                                </div>
                            </div>
                            
                            <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                                <div class="card-header pb-3">
                                    <h6 class="mb-0 font-weight-bold d-flex align-items-center">
                                        <i class="material-symbols-rounded">devices</i>
                                        Perangkat Network
                                    </h6>
                                </div>
                                <div class="card-body pt-3">
                                    <canvas id="networkDevicesChart" height="200"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<!-- Leaflet JS -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>

<script>
// Initialize map
const mapCenter = @json($mapCenter);
const map = L.map('map').setView([mapCenter.lat, mapCenter.lng], mapCenter.zoom);

// Add OpenStreetMap tiles
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors',
    maxZoom: 19
}).addTo(map);

// Layer groups
const customerLayer = L.layerGroup().addTo(map);
const infraLayer = L.layerGroup().addTo(map);
const fiberLayer = L.layerGroup().addTo(map);
const oltLayer = L.layerGroup().addTo(map);
const genieacsLayer = L.layerGroup().addTo(map);
const netxmsLayer = L.layerGroup().addTo(map);

// Data from backend
const pelangganData = @json($pelanggan);
const infrastrukturData = @json($infrastruktur);
const jalurFiberData = @json($jalurFiber);
const oltDevicesData = @json($oltDevices);
const genieacsDevicesData = @json($genieacsDevices);

// Custom icons - Map icon mapping
const iconMap = {
    'user': 'person',
    'tower-broadcast': 'tower',
    'server': 'dns',
    'box': 'inventory_2',
    'box-open': 'inventory',
    'wifi': 'wifi',
    'route': 'route',
    'chart-line': 'monitoring'
};

// Custom icons
const createIcon = (color, icon) => {
    // Convert Font Awesome icon name to Material Icons
    const materialIcon = iconMap[icon] || icon;
    
    return L.divIcon({
        className: 'custom-marker',
        html: `<div style="background-color: ${color}; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; border: 2px solid white; box-shadow: 0 2px 6px rgba(0,0,0,0.3);">
                <i class="material-symbols-rounded" style="font-size: 18px; font-weight: normal; font-style: normal; line-height: 1; display: inline-block;">${materialIcon}</i>
              </div>`,
        iconSize: [32, 32],
        iconAnchor: [16, 16],
        popupAnchor: [0, -16]
    });
};

// Load customers
function loadCustomers() {
    customerLayer.clearLayers();
    let count = 0;
    
    pelangganData.forEach(customer => {
        if (customer.latitude && customer.longitude) {
            const color = customer.status_layanan === 'Aktif' ? '#28a745' : 
                         customer.status_layanan === 'Suspend' ? '#ffc107' : '#dc3545';
            
            const marker = L.marker([parseFloat(customer.latitude), parseFloat(customer.longitude)], {
                icon: createIcon(color, 'user')
            }).addTo(customerLayer);
            
            const paketName = customer.paket ? customer.paket.nama_paket : 'N/A';
            const alamat = customer.alamat || 'N/A';
            
            // Build photo section - show foto_rumah if available, then other photos
            let photoHtml = '';
            const baseUrl = window.location.origin;
            const photos = [];
            
            // Collect all available photos
            if (customer.foto_rumah) {
                photos.push({url: customer.foto_rumah, label: 'Foto Rumah', priority: 1});
            }
            if (customer.foto) {
                photos.push({url: customer.foto, label: 'Foto Pelanggan', priority: 2});
            }
            if (customer.foto_ktp) {
                photos.push({url: customer.foto_ktp, label: 'Foto KTP', priority: 3});
            }
            if (customer.foto_instalasi) {
                photos.push({url: customer.foto_instalasi, label: 'Foto Instalasi', priority: 4});
            }
            
            // Sort by priority (foto_rumah first)
            photos.sort((a, b) => a.priority - b.priority);
            
            if (photos.length > 0) {
                // Show main photo (foto_rumah if available, otherwise first photo)
                const mainPhoto = photos.find(p => p.label === 'Foto Rumah') || photos[0];
                photoHtml = `
                    <div class="popup-photo-container">
                        <img src="${baseUrl}/storage/${mainPhoto.url}" 
                             alt="${mainPhoto.label}" 
                             class="popup-photo"
                             onclick="window.open('${baseUrl}/storage/${mainPhoto.url}', '_blank')">
                        <div class="popup-photo-label">${mainPhoto.label}</div>
                    </div>
                `;
                
                // If there are multiple photos, show thumbnails below
                if (photos.length > 1) {
                    const thumbnails = photos.filter(p => p.url !== mainPhoto.url).slice(0, 2);
                    if (thumbnails.length > 0) {
                        photoHtml += '<div class="popup-photos-grid">';
                        thumbnails.forEach(photo => {
                            photoHtml += `
                                <div style="position: relative;">
                                    <img src="${baseUrl}/storage/${photo.url}" 
                                         alt="${photo.label}" 
                                         class="popup-photo-small"
                                         onclick="window.open('${baseUrl}/storage/${photo.url}', '_blank')"
                                         title="${photo.label}">
                                </div>
                            `;
                        });
                        photoHtml += '</div>';
                    }
                }
            }
            
            marker.bindPopup(`
                <div class="popup-header">${customer.nama}</div>
                ${photoHtml}
                <div class="popup-info"><strong>No. Pelanggan:</strong> ${customer.nomor_pelanggan || 'N/A'}</div>
                <div class="popup-info"><strong>Alamat:</strong> ${alamat}</div>
                <div class="popup-info"><strong>Paket:</strong> ${paketName}</div>
                <div class="popup-info"><strong>Status:</strong> <span class="badge badge-${color === '#28a745' ? 'success' : color === '#ffc107' ? 'warning' : 'danger'}">${customer.status_layanan}</span></div>
                <div class="mt-2">
                    <a href="/pelanggan/${customer.id}" class="btn btn-sm btn-primary">Detail</a>
                </div>
            `);
            count++;
        }
    });
    
    document.getElementById('totalCustomers').textContent = count;
}

// Load infrastructure
function loadInfrastructure() {
    infraLayer.clearLayers();
    let count = 0;
    
    infrastrukturData.forEach(infra => {
        if (infra.latitude && infra.longitude) {
            let color = '#6c757d';
            let icon = 'server';
            
            // Set color and icon based on jenis
            switch(infra.jenis) {
                case 'BTS':
                    color = '#17a2b8';
                    icon = 'tower-broadcast';
                    break;
                case 'ODC':
                    color = '#6c757d';
                    icon = 'box';
                    break;
                case 'ODP':
                    color = '#6c757d';
                    icon = 'box-open';
                    break;
                case 'POP':
                case 'Data Center':
                    color = '#6c757d';
                    icon = 'server';
                    break;
                case 'AP':
                    color = '#20c997';
                    icon = 'wifi';
                    break;
            }
            
            const marker = L.marker([parseFloat(infra.latitude), parseFloat(infra.longitude)], {
                icon: createIcon(color, icon)
            }).addTo(infraLayer);
            
            marker.bindPopup(`
                <div class="popup-header">${infra.nama}</div>
                <div class="popup-info"><strong>Jenis:</strong> ${infra.jenis}</div>
                <div class="popup-info"><strong>Status:</strong> ${infra.status}</div>
                ${infra.alamat ? `<div class="popup-info"><strong>Alamat:</strong> ${infra.alamat}</div>` : ''}
                <div class="mt-2">
                    <a href="/infrastruktur/${infra.id}" class="btn btn-sm btn-success">Detail</a>
                </div>
            `);
            count++;
        }
    });
    
    document.getElementById('totalInfra').textContent = count;
}

// Load fiber paths
function loadFiberPaths() {
    fiberLayer.clearLayers();
    let count = 0;
    
    jalurFiberData.forEach(path => {
        if (path.koordinat) {
            let coordinates = [];
            try {
                // Try to parse JSON if it's a string
                const coords = typeof path.koordinat === 'string' ? JSON.parse(path.koordinat) : path.koordinat;
                coordinates = Array.isArray(coords) ? coords : [];
            } catch (e) {
                console.error('Error parsing coordinates:', e);
            }
            
            if (coordinates.length > 0) {
                const polyline = L.polyline(coordinates, {
                    color: '#007bff',
                    weight: 3,
                    opacity: 0.7
                }).addTo(fiberLayer);
                
                polyline.bindPopup(`
                    <div class="popup-header">${path.nama || 'Jalur Fiber'}</div>
                    <div class="popup-info"><strong>Status:</strong> ${path.status || 'N/A'}</div>
                    <div class="popup-info"><strong>Panjang:</strong> ${path.panjang_meter ? path.panjang_meter + ' m' : 'N/A'}</div>
                    <div class="mt-2">
                        <a href="/jalur-fiber/${path.id}" class="btn btn-sm btn-info">Detail</a>
                    </div>
                `);
                count++;
            }
        }
    });
    
    document.getElementById('totalFiber').textContent = count;
}

// Load OLT devices
function loadOltDevices() {
    oltLayer.clearLayers();
    let count = 0;
    
    // OLT devices might need to be linked to infrastructure for coordinates
    // For now, we'll show them if they have location info or link to infrastructure
    oltDevicesData.forEach(olt => {
        // Try to find matching infrastructure by name or location
        const matchingInfra = infrastrukturData.find(infra => 
            infra.nama && olt.nama && infra.nama.toLowerCase().includes(olt.nama.toLowerCase()) ||
            infra.lokasi && olt.lokasi && infra.lokasi.toLowerCase().includes(olt.lokasi.toLowerCase())
        );
        
        if (matchingInfra && matchingInfra.latitude && matchingInfra.longitude) {
            const marker = L.marker([parseFloat(matchingInfra.latitude), parseFloat(matchingInfra.longitude)], {
                icon: createIcon('#dc3545', 'server')
            }).addTo(oltLayer);
            
            marker.bindPopup(`
                <div class="popup-header">${olt.nama}</div>
                <div class="popup-info"><strong>IP Address:</strong> ${olt.ip_address || 'N/A'}</div>
                <div class="popup-info"><strong>Vendor:</strong> ${olt.vendor || 'N/A'}</div>
                <div class="popup-info"><strong>Model:</strong> ${olt.model || 'N/A'}</div>
                <div class="popup-info"><strong>Lokasi:</strong> ${olt.lokasi || 'N/A'}</div>
                <div class="mt-2">
                    <a href="/olt/${olt.id}" class="btn btn-sm btn-danger">Detail</a>
                </div>
            `);
            count++;
        }
    });
}

// Load GenieACS devices
function loadGenieacsDevices() {
    genieacsLayer.clearLayers();
    let count = 0;
    
    // GenieACS devices might need to be linked to infrastructure or pelanggan
    // For devices with IP, we can try to geolocate or link to infrastructure
    genieacsDevicesData.forEach(device => {
        // Try to find matching infrastructure by IP or hostname
        const matchingInfra = infrastrukturData.find(infra => 
            infra.nama && device.hostname && infra.nama.toLowerCase().includes(device.hostname.toLowerCase())
        );
        
        if (matchingInfra && matchingInfra.latitude && matchingInfra.longitude) {
            const marker = L.marker([parseFloat(matchingInfra.latitude), parseFloat(matchingInfra.longitude)], {
                icon: createIcon('#ffc107', 'wifi')
            }).addTo(genieacsLayer);
            
            marker.bindPopup(`
                <div class="popup-header">${device.hostname || device.serial_number}</div>
                <div class="popup-info"><strong>Serial Number:</strong> ${device.serial_number}</div>
                <div class="popup-info"><strong>IP Address:</strong> ${device.ip_address || 'N/A'}</div>
                <div class="popup-info"><strong>Status:</strong> <span class="badge badge-${device.status === 'Online' ? 'success' : 'danger'}">${device.status}</span></div>
                <div class="popup-info"><strong>Product Class:</strong> ${device.product_class || 'N/A'}</div>
                ${device.signal ? `<div class="popup-info"><strong>Signal:</strong> ${device.signal}</div>` : ''}
                <div class="mt-2">
                    <a href="/genieacs/${device.id}" class="btn btn-sm btn-warning">Detail</a>
                </div>
            `);
            count++;
        }
    });
}

// Load NetXMS nodes (from API)
async function loadNetxmsNodes() {
    try {
        const response = await fetch('/netxms/nodes');
        const result = await response.json();
        
        let nodeCount = 0;
        if (result.success && result.data) {
            netxmsLayer.clearLayers();
            
            result.data.forEach(node => {
                if (node.latitude && node.longitude) {
                    const marker = L.marker([parseFloat(node.latitude), parseFloat(node.longitude)], {
                        icon: createIcon('#20c997', 'chart-line')
                    }).addTo(netxmsLayer);
                    
                    marker.bindPopup(`
                        <div class="popup-header">${node.name || node.hostname || 'NetXMS Node'}</div>
                        <div class="popup-info"><strong>IP Address:</strong> ${node.ip_address || 'N/A'}</div>
                        <div class="popup-info"><strong>Status:</strong> <span class="badge badge-${node.status === 'online' ? 'success' : 'danger'}">${node.status || 'Unknown'}</span></div>
                    `);
                    nodeCount++;
                }
            });
        }
        
        // Update network chart with NetXMS count
        updateNetworkChart(nodeCount);
    } catch (error) {
        console.error('Error loading NetXMS nodes:', error);
        updateNetworkChart(0);
    }
}

// Filter controls
document.getElementById('showCustomers').addEventListener('change', function() {
    if (this.checked) {
        map.addLayer(customerLayer);
    } else {
        map.removeLayer(customerLayer);
    }
});

document.getElementById('showInfrastructure').addEventListener('change', function() {
    if (this.checked) {
        map.addLayer(infraLayer);
    } else {
        map.removeLayer(infraLayer);
    }
});

document.getElementById('showFiber').addEventListener('change', function() {
    if (this.checked) {
        map.addLayer(fiberLayer);
    } else {
        map.removeLayer(fiberLayer);
    }
});

document.getElementById('showOlt').addEventListener('change', function() {
    if (this.checked) {
        map.addLayer(oltLayer);
    } else {
        map.removeLayer(oltLayer);
    }
});

document.getElementById('showGenieacs').addEventListener('change', function() {
    if (this.checked) {
        map.addLayer(genieacsLayer);
    } else {
        map.removeLayer(genieacsLayer);
    }
});

// Initialize charts
function initCharts() {
    // Calculate statistics from data
    const customerStats = {
        aktif: pelangganData.filter(p => p.status_layanan === 'Aktif').length,
        suspend: pelangganData.filter(p => p.status_layanan === 'Suspend').length,
        nonaktif: pelangganData.filter(p => p.status_layanan === 'Nonaktif').length
    };
    
    // Infrastructure stats by jenis
    const infraStats = {};
    infrastrukturData.forEach(infra => {
        const jenis = infra.jenis || 'Lainnya';
        infraStats[jenis] = (infraStats[jenis] || 0) + 1;
    });
    
    // Network devices stats
    const networkStats = {
        olt: oltDevicesData.length,
        genieacs: genieacsDevicesData.length,
        netxms: 0 // Will be updated when NetXMS loads
    };
    
    // Customer Status Chart (Doughnut)
    const customerCtx = document.getElementById('customerStatusChart');
    if (customerCtx) {
        new Chart(customerCtx, {
            type: 'doughnut',
            data: {
                labels: ['Aktif', 'Suspend', 'Nonaktif'],
                datasets: [{
                    data: [customerStats.aktif, customerStats.suspend, customerStats.nonaktif],
                    backgroundColor: [
                        'rgba(40, 167, 69, 0.8)',
                        'rgba(255, 193, 7, 0.8)',
                        'rgba(220, 53, 69, 0.8)'
                    ],
                    borderColor: [
                        'rgba(40, 167, 69, 1)',
                        'rgba(255, 193, 7, 1)',
                        'rgba(220, 53, 69, 1)'
                    ],
                    borderWidth: 2
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            padding: 10,
                            usePointStyle: true
                        }
                    }
                }
            }
        });
    }
    
    // Infrastructure Chart (Bar)
    const infraCtx = document.getElementById('infrastructureChart');
    if (infraCtx) {
        const infraLabels = Object.keys(infraStats);
        const infraData = Object.values(infraStats);
        
        new Chart(infraCtx, {
            type: 'bar',
            data: {
                labels: infraLabels.length > 0 ? infraLabels : ['Infrastruktur'],
                datasets: [{
                    label: 'Jumlah',
                    data: infraData.length > 0 ? infraData : [0],
                    backgroundColor: 'rgba(23, 162, 184, 0.8)',
                    borderColor: 'rgba(23, 162, 184, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            stepSize: 1
                        }
                    }
                },
                plugins: {
                    legend: {
                        display: false
                    }
                }
            }
        });
    }
    
    // Network Devices Chart (Pie)
    const networkCtx = document.getElementById('networkDevicesChart');
    if (networkCtx) {
        window.networkChart = new Chart(networkCtx, {
            type: 'pie',
            data: {
                labels: ['OLT', 'GenieACS', 'NetXMS'],
                datasets: [{
                    data: [networkStats.olt, networkStats.genieacs, networkStats.netxms],
                    backgroundColor: [
                        'rgba(220, 53, 69, 0.8)',
                        'rgba(255, 193, 7, 0.8)',
                        'rgba(32, 201, 151, 0.8)'
                    ],
                    borderColor: [
                        'rgba(220, 53, 69, 1)',
                        'rgba(255, 193, 7, 1)',
                        'rgba(32, 201, 151, 1)'
                    ],
                    borderWidth: 2
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            padding: 10,
                            usePointStyle: true
                        }
                    }
                }
            }
        });
    }
}

// Update network devices chart when NetXMS loads
function updateNetworkChart(netxmsCount) {
    const networkCtx = document.getElementById('networkDevicesChart');
    if (networkCtx && window.networkChart) {
        window.networkChart.data.datasets[0].data[2] = netxmsCount;
        window.networkChart.update();
    }
}

// Initialize
document.addEventListener('DOMContentLoaded', function() {
    loadCustomers();
    loadInfrastructure();
    loadFiberPaths();
    loadOltDevices();
    loadGenieacsDevices();
    loadNetxmsNodes();
    initCharts();
});
</script>
@endsection