@extends('layouts.app')

@section('title', 'Reseller Mapping Details')
@section('page-title', 'Reseller Mapping Details')

@push('styles')
<style>
    #networkTopologyMap {
        height: 500px;
        width: 100%;
        border-radius: 12px;
        border: 2px solid #dee2e6;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
    .map-container-wrapper {
        position: relative;
        margin-top: 20px;
    }
    .map-controls {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 1000;
        background: white;
        padding: 10px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }
    .map-controls button {
        margin: 5px;
        padding: 8px 12px;
        border: none;
        border-radius: 5px;
        background: #667eea;
        color: white;
        cursor: pointer;
        font-size: 0.9rem;
        transition: all 0.3s ease;
    }
    .map-controls button:hover {
        background: #5568d3;
        transform: translateY(-2px);
    }
    .map-info-window {
        padding: 10px;
    }
    .map-info-window h6 {
        margin: 0 0 8px 0;
        color: #667eea;
        font-weight: 600;
    }
    .map-info-window p {
        margin: 4px 0;
        font-size: 0.9rem;
        color: #6c757d;
    }
    .map-info-window .badge {
        margin-top: 5px;
    }
</style>
    body {
        background-color: #f8f9fa;
    }

    .container-fluid {
        background-color: #f8f9fa;
        min-height: 100vh;
        padding: 20px;
    }

    .card {
        border: none;
        border-radius: 15px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.08);
        margin-bottom: 2rem;
    }

    .card-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 15px 15px 0 0;
        border: none;
        padding: 1.5rem;
    }

    .card-title {
        font-weight: 600;
        margin: 0;
        font-size: 1.3rem;
    }

    .card-body {
        padding: 2rem;
    }

    .info-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.75rem 0;
        border-bottom: 1px solid #e9ecef;
    }

    .info-item:last-child {
        border-bottom: none;
    }

    .info-label {
        font-weight: 600;
        color: #495057;
        min-width: 150px;
    }

    .info-value {
        color: #6c757d;
        text-align: right;
        flex: 1;
    }

    .breadcrumb {
        background: none;
        padding: 0;
        margin-bottom: 1.5rem;
    }

    .breadcrumb-item a {
        color: #667eea;
        text-decoration: none;
    }

    .breadcrumb-item a:hover {
        text-decoration: underline;
    }

    .breadcrumb-item.active {
        color: #6c757d;
    }

    .btn-action {
        border-radius: 8px;
        padding: 0.5rem 1rem;
        font-weight: 500;
        transition: all 0.3s ease;
    }

    .btn-action:hover {
        transform: translateY(-1px);
    }

    .network-diagram {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        border: 2px solid #dee2e6;
        border-radius: 15px;
        padding: 40px;
        min-height: 600px;
        position: relative;
        overflow: hidden;
    }
    .network-diagram::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: 
            radial-gradient(circle at 20% 30%, rgba(102, 126, 234, 0.1) 0%, transparent 50%),
            radial-gradient(circle at 80% 70%, rgba(118, 75, 162, 0.1) 0%, transparent 50%);
        pointer-events: none;
    }
    .diagram-container {
        position: relative;
        z-index: 1;
    }
    .connection-line {
        position: absolute;
        background: linear-gradient(to bottom, #667eea, #764ba2);
        width: 3px;
        opacity: 0.6;
        z-index: 0;
        transition: opacity 0.3s ease;
    }
    .connection-line:hover {
        opacity: 1;
        width: 4px;
    }
    .node {
        background: white;
        border: 3px solid #007bff;
        border-radius: 15px;
        padding: 20px;
        margin: 15px;
        display: inline-block;
        box-shadow: 0 8px 16px rgba(0,0,0,0.1);
        min-width: 180px;
        text-align: center;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        z-index: 2;
        cursor: pointer;
    }
    .node:hover {
        transform: translateY(-5px) scale(1.05);
        box-shadow: 0 12px 24px rgba(0,0,0,0.2);
        border-width: 4px;
    }
    .node.reseller {
        border-color: #28a745;
        background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
        box-shadow: 0 8px 16px rgba(40, 167, 69, 0.2);
    }
    .node.reseller:hover {
        box-shadow: 0 12px 24px rgba(40, 167, 69, 0.3);
    }
    .node.reseller i {
        color: #28a745;
        animation: pulse 2s infinite;
    }
    .node.site {
        border-color: #007bff;
        background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
        box-shadow: 0 8px 16px rgba(0, 123, 255, 0.2);
    }
    .node.site:hover {
        box-shadow: 0 12px 24px rgba(0, 123, 255, 0.3);
    }
    .node.site i {
        color: #007bff;
    }
    .node.device {
        border-color: #ffc107;
        background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
        box-shadow: 0 8px 16px rgba(255, 193, 7, 0.2);
    }
    .node.device:hover {
        box-shadow: 0 12px 24px rgba(255, 193, 7, 0.3);
    }
    .node.device i {
        color: #ffc107;
    }
    .node.interface {
        border-color: #6c757d;
        background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
        font-size: 0.85rem;
        padding: 10px 15px;
        min-width: 140px;
        margin: 8px auto;
        border-width: 2px;
    }
    .node.interface:hover {
        transform: translateY(-3px) scale(1.03);
    }
    .node-icon {
        font-size: 2.5rem;
        margin-bottom: 10px;
        display: block;
    }
    .node-title {
        font-weight: 700;
        font-size: 1.1rem;
        margin-bottom: 8px;
        color: #212529;
    }
    .node-subtitle {
        font-size: 0.9rem;
        color: #6c757d;
        margin-top: 5px;
    }
    .connection-arrow {
        color: #667eea;
        font-size: 2rem;
        margin: 15px 0;
        animation: bounce 2s infinite;
        display: block;
    }
    @keyframes pulse {
        0%, 100% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.1);
        }
    }
    @keyframes bounce {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-10px);
        }
    }
    .device-group {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        margin-top: 20px;
        position: relative;
    }
    .device-wrapper {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .interface-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 15px;
        width: 100%;
    }
    .status-indicator {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-right: 5px;
        animation: blink 2s infinite;
    }
    .status-indicator.up {
        background-color: #28a745;
        box-shadow: 0 0 8px rgba(40, 167, 69, 0.6);
    }
    .status-indicator.down {
        background-color: #dc3545;
        box-shadow: 0 0 8px rgba(220, 53, 69, 0.6);
    }
    .status-indicator.inactive {
        background-color: #6c757d;
    }
    @keyframes blink {
        0%, 100% {
            opacity: 1;
        }
        50% {
            opacity: 0.5;
        }
    }
    .empty-state {
        text-align: center;
        padding: 60px 20px;
        color: #6c757d;
    }
    .empty-state i {
        font-size: 4rem;
        margin-bottom: 20px;
        opacity: 0.5;
    }
    .empty-state p {
        font-size: 1.1rem;
        margin-top: 10px;
    }
    .stat-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 12px;
        padding: 25px;
        margin-bottom: 15px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        transition: transform 0.2s;
    }
    .stat-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    }
    .stat-card h3 {
        font-size: 2.8rem;
        margin: 0;
        font-weight: bold;
    }
    .stat-card p {
        margin: 8px 0 0 0;
        opacity: 0.95;
        font-size: 0.95rem;
    }
    .report-section {
        background: white;
        border-radius: 8px;
        padding: 20px;
        margin-top: 20px;
    }
    .info-card {
        border-left: 4px solid #007bff;
        background: #f8f9fa;
        padding: 15px;
        border-radius: 4px;
        margin-bottom: 15px;
    }
    .chart-container {
        position: relative;
        height: 300px;
        margin-top: 20px;
    }
    #siteMap {
        height: 300px;
        width: 100%;
        border-radius: 8px;
        border: 1px solid #dee2e6;
    }
    .detail-badge {
        font-size: 0.85rem;
        padding: 5px 10px;
        border-radius: 20px;
    }
    .timeline-item {
        border-left: 3px solid #007bff;
        padding-left: 20px;
        margin-bottom: 20px;
        position: relative;
    }
    .timeline-item::before {
        content: '';
        position: absolute;
        left: -8px;
        top: 5px;
        width: 13px;
        height: 13px;
        border-radius: 50%;
        background: #007bff;
    }
