@extends('layouts.app')

@section('title', 'Panel Principal')

@section('content')
<div class="container-fluid p-0">
    <div class="row mb-4">
        <div class="col-12">
            <h2 class="fw-bold"><i class="fa-solid fa-gauge-high text-primary me-2"></i> Panel Principal</h2>
            <p class="text-muted">Indicadores procesales y carga laboral en tiempo real</p>
        </div>
    </div>

    <!-- KPI Cards Row -->
    <div class="row g-3 mb-4">
        <!-- Activos -->
        <div class="col-6 col-lg-3">
            <div class="card h-100 p-3 shadow-sm border-0 bg-white" style="border: 1.5px solid rgba(11, 31, 58, 0.15) !important;">
                <div class="d-flex align-items-center gap-3">
                    <div class="rounded-4 p-3 d-flex align-items-center justify-content-center" style="width: 56px; height: 56px; background: rgba(11, 31, 58, 0.08);">
                        <i class="fa-solid fa-folder-open fs-3" style="color: #0B1F3A;"></i>
                    </div>
                    <div>
                        <div class="small text-muted fw-semibold">Casos Activos</div>
                        <div class="fs-3 fw-bold" style="color: #0B1F3A;">{{ $activos }}</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Ganados -->
        <div class="col-6 col-lg-3">
            <div class="card h-100 p-3 shadow-sm border-0 text-white" style="background: linear-gradient(135deg, #0B1F3A 0%, #162e54 100%); border: 1.5px solid #C9A227 !important;">
                <div class="d-flex align-items-center gap-3">
                    <div class="rounded-4 p-3 d-flex align-items-center justify-content-center" style="width: 56px; height: 56px; background: rgba(201, 162, 39, 0.2);">
                        <i class="fa-solid fa-trophy fs-3" style="color: #C9A227;"></i>
                    </div>
                    <div>
                        <div class="small fw-semibold" style="color: #F5F1E8; opacity: 0.85;">Casos Ganados</div>
                        <div class="fs-3 fw-bold" style="color: #C9A227;">{{ $ganados }}</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Perdidos -->
        <div class="col-6 col-lg-3">
            <div class="card h-100 p-3 shadow-sm border-0" style="background: #F5F1E8; border: 1.5px solid rgba(201, 162, 39, 0.35) !important;">
                <div class="d-flex align-items-center gap-3">
                    <div class="rounded-4 p-3 d-flex align-items-center justify-content-center" style="width: 56px; height: 56px; background: #0B1F3A;">
                        <i class="fa-solid fa-gavel fs-3" style="color: #C9A227;"></i>
                    </div>
                    <div>
                        <div class="small fw-semibold" style="color: #0B1F3A;">Casos Perdidos</div>
                        <div class="fs-3 fw-bold" style="color: #0B1F3A;">{{ $perdidos }}</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Vencimientos -->
        <div class="col-6 col-lg-3">
            <div class="card h-100 p-3 shadow-sm border-0 bg-white" style="border: 1.5px solid rgba(201, 162, 39, 0.35) !important;">
                <div class="d-flex align-items-center gap-3">
                    <div class="rounded-4 p-3 d-flex align-items-center justify-content-center" style="width: 56px; height: 56px; background: rgba(201, 162, 39, 0.18);">
                        <i class="fa-solid fa-triangle-exclamation fs-3" style="color: #C9A227;"></i>
                    </div>
                    <div>
                        <div class="small fw-semibold" style="color: #0B1F3A;">Próximos Vencer</div>
                        <div class="fs-3 fw-bold" style="color: #C9A227;">{{ $vencimientosProximos }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Secondary Metrics Row -->
    <div class="row g-3 mb-4">
        <!-- Audiencias Programadas -->
        <div class="col-6 col-md-3">
            <div class="card p-3 border-0 bg-white text-center shadow-sm" style="border: 1px solid rgba(201, 162, 39, 0.22) !important;">
                <h6 class="text-muted fw-semibold">Audiencias Programadas</h6>
                <h3 class="fw-bold mb-0" style="color: #0B1F3A;">{{ $audienciasProgramadas }}</h3>
            </div>
        </div>
        <!-- Actividades Registradas -->
        <div class="col-6 col-md-3">
            <div class="card p-3 border-0 bg-white text-center shadow-sm" style="border: 1px solid rgba(201, 162, 39, 0.22) !important;">
                <h6 class="text-muted fw-semibold">Actividades Totales</h6>
                <h3 class="fw-bold mb-0" style="color: #0B1F3A;">{{ $actividadesPendientes }}</h3>
            </div>
        </div>
        <!-- Alertas Críticas -->
        <div class="col-6 col-md-3">
            <div class="card p-3 border-0 bg-white text-center shadow-sm" style="border: 1px solid rgba(201, 162, 39, 0.22) !important;">
                <h6 class="text-muted fw-semibold">Alertas Críticas (Hoy)</h6>
                <h3 class="fw-bold mb-0" style="color: #C9A227;">{{ $alertasCriticas }}</h3>
            </div>
        </div>
        <!-- Archivados -->
        <div class="col-6 col-md-3">
            <div class="card p-3 border-0 bg-white text-center shadow-sm" style="border: 1px solid rgba(201, 162, 39, 0.22) !important;">
                <h6 class="text-muted fw-semibold">Exp. Archivados</h6>
                <h3 class="fw-bold mb-0" style="color: #555555;">{{ $archivados }}</h3>
            </div>
        </div>
    </div>

    <!-- Charts Row -->
    <div class="row g-4 mb-4">
        <!-- Casos por Estado -->
        <div class="col-12 col-md-6 col-xl-3">
            <div class="card border-0 bg-white p-3 shadow-sm h-100">
                <h6 class="fw-bold mb-3">Casos por Estado</h6>
                <div style="position: relative; height: 200px;">
                    <canvas id="chartEstados"></canvas>
                </div>
            </div>
        </div>
        <!-- Casos por Materia -->
        <div class="col-12 col-md-6 col-xl-3">
            <div class="card border-0 bg-white p-3 shadow-sm h-100">
                <h6 class="fw-bold mb-3">Casos por Materia</h6>
                <div style="position: relative; height: 200px;">
                    <canvas id="chartMaterias"></canvas>
                </div>
            </div>
        </div>
        <!-- Casos por Abogado -->
        <div class="col-12 col-md-6 col-xl-3">
            <div class="card border-0 bg-white p-3 shadow-sm h-100">
                <h6 class="fw-bold mb-3">Casos por Abogado</h6>
                <div style="position: relative; height: 200px;">
                    <canvas id="chartAbogados"></canvas>
                </div>
            </div>
        </div>
        <!-- Casos por Juzgado -->
        <div class="col-12 col-md-6 col-xl-3">
            <div class="card border-0 bg-white p-3 shadow-sm h-100">
                <h6 class="fw-bold mb-3">Casos por Juzgado</h6>
                <div style="position: relative; height: 200px;">
                    <canvas id="chartJuzgados"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Upcoming Events Row -->
    <div class="row">
        <div class="col-12">
            <div class="card border-0 bg-white p-4 shadow-sm">
                <h5 class="fw-bold mb-3"><i class="fa-solid fa-calendar-check text-primary me-2"></i> Próximas Audiencias y Citaciones</h5>
                <div class="table-responsive">
                    <table class="table align-middle">
                        <thead style="background: #F5F1E8; border-bottom: 2px solid #C9A227;">
                            <tr>
                                <th style="color: #0B1F3A; font-weight: 700;">Fecha y Hora</th>
                                <th style="color: #0B1F3A; font-weight: 700;">Expediente</th>
                                <th style="color: #0B1F3A; font-weight: 700;">Tipo de Actividad</th>
                                <th style="color: #0B1F3A; font-weight: 700;">Responsable</th>
                                <th style="color: #0B1F3A; font-weight: 700;">Descripción</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($proximasAudiencias as $aud)
                                <tr>
                                    <td>
                                        <span class="badge py-2 px-3 fw-semibold" style="background: #F5F1E8; color: #0B1F3A; border: 1px solid rgba(201, 162, 39, 0.35);">
                                            <i class="fa-regular fa-clock me-1" style="color: #C9A227;"></i> {{ $aud->fecha->format('d-m-Y') }} {{ \Carbon\Carbon::parse($aud->hora)->format('H:i') }}
                                        </span>
                                    </td>
                                    <td>
                                        <a href="{{ route('expedientes.show', $aud->expediente_id) }}" class="fw-bold text-decoration-none" style="color: #0B1F3A;">
                                            {{ $aud->expediente->numero_expediente }}
                                        </a>
                                    </td>
                                    <td>
                                        <span class="badge py-2 px-3 @if($aud->tipo_actividad === 'Audiencia') bg-primary @elseif($aud->tipo_actividad === 'Citación') badge-gold @else bg-secondary @endif">
                                            {{ $aud->tipo_actividad }}
                                        </span>
                                    </td>
                                    <td>{{ $aud->responsable->name }}</td>
                                    <td><span class="text-truncate d-inline-block" style="max-width: 250px;">{{ $aud->descripcion }}</span></td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="text-center py-4 text-muted">
                                        No hay audiencias programadas para los próximos días.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // 1. Chart Estados
    const ctxEstados = document.getElementById('chartEstados').getContext('2d');
    new Chart(ctxEstados, {
        type: 'doughnut',
        data: {
            labels: {!! json_encode($estadosData->pluck('estado')) !!},
            datasets: [{
                data: {!! json_encode($estadosData->pluck('total')) !!},
                backgroundColor: ['#0B1F3A', '#C9A227', '#162e54', '#dfb738', '#2a4d7d', '#ede7dc', '#8c7b50'],
                borderWidth: 0
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { position: 'bottom', labels: { boxWidth: 12, font: { family: 'Outfit' } } }
            }
        }
    });

    // 2. Chart Materias
    const ctxMaterias = document.getElementById('chartMaterias').getContext('2d');
    new Chart(ctxMaterias, {
        type: 'pie',
        data: {
            labels: {!! json_encode($materiasData->pluck('materia')) !!},
            datasets: [{
                data: {!! json_encode($materiasData->pluck('total')) !!},
                backgroundColor: ['#0B1F3A', '#C9A227', '#162e54', '#dfb738'],
                borderWidth: 0
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { position: 'bottom', labels: { boxWidth: 12, font: { family: 'Outfit' } } }
            }
        }
    });

    // 3. Chart Abogados
    const ctxAbogados = document.getElementById('chartAbogados').getContext('2d');
    new Chart(ctxAbogados, {
        type: 'bar',
        data: {
            labels: {!! json_encode($abogadosData->pluck('abogado')) !!},
            datasets: [{
                label: 'Carga de casos',
                data: {!! json_encode($abogadosData->pluck('total')) !!},
                backgroundColor: '#0B1F3A',
                borderRadius: 8
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: false }
            },
            scales: {
                y: { beginAtZero: true, ticks: { precision: 0 } }
            }
        }
    });

    // 4. Chart Juzgados
    const ctxJuzgados = document.getElementById('chartJuzgados').getContext('2d');
    new Chart(ctxJuzgados, {
        type: 'polarArea',
        data: {
            labels: {!! json_encode($juzgadosData->pluck('juzgado')) !!},
            datasets: [{
                data: {!! json_encode($juzgadosData->pluck('total')) !!},
                backgroundColor: ['#0B1F3A', '#C9A227', '#162e54'],
                borderWidth: 0
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { position: 'bottom', labels: { boxWidth: 12, font: { family: 'Outfit' } } }
            }
        }
    });
</script>
@endsection