@extends('layout.backoffice')
@section('content')
    <div class="row d-flex justify-content-center">
        <div class="col-md-6 col-lg-4 mb-4">
            <div class="card text-center">
                <div class="card-body">
                    <i class='bx bx-money-withdraw card-icon text-success'></i>
                    <h5 class="card-title">Dinero Recaudado</h5>
                    <h3 class="text-success">${{ FormatoNumero($dashboard['ventas']['dineroRecaudado'] ?? 0, false) }}</h3>
                </div>
            </div>
        </div>

        <div class="col-md-12 col-lg-4 mb-4">
            <div class="card text-center">
                <div class="card-body">
                    <i class='bx bx-trending-up card-icon text-info'></i>
                    <h5 class="card-title">Ingresos Hoy</h5>
                    <h4 class="text-info">${{ FormatoNumero($dashboard['ventas']['ingresosHoy'] ?? 0, false) }}</h4>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0 card-title-icon"><i class='bx bxs-bar-chart-alt-2'></i>Gráfico de Ventas</h5>
                    <select id="filtroGraficoVentas" class="form-select w-auto">
                        <option value="dia">Día</option>
                        <option value="semana">Semana</option>
                        <option value="mes" selected>Mes</option>
                        <option value="ano">Año</option>
                    </select>
                </div>
                <div class="card-body">
                    <div id="chartVentas" style="height: 350px;"></div>
                </div>
            </div>
        </div>
    </div>
    <script>
        const dataVentas = @json($dashboard['ventas']['ventasPorPeriodo'] ?? []);

        $(document).ready(function () {
            const obtenerLabelsYData = (obj) => {
                return {
                    labels: Object.keys(obj || {}),
                    data: Object.values(obj || {})
                };
            };

            const datosMes = obtenerLabelsYData(dataVentas.mes || {});

            const chartVentas = new ApexCharts($("#chartVentas")[0], {
                chart: {
                    type: 'area',
                    height: 350,
                    toolbar: { show: true }
                },
                series: [{
                    name: 'Ventas',
                    data: datosMes.data
                }],
                xaxis: {
                    categories: datosMes.labels
                },
                stroke: {
                    curve: 'smooth',
                    width: 2
                },
                colors: ['#28C76F'],
                dataLabels: { enabled: false },
                fill: {
                    type: 'gradient',
                    gradient: {
                        shadeIntensity: 1,
                        opacityFrom: 0.7,
                        opacityTo: 0.2,
                        stops: [0, 90, 100]
                    }
                },
                tooltip: {
                    y: {
                        formatter: function (val) {
                            return "$" + val.toFixed(2);
                        }
                    }
                }
            });

            if ($("#chartVentas").length) {
                chartVentas.render();
            }

            $('#filtroGraficoVentas').on('change', function () {
                const tipo = $(this).val();
                const datos = obtenerLabelsYData(dataVentas[tipo] || {});
                chartVentas.updateOptions({
                    xaxis: { categories: datos.labels },
                    series: [{ data: datos.data }]
                });
            });
        });
    </script>
    <style>
        .card-icon {
            font-size: 2.5rem;
            margin-bottom: 0.5rem;
        }

        .card-title-icon {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .card-title-icon .bx {
            font-size: 1.5rem;
        }
    </style>
@endsection