@extends('layouts.app')

@section('title', 'Dashboard')

@section('content')
<div class="max-w-[1400px] mx-auto flex flex-col gap-6">
    <div class="flex justify-between items-end">
        <div>
            <h2 class="text-2xl font-bold text-white">Resumen de la Red</h2>
            <p class="text-gray-400 text-sm mt-1">Métricas en tiempo real para NEXTFIBER</p>
        </div>
        <div class="flex gap-2">
            <button class="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-[#23482f] text-white text-sm font-medium hover:bg-[#326744] transition">
                <span class="material-symbols-outlined text-[18px]">calendar_today</span>
                <span>Últimas 24 Horas</span>
            </button>
            <button class="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-primary text-black text-sm font-bold hover:bg-green-400 transition shadow-[0_0_15px_rgba(19,236,91,0.3)]">
                <span class="material-symbols-outlined text-[18px]">refresh</span>
                <span>Ejecutar Diagnóstico</span>
            </button>
        </div>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
        <!-- Clientes Activos -->
        <div class="bg-surface-dark border border-[#23482f] rounded-xl p-5 flex flex-col justify-between h-40 relative overflow-hidden group hover:border-primary/50 transition-all duration-300">
            <div class="absolute right-0 top-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
                <span class="material-symbols-outlined text-6xl text-primary">group</span>
            </div>
            <div class="flex flex-col gap-1 z-10">
                <p class="text-gray-400 text-sm font-medium">Clientes Activos</p>
                <h3 class="text-3xl font-bold text-white tracking-tight">{{ $clientes_activos }}</h3>
            </div>
            <div class="flex items-center gap-2 z-10">
                <span class="bg-primary/20 text-primary text-xs font-bold px-2 py-0.5 rounded flex items-center gap-1">
                    <span class="material-symbols-outlined text-[14px]">check_circle</span>
                    En línea
                </span>
            </div>
            <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-primary to-transparent"></div>
        </div>

        <!-- Clientes Suspendidos -->
        <div class="bg-surface-dark border border-[#23482f] rounded-xl p-5 flex flex-col justify-between h-40 relative overflow-hidden group hover:border-yellow-500/50 transition-all duration-300">
            <div class="absolute right-0 top-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
                <span class="material-symbols-outlined text-6xl text-yellow-500">phonelink_off</span>
            </div>
            <div class="flex flex-col gap-1 z-10">
                <p class="text-gray-400 text-sm font-medium">Clientes Suspendidos</p>
                <h3 class="text-3xl font-bold text-white tracking-tight">{{ $clientes_suspendidos }}</h3>
            </div>
            <div class="flex items-center gap-2 z-10">
                <span class="bg-yellow-500/20 text-yellow-500 text-xs font-bold px-2 py-0.5 rounded flex items-center gap-1">
                    <span class="material-symbols-outlined text-[14px]">warning</span>
                    Advertencia
                </span>
            </div>
            <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-yellow-500 to-transparent"></div>
        </div>

        <!-- Clientes en Corte -->
        <div class="bg-surface-dark border border-[#23482f] rounded-xl p-5 flex flex-col justify-between h-40 relative overflow-hidden group hover:border-red-500/50 transition-all duration-300">
            <div class="absolute right-0 top-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
                <span class="material-symbols-outlined text-6xl text-red-500">content_cut</span>
            </div>
            <div class="flex flex-col gap-1 z-10">
                <p class="text-gray-400 text-sm font-medium">Clientes en Corte</p>
                <h3 class="text-3xl font-bold text-white tracking-tight">{{ $clientes_corte }}</h3>
            </div>
            <div class="flex items-center gap-2 z-10">
                <span class="bg-red-500/20 text-red-500 text-xs font-bold px-2 py-0.5 rounded flex items-center gap-1">
                    <span class="material-symbols-outlined text-[14px]">error</span>
                    Crítico
                </span>
            </div>
            <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-red-500 to-transparent"></div>
        </div>

        <!-- Clientes de Baja -->
        <div class="bg-surface-dark border border-[#23482f] rounded-xl p-5 flex flex-col justify-between h-40 relative overflow-hidden group hover:border-gray-500/50 transition-all duration-300">
            <div class="absolute right-0 top-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
                <span class="material-symbols-outlined text-6xl text-gray-500">person_remove</span>
            </div>
            <div class="flex flex-col gap-1 z-10">
                <p class="text-gray-400 text-sm font-medium">Clientes de Baja</p>
                <h3 class="text-3xl font-bold text-white tracking-tight">{{ $clientes_baja }}</h3>
            </div>
            <div class="flex items-center gap-2 z-10">
                <span class="bg-gray-500/20 text-gray-500 text-xs font-bold px-2 py-0.5 rounded flex items-center gap-1">
                    <span class="material-symbols-outlined text-[14px]">remove_circle</span>
                    Inactivos
                </span>
            </div>
            <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-gray-500 to-transparent"></div>
        </div>

        <!-- Acumulado de Pagos -->
        <div class="bg-surface-dark border border-[#23482f] rounded-xl p-5 flex flex-col justify-between h-40 relative overflow-hidden group hover:border-secondary/50 transition-all duration-300">
            <div class="absolute right-0 top-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
                <span class="material-symbols-outlined text-6xl text-secondary">payments</span>
            </div>
            <div class="flex flex-col gap-1 z-10">
                <p class="text-gray-400 text-sm font-medium">Acumulado Pagos</p>
                <h3 class="text-3xl font-bold text-white tracking-tight">S/ {{ number_format($pagos_acumulados, 2) }}</h3>
            </div>
            <div class="flex items-center gap-2 z-10">
                <span class="bg-secondary/20 text-secondary text-xs font-bold px-2 py-0.5 rounded flex items-center gap-1">
                    <span class="material-symbols-outlined text-[14px]">attach_money</span>
                    Total
                </span>
            </div>
            <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-secondary to-transparent"></div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="lg:col-span-2 bg-surface-dark border border-[#23482f] rounded-xl p-6 flex flex-col shadow-lg">
            <div class="flex justify-between items-center mb-6">
                <div>
                    <h3 class="text-lg font-bold text-white">Análisis de Tráfico de Red</h3>
                    <p class="text-xs text-gray-400">Rendimiento (GB/s)</p>
                </div>
                <div class="flex items-center gap-4">
                    <div class="flex items-center gap-2">
                        <div class="w-3 h-3 rounded-full bg-primary shadow-[0_0_8px_rgba(19,236,91,0.6)]"></div>
                        <span class="text-xs text-gray-300">Descarga</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <div class="w-3 h-3 rounded-full bg-secondary shadow-[0_0_8px_rgba(139,92,246,0.6)]"></div>
                        <span class="text-xs text-gray-300">Subida</span>
                    </div>
                </div>
            </div>
            <div class="flex-1 w-full min-h-[300px] relative">
                <div class="absolute inset-0 flex flex-col justify-between pointer-events-none">
                    <div class="w-full h-px bg-[#23482f] border-t border-dashed border-[#23482f]/50"></div>
                    <div class="w-full h-px bg-[#23482f] border-t border-dashed border-[#23482f]/50"></div>
                    <div class="w-full h-px bg-[#23482f] border-t border-dashed border-[#23482f]/50"></div>
                    <div class="w-full h-px bg-[#23482f] border-t border-dashed border-[#23482f]/50"></div>
                    <div class="w-full h-px bg-[#23482f] border-t border-dashed border-[#23482f]/50"></div>
                </div>
                <svg class="w-full h-full absolute inset-0 z-10" preserveAspectRatio="none" viewBox="0 0 100 100">
                    <defs>
                        <linearGradient id="gradientGreen" x1="0%" x2="0%" y1="0%" y2="100%">
                            <stop offset="0%" style="stop-color:#13ec5b;stop-opacity:0.3"></stop>
                            <stop offset="100%" style="stop-color:#13ec5b;stop-opacity:0"></stop>
                        </linearGradient>
                        <linearGradient id="gradientPurple" x1="0%" x2="0%" y1="0%" y2="100%">
                            <stop offset="0%" style="stop-color:#8b5cf6;stop-opacity:0.3"></stop>
                            <stop offset="100%" style="stop-color:#8b5cf6;stop-opacity:0"></stop>
                        </linearGradient>
                    </defs>
                    <path d="M0,70 Q10,65 20,50 T40,45 T60,30 T80,40 T100,20 V100 H0 Z" fill="url(#gradientGreen)" stroke="none"></path>
                    <path d="M0,70 Q10,65 20,50 T40,45 T60,30 T80,40 T100,20" fill="none" stroke="#13ec5b" stroke-linecap="round" stroke-width="0.5"></path>
                    <path d="M0,85 Q15,80 30,75 T50,65 T70,70 T90,60 T100,55 V100 H0 Z" fill="url(#gradientPurple)" stroke="none"></path>
                    <path d="M0,85 Q15,80 30,75 T50,65 T70,70 T90,60 T100,55" fill="none" stroke="#8b5cf6" stroke-linecap="round" stroke-width="0.5" style="stroke-dasharray: 1, 0.5;"></path>
                </svg>
            </div>
            <div class="flex justify-between text-xs text-gray-500 mt-2 font-mono">
                <span>00:00</span>
                <span>04:00</span>
                <span>08:00</span>
                <span>12:00</span>
                <span>16:00</span>
                <span>20:00</span>
                <span>23:59</span>
            </div>
        </div>
        <div class="bg-surface-dark border border-[#23482f] rounded-xl p-6 flex flex-col shadow-lg overflow-hidden">
            <div class="flex justify-between items-center mb-6">
                <div>
                    <h3 class="text-lg font-bold text-white">Estado de Tickets</h3>
                    <p class="text-xs text-gray-400">Resumen de solicitudes</p>
                </div>
            </div>
            <div class="flex-1 overflow-y-auto p-4 space-y-4">
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-3">
                        <div class="p-2 rounded-lg bg-red-500/10"><span class="material-symbols-outlined text-red-400">flag</span></div>
                        <div>
                            <h4 class="text-sm font-semibold text-white">Abiertos</h4>
                            <p class="text-xs text-gray-400">Necesitan atención inmediata</p>
                        </div>
                    </div>
                    <div class="text-right"><p class="text-lg font-bold text-white">{{ $tickets_abiertos }}</p></div>
                </div>
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-3">
                        <div class="p-2 rounded-lg bg-yellow-500/10"><span class="material-symbols-outlined text-yellow-400">autorenew</span></div>
                        <div>
                            <h4 class="text-sm font-semibold text-white">En Proceso</h4>
                            <p class="text-xs text-gray-400">Técnicos asignados</p>
                        </div>
                    </div>
                    <div class="text-right"><p class="text-lg font-bold text-white">{{ $tickets_en_proceso }}</p></div>
                </div>
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-3">
                        <div class="p-2 rounded-lg bg-primary/10"><span class="material-symbols-outlined text-primary">task_alt</span></div>
                        <div>
                            <h4 class="text-sm font-semibold text-white">Resueltos</h4>
                            <p class="text-xs text-gray-400">Finalizados este mes</p>
                        </div>
                    </div>
                    <div class="text-right"><p class="text-lg font-bold text-white">{{ $tickets_resueltos }}</p></div>
                </div>
            </div>
        </div>
    </div>
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 pb-6">
        <div class="bg-surface-dark border border-[#23482f] rounded-xl p-6 flex flex-col shadow-lg">
            <div class="flex justify-between items-center mb-6">
                <div>
                    <h3 class="text-lg font-bold text-white">Distribución de Planes</h3>
                    <p class="text-xs text-gray-400">Clientes por tipo de servicio</p>
                </div>
            </div>
            <div class="flex-1 flex items-center justify-center">
                <div class="w-full max-w-[250px]">
                    <canvas id="planChart"></canvas>
                </div>
            </div>
        </div>
        <div class="lg:col-span-2 bg-surface-dark border border-[#23482f] rounded-xl p-6 flex flex-col shadow-lg relative overflow-hidden">
            <div class="flex justify-between items-center mb-4">
                <div>
                    <h3 class="text-lg font-bold text-white">Mapa de Red en Vivo</h3>
                    <p class="text-xs text-gray-400">Distribución de infraestructura física</p>
                </div>
                <div class="bg-[#102216] border border-[#23482f] rounded-lg p-1 flex">
                    <button class="px-3 py-1 bg-primary text-black text-xs font-bold rounded">Mapa</button>
                    <button class="px-3 py-1 text-gray-400 text-xs font-medium hover:text-white">Topología</button>
                </div>
            </div>
            <div class="flex-1 w-full bg-[#102216] rounded-lg relative overflow-hidden group">
                <div class="absolute inset-0 bg-cover bg-center opacity-40 mix-blend-screen" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDZcK4aSEMzR38Y3AC4oPRjbpt8OQ5f4jJgAmmTHnBLuJrRerb0RKrBhbRQym4NYbJ1DsZOt1oTLfUuBMmzGKpF5CCRzC0itzxJAJYZfcM5UkTCt-_C_vHz9FTiLF_6utSzf2TuXWrJzCveLRl6dw4R2nb_dbXsPLRFcBg4EXQpBxajV5RpCl8gG16qPb442wiTMi0jPiWXdjZh8FHCmp25LX2NiYHsqpMeusMmja8cFgtK2j9AKdauthOtbNo7ie5GuuDAe7HpFi4'); background-size: cover; background-position: center;"></div>
                <div class="absolute inset-0 bg-gradient-to-t from-[#182f25] via-transparent to-transparent"></div>
                <div class="absolute top-1/4 left-1/4 group/point cursor-pointer">
                    <div class="relative flex items-center justify-center">
                        <div class="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75 size-6"></div>
                        <div class="relative inline-flex rounded-full size-3 bg-primary border-2 border-white"></div>
                        <div class="absolute top-6 bg-black/80 text-white text-[10px] px-2 py-1 rounded opacity-0 group-hover/point:opacity-100 transition-opacity whitespace-nowrap">
                             Hub A: Normal
                         </div>
                    </div>
                </div>
                <div class="absolute top-1/2 left-1/2 group/point cursor-pointer">
                    <div class="relative flex items-center justify-center">
                        <div class="animate-ping absolute inline-flex h-full w-full rounded-full bg-secondary opacity-75 size-6"></div>
                        <div class="relative inline-flex rounded-full size-3 bg-secondary border-2 border-white"></div>
                        <div class="absolute top-6 bg-black/80 text-white text-[10px] px-2 py-1 rounded opacity-0 group-hover/point:opacity-100 transition-opacity whitespace-nowrap">
                             Hub B: Carga Alta
                         </div>
                    </div>
                </div>
                <div class="absolute bottom-1/3 right-1/4 group/point cursor-pointer">
                    <div class="relative flex items-center justify-center">
                        <div class="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75 size-6"></div>
                        <div class="relative inline-flex rounded-full size-3 bg-primary border-2 border-white"></div>
                        <div class="absolute top-6 bg-black/80 text-white text-[10px] px-2 py-1 rounded opacity-0 group-hover/point:opacity-100 transition-opacity whitespace-nowrap">
                             Nodo C: Mantenimiento
                         </div>
                    </div>
                </div>
                <div class="absolute bottom-4 left-4 bg-[#182f25]/90 backdrop-blur border border-[#23482f] p-3 rounded-lg z-10">
                    <div class="flex flex-col gap-2">
                        <div class="flex items-center gap-2">
                            <div class="size-2 bg-primary rounded-full"></div>
                            <span class="text-[10px] text-gray-300">Troncal de Fibra</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <div class="size-2 bg-secondary rounded-full"></div>
                            <span class="text-[10px] text-gray-300">Repetidor Inalámbrico</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <div class="size-2 bg-red-500 rounded-full"></div>
                            <span class="text-[10px] text-gray-300">Interrupción</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const planLabels = @json($distribucion_planes->pluck('plan'));
        const planCounts = @json($distribucion_planes->pluck('count'));

        const planColors = [
            '#13ec5b', '#8b5cf6', '#ef4444', '#f59e0b', '#3b82f6', '#64748b',
            '#ec4899', '#84cc16', '#14b8a6', '#0ea5e9', '#d946ef', '#f97316'
        ];

        const ctx = document.getElementById('planChart').getContext('2d');
        new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: planLabels,
                datasets: [{
                    label: 'Clientes por Plan',
                    data: planCounts,
                    backgroundColor: planColors.slice(0, planLabels.length),
                    borderColor: '#182f25',
                    borderWidth: 2,
                    hoverOffset: 4
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            color: '#9ca3af',
                            padding: 10,
                            font: {
                                family: 'Inter, sans-serif'
                            }
                        }
                    },
                    tooltip: {
                        backgroundColor: '#23482f',
                        titleColor: '#ffffff',
                        bodyColor: '#d1d5db',
                        borderColor: '#326744',
                        borderWidth: 1,
                        padding: 10,
                        displayColors: true,
                        boxPadding: 4,
                    }
                },
                cutout: '65%',
            }
        });
    });
</script>
@endsection