@extends('layouts.app')

@section('title', 'Dashboard de KPIs - ERP LOGÍSTICO')
@section('header_title', 'Indicadores de Gestión (KPIs)')

@section('styles')
<style>
    .card-kpi-link:hover .card {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08) !important;
    }
</style>
@endsection

@section('content')
<div class="row mb-4 align-items-center">
    <div class="col-md-6">
        <h4 class="mb-0 fw-bold text-dark"><i class="bi bi-bar-chart-line-fill text-danger me-2"></i>Dashboard de Control e Incidencias</h4>
        <p class="text-muted mb-0">Ámbito de visualización: <strong class="text-primary">{{ $scopeName }}</strong></p>
    </div>
    <div class="col-md-6 text-md-end mt-3 mt-md-0">
        <button onclick="window.print()" class="btn btn-outline-secondary btn-sm px-3 fw-semibold">
            <i class="bi bi-printer-fill me-1"></i> Imprimir Reporte
        </button>
    </div>
</div>

<!-- KPI Cards Grid -->
<div class="row g-4 mb-4">
    <!-- Card 1: Total -->
    <div class="col-md-3">
        <a href="{{ route('tickets.index', ['kpi' => 1]) }}" class="text-decoration-none h-100 d-block card-kpi-link">
            <div class="card shadow-sm border-0 h-100 bg-white" style="border-radius: 12px; transition: transform 0.2s, box-shadow 0.2s;">
                <div class="card-body p-4 d-flex align-items-center justify-content-between">
                    <div>
                        <div class="text-muted small fw-semibold mb-1">TOTAL TICKETS</div>
                        <h2 class="fw-bold mb-0 text-dark">{{ $totalTickets }}</h2>
                        <span class="text-muted small">Registros históricos</span>
                    </div>
                    <div class="p-3 rounded-3 bg-primary-subtle text-primary">
                        <i class="bi bi-ticket-perforated-fill fs-3"></i>
                    </div>
                </div>
            </div>
        </a>
    </div>

    <!-- Card 2: Avg SLA -->
    <div class="col-md-3">
        <a href="{{ route('tickets.index', ['sla' => 'finalizado', 'kpi' => 1]) }}" class="text-decoration-none h-100 d-block card-kpi-link">
            <div class="card shadow-sm border-0 h-100 bg-white" style="border-radius: 12px; transition: transform 0.2s, box-shadow 0.2s;">
                <div class="card-body p-4 d-flex align-items-center justify-content-between">
                    <div>
                        <div class="text-muted small fw-semibold mb-1">PROMEDIO SLA</div>
                        <h2 class="fw-bold mb-0 text-success">{{ $avgSlaDays }} <span class="fs-6 fw-normal text-muted">días</span></h2>
                        <span class="text-muted small">Tiempo de resolución</span>
                    </div>
                    <div class="p-3 rounded-3 bg-success-subtle text-success">
                        <i class="bi bi-speedometer fs-3"></i>
                    </div>
                </div>
            </div>
        </a>
    </div>

    <!-- Card 3: Overdue -->
    <div class="col-md-3">
        <a href="{{ route('tickets.index', ['retrasados' => '1', 'kpi' => 1]) }}" class="text-decoration-none h-100 d-block card-kpi-link">
            <div class="card shadow-sm border-0 h-100 bg-white" style="border-radius: 12px; transition: transform 0.2s, box-shadow 0.2s;">
                <div class="card-body p-4 d-flex align-items-center justify-content-between">
                    <div>
                        <div class="text-muted small fw-semibold mb-1">TICKETS RETRASADOS</div>
                        <h2 class="fw-bold mb-0 text-danger">{{ $overdueCount }}</h2>
                        <span class="text-muted small">> 3 días sin resolver</span>
                    </div>
                    <div class="p-3 rounded-3 bg-danger-subtle text-danger">
                        <i class="bi bi-exclamation-octagon-fill fs-3"></i>
                    </div>
                </div>
            </div>
        </a>
    </div>

    <!-- Card 4: Pending Assignment -->
    <div class="col-md-3">
        <a href="{{ route('tickets.index', ['estado' => 'ingresado', 'kpi' => 1]) }}" class="text-decoration-none h-100 d-block card-kpi-link">
            <div class="card shadow-sm border-0 h-100 bg-white" style="border-radius: 12px; transition: transform 0.2s, box-shadow 0.2s;">
                <div class="card-body p-4 d-flex align-items-center justify-content-between">
                    <div>
                        <div class="text-muted small fw-semibold mb-1">PENDIENTES ASIGNAR</div>
                        <h2 class="fw-bold mb-0 text-warning">{{ $pendingCount }}</h2>
                        <span class="text-muted small">En espera de técnico</span>
                    </div>
                    <div class="p-3 rounded-3 bg-warning-subtle text-warning">
                        <i class="bi bi-person-fill-exclamation fs-3"></i>
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>

