@extends('layouts.contentNavbarLayout')

@section('title', 'Dashboard - Casa de Empeño')

@section('vendor-style')
<link rel="stylesheet" href="{{asset('assets/vendor/libs/apex-charts/apex-charts.css')}}">
@endsection

@section('vendor-script')
<script src="{{asset('assets/vendor/libs/apex-charts/apexcharts.js')}}"></script>
@endsection

@section('content')
<div class="row">
    <!-- Tarjetas de Estadísticas -->
    <div class="col-lg-4 col-md-12 col-6 mb-4">
        <div class="card">
            <div class="card-body">
                <div class="card-title d-flex align-items-start justify-content-between">
                    <div class="avatar flex-shrink-0">
                        <span class="avatar-initial rounded bg-label-success"><i class="bx bx-dollar"></i></span>
                    </div>
                </div>
                <span class="fw-semibold d-block mb-1">Leads Generados</span>
                <h3 class="card-title mb-2">{{ $stats['total_leads'] }}</h3>
            </div>
        </div>
    </div>
    
    <div class="col-lg-4 col-md-12 col-6 mb-4">
        <div class="card">
            <div class="card-body">
                <div class="card-title d-flex align-items-start justify-content-between">
                    <div class="avatar flex-shrink-0">
                        <span class="avatar-initial rounded bg-label-info"><i class="bx bx-message-dots"></i></span>
                    </div>
                </div>
                <span class="fw-semibold d-block mb-1">Conversaciones Activas</span>
                <h3 class="card-title text-info mb-2">{{ $stats['conversaciones_activas'] }}</h3>
            </div>
        </div>
    </div>
    
    <div class="col-lg-4 col-md-12 col-6 mb-4">
        <div class="card">
            <div class="card-body">
                <div class="card-title d-flex align-items-start justify-content-between">
                    <div class="avatar flex-shrink-0">
                        <span class="avatar-initial rounded bg-label-primary"><i class="bx bx-user-voice"></i></span>
                    </div>
                </div>
                <span class="fw-semibold d-block mb-1">Asesores Conectados</span>
                <h3 class="card-title text-primary mb-2">{{ $stats['asesores_conectados'] }}</h3>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Gráfico de Empeños -->
    <div class="col-md-6 col-12 mb-4">
        <div class="card h-100">
            <div class="card-header d-flex align-items-center justify-content-between pb-0">
                <div class="card-title mb-0">
                    <h5 class="m-0 me-2">Empeños por Categoría</h5>
                </div>
            </div>
            <div class="card-body">
                <div id="empenosChart"></div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('page-script')
<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        let cardColor, headingColor, axisColor, shadeColor, borderColor;

        cardColor = config.colors.white;
        headingColor = config.colors.headingColor;
        axisColor = config.colors.axisColor;
        borderColor = config.colors.borderColor;

        // Datos del controlador
        const chartData = [
            {{ $stats['empenos_joyas'] }}, 
            {{ $stats['empenos_electronicos'] }}, 
            {{ $stats['empenos_varios'] }}
        ];

        const chartOrderStatistics = document.querySelector('#empenosChart'),
        orderChartConfig = {
            chart: {
                height: 300,
                type: 'donut',
                fontFamily: 'Public Sans'
            },
            labels: ['Joyas', 'Electrónicos', 'Varios'],
            series: chartData,
            colors: [config.colors.primary, config.colors.success, config.colors.info],
            stroke: {
                width: 5,
                colors: cardColor
            },
            dataLabels: {
                enabled: false,
                formatter: function (val, opt) {
                    return parseInt(val) + '%';
                }
            },
            legend: {
                show: true,
                position: 'bottom',
                markers: { offsetX: -3 },
                itemMargin: {
                    vertical: 3,
                    horizontal: 10
                }
            },
            plotOptions: {
                pie: {
                    donut: {
                        size: '75%',
                        labels: {
                            show: true,
                            value: {
                                fontSize: '1.5rem',
                                fontFamily: 'Public Sans',
                                color: headingColor,
                                offsetY: -15,
                                formatter: function (val) {
                                    return parseInt(val) + '';
                                }
                            },
                            name: {
                                offsetY: 20,
                                fontFamily: 'Public Sans'
                            },
                            total: {
                                show: true,
                                fontSize: '0.8125rem',
                                color: axisColor,
                                label: 'Total',
                                formatter: function (w) {
                                    return chartData.reduce((a, b) => a + b, 0);
                                }
                            }
                        }
                    }
                }
            }
        };
        
        if (typeof chartOrderStatistics !== undefined && chartOrderStatistics !== null) {
            const statisticsChart = new ApexCharts(chartOrderStatistics, orderChartConfig);
            statisticsChart.render();
        }
    });
</script>
@endsection