@extends('layouts.app')

@section('title', 'Dashboard')

@section('content')



    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Iconify Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.5.0/remixicon.css">
    <!-- ApexCharts CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/apexcharts/dist/apexcharts.css">

    <style>
        :root {
            --primary-color: #696cff;
            --success-color: #71dd37;
            --danger-color: #ff3e1d;
            --warning-color: #ffab00;
            --info-color: #03c3ec;
        }

        body {
            background-color: #f5f5f9;
            font-family: 'Inter', sans-serif;
        }

        .card {
            border: none;
            box-shadow: 0 2px 6px 0 rgba(67, 89, 113, 0.12);
            border-radius: 0.5rem;
            margin-bottom: 1.5rem;
        }

        .avatar {
            width: 2.5rem;
            height: 2.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .avatar-initial {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 0.375rem;
        }

        .bg-label-primary {
            background-color: rgba(105, 108, 255, 0.16) !important;
            color: var(--primary-color) !important;
        }

        .bg-label-success {
            background-color: rgba(113, 221, 55, 0.16) !important;
            color: var(--success-color) !important;
        }

        .bg-label-danger {
            background-color: rgba(255, 62, 29, 0.16) !important;
            color: var(--danger-color) !important;
        }

        .bg-label-warning {
            background-color: rgba(255, 171, 0, 0.16) !important;
            color: var(--warning-color) !important;
        }

        .bg-label-info {
            background-color: rgba(3, 195, 236, 0.16) !important;
            color: var(--info-color) !important;
        }

        .bg-label-secondary {
            background-color: rgba(133, 146, 163, 0.16) !important;
            color: #8592a3 !important;
        }

        .icon-24px {
            font-size: 1.5rem;
        }

        .text-primary {
            color: var(--primary-color) !important;
        }

        .text-success {
            color: var(--success-color) !important;
        }

        .text-danger {
            color: var(--danger-color) !important;
        }

        .badge {
            padding: 0.4rem 0.8rem;
            font-weight: 500;
            font-size: 0.8125rem;
        }

        .stat-value {
            font-size: 1.75rem;
            font-weight: 600;
            margin-bottom: 0.25rem;
        }

        .stat-label {
            color: #697a8d;
            font-size: 0.9375rem;
        }

        .trend-indicator {
            font-size: 0.9375rem;
            font-weight: 500;
        }

        .navbar {
            background-color: #fff;
            box-shadow: 0 2px 6px 0 rgba(67, 89, 113, 0.12);
            padding: 1rem 0;
            margin-bottom: 2rem;
        }

        .table-responsive {
            border-radius: 0.5rem;
        }
    </style>

    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white">
        <div class="container-xxl">
            <a class="navbar-brand" href="#">
                <span class="fw-bold text-primary">CRM Dashboard</span>
            </a>
            <div class="ms-auto">
                <span class="text-muted">Última actualización: <span id="last-update"></span></span>
            </div>
        </div>
    </nav>

    <!-- Main Content -->
    <div class="container-xxl">
        <!-- Primera fila: Métricas principales -->
        <div class="row g-3 mb-4">
            <!-- Clientes Nuevos Hoy -->
            <div class="col-xl-3 col-md-6">
                <div class="card h-100">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start mb-3">
                            <div class="avatar">
                                <div class="avatar-initial bg-label-primary rounded-3">
                                    <i class="ri-user-add-line icon-24px"></i>
                                </div>
                            </div>
                            <div class="d-flex align-items-center" id="trend-clientes-hoy">
                                <p class="mb-0 text-success me-1">+0%</p>
                                <i class="ri-arrow-up-s-line text-success"></i>
                            </div>
                        </div>
                        <div class="card-info">
                            <h3 class="stat-value mb-1" id="clientes-hoy">0</h3>
                            <p class="stat-label mb-0">Clientes Nuevos Hoy</p>
                            <small class="text-muted">vs. ayer: <span id="clientes-ayer">0</span></small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Total Clientes Activos -->
            <div class="col-xl-3 col-md-6">
                <div class="card h-100">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start mb-3">
                            <div class="avatar">
                                <div class="avatar-initial bg-label-success rounded-3">
                                    <i class="ri-group-line icon-24px"></i>
                                </div>
                            </div>
                        </div>
                        <div class="card-info">
                            <h3 class="stat-value mb-1" id="total-clientes">0</h3>
                            <p class="stat-label mb-0">Total Clientes Activos</p>
                            <small class="text-muted">Excluyendo eliminados</small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Ingresos Mes Actual -->
            <div class="col-xl-3 col-md-6">
                <div class="card h-100">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start mb-3">
                            <div class="avatar">
                                <div class="avatar-initial bg-label-warning rounded-3">
                                    <i class="ri-money-dollar-circle-line icon-24px"></i>
                                </div>
                            </div>
                            <div class="d-flex align-items-center" id="trend-ingresos">
                                <p class="mb-0 text-success me-1">+0%</p>
                                <i class="ri-arrow-up-s-line text-success"></i>
                            </div>
                        </div>
                        <div class="card-info">
                            <h3 class="stat-value mb-1" id="ingresos-mes">$0</h3>
                            <p class="stat-label mb-0">Ingresos Mes Actual</p>
                            <small class="text-muted">Mes anterior: <span id="ingresos-mes-anterior">$0</span></small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Acciones Pendientes -->
            <div class="col-xl-3 col-md-6">
                <div class="card h-100">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start mb-3">
                            <div class="avatar">
                                <div class="avatar-initial bg-label-info rounded-3">
                                    <i class="ri-task-line icon-24px"></i>
                                </div>
                            </div>
                        </div>
                        <div class="card-info">
                            <h3 class="stat-value mb-1" id="acciones-pendientes">0</h3>
                            <p class="stat-label mb-0">Acciones Pendientes</p>
                            <small class="text-muted">Requieren atención</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Segunda fila: Gráficas -->
        <div class="row g-3 mb-4">
            <!-- Gráfica: Clientes Últimos 7 Días -->
            <div class="col-xl-8 col-lg-7">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">Nuevos Clientes - Últimos 7 Días</h5>
                        <span class="badge bg-label-primary">Tendencia Semanal</span>
                    </div>
                    <div class="card-body">
                        <div id="chart-clientes-7dias"></div>
                    </div>
                </div>
            </div>

            <!-- Alertas y Resumen -->
            <div class="col-xl-4 col-lg-5">
                <div class="card h-100">
                    <div class="card-header">
                        <h5 class="mb-0">Resumen Rápido</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-4">
                            <div class="d-flex align-items-center mb-2">
                                <i class="ri-alert-line text-danger me-2"></i>
                                <strong>Clientes sin Clave SAT</strong>
                            </div>
                            <h4 class="text-danger mb-0" id="sin-clave-sat">0</h4>
                            <small class="text-muted">Requieren completar datos</small>
                        </div>
                        <hr>
                        <div class="mb-3">
                            <h6 class="mb-2">Distribución por Status</h6>
                            <div id="status-list"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Tercera fila: Gráficas de Ingresos y Top Asesores -->
        <div class="row g-3 mb-4">
            <!-- Gráfica: Ingresos 6 Meses -->
            <div class="col-xl-7">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">Ingresos - Últimos 6 Meses</h5>
                        <span class="badge bg-label-success">Ventas Totales</span>
                    </div>
                    <div class="card-body">
                        <div id="chart-ingresos-6meses"></div>
                    </div>
                </div>
            </div>

            <!-- Top 5 Asesores -->
            <div class="col-xl-5">
                <div class="card h-100">
                    <div class="card-header">
                        <h5 class="mb-0">Top 5 Asesores</h5>
                    </div>
                    <div class="card-body">
                        <div id="top-asesores-list"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Cuarta fila: Distribución por Status (Gráfica de Dona) -->
        <div class="row g-3 mb-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">Distribución de Clientes por Status</h5>
                    </div>
                    <div class="card-body">
                        <div id="chart-status-donut"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- ApexCharts -->
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

    <script>
        // URL base de tu API
        const API_URL = '