<!-- Charts Grid -->
<div class="row g-4 mb-4">
    <!-- Chart 1: Status Distribution -->
    <div class="col-md-6 col-xl-4">
        <div class="card shadow-sm h-100 bg-white">
            <div class="card-header bg-white border-0 pt-4 px-4 pb-0">
                <h5 class="fw-bold text-dark mb-0"><i class="bi bi-pie-chart text-danger me-2"></i>Distribución por Estado</h5>
            </div>
            <div class="card-body p-4 d-flex flex-column align-items-center justify-content-center">
                <div style="position: relative; height:250px; width:100%">
                    <canvas id="statusChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Chart 2: Tickets by Department -->
    <div class="col-md-6 col-xl-4">
        <div class="card shadow-sm h-100 bg-white">
            <div class="card-header bg-white border-0 pt-4 px-4 pb-0">
                <h5 class="fw-bold text-dark mb-0"><i class="bi bi-bar-chart-steps text-danger me-2"></i>Tickets por Departamento</h5>
            </div>
            <div class="card-body p-4 d-flex flex-column align-items-center justify-content-center">
                @if(count($deptLabels) > 0)
                    <div style="position: relative; height:250px; width:100%">
                        <canvas id="deptChart"></canvas>
                    </div>
                @else
                    <div class="text-muted text-center py-5">
                        <i class="bi bi-bar-chart display-4 d-block mb-3 text-secondary"></i>
                        Sin datos suficientes
                    </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Chart 3: Severity Distribution -->
    <div class="col-md-6 col-xl-4">
        <div class="card shadow-sm h-100 bg-white">
            <div class="card-header bg-white border-0 pt-4 px-4 pb-0">
                <h5 class="fw-bold text-dark mb-0"><i class="bi bi-shield-exclamation text-danger me-2"></i>Gravedad de Incidencias</h5>
            </div>
            <div class="card-body p-4 d-flex flex-column align-items-center justify-content-center">
                <div style="position: relative; height:250px; width:100%">
                    <canvas id="severityChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Chart 4: Tickets by Branch (Admin/Approver Only) -->
    @if(!in_array(Auth::user()->role, ['jefe_local', 'usuario']) || !Auth::user()->sucursal_id)
        <div class="col-md-12 col-xl-8">
            <div class="card shadow-sm h-100 bg-white">
                <div class="card-header bg-white border-0 pt-4 px-4 pb-0">
                    <h5 class="fw-bold text-dark mb-0"><i class="bi bi-shop text-danger me-2"></i>Distribución de Incidencias por Sucursal</h5>
                </div>
                <div class="card-body p-4">
                    @if(count($sucursalLabels) > 0)
                        <div style="position: relative; height:280px; width:100%">
                            <canvas id="branchChart"></canvas>
                        </div>
                    @else
                        <div class="text-muted text-center py-5">
                            <i class="bi bi-shop display-4 d-block mb-3 text-secondary"></i>
                            Sin datos de sucursales
                        </div>
                    @endif
                </div>
            </div>
        </div>
    @endif
</div>

