@extends('layout.app')

@section('title', 'Peta Jalur Fiber - Sistem Manajemen ISP')

@section('content')
<div class="row">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h1 class="h3 mb-0">Peta Jalur Fiber</h1>
            <div>
                <a href="{{ route('jalur-fiber.index') }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left me-2"></i>Kembali
                </a>
                <button type="button" class="btn btn-primary" onclick="refreshMap()">
                    <i class="fas fa-sync me-2"></i>Refresh
                </button>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-8">
        <div class="card shadow">
            <div class="card-header">
                <h6 class="m-0 font-weight-bold text-primary">Peta Jalur Fiber</h6>
            </div>
            <div class="card-body p-0">
                <div id="fiberMap" style="height: 600px; width: 100%;"></div>
            </div>
        </div>
    </div>
    
    <div class="col-lg-4">
        <!-- Statistics -->
        <div class="card shadow mb-4">
            <div class="card-header">
                <h6 class="m-0 font-weight-bold text-primary">Statistik Jalur Fiber</h6>
            </div>
            <div class="card-body">
                <div id="fiber-stats">
                    <div class="text-center">
                        <div class="spinner-border text-primary" role="status">
                            <span class="sr-only">Loading...</span>
                        </div>
                        <p class="mt-2">Memuat statistik...</p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Legend -->
        <div class="card shadow mb-4">
            <div class="card-header">
                <h6 class="m-0 font-weight-bold text-primary">Legenda</h6>
            </div>
            <div class="card-body">
                <div class="legend-item mb-2">
                    <span class="badge bg-primary me-2">Backbone</span>
                    <small>Jalur utama dengan kapasitas tinggi</small>
                </div>
                <div class="legend-item mb-2">
                    <span class="badge bg-info me-2">Distribution</span>
                    <small>Jalur distribusi dari backbone</small>
                </div>
                <div class="legend-item mb-2">
                    <span class="badge bg-success me-2">Access</span>
                    <small>Jalur akses ke pelanggan</small>
                </div>
                <div class="legend-item mb-2">
                    <span class="badge bg-warning me-2">Feeder</span>
                    <small>Jalur pengumpul dari access</small>
                </div>
            </div>
        </div>
        
        <!-- Status Legend -->
        <div class="card shadow">
            <div class="card-header">
                <h6 class="m-0 font-weight-bold text-primary">Status</h6>
            </div>
            <div class="card-body">
                <div class="legend-item mb-2">
                    <span class="badge bg-success me-2">Aktif</span>
                    <small>Jalur beroperasi normal</small>
                </div>
                <div class="legend-item mb-2">
                    <span class="badge bg-warning me-2">Maintenance</span>
                    <small>Jalur dalam perawatan</small>
                </div>
                <div class="legend-item mb-2">
                    <span class="badge bg-danger me-2">Nonaktif</span>
                    <small>Jalur tidak aktif</small>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('styles')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<style>
    /* Jalur Fiber Map - Argon Dashboard React Theme */
    #fiberMap {
        border-radius: 0 0 0.375rem 0.375rem;
        box-shadow: 0 0 2rem 0 rgba(136, 152, 170, 0.15);
    }
    
    .legend-item {
        display: flex;
        align-items: center;
        color: #525f7f;
    }
    
    .fiber-popup {
        max-width: 300px;
    }
    
    .fiber-popup h6 {
        margin-bottom: 0.625rem;
        color: #5e72e4;
        font-weight: 700;
    }
    
    .fiber-popup .info-row {
        margin-bottom: 0.3125rem;
        display: flex;
        justify-content: space-between;
    }
    
    .fiber-popup .info-label {
        font-weight: 600;
        color: #8898aa;
    }
    
    .fiber-popup .info-value {
        color: #525f7f;
    }
</style>
@endsection

@section('scripts')
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
let fiberMap;
let fiberLayers = {};

// Initialize map
document.addEventListener('DOMContentLoaded', function() {
    // Initialize map centered on Jakarta
    fiberMap = L.map('fiberMap').setView([-6.2088, 106.8456], 12);
    
    // Add tile layer
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors'
    }).addTo(fiberMap);
    
    // Load fiber paths
    loadFiberPaths();
    loadFiberStats();
});

