<?php $__env->startSection('title', 'Fiber GIS Map - Centipid ISP CRM'); ?>
<?php $__env->startSection('breadcrumb_parent', 'NETWORK'); ?>
<?php $__env->startSection('breadcrumb_current', 'Fiber Map'); ?>

<?php $__env->startSection('content'); ?>
<div class="space-y-6">
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-3xl font-extrabold text-white tracking-tight">Fiber <span class="text-orange-500">network map.</span></h1>
            <p class="text-xs text-slate-400 mt-1">Geographic physical fiber infrastructure, OLTs, closures, splitters & subscriber drops.</p>
        </div>
        <div class="flex items-center gap-3">
            <button onclick="openAddNodeModal()" class="flex items-center gap-2 btn-orange font-bold text-xs px-4 py-2.5 rounded-xl shadow-lg shadow-orange-500/20">
                <i data-lucide="plus" class="w-4 h-4"></i>
                <span>Add Fiber Node</span>
            </button>
        </div>
    </div>

    <!-- GIS Map Controls Bar matching spec -->
    <div class="custom-card p-3 rounded-xl flex items-center justify-between text-xs font-semibold">
        <div class="flex items-center gap-2">
            <span class="text-slate-500 uppercase text-[10px] tracking-wider px-2">Map Controls:</span>
            <button class="px-3 py-1.5 rounded-lg bg-[#222226] text-white flex items-center gap-1.5">
                <i data-lucide="map-pin" class="w-3.5 h-3.5 text-orange-500"></i> Node
            </button>
            <button class="px-3 py-1.5 rounded-lg bg-[#161618] text-slate-400 hover:text-white flex items-center gap-1.5">
                <i data-lucide="activity" class="w-3.5 h-3.5"></i> Route
            </button>
            <button class="px-3 py-1.5 rounded-lg bg-[#161618] text-slate-400 hover:text-white flex items-center gap-1.5">
                <i data-lucide="git-commit" class="w-3.5 h-3.5"></i> Drop
            </button>
        </div>

        <div class="flex items-center gap-3">
            <span class="text-emerald-400 text-xs font-mono font-bold flex items-center gap-1">
                <span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
                <?php echo e(count($nodes)); ?> GIS Infrastructure Elements Mapped
            </span>
        </div>
    </div>

    <!-- Leaflet.js GIS Interactive Map Container -->
    <div class="custom-card rounded-2xl overflow-hidden border border-[#2a2a2e]">
        <div id="fiberMap" class="h-[520px] w-full bg-[#121214]"></div>
    </div>
</div>

<!-- Modal: Add Fiber Node -->
<div id="addNodeModal" class="fixed inset-0 z-[9999] hidden bg-black/80 backdrop-blur-sm flex items-center justify-center p-4">
    <div class="custom-panel rounded-2xl max-w-md w-full p-6 shadow-2xl space-y-4">
        <div class="flex items-center justify-between border-b border-[#2a2a2e] pb-3">
            <h3 class="text-base font-bold text-white flex items-center gap-2">
                <i data-lucide="map-pin" class="w-5 h-5 text-orange-500"></i>
                <span>Add Fiber Node</span>
            </h3>
            <button onclick="closeAddNodeModal()" class="text-slate-400 hover:text-white">&times;</button>
        </div>

        <form action="<?php echo e(route('admin.network.storeFiber')); ?>" method="POST" class="space-y-4">
            <?php echo csrf_field(); ?>
            <div>
                <label class="block text-xs font-semibold text-slate-300 mb-1">Node Name *</label>
                <input type="text" name="name" required placeholder="e.g. Primary Splitter 1:16 #B" class="w-full bg-[#0f0f10] border border-[#2a2a2e] text-slate-100 text-xs rounded-xl px-3 py-2.5 focus:border-orange-500 focus:outline-none">
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-semibold text-slate-300 mb-1">Type *</label>
                    <select name="type" required class="w-full bg-[#0f0f10] border border-[#2a2a2e] text-slate-100 text-xs rounded-xl px-3 py-2.5 focus:border-orange-500 focus:outline-none">
                        <option value="POP">POP Station</option>
                        <option value="OLT">OLT Tower</option>
                        <option value="Closure">Fiber Closure</option>
                        <option value="Splitter">Splitter</option>
                        <option value="ODB">ODB Box</option>
                        <option value="Drop">Customer Drop</option>
                    </select>
                </div>
                <div>
                    <label class="block text-xs font-semibold text-slate-300 mb-1">Capacity</label>
                    <input type="text" name="capacity" value="1:16 PLC Splitter" class="w-full bg-[#0f0f10] border border-[#2a2a2e] text-slate-100 text-xs rounded-xl px-3 py-2.5 focus:border-orange-500 focus:outline-none">
                </div>
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-semibold text-slate-300 mb-1">Latitude *</label>
                    <input type="number" step="0.000001" name="lat" value="28.625000" required class="w-full bg-[#0f0f10] border border-[#2a2a2e] text-slate-100 text-xs rounded-xl px-3 py-2.5 focus:border-orange-500 focus:outline-none">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-slate-300 mb-1">Longitude *</label>
                    <input type="number" step="0.000001" name="lng" value="77.223000" required class="w-full bg-[#0f0f10] border border-[#2a2a2e] text-slate-100 text-xs rounded-xl px-3 py-2.5 focus:border-orange-500 focus:outline-none">
                </div>
            </div>

            <div class="flex items-center justify-end gap-3 pt-3 border-t border-[#2a2a2e]">
                <button type="button" onclick="closeAddNodeModal()" class="px-4 py-2 text-xs font-semibold text-slate-400 hover:text-white">Cancel</button>
                <button type="submit" class="btn-orange text-xs px-5 py-2.5 rounded-xl">Save Fiber Node</button>
            </div>
        </form>
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const map = L.map('fiberMap').setView([28.6200, 77.2180], 13);

        L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
            attribution: '&copy; OpenStreetMap &copy; CARTO',
            maxZoom: 19
        }).addTo(map);

        const nodes = <?php echo json_encode($nodes, 15, 512) ?>;
        const polyCoords = [];

        nodes.forEach(node => {
            const latLng = [parseFloat(node.lat), parseFloat(node.lng)];
            polyCoords.push(latLng);

            const marker = L.circleMarker(latLng, {
                radius: node.type === 'POP' || node.type === 'OLT' ? 10 : 6,
                color: node.type === 'POP' ? '#ff8800' : (node.type === 'OLT' ? '#10b981' : '#06b6d4'),
                fillColor: node.type === 'POP' ? '#ff8800' : (node.type === 'OLT' ? '#10b981' : '#06b6d4'),
                fillOpacity: 0.8
            }).addTo(map);

            marker.bindPopup(`
                <div style="font-family: sans-serif; font-size: 12px; color: #fff;">
                    <b style="color:#ff8800;">${node.type}: ${node.name}</b><br/>
                    <span>Capacity: ${node.capacity}</span>
                </div>
            `);
        });

        if(polyCoords.length > 1) {
            L.polyline(polyCoords, { color: '#ff8800', weight: 3, opacity: 0.7, dashArray: '5, 5' }).addTo(map);
        }
    });

    function openAddNodeModal() {
        document.getElementById('addNodeModal').classList.remove('hidden');
    }
    function closeAddNodeModal() {
        document.getElementById('addNodeModal').classList.add('hidden');
    }
</script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('layouts.admin', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\Users\RentEz\Desktop\projects\billingCRM\resources\views/admin/network/fiber.blade.php ENDPATH**/ ?>