{{-- resources/views/backend/dashboard.blade.php --}}
@extends('backend.layouts.app')

@section('title', __('Dashboard'))

@section('content')
    <x-backend.card>
        <x-slot name="header">
            @lang('Welcome :Name', ['name' => $logged_in_user->name])
        </x-slot>

        <x-slot name="body">
            @lang('Welcome to the Dashboard')

            {{-- Tarjetas de conteo por estado/prioridad --}}
            <div class="row mt-4">
                <div class="col-md-3">
                    <div class="card text-center">
                        <div class="card-body">
                            <h5 class="card-title">Total de Trámites</h5>
                            <h3>{{ $totalTramites ?? 0 }}</h3>
                        </div>
                    </div>
                </div><!--col-->

                <div class="col-md-3">
                    <div class="card text-center">
                        <div class="card-body">
                            <h5 class="card-title">No Iniciados</h5>
                            <h3>{{ $tramitesNoIniciados ?? 0 }}</h3>
                        </div>
                    </div>
                </div><!--col-->

                <div class="col-md-3">
                    <div class="card text-center">
                        <div class="card-body">
                            <h5 class="card-title">En Revisión</h5>
                            <h3>{{ $tramitesEnRevision ?? 0 }}</h3>
                        </div>
                    </div>
                </div><!--col-->

                <div class="col-md-3">
                    <div class="card text-center">
                        <div class="card-body">
                            <h5 class="card-title">Aprobados</h5>
                            <h3>{{ $tramitesAprobados ?? 0 }}</h3>
                        </div>
                    </div>
                </div><!--col-->
            </div><!--row-->

            <div class="row mt-4">
                <div class="col-md-3">
                    <div class="card text-center">
                        <div class="card-body">
                            <h5 class="card-title">Rechazados</h5>
                            <h3>{{ $tramitesRechazados ?? 0 }}</h3>
                        </div>
                    </div>
                </div><!--col-->

                <div class="col-md-3">
                    <div class="card text-center">
                        <div class="card-body">
                            <h5 class="card-title">Reproceso</h5>
                            <h3>{{ $tramitesReproceso ?? 0 }}</h3>
                        </div>
                    </div>
                </div><!--col-->

                <div class="col-md-3">
                    <div class="card text-center">
                        <div class="card-body">
                            <h5 class="card-title">Prioridad Baja</h5>
                            <h3>{{ $tramitesBaja ?? 0 }}</h3>
                        </div>
                    </div>
                </div><!--col-->

                <div class="col-md-3">
                    <div class="card text-center">
                        <div class="card-body">
                            <h5 class="card-title">Prioridad Media</h5>
                            <h3>{{ $tramitesMedia ?? 0 }}</h3>
                        </div>
                    </div>
                </div><!--col-->
            </div><!--row-->

            <div class="row mt-4">
                <div class="col-md-3">
                    <div class="card text-center">
                        <div class="card-body">
                            <h5 class="card-title">Prioridad Alta</h5>
                            <h3>{{ $tramitesAlta ?? 0 }}</h3>
                        </div>
                    </div>
                </div><!--col-->
            </div><!--row-->

            <hr>

            {{-- Distribución por Estado (listado textual) --}}
            <h4 class="mt-4">Distribución por Estado (Detalle)</h4>
            @if(isset($conteoPorEstado) && $conteoPorEstado->count())
                <ul>
                    @foreach ($conteoPorEstado as $item)
                        <li>{{ $item->estado }}: {{ $item->total }}</li>
                    @endforeach
                </ul>
            @else
                <p>No hay datos de conteo por estado.</p>
            @endif

            {{-- Distribución por Prioridad (listado textual) --}}
            <h4 class="mt-4">Distribución por Prioridad (Detalle)</h4>
            @if(isset($conteoPorPrioridad) && $conteoPorPrioridad->count())
                <ul>
                    @foreach ($conteoPorPrioridad as $item)
                        <li>{{ $item->priority ?? 'Sin prioridad' }}: {{ $item->total }}</li>
                    @endforeach
                </ul>
            @else
                <p>No hay datos de conteo por prioridad.</p>
            @endif

            <hr>

            {{-- Listado de trámites próximos a vencer en 7 días --}}
            <h4 class="mt-4">Trámites Próximos a Vencer (7 días)</h4>
            @if(isset($proximosVencer) && $proximosVencer->count())
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Tipo Producto</th>
                                <th>Tipo Trámite</th>
                                <th>Fecha Vencimiento</th>
                                <th>Estado</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($proximosVencer as $tv)
                                <tr>
                                    <td>{{ $tv->id }}</td>
                                    <td>{{ $tv->tipo_producto }}</td>
                                    <td>{{ $tv->tipo_tramite }}</td>
                                    <td>{{ $tv->fecha_vencimiento }}</td>
                                    <td>{{ $tv->estado }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <p>No hay trámites próximos a vencer dentro de 7 días.</p>
            @endif

            <hr>

            {{-- EJEMPLO: Gráfico con Chart.js (Trámites por Estado) --}}
            @php
                // Si $conteoPorEstado existe, convertimos a arrays
                $estadosLabels = isset($conteoPorEstado)
                    ? $conteoPorEstado->pluck('estado')->toArray()
                    : [];
                $estadosCounts = isset($conteoPorEstado)
                    ? $conteoPorEstado->pluck('total')->toArray()
                    : [];
            @endphp

            <h4 class="mt-4">Gráfica de Trámites por Estado (Chart.js)</h4>
            <canvas id="chartEstados" width="400" height="200"></canvas>

            {{-- Aquí mantenemos el gráfico anterior con Chart.js y abajo agregamos el nuevo con Livewire + ApexCharts --}}
            <hr>
            <h4 class="mt-4">Gráfica de Trámites por Estado (Livewire + ApexCharts)</h4>
            <livewire:dashboard-chart />

        </x-slot>
    </x-backend.card>

    {{-- Cargar Chart.js desde CDN (para la gráfica antigua) --}}
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>

    <script>
        var ctx = document.getElementById('chartEstados').getContext('2d');
        var chartEstados = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: @json($estadosLabels),
                datasets: [{
                    label: 'Cantidad de Trámites',
                    data: @json($estadosCounts),
                    backgroundColor: 'rgba(54, 162, 235, 0.5)', // Color de relleno
                    borderColor: 'rgba(54, 162, 235, 1)',       // Color de borde
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true,
                        stepSize: 1
                    }
                }
            }
        });
    </script>
@endsection