@extends('layouts.admin') {{-- Este es tu layout intermedio --}}

@section('title', 'Dashboard') {{-- El título para la página --}}

@section('nombre_header', 'Dashboard') {{-- Aquí defines el contenido para nombre_header --}}

@section('content_header')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">

@endsection

@section('css')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
<style>
    body {
        background-color: #f8f9fa;
    }

    .main-content {
        margin-left: 100px;
        margin-right: 100px;
    }


    .card {
        border: none;
        border-radius: 10px;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        margin-bottom: 20px;
    }

    .card-header {
        background-color: white;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        font-weight: 600;
    }

    .stat-card {
        padding: 20px;
        text-align: center;
        border-radius: 10px;
    }

    .stat-card i {
        font-size: 2rem;
        margin-bottom: 10px;
    }

    .stat-card .stat-value {
        font-size: 1.8rem;
        font-weight: 700;
    }

    .stat-card .stat-label {
        font-size: 0.9rem;
        color: #6c757d;
    }

    .bg-primary-soft {
        background-color: rgba(13, 110, 253, 0.1);
        color: #0d6efd;
    }

    .bg-success-soft {
        background-color: rgba(25, 135, 84, 0.1);
        color: #198754;
    }

    .bg-danger-soft {
        background-color: rgba(220, 53, 69, 0.1);
        color: #dc3545;
    }


    .bg-warning-soft {
        background-color: rgba(255, 193, 7, 0.1);
        color: #ffc107;
    }

    .bg-info-soft {
        background-color: rgba(13, 202, 240, 0.1);
        color: #0dcaf0;
    }

    .table-responsive {
        border-radius: 10px;
        overflow: hidden;
    }

    /* Estilos específicos para el gráfico de licencias */
    .license-chart-container {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .license-chart-container canvas {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
    }

    .chart-card {
        width: 100%;
        margin: 0;
        padding: 0;
    }
</style>
@stop

@section('content')
<div class="main-content ">


    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3">Panel de Control</h1>

    </div>

    <!-- Stats Cards -->
    <div class="row">
        <div class="col-md-3 col-sm-6">
            <div class="card stat-card bg-primary-soft position-relative" data-bs-toggle="tooltip" data-bs-placement="top" title="Cantidad de licencias actualmente con licencia activa">
                <i class="bi bi-shield-check"></i>
                <div class="stat-value">{{ $countLicenses ?? 'error' }}</div>
                <div class="stat-label">Licencias Activas</div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="card stat-card bg-success-soft position-relative" data-bs-toggle="tooltip" data-bs-placement="top" title="Total de licencias (Activas + vencidas)">
                <i class="bi bi-shield-check"></i>
                <div class="stat-value">{{ $totalLicenses ?? 'error' }}</div>
                <div class="stat-label">Licencias Totales</div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="card stat-card bg-warning-soft position-relative" data-bs-toggle="tooltip" data-bs-placement="top" title="Licencias que vencerán en los próximos 7 días">
                <i class="bi bi-clock-history"></i>
                <div class="stat-value">{{ $countExpiringSoonLicenses ?? 'error' }}</div>
                <div class="stat-label">Por Vencer Pronto</div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="card stat-card bg-danger-soft position-relative" data-bs-toggle="tooltip" data-bs-placement="top" title="Licencias que ya han vencido">
                <i class="bi bi-exclamation-triangle"></i>
                <div class="stat-value">{{ $countExpiredLicenses ?? 'error' }}</div>
                <div class="stat-label">Vencidas</div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- License Status Chart -->
        <div class="col-12">
            <div class="card chart-card" style="height: 600px;">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span>Resumen de Estado de Licencias</span>
                    <!-- <div class="dropdown">
                        <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                            Últimos 30 Días
                        </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">Últimos 7 Días</a></li>
                            <li><a class="dropdown-item" href="#">Últimos 30 Días</a></li>
                            <li><a class="dropdown-item" href="#">Últimos 90 Días</a></li>
                        </ul>
                    </div> -->
                </div>
                <div class="card-body license-chart-container">
                    <canvas id="licenseChart" height="250"></canvas>
                </div>
            </div>
        </div>
        <!-- Recent Activity -->
        <!-- <div class="col-lg-4">
            <div class="card" style="height: 600px;">
                <div class="card-header">Actividad Reciente</div>
                <div class="card-body p-0">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item d-flex justify-content-between align-items-center p-3">
                            <div>
                                <i class="bi bi-person-plus text-success me-2"></i>
                                Nuevo usuario registrado
                                <div class="small text-muted">John Doe</div>
                            </div>
                            <small class="text-muted">hace 5m</small>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center p-3">
                            <div>
                                <i class="bi bi-cart-check text-primary me-2"></i>
                                Nueva licencia comprada
                                <div class="small text-muted">Plan Premium - 1 Año</div>
                            </div>
                            <small class="text-muted">hace 15m</small>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center p-3">
                            <div>
                                <i class="bi bi-exclamation-triangle text-warning me-2"></i>
                                Licencia por vencer
                                <div class="small text-muted">Maria Garcia - 3 días restantes</div>
                            </div>
                            <small class="text-muted">hace 1h</small>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center p-3">
                            <div>
                                <i class="bi bi-arrow-repeat text-info me-2"></i>
                                Licencia renovada
                                <div class="small text-muted">Robert Smith - 6 meses</div>
                            </div>
                            <small class="text-muted">hace 3h</small>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center p-3">
                            <div>
                                <i class="bi bi-x-circle text-danger me-2"></i>
                                Licencia expirada
                                <div class="small text-muted">James Wilson</div>
                            </div>
                            <small class="text-muted">hace 5h</small>
                        </li>
                    </ul>
                </div>
            </div>
        </div> -->
    </div>

    <div class="row mt-4">


        <!-- License Distribution -->
        <!-- <div class="col-lg-8">
            <div class="row">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">Distribución de Licencias por Plan</div>
                        <div class="card-body">
                            <canvas id="planChart" height="250"></canvas>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">Distribución de Licencias por Duración</div>
                        <div class="card-body">
                            <canvas id="durationChart" height="250"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div> -->
    </div>

    <!-- Recent Purchases -->
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <span>Compras Recientes</span>
            <!-- <a href="#" class="btn btn-sm btn-outline-primary">Ver Todo</a> -->
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Cliente</th>
                            <th>Tipo de Licencia</th>
                            <th>Fecha</th>
                            <th>Monto</th>
                            <th>Tipo de Pago</th>
                            <th>Estado</th>
                            <!-- <th>Acciones</th> -->
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($getLatestLicenses as $purchase)
                        <tr>
                            <th>{{ $purchase['id'] }}</th>
                            <td>{{ $purchase['user']['email'] }}</td>
                            <td>{{ $purchase['license']['name'] }}</td>
                            <td>{{ $purchase['payment']['date'] }}</td>
                            <td>${{ $purchase['payment']['amount'] }}</td>
                            <td>{{ $purchase['payment']['method'] }}</td>
                            <td>
                                @if ($purchase['payment']['status'] == 'success')
                                <span class="badge bg-success">Completado</span>
                                @elseif ($purchase['payment']['status'] == 'pending')
                                <span class="badge bg-warning">Pendiente</span>
                                @else
                                <span class="badge bg-danger">Rechazado</span>
                                @endif
                            </td>

                        </tr>
                        @empty
                        <tr>
                            <td colspan="6" class="text-center">No hay compras recientes</td>
                        </tr>
                        @endforelse


                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- Recent Purchases -->
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <span>Ultimas Actividades</span>
            <!-- <a href="#" class="btn btn-sm btn-outline-primary">Ver Todo</a> -->
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Cliente</th>
                            <th>Tipo de Licencia</th>
                            <th>Fecha</th>
                            <th>Monto</th>
                            <th>Tipo de Pago</th>
                            <th>Estado</th>
                            <!-- <th>Acciones</th> -->
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($getLatestPurchases as $purchase)
                        <tr>
                            <th>{{ $purchase['id'] }}</th>
                            <td>{{ $purchase['user']['email'] }}</td>
                            <td>{{ $purchase['license']['name'] }}</td>
                            <td>{{ $purchase['payment']['date'] }}</td>
                            <td>${{ $purchase['payment']['amount'] }}</td>
                            <td>{{ $purchase['payment']['method'] }}</td>
                            <td>
                                @if ($purchase['payment']['status'] == 'success')
                                <span class="badge bg-success">Completado</span>
                                @elseif ($purchase['payment']['status'] == 'pending')
                                <span class="badge bg-warning">Pendiente</span>
                                @else
                                <span class="badge bg-danger">Rechazado</span>
                                @endif
                            </td>

                        </tr>
                        @empty
                        <tr>
                            <td colspan="6" class="text-center">No hay compras recientes</td>
                        </tr>
                        @endforelse


                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@endsection

@section('js')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
    // Inicializar tooltips de Bootstrap en tarjetas
    document.addEventListener('DOMContentLoaded', function() {
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        if (window.bootstrap && bootstrap.Tooltip) {
            tooltipTriggerList.map(function(tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl);
            });
        }
    });

    // License Status Chart
    const licenseCtx = document.getElementById('licenseChart').getContext('2d');
    const countNewLicenses = @json($countNewLicensesByMonth);
    const countPaidLicenses = @json($countPaidLicensesByMonth);
    const countExpiredLicenses = @json($countExpiredLicensesByMonth);
    // console.log(countNewLicenses);
    const licenseChart = new Chart(licenseCtx, {
        type: 'line',
        data: {
            labels: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
            datasets: [{
                    label: 'Licencias Nuevas',
                    data: countNewLicenses,
                    borderColor: '#198754',
                    backgroundColor: 'rgba(25, 135, 84, 0.1)',
                    tension: 0.3,
                    fill: true
                },
                {
                    label: 'Licencias Activas',
                    data: countPaidLicenses,
                    borderColor: '#0d6efd',
                    backgroundColor: 'rgba(13, 110, 253, 0.1)',
                    tension: 0.3,
                    fill: true
                },
                {
                    label: 'Licencias Expiradas',
                    data: countExpiredLicenses,
                    borderColor: '#dc3545',
                    backgroundColor: 'rgba(220, 53, 69, 0.1)',
                    tension: 0.3,
                    fill: true
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'top',
                }
            },
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });

    // Plan Distribution Chart
    // const planCtx = document.getElementById('planChart').getContext('2d');
    // const planChart = new Chart(planCtx, {
    //     type: 'doughnut',
    //     data: {
    //         labels: ['Premium', 'Estándar', 'Básico'],
    //         datasets: [{
    //             data: [65, 25, 10],
    //             backgroundColor: [
    //                 '#0d6efd',
    //                 '#6c757d',
    //                 '#ffc107'
    //             ],
    //             borderWidth: 1
    //         }]
    //     },
    //     options: {
    //         responsive: true,
    //         plugins: {
    //             legend: {
    //                 position: 'right',
    //             }
    //         }
    //     }
    // });

    // // Duration Distribution Chart
    // const durationCtx = document.getElementById('durationChart').getContext('2d');
    // const durationChart = new Chart(durationCtx, {
    //     type: 'pie',
    //     data: {
    //         labels: ['1 Mes', '3 Meses', '6 Meses', '1 Año', '2 Años'],
    //         datasets: [{
    //             data: [15, 20, 25, 30, 10],
    //             backgroundColor: [
    //                 '#0dcaf0',
    //                 '#6f42c1',
    //                 '#fd7e14',
    //                 '#198754',
    //                 '#20c997'
    //             ],
    //             borderWidth: 1
    //         }]
    //     },
    //     options: {
    //         responsive: true,
    //         plugins: {
    //             legend: {
    //                 position: 'right',
    //             }
    //         }
    //     }
    // });
</script>
@endsection