function loadFiberPaths() {
    fetch('{{ route("jalur-fiber.get-for-map") }}')
    .then(response => response.json())
    .then(data => {
        // Clear existing layers
        Object.values(fiberLayers).forEach(layer => {
            fiberMap.removeLayer(layer);
        });
        fiberLayers = {};
        
        // Add fiber paths to map
        data.forEach(fiber => {
            if (fiber.koordinat) {
                try {
                    const coordinates = JSON.parse(fiber.koordinat);
                    if (Array.isArray(coordinates) && coordinates.length > 0) {
                        const latLngs = coordinates.map(coord => [coord.lat, coord.lng]);
                        
                        // Create polyline
                        const polyline = L.polyline(latLngs, {
                            color: getFiberColor(fiber.tipe_jalur),
                            weight: getFiberWeight(fiber.tipe_jalur),
                            opacity: 0.8
                        });
                        
                        // Add popup
                        polyline.bindPopup(createFiberPopup(fiber));
                        
                        // Add to map
                        polyline.addTo(fiberMap);
                        
                        // Store layer
                        fiberLayers[fiber.id] = polyline;
                    }
                } catch (e) {
                    console.error('Error parsing coordinates for fiber:', fiber.id, e);
                }
            }
        });
        
        // Fit map to show all paths
        if (Object.keys(fiberLayers).length > 0) {
            const group = new L.featureGroup(Object.values(fiberLayers));
            fiberMap.fitBounds(group.getBounds().pad(0.1));
        }
    })
    .catch(error => {
        console.error('Error loading fiber paths:', error);
    });
}

function createFiberPopup(fiber) {
    return `
        <div class="fiber-popup">
            <h6>${fiber.nama_jalur}</h6>
            <div class="info-row">
                <span class="info-label">Tipe:</span>
                <span class="info-value">${fiber.tipe_jalur}</span>
            </div>
            <div class="info-row">
                <span class="info-label">Panjang:</span>
                <span class="info-value">${fiber.panjang_meter} m</span>
            </div>
            <div class="info-row">
                <span class="info-label">Status:</span>
                <span class="info-value">${fiber.status}</span>
            </div>
            ${fiber.keterangan ? `
            <div class="info-row">
                <span class="info-label">Keterangan:</span>
                <span class="info-value">${fiber.keterangan}</span>
            </div>
            ` : ''}
        </div>
    `;
}

function getFiberColor(tipeJalur) {
    const colors = {
        'Backbone': '#dc3545',
        'Distribution': '#007bff',
        'Access': '#28a745',
        'Feeder': '#ffc107'
    };
    return colors[tipeJalur] || '#6c757d';
}

function getFiberWeight(tipeJalur) {
    const weights = {
        'Backbone': 6,
        'Distribution': 4,
        'Access': 3,
        'Feeder': 2
    };
    return weights[tipeJalur] || 2;
}

function loadFiberStats() {
    fetch('{{ route("jalur-fiber.get-stats") }}')
    .then(response => response.json())
    .then(data => {
        let html = '<div class="row">';
        html += '<div class="col-6"><div class="text-center"><h4 class="text-primary">' + data.total_jalur + '</h4><small>Total Jalur</small></div></div>';
        html += '<div class="col-6"><div class="text-center"><h4 class="text-success">' + (data.total_panjang / 1000).toFixed(2) + ' km</h4><small>Total Panjang</small></div></div>';
        html += '</div>';
        
        html += '<hr>';
        html += '<div class="row">';
        html += '<div class="col-6"><div class="text-center"><h5 class="text-success">' + data.aktif + '</h5><small>Aktif</small></div></div>';
        html += '<div class="col-6"><div class="text-center"><h5 class="text-warning">' + data.maintenance + '</h5><small>Maintenance</small></div></div>';
        html += '</div>';
        
        html += '<hr>';
        html += '<div class="row">';
        html += '<div class="col-6"><div class="text-center"><h5 class="text-primary">' + data.backbone + '</h5><small>Backbone</small></div></div>';
        html += '<div class="col-6"><div class="text-center"><h5 class="text-info">' + data.distribution + '</h5><small>Distribution</small></div></div>';
        html += '</div>';
        
        document.getElementById('fiber-stats').innerHTML = html;
    })
    .catch(error => {
        document.getElementById('fiber-stats').innerHTML = 
            '<div class="alert alert-danger">Error loading stats</div>';
    });
}

function refreshMap() {
    loadFiberPaths();
    loadFiberStats();
}
</script>
@endsection