@extends('layouts.app')

@section('content')
<!-- ═══ KPIs ═══ -->
<div class="row g-3 mb-4">
    <div class="col-6 col-md-4 col-xl">
        <div class="dash-kpi">
            <div class="dash-kpi-icon" style="background:rgba(59,130,246,.15); color:#3b82f6"><i class="bi bi-folder2-open"></i></div>
            <div class="dash-kpi-body">
                <div class="dash-kpi-num" id="dashAbiertos">0</div>
                <div class="dash-kpi-label">Abiertos</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-4 col-xl">
        <div class="dash-kpi">
            <div class="dash-kpi-icon" style="background:rgba(245,158,11,.15); color:#f59e0b"><i class="bi bi-hourglass-split"></i></div>
            <div class="dash-kpi-body">
                <div class="dash-kpi-num" id="dashEnProceso">0</div>
                <div class="dash-kpi-label">En proceso</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-4 col-xl">
        <div class="dash-kpi" id="kpiVencidos">
            <div class="dash-kpi-icon" style="background:rgba(239,68,68,.15); color:#ef4444"><i class="bi bi-alarm"></i></div>
            <div class="dash-kpi-body">
                <div class="dash-kpi-num" id="dashVencidos">0</div>
                <div class="dash-kpi-label">SLA Vencido</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-4 col-xl">
        <div class="dash-kpi">
            <div class="dash-kpi-icon" style="background:rgba(20,184,166,.15); color:#14b8a6"><i class="bi bi-check-circle"></i></div>
            <div class="dash-kpi-body">
                <div class="dash-kpi-num" id="dashFinHoy">0</div>
                <div class="dash-kpi-label">Cerrados hoy</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-4 col-xl">
        <div class="dash-kpi">
            <div class="dash-kpi-icon" style="background:rgba(139,92,246,.15); color:#8b5cf6"><i class="bi bi-plus-circle"></i></div>
            <div class="dash-kpi-body">
                <div class="dash-kpi-num" id="dashCreadosHoy">0</div>
                <div class="dash-kpi-label">Creados hoy</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-4 col-xl">
        <div class="dash-kpi">
            <div class="dash-kpi-icon" style="background:rgba(99,102,241,.15); color:#6366f1"><i class="bi bi-collection"></i></div>
            <div class="dash-kpi-body">
                <div class="dash-kpi-num" id="dashTotal">0</div>
                <div class="dash-kpi-label">Total tickets</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-4 col-xl">
        <div class="dash-kpi">
            <div class="dash-kpi-icon" style="background:rgba(14,165,233,.15); color:#0ea5e9"><i class="bi bi-speedometer2"></i></div>
            <div class="dash-kpi-body">
                <div class="dash-kpi-num" id="dashPromedio">0</div>
                <div class="dash-kpi-label">Prom. d&iacute;as</div>
            </div>
        </div>
    </div>
</div>

<!-- ═══ GR&Aacute;FICAS ═══ -->
<div class="row g-3">
    <div class="col-lg-8">
        <div class="dash-chart-card">
            <div class="dash-chart-hdr">
                <span><i class="bi bi-bar-chart me-1"></i> Tickets por mes</span>
                <small class="dash-chart-sub">&uacute;ltimos 12 meses</small>
            </div>
            <div class="dash-chart-wrap"><canvas id="chartMes"></canvas></div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="dash-chart-card">
            <div class="dash-chart-hdr"><span><i class="bi bi-pie-chart me-1"></i> Categor&iacute;as</span></div>
            <div class="dash-chart-wrap"><canvas id="chartCategorias"></canvas></div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="dash-chart-card">
            <div class="dash-chart-hdr"><span><i class="bi bi-people me-1"></i> Top Clientes</span></div>
            <div class="dash-chart-wrap"><canvas id="chartClientes"></canvas></div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="dash-chart-card">
            <div class="dash-chart-hdr"><span><i class="bi bi-person-badge me-1"></i> Tickets por t&eacute;cnico</span></div>
            <div class="dash-chart-wrap"><canvas id="chartTecnicos"></canvas></div>
        </div>
    </div>

    <div class="col-lg-12">
        <div class="dash-chart-card">
            <div class="dash-chart-hdr"><span><i class="bi bi-exclamation-triangle me-1"></i> Top Problemas</span></div>
            <div class="dash-chart-wrap"><canvas id="chartProblemas"></canvas></div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .dash-kpi {
        background: var(--eq-surface);
        border: 1px solid var(--eq-border);
        border-radius: 10px;
        padding: .85rem 1rem;
        display: flex; align-items: center; gap: .75rem;
        transition: transform .15s, box-shadow .15s;
    }
    .dash-kpi:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.15); }
    .dash-kpi-icon {
        width: 42px; height: 42px;
        border-radius: 10px;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.15rem; flex-shrink: 0;
    }
    .dash-kpi-num { font-size: 1.5rem; font-weight: 700; line-height: 1.1; color: var(--eq-text); }
    .dash-kpi-label { font-size: .7rem; color: var(--eq-text-dim); text-transform: uppercase; letter-spacing: .04em; }
    #kpiVencidos.tk-dash-alert { border-color: #ef4444; background: rgba(239,68,68,.06); }
    #kpiVencidos.tk-dash-alert .dash-kpi-num { color: #ef4444; }

    .dash-chart-card {
        background: var(--eq-surface);
        border: 1px solid var(--eq-border);
        border-radius: 10px;
        overflow: hidden;
    }
    .dash-chart-hdr {
        padding: .7rem 1rem;
        border-bottom: 1px solid var(--eq-border);
        font-weight: 600; font-size: .85rem;
        color: var(--eq-text);
        display: flex; justify-content: space-between; align-items: center;
    }
    .dash-chart-sub { color: var(--eq-text-dim); font-weight: 400; font-size: .72rem; }
    .dash-chart-wrap { position: relative; height: 280px; padding: .75rem 1rem; }