<!-- Critical / Urgent Tickets Table -->
<div class="row">
    <div class="col-12">
        <div class="card shadow-sm bg-white">
            <div class="card-header bg-white d-flex justify-content-between align-items-center pt-4 px-4 pb-3">
                <h5 class="fw-bold text-dark mb-0"><i class="bi bi-fire text-danger me-2"></i>Monitoreo de Casos Críticos</h5>
                <span class="badge bg-danger bg-opacity-10 text-danger px-3 py-1 fw-bold">Prioridad Alta & En Proceso</span>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th class="ps-4">Código</th>
                                <th>Sucursal</th>
                                <th>Incidencia</th>
                                <th class="text-center">Gravedad</th>
                                <th class="text-center">Estado</th>
                                <th class="text-center">Días Activo</th>
                                <th class="pe-4 text-end">Acción</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($criticalTickets as $t)
                                <tr>
                                    <td class="ps-4 fw-bold text-dark">{{ $t->codigo }}</td>
                                    <td>
                                        <div class="fw-semibold text-dark">{{ $t->sucursal->nombre }}</div>
                                        <div class="text-muted small" style="font-size: 0.8rem;">{{ $t->departamento->nombre }}</div>
                                    </td>
                                    <td>
                                        <div class="fw-bold text-dark">{{ $t->titulo }}</div>
                                    </td>
                                    <td class="text-center">
                                        @if($t->problematica->gravedad === 'alta')
                                            <span class="badge bg-danger bg-opacity-10 text-danger px-3 py-1">Alta</span>
                                        @elseif($t->problematica->gravedad === 'media')
                                            <span class="badge bg-warning bg-opacity-10 text-warning px-3 py-1">Media</span>
                                        @else
                                            <span class="badge bg-success bg-opacity-10 text-success px-3 py-1">Baja</span>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        <span class="badge badge-premium badge-{{ $t->estado }}">
                                            {{ str_replace('_', ' ', ucfirst($t->estado)) }}
                                        </span>
                                    </td>
                                    <td class="text-center fw-bold @if($t->dias_transcurridos > 3) text-danger @else text-warning @endif">
                                        {{ $t->dias_transcurridos ?? 'No asignado' }}
                                    </td>
                                    <td class="pe-4 text-end">
                                        <a href="{{ route('tickets.show', ['ticket' => $t->id, 'kpi' => 1]) }}" class="btn btn-light btn-sm border" title="Ver detalle de incidencia">
                                            <i class="bi bi-eye-fill"></i> Ver Detalle
                                        </a>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="text-center py-5 text-muted">
                                        <i class="bi bi-check-circle-fill text-success display-4 d-block mb-3"></i>
                                        ¡Excelente! No hay incidencias críticas activas en este momento.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<!-- Load Chart.js from CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        
        // Custom color palette matching the badge design
        const statusColors = {
            ingresado: '#0095ff',   // Info/blue
            en_proceso: '#ff9f43',  // Warning/orange
            resuelto: '#1bc5bd',    // Teal/green
            no_resuelto: '#f64e60', // Danger/red
            cerrado: '#7e8299'      // Muted grey
        };

        // 1. Status Doughnut Chart
        const statusCtx = document.getElementById('statusChart').getContext('2d');
        const statusChart = new Chart(statusCtx, {
            type: 'doughnut',
            data: {
                labels: ['Ingresado', 'En Proceso', 'Resuelto', 'No Resuelto', 'Cerrado'],
                datasets: [{
                    data: [
                        {{ $statusData['ingresado'] }},
                        {{ $statusData['en_proceso'] }},
                        {{ $statusData['resuelto'] }},
                        {{ $statusData['no_resuelto'] }},
                        {{ $statusData['cerrado'] }}
                    ],
                    backgroundColor: [
                        statusColors.ingresado,
                        statusColors.en_proceso,
                        statusColors.resuelto,
                        statusColors.no_resuelto,
                        statusColors.cerrado
                    ],
                    borderWidth: 2,
                    hoverOffset: 6
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            font: { family: 'Outfit', size: 12 },
                            usePointStyle: true,
                            padding: 15
                        }
                    }
                },
                cutout: '65%'
            }
        });

        // 2. Department Horizontal Bar Chart
        @if(count($deptLabels) > 0)
            const deptCtx = document.getElementById('deptChart').getContext('2d');
            new Chart(deptCtx, {
                type: 'bar',
                data: {
                    labels: {!! json_encode($deptLabels) !!},
                    datasets: [{
                        label: 'Tickets',
                        data: {!! json_encode($deptCounts) !!},
                        backgroundColor: 'rgba(231, 76, 60, 0.85)',
                        borderColor: '#e74c3c',
                        borderWidth: 1,
                        borderRadius: 5
                    }]
                },
                options: {
                    indexAxis: 'y',
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false }
                    },
                    scales: {
                        x: {
                            grid: { display: false },
                            ticks: { font: { family: 'Outfit' }, precision: 0 }
                        },
                        y: {
                            grid: { display: false },
                            ticks: { font: { family: 'Outfit', weight: 'bold' } }
                        }
                    }
                }
            });
        @endif

        // 3. Severity Pie Chart
        const severityCtx = document.getElementById('severityChart').getContext('2d');
        new Chart(severityCtx, {
            type: 'pie',
            data: {
                labels: ['Baja', 'Media', 'Alta'],
                datasets: [{
                    data: [
                        {{ $severityData['baja'] }},
                        {{ $severityData['media'] }},
                        {{ $severityData['alta'] }}
                    ],
                    backgroundColor: [
                        '#1bc5bd', // Green/Baja
                        '#ff9f43', // Orange/Media
                        '#f64e60'  // Red/Alta
                    ],
                    borderWidth: 2
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            font: { family: 'Outfit', size: 12 },
                            usePointStyle: true,
                            padding: 15
                        }
                    }
                }
            }
        });

        // 4. Branch Bar Chart (Admin/Approver Only)
        @if(!in_array(Auth::user()->role, ['jefe_local', 'usuario']) || !Auth::user()->sucursal_id)
            @if(count($sucursalLabels) > 0)
                const branchCtx = document.getElementById('branchChart').getContext('2d');
                new Chart(branchCtx, {
                    type: 'bar',
                    data: {
                        labels: {!! json_encode($sucursalLabels) !!},
                        datasets: [{
                            label: 'Cantidad de Incidencias',
                            data: {!! json_encode($sucursalCounts) !!},
                            backgroundColor: 'rgba(44, 62, 80, 0.9)',
                            borderColor: '#2c3e50',
                            borderWidth: 1,
                            borderRadius: 6
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: { display: false }
                        },
                        scales: {
                            x: {
                                grid: { display: false },
                                ticks: { font: { family: 'Outfit', weight: '500' } }
                            },
                            y: {
                                grid: { color: '#ebedf3' },
                                ticks: { font: { family: 'Outfit' }, precision: 0 }
                            }
                        }
                    }
                });
            @endif
        @endif

    });
</script>
@endsection