</style>
@endpush

@section('content')
<div class="container-fluid">
    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="{{ route('reseller.isp.reseller-mappings.index') }}">
                    <i class="fas fa-network-wired me-1"></i>Reseller Mappings
                </a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">
                @if($ispResellerMapping->user)
                    {{ $ispResellerMapping->user->name }}
                @else
                    {{ $ispResellerMapping->reseller_name ?? 'Reseller #' . $ispResellerMapping->reseller_id }}
                @endif
            </li>
        </ol>
    </nav>

    <!-- Header Card -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h5 class="card-title mb-0">
                                <i class="fas fa-network-wired me-2"></i>
                                @if($ispResellerMapping->user)
                                    {{ $ispResellerMapping->user->name }}
                                @else
                                    {{ $ispResellerMapping->reseller_name ?? 'Reseller #' . $ispResellerMapping->reseller_id }}
                                @endif
                            </h5>
                            <p class="text-white-50 mb-0 mt-2">Reseller Mapping Report & Network Diagram</p>
                        </div>
                        <div class="d-flex gap-2">
                            <button onclick="window.print()" class="btn btn-light btn-action">
                                <i class="fas fa-print me-1"></i>Print Report
                            </button>
                            <a href="{{ route('reseller.isp.reseller-mappings.edit', $ispResellerMapping->reseller_id) }}" class="btn btn-warning btn-action">
                                <i class="fas fa-edit me-1"></i>Edit
                            </a>
                            <a href="{{ route('reseller.isp.reseller-mappings.index') }}" class="btn btn-light btn-action">
                                <i class="fas fa-arrow-left me-1"></i>Back
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="stat-card">
                <h3>{{ $stats['total_devices'] }}</h3>
                <p><i class="fas fa-server mr-2"></i>Total Devices</p>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stat-card" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
                <h3>{{ $stats['total_interfaces'] }}</h3>
                <p><i class="fas fa-plug mr-2"></i>Total Interfaces</p>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stat-card" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
                <h3>{{ $stats['active_interfaces'] }}</h3>
                <p><i class="fas fa-check-circle mr-2"></i>Active Interfaces</p>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stat-card" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
                <h3>{{ $stats['total_links'] }}</h3>
                <p><i class="fas fa-link mr-2"></i>Network Links</p>
            </div>
        </div>
    </div>

    <!-- Network Diagram -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-project-diagram me-2"></i>Network Topology Diagram
                    </h5>
                </div>
                <div class="card-body">
                    <div class="network-diagram" id="networkDiagram">
                        <div class="diagram-container">
                            <!-- Reseller Node -->
                            <div class="text-center mb-4">
                                <div class="node reseller" style="display: inline-block;">
                                    <i class="fas fa-user-tie node-icon"></i>
                                    <div class="node-title">Reseller</div>
                                    <div class="node-subtitle">
                                        @if($ispResellerMapping->user)
                                            {{ $ispResellerMapping->user->name }}
                                            @if($ispResellerMapping->user->company_name)
                                                <br><small>{{ $ispResellerMapping->user->company_name }}</small>
                                            @endif
                                        @else
                                            {{ $ispResellerMapping->reseller_name ?? 'N/A' }}
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <!-- Site Node -->
                            @if($ispResellerMapping->site)
                            <div class="text-center my-4">
                                <i class="fas fa-arrow-down connection-arrow"></i>
                            </div>
                            <div class="text-center mb-4">
                                <div class="node site" style="display: inline-block;">
                                    <i class="fas fa-map-marker-alt node-icon"></i>
                                    <div class="node-title">Site</div>
                                    <div class="node-subtitle">
                                        {{ $ispResellerMapping->site->site_name }}
                                        <br><small class="badge bg-info mt-2">{{ $ispResellerMapping->site->site_type }}</small>
                                        @if($ispResellerMapping->site->address)
                                            <br><small class="text-muted mt-1 d-block">{{ strlen($ispResellerMapping->site->address) > 40 ? substr($ispResellerMapping->site->address, 0, 40) . '...' : $ispResellerMapping->site->address }}</small>
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <!-- Devices -->
                            @if($devices->count() > 0)
                            <div class="text-center my-4">
                                <i class="fas fa-arrow-down connection-arrow"></i>
                            </div>
                            <div class="device-group">
                                @foreach($devices as $device)
                                <div class="device-wrapper">
                                    <div class="node device">
                                        <i class="fas fa-server node-icon"></i>
                                        <div class="node-title">{{ $device->device_name ?? 'Device #' . $device->device_id }}</div>
                                        <div class="node-subtitle">
                                            <span class="badge bg-warning text-dark">{{ $device->device_type ?? 'N/A' }}</span>
                                            @if($device->ip_address)
                                                <br><small class="text-muted mt-1 d-block"><i class="fas fa-network-wired me-1"></i>{{ $device->ip_address }}</small>
                                            @endif
                                        </div>
                                    </div>
                                    
                                    <!-- Interfaces -->
                                    @if($device->interfaces->count() > 0)
                                    <div class="interface-group">
                                        @foreach($device->interfaces as $interface)
                                        <div class="node interface">
                                            <div class="d-flex align-items-center justify-content-between">
                                                <div class="d-flex align-items-center">
                                                    <span class="status-indicator {{ $interface->status }}"></span>
                                                    <i class="fas fa-plug me-2"></i>
                                                    <span class="fw-bold">{{ $interface->interface_name ?? 'Interface' }}</span>
                                                </div>
                                                <span class="badge bg-{{ $interface->status == 'up' ? 'success' : ($interface->status == 'down' ? 'danger' : 'secondary') }}">
                                                    {{ ucfirst($interface->status) }}
                                                </span>
                                            </div>
                                            @if($interface->ip_address)
                                                <small class="text-muted d-block mt-1"><i class="fas fa-ip me-1"></i>{{ $interface->ip_address }}</small>
                                            @endif
                                        </div>
                                        @endforeach
                                    </div>
                                    @endif
                                </div>
                                @endforeach
                            </div>
                            @else
                            <div class="empty-state">
                                <i class="fas fa-server"></i>
                                <p class="mb-0">No devices found for this site</p>
                            </div>
                            @endif
                            @else
                            <div class="empty-state">
                                <i class="fas fa-map-marker-alt"></i>
                                <p class="mb-0">No site assigned to this reseller mapping</p>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Google Maps Network Topology -->
    @if($ispResellerMapping->site && ($ispResellerMapping->site->latitude && $ispResellerMapping->site->longitude))
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-map-marked-alt me-2"></i>Network Topology on Google Map
                    </h5>
                </div>
                <div class="card-body">
                    <div class="map-container-wrapper">
                        <div id="networkTopologyMap"></div>
                        <div class="map-controls">
                            <button onclick="resetMapView()" title="Reset View">
                                <i class="fas fa-home"></i> Reset
                            </button>
                            <button onclick="toggleSatelliteView()" title="Toggle Satellite View">
                                <i class="fas fa-satellite"></i> Satellite
                            </button>
                        </div>
                    </div>
                    <div class="mt-3">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="info-item">
                                    <span class="info-label"><i class="fas fa-map-marker-alt text-danger me-2"></i>Site Location:</span>
                                    <span class="info-value">
                                        {{ $ispResellerMapping->site->site_name }}
                                        <br><small class="text-muted">Lat: {{ $ispResellerMapping->site->latitude }}, Lng: {{ $ispResellerMapping->site->longitude }}</small>
                                    </span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="info-item">
                                    <span class="info-label"><i class="fas fa-route text-primary me-2"></i>Fiber Routes:</span>
                                    <span class="info-value">
                                        {{ $fiberRoutes->count() }} route(s) connected
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @elseif($ispResellerMapping->site)
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-map-marked-alt me-2"></i>Network Topology on Google Map
                    </h5>
                </div>
                <div class="card-body">
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle me-2"></i>
                        Site location coordinates are not available. Please add latitude and longitude to the site to view it on the map.
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

    <!-- Detailed Report -->
    <div class="row">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-info-circle me-2"></i>Reseller Information
                    </h5>
                </div>
                <div class="card-body">
                    <div class="info-item">
                        <span class="info-label">Mapping ID:</span>
                        <span class="info-value"><strong>#{{ $ispResellerMapping->reseller_id }}</strong></span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Reseller:</span>
                        <span class="info-value">
                            @if($ispResellerMapping->user)
                                <strong>{{ $ispResellerMapping->user->name }}</strong>
                                @if($ispResellerMapping->user->company_name)
                                    <br><small class="text-muted">{{ $ispResellerMapping->user->company_name }}</small>
                                @endif
                                @if($ispResellerMapping->user->email)
                                    <br><small class="text-muted"><i class="fas fa-envelope me-1"></i>{{ $ispResellerMapping->user->email }}</small>
                                @endif
                                @if($ispResellerMapping->user->phone)
                                    <br><small class="text-muted"><i class="fas fa-phone me-1"></i>{{ $ispResellerMapping->user->phone }}</small>
                                @endif
                            @else
                                {{ $ispResellerMapping->reseller_name ?? '-' }}
                            @endif
                        </span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Site:</span>
                        <span class="info-value">
                            @if($ispResellerMapping->site)
                                <strong>{{ $ispResellerMapping->site->site_name }}</strong>
                                <br><small class="text-muted">Type: {{ $ispResellerMapping->site->site_type }}</small>
                                @if($ispResellerMapping->site->address)
                                    <br><small class="text-muted">{{ $ispResellerMapping->site->address }}</small>
                                @endif
                            @else
                                <span class="text-muted">Not assigned</span>
                            @endif
                        </span>
                    </div>
                    @if($ispResellerMapping->contact_info)
                    <div class="info-item">
                        <span class="info-label">Contact Info:</span>
                        <span class="info-value">{{ $ispResellerMapping->contact_info }}</span>
                    </div>
                    @endif
                    <div class="info-item">
                        <span class="info-label">Created At:</span>
                        <span class="info-value">{{ $ispResellerMapping->created_at->format('M d, Y h:i A') }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Last Updated:</span>
                        <span class="info-value">{{ $ispResellerMapping->updated_at->format('M d, Y h:i A') }}</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card">
                <div class="card-header" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-chart-bar me-2"></i>Network Statistics Report
                    </h5>
                </div>
                <div class="card-body">
                    <div class="info-item">
                        <span class="info-label"><i class="fas fa-server text-primary me-2"></i>Total Devices:</span>
                        <span class="info-value"><strong>{{ $stats['total_devices'] }}</strong></span>
                    </div>
                    <div class="info-item">
                        <span class="info-label"><i class="fas fa-plug text-info me-2"></i>Total Interfaces:</span>
                        <span class="info-value"><strong>{{ $stats['total_interfaces'] }}</strong></span>
                    </div>
                    <div class="info-item">
                        <span class="info-label"><i class="fas fa-check-circle text-success me-2"></i>Active Interfaces:</span>
                        <span class="info-value"><strong>{{ $stats['active_interfaces'] }}</strong></span>
                    </div>
                    <div class="info-item">
                        <span class="info-label"><i class="fas fa-times-circle text-danger me-2"></i>Inactive Interfaces:</span>
                        <span class="info-value"><strong>{{ $stats['total_interfaces'] - $stats['active_interfaces'] }}</strong></span>
                    </div>
                    <div class="info-item">
                        <span class="info-label"><i class="fas fa-link text-warning me-2"></i>Network Links:</span>
                        <span class="info-value"><strong>{{ $stats['total_links'] }}</strong></span>
                    </div>
                    @if($stats['total_capacity_mbps'] > 0)
                    <div class="info-item">
                        <span class="info-label"><i class="fas fa-tachometer-alt text-info me-2"></i>Total Capacity:</span>
                        <span class="info-value"><strong>{{ number_format($stats['total_capacity_mbps'], 2) }} Mbps</strong></span>
                    </div>
                    @endif

                    @if($stats['total_interfaces'] > 0)
                    <div class="mt-4">
                        <h6 class="font-weight-bold mb-3">Interface Status Distribution</h6>
                        <div class="progress mb-2" style="height: 30px;">
                            <div class="progress-bar bg-success d-flex align-items-center justify-content-center" role="progressbar" 
                                 style="width: {{ ($stats['active_interfaces'] / $stats['total_interfaces']) * 100 }}%">
                                <span class="text-white fw-bold">Active: {{ $stats['active_interfaces'] }}</span>
                            </div>
                            <div class="progress-bar bg-danger d-flex align-items-center justify-content-center" role="progressbar" 
                                 style="width: {{ (($stats['total_interfaces'] - $stats['active_interfaces']) / $stats['total_interfaces']) * 100 }}%">
                                <span class="text-white fw-bold">Inactive: {{ $stats['total_interfaces'] - $stats['active_interfaces'] }}</span>
                            </div>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Devices Details Table -->
    @if($devices->count() > 0)
    <div class="row mt-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-list me-2"></i>Devices & Interfaces Details
                    </h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th>Device</th>
                                    <th>Type</th>
                                    <th>IP Address</th>
                                    <th>MAC Address</th>
                                    <th>Interfaces</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($devices as $device)
                                <tr>
                                    <td><strong>{{ $device->device_name ?? 'Device #' . $device->device_id }}</strong></td>
                                    <td><span class="badge bg-warning text-dark">{{ $device->device_type ?? '-' }}</span></td>
                                    <td>{{ $device->ip_address ?? '-' }}</td>
                                    <td>{{ $device->mac_address ?? '-' }}</td>
                                    <td>
                                        @if($device->interfaces->count() > 0)
                                            @foreach($device->interfaces as $interface)
                                                <span class="badge bg-{{ $interface->status == 'up' ? 'success' : ($interface->status == 'down' ? 'danger' : 'secondary') }} me-1 mb-1">
                                                    {{ $interface->interface_name }} ({{ $interface->status }})
                                                </span>
                                            @endforeach
                                        @else
                                            <span class="text-muted">No interfaces</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($device->interfaces->count() > 0)
                                            @php
                                                $activeCount = $device->interfaces->where('status', 'up')->count();
                                                $totalCount = $device->interfaces->count();
                                            @endphp
                                            <span class="badge bg-{{ $activeCount == $totalCount ? 'success' : ($activeCount > 0 ? 'warning' : 'danger') }}">
                                                {{ $activeCount }}/{{ $totalCount }} Active
                                            </span>
                                        @else
                                            <span class="badge bg-secondary">N/A</span>
                                        @endif
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

    <!-- Network Links Section -->
    @if($links->count() > 0)
    <div class="row mt-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-link me-2"></i>Network Links ({{ $links->count() }})
                    </h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th>From Device</th>
                                    <th>From Interface</th>
                                    <th>To Device</th>
                                    <th>To Interface</th>
                                    <th>Capacity</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($links as $link)
                                <tr>
                                    <td><strong>{{ $link->fromInterface->device->device_name ?? 'Device #' . $link->fromInterface->device_id }}</strong></td>
                                    <td>{{ $link->fromInterface->interface_name ?? '-' }}</td>
                                    <td><strong>{{ $link->toInterface->device->device_name ?? 'Device #' . $link->toInterface->device_id }}</strong></td>
                                    <td>{{ $link->toInterface->interface_name ?? '-' }}</td>
                                    <td>{{ $link->capacity_mbps ? number_format($link->capacity_mbps, 2) . ' Mbps' : '-' }}</td>
                                    <td>
                                        <span class="badge bg-{{ $link->status == 'active' ? 'success' : ($link->status == 'inactive' ? 'danger' : 'secondary') }}">
                                            {{ ucfirst($link->status ?? 'Unknown') }}
                                        </span>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

    <!-- Fiber Routes Section -->
    @if($fiberRoutes->count() > 0)
    <div class="row mt-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header" style="background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-route me-2"></i>Fiber Routes ({{ $fiberRoutes->count() }})
                    </h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th>Route Name</th>
                                    <th>Start Site</th>
                                    <th>End Site</th>
                                    <th>Length (km)</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($fiberRoutes as $route)
                                <tr>
                                    <td><strong>{{ $route->route_name ?? 'Route #' . $route->route_id }}</strong></td>
                                    <td>{{ $route->startSite->site_name ?? '-' }}</td>
                                    <td>{{ $route->endSite->site_name ?? '-' }}</td>
                                    <td>{{ $route->length_km ? number_format($route->length_km, 2) . ' km' : '-' }}</td>
                                    <td>
                                        <span class="badge bg-{{ $route->status == 'active' ? 'success' : ($route->status == 'inactive' ? 'danger' : 'secondary') }}">
                                            {{ ucfirst($route->status ?? 'Unknown') }}
                                        </span>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif
</div>

@push('scripts')
<script>
let topologyMap;
let topologyMarkers = [];
let topologyPolylines = [];
let isSatelliteView = false;
let defaultCenter = { lat: 23.8103, lng: 90.4125 }; // Default: Dhaka, Bangladesh

// Site data from PHP
const siteData = @json($siteDataForJs);

// Fiber routes data
const fiberRoutesData = @json($fiberRoutesDataForJs);

// Load Google Maps API
function loadGoogleMapsAPI() {
    if (typeof google !== 'undefined' && google.maps) {
        initTopologyMap();
        return;
    }

    const script = document.createElement('script');
    script.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyCJ6bQnxONHYHcdar2wxnatHnitsWeLX6E&libraries=geometry&callback=initTopologyMap';
    script.async = true;
    script.defer = true;
    script.onerror = function() {
        document.getElementById('networkTopologyMap').innerHTML = 
            '<div style="padding: 40px; text-align: center; color: #dc3545;">' +
            '<i class="fas fa-exclamation-triangle fa-3x mb-3"></i>' +
            '<p><strong>Google Maps could not be loaded</strong></p>' +
            '<p>Please check your internet connection.</p>' +
            '</div>';
    };
    document.head.appendChild(script);
}

// Initialize topology map
function initTopologyMap() {
    const mapElement = document.getElementById('networkTopologyMap');
    if (!mapElement) return;

    // Set center based on site location or default
    if (siteData && siteData.latitude && siteData.longitude) {
        defaultCenter = { lat: parseFloat(siteData.latitude), lng: parseFloat(siteData.longitude) };
    }

    // Initialize map
    topologyMap = new google.maps.Map(mapElement, {
        zoom: (siteData && siteData.latitude && siteData.longitude) ? 15 : 10,
        center: defaultCenter,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: true,
        streetViewControl: true,
        fullscreenControl: true,
        zoomControl: true,
        styles: [
            {
                featureType: 'poi',
                elementType: 'labels',
                stylers: [{ visibility: 'off' }]
            }
        ]
    });

    // Add site marker
    if (siteData && siteData.latitude && siteData.longitude) {
        addSiteMarker(siteData);
    }

    // Add fiber route markers and polylines
    if (fiberRoutesData && Array.isArray(fiberRoutesData) && fiberRoutesData.length > 0) {
        fiberRoutesData.forEach((route, index) => {
            if (route.start_site && route.start_site.latitude && route.start_site.longitude) {
                addSiteMarker({
                    latitude: route.start_site.latitude,
                    longitude: route.start_site.longitude,
                    site_name: route.start_site.name,
                    site_type: 'Start Site',
                }, 'start');
            }

            if (route.end_site && route.end_site.latitude && route.end_site.longitude) {
                addSiteMarker({
                    latitude: route.end_site.latitude,
                    longitude: route.end_site.longitude,
                    site_name: route.end_site.name,
                    site_type: 'End Site',
                }, 'end');
            }

            // Draw polyline for fiber route
            if (route.start_site && route.start_site.latitude && route.start_site.longitude &&
                route.end_site && route.end_site.latitude && route.end_site.longitude) {
                addFiberRoutePolyline(route);
            }
        });
    }

    // Fit bounds to show all markers
    if (topologyMarkers.length > 0) {
        const bounds = new google.maps.LatLngBounds();
        topologyMarkers.forEach(marker => {
            bounds.extend(marker.getPosition());
        });
        topologyMap.fitBounds(bounds);
        
        // Don't zoom in too much if only one marker
        if (topologyMarkers.length === 1) {
            topologyMap.setZoom(15);
        }
    }
}

// Add site marker
function addSiteMarker(site, type = 'main') {
    const position = { lat: parseFloat(site.latitude), lng: parseFloat(site.longitude) };
    
    let iconColor = '#667eea'; // Default blue
    let iconSymbol = '\uf3c5'; // Map marker icon
    
    if (type === 'main') {
        iconColor = '#28a745'; // Green for main site
    } else if (type === 'start') {
        iconColor = '#007bff'; // Blue for start site
    } else if (type === 'end') {
        iconColor = '#dc3545'; // Red for end site
    }

    const marker = new google.maps.Marker({
        position: position,
        map: topologyMap,
        title: site.site_name || 'Site',
        icon: {
            path: google.maps.SymbolPath.CIRCLE,
            scale: 10,
            fillColor: iconColor,
            fillOpacity: 1,
            strokeColor: '#ffffff',
            strokeWeight: 2,
        },
        animation: type === 'main' ? google.maps.Animation.DROP : null,
    });

    // Custom info window
    const infoWindow = new google.maps.InfoWindow({
        content: `
            <div class="map-info-window">
                <h6><i class="fas fa-map-marker-alt me-2"></i>${site.site_name || 'Site'}</h6>
                <p><strong>Type:</strong> ${site.site_type || 'N/A'}</p>
                ${site.address ? `<p><strong>Address:</strong> ${site.address}</p>` : ''}
                <p><strong>Coordinates:</strong> ${site.latitude}, ${site.longitude}</p>
                <button onclick="openInGoogleMaps(${site.latitude}, ${site.longitude})" 
                        class="btn btn-sm btn-primary mt-2">
                    <i class="fas fa-external-link-alt me-1"></i>Open in Google Maps
                </button>
            </div>
        `
    });

    marker.addListener('click', function() {
        infoWindow.open(topologyMap, marker);
    });

    topologyMarkers.push(marker);
}

// Add fiber route polyline
function addFiberRoutePolyline(route) {
    const startPos = {
        lat: parseFloat(route.start_site.latitude),
        lng: parseFloat(route.start_site.longitude)
    };
    const endPos = {
        lat: parseFloat(route.end_site.latitude),
        lng: parseFloat(route.end_site.longitude)
    };

    const polyline = new google.maps.Polyline({
        path: [startPos, endPos],
        geodesic: true,
        strokeColor: route.status === 'active' ? '#28a745' : '#dc3545',
        strokeOpacity: 0.8,
        strokeWeight: 3,
        map: topologyMap
    });

    // Add info window for polyline
    const infoWindow = new google.maps.InfoWindow({
        content: `
            <div class="map-info-window">
                <h6><i class="fas fa-route me-2"></i>${route.route_name}</h6>
                <p><strong>From:</strong> ${route.start_site.name}</p>
                <p><strong>To:</strong> ${route.end_site.name}</p>
                ${route.length_km ? `<p><strong>Length:</strong> ${route.length_km} km</p>` : ''}
                <p><strong>Status:</strong> 
                    <span class="badge bg-${route.status === 'active' ? 'success' : 'danger'}">
                        ${route.status || 'Unknown'}
                    </span>
                </p>
            </div>
        `
    });

    // Add click listener to polyline
    polyline.addListener('click', function(event) {
        infoWindow.setPosition(event.latLng);
        infoWindow.open(topologyMap);
    });

    topologyPolylines.push(polyline);
}

// Reset map view
function resetMapView() {
    if (!topologyMap) return;
    
    if (topologyMarkers.length > 0) {
        const bounds = new google.maps.LatLngBounds();
        topologyMarkers.forEach(marker => {
            bounds.extend(marker.getPosition());
        });
        topologyMap.fitBounds(bounds);
    } else {
        topologyMap.setCenter(defaultCenter);
        topologyMap.setZoom(15);
    }
}

// Toggle satellite view
function toggleSatelliteView() {
    if (!topologyMap) return;
    
    isSatelliteView = !isSatelliteView;
    topologyMap.setMapTypeId(
        isSatelliteView ? google.maps.MapTypeId.SATELLITE : google.maps.MapTypeId.ROADMAP
    );
}

// Open location in Google Maps
function openInGoogleMaps(latitude, longitude) {
    const url = `https://www.google.com/maps?q=${latitude},${longitude}`;
    window.open(url, '_blank');
}

// Make functions globally available
window.resetMapView = resetMapView;
window.toggleSatelliteView = toggleSatelliteView;
window.openInGoogleMaps = openInGoogleMaps;
window.initTopologyMap = initTopologyMap;

document.addEventListener('DOMContentLoaded', function() {
    // Add click handlers to nodes for better interactivity
    const nodes = document.querySelectorAll('.node');
    nodes.forEach(node => {
        node.addEventListener('click', function() {
            // Add visual feedback on click
            this.style.transform = 'scale(0.95)';
            setTimeout(() => {
                this.style.transform = '';
            }, 150);
        });
    });

    // Add tooltips to nodes
    const resellerNode = document.querySelector('.node.reseller');
    if (resellerNode) {
        resellerNode.setAttribute('title', 'Reseller Node - Click for details');
    }

    // Animate nodes on scroll into view
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };

    const observer = new IntersectionObserver(function(entries) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = '0';
                entry.target.style.transform = 'translateY(20px)';
                entry.target.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
                
                setTimeout(() => {
                    entry.target.style.opacity = '1';
                    entry.target.style.transform = 'translateY(0)';
                }, 100);
            }
        });
    }, observerOptions);

    nodes.forEach(node => {
        observer.observe(node);
    });

    // Add connection line animations
    const connectionArrows = document.querySelectorAll('.connection-arrow');
    connectionArrows.forEach(arrow => {
        arrow.addEventListener('mouseenter', function() {
            this.style.transform = 'scale(1.2)';
        });
        arrow.addEventListener('mouseleave', function() {
            this.style.transform = 'scale(1)';
        });
    });

    // Load Google Maps if map container exists
    if (document.getElementById('networkTopologyMap')) {
        loadGoogleMapsAPI();
    }
});
</script>
@endpush

@endsection