</style>
@endpush

@push('scripts')
<script>
    var _charts = {};
    var _palette = ['#14b8a6','#6366f1','#3b82f6','#f59e0b','#ef4444','#8b5cf6','#0ea5e9','#ec4899','#10b981','#f97316'];

    $(function () { loadDashboard(); });

    function loadDashboard() {
        $.post('{{ url('/Home/GetDashboardCompleto') }}', {}, function (d) {
            var r = d.Resumen || {};
            $('#dashAbiertos').text(r.TOTAL_ABIERTOS || 0);
            $('#dashEnProceso').text(r.TOTAL_EN_PROCESO || 0);
            $('#dashVencidos').text(r.TOTAL_VENCIDOS || 0);
            $('#dashFinHoy').text(r.TOTAL_FINALIZADOS_HOY || 0);
            $('#dashCreadosHoy').text(r.TOTAL_CREADOS_HOY || 0);
            $('#dashTotal').text(d.TOTAL_TICKETS || 0);
            $('#dashPromedio').text((d.PROMEDIO_DIAS_RESOLUCION || 0).toFixed(1));

            if ((r.TOTAL_VENCIDOS || 0) > 0) $('#kpiVencidos').addClass('tk-dash-alert');
            else $('#kpiVencidos').removeClass('tk-dash-alert');

            buildBar('chartMes', d.TicketsPorMes || [], true);
            buildDoughnut('chartCategorias', d.TopCategorias || []);
            buildHBar('chartClientes', d.TopClientes || []);
            buildHBar('chartTecnicos', d.TicketsPorTecnico || []);
            buildHBar('chartProblemas', d.TopProblemas || []);
        });
    }

    function getChartTextColor() { return document.body.classList.contains('tk-light') ? '#475569' : '#94a3b8'; }
    function getGridLineColor() { return document.body.classList.contains('tk-light') ? 'rgba(0,0,0,.06)' : 'rgba(255,255,255,.06)'; }

    function buildBar(id, data, gradient) {
        if (_charts[id]) _charts[id].destroy();
        var ctx = document.getElementById(id).getContext('2d');
        var grad = ctx.createLinearGradient(0, 0, 0, 280);
        grad.addColorStop(0, 'rgba(20,184,166,.7)');
        grad.addColorStop(1, 'rgba(20,184,166,.1)');

        _charts[id] = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: data.map(function(x) { return x.NOMBRE; }),
                datasets: [{
                    data: data.map(function(x) { return x.CANTIDAD; }),
                    backgroundColor: gradient ? grad : _palette.slice(0, data.length),
                    borderRadius: 5, borderSkipped: false, maxBarThickness: 40
                }]
            },
            options: {
                responsive: true, maintainAspectRatio: false,
                plugins: { legend: { display: false } },
                scales: {
                    x: { ticks: { color: getChartTextColor(), font: { size: 11 } }, grid: { display: false } },
                    y: { beginAtZero: true, ticks: { color: getChartTextColor(), stepSize: 1, font: { size: 11 } }, grid: { color: getGridLineColor() } }
                }
            }
        });
    }

    function buildHBar(id, data) {
        if (_charts[id]) _charts[id].destroy();
        var ctx = document.getElementById(id).getContext('2d');
        _charts[id] = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: data.map(function(x) { return x.NOMBRE; }),
                datasets: [{
                    data: data.map(function(x) { return x.CANTIDAD; }),
                    backgroundColor: _palette.slice(0, data.length),
                    borderRadius: 5, borderSkipped: false, maxBarThickness: 24
                }]
            },
            options: {
                indexAxis: 'y', responsive: true, maintainAspectRatio: false,
                plugins: { legend: { display: false } },
                scales: {
                    x: { beginAtZero: true, ticks: { color: getChartTextColor(), stepSize: 1, font: { size: 11 } }, grid: { color: getGridLineColor() } },
                    y: { ticks: { color: getChartTextColor(), font: { size: 11 } }, grid: { display: false } }
                }
            }
        });
    }

    function buildDoughnut(id, data) {
        if (_charts[id]) _charts[id].destroy();
        var ctx = document.getElementById(id).getContext('2d');
        _charts[id] = new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: data.map(function(x) { return x.NOMBRE; }),
                datasets: [{
                    data: data.map(function(x) { return x.CANTIDAD; }),
                    backgroundColor: _palette.slice(0, data.length),
                    borderWidth: 0, hoverOffset: 6
                }]
            },
            options: {
                responsive: true, maintainAspectRatio: false, cutout: '60%',
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: { color: getChartTextColor(), font: { size: 11 }, padding: 10, usePointStyle: true, pointStyleWidth: 10 }
                    }
                }
            }
        });
    }
</script>
@endpush