@extends('layouts.app')

@section('content')
<div class="p-6 bg-gray-100 min-h-screen">

    <h1 class="text-3xl font-bold mb-8 text-gray-800">
        📊 Dashboard General
    </h1>

    {{-- KPI CARDS --}}
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6">

        <x-card color="blue" title="Total Tickets" :value="$total" icon="🎫" />
        <x-card color="yellow" title="Abiertos" :value="$abiertos" icon="📂" />
        <x-card color="orange" title="En Proceso" :value="$proceso" icon="⏳" />
        <x-card color="green" title="Cerrados" :value="$cerrados" icon="✅" />

        {{-- SLA --}}
        <div class="bg-red-600 text-white p-6 rounded-xl shadow relative">
            <p class="text-sm uppercase opacity-80">SLA Vencidos</p>
            <p class="text-3xl font-bold">{{ $sla_vencidos }}</p>

            @if($sla_vencidos > 0)
                <span class="absolute top-2 right-2 bg-black text-white text-xs px-2 py-1 rounded">
                    Crítico
                </span>
            @endif
        </div>

    </div>

    {{-- GRÁFICOS --}}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-10">

        {{-- ESTADO --}}
        <div class="bg-white p-6 rounded-xl shadow">
            <h2 class="text-lg font-semibold mb-4 text-gray-700">
                📊 Tickets por Estado
            </h2>
            <canvas id="chartEstado"></canvas>
        </div>

        {{-- PRIORIDAD --}}
        <div class="bg-white p-6 rounded-xl shadow">
            <h2 class="text-lg font-semibold mb-4 text-gray-700">
                ⚡ Tickets por Prioridad
            </h2>
            <canvas id="chartPrioridad"></canvas>
        </div>

    </div>

    {{-- TOP TECNICOS --}}
    <div class="mt-10 bg-white p-6 rounded-xl shadow">

        <h2 class="text-lg font-semibold mb-4 text-gray-700">
            👨‍💻 Rendimiento de Técnicos
        </h2>

        <table class="w-full text-sm">
            <thead>
                <tr class="border-b">
                    <th class="text-left p-2">Técnico</th>
                    <th class="text-left p-2">Tickets</th>
                </tr>
            </thead>

            <tbody>
                @forelse($topTecnicos as $t)
                    <tr class="border-b hover:bg-gray-50">
                        <td class="p-2">{{ $t->name }}</td>
                        <td class="p-2 font-bold">{{ $t->tickets_asignados_count }}</td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="2" class="p-2 text-gray-500 text-center">
                            Sin datos
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>

    </div>

</div>
@endsection

@push('scripts')
<script>

document.addEventListener("DOMContentLoaded", function () {

    // 📊 ESTADO
    new Chart(document.getElementById('chartEstado'), {
        type: 'bar',
        data: {
            labels: ['Abiertos', 'En Proceso', 'Cerrados'],
            datasets: [{
                data: [
                    {{ $abiertos }},
                    {{ $proceso }},
                    {{ $cerrados }}
                ]
            }]
        }
    });

    // ⚡ PRIORIDAD
    new Chart(document.getElementById('chartPrioridad'), {
        type: 'pie',
        data: {
            labels: {!! json_encode($ticketsPorPrioridad->pluck('prioridad.nombre')) !!},
            datasets: [{
                data: {!! json_encode($ticketsPorPrioridad->pluck('total')) !!}
            }]
        }
    });

});

</script>
@endpush