@php
    $dimmerGroups = Voyager::dimmers();
@endphp

@section('head')
    <style>
        .updated {
            color: #888;
            font-size: 0.9rem;
            margin-bottom: 20px;
        }

        .filters {
            margin-bottom: 20px;
        }

        .filters button {
            background-color: #007bff;
            color: #fff;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
            border-radius: 5px;
        }

        .filters button:hover {
            background-color: #0056b3;
        }

        .summary {
            display: flex;
            justify-content: space-between;
            gap: 20px;
        }

        .card {
            flex: 1;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 20px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        }

        .card h2 {
            font-size: 1.2rem;
            margin-bottom: 20px;
        }

        .info {
            display: flex;
            justify-content: space-between;
        }

        .item {
            text-align: center;
        }

        .item p {
            font-size: 0.9rem;
            color: #888;
            margin-bottom: 10px;
        }

        .item h3 {
            font-size: 1.5rem;
            color: #007bff;
        }

        .content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
        }

        table {
            width: 60%;
            border-collapse: collapse;
        }

        th,
        td {
            padding: 10px;
            border: 1px solid #ddd;
            text-align: left;
        }

        th {
            background-color: #f8f8f8;
        }

        tfoot td {
            font-weight: bold;
        }

        canvas {
            width: 35%;
        }
    </style>
@endsection

{{-- @forelse($dimmerGroups as $dimmerGroup)
    @php
        $count = $dimmerGroup->count();
        $classes = [
            'col-xs-12',
            'col-sm-' . ($count >= 2 ? '6' : '12'),
            'col-md-' . ($count >= 3 ? '4' : ($count >= 2 ? '6' : '12')),
        ];
        $class = implode(' ', $classes);
        $prefix = "<div class='{$class}'>";
        $surfix = '</div>';
    @endphp
    @if ($dimmerGroup->any())
        <div class="clearfix container-fluid row">
            {!! $prefix . $dimmerGroup->setSeparator($surfix . $prefix)->display() . $surfix !!}
        </div>
    @endif

@empty
@endforelse --}}

<div class="">
    <div class="panel panel-bordered">
        <div class="panel-body">
            <h1>Indicadores de ventas - Jueves 1 de Agosto de 2024 al Miércoles 7 de Agosto de 2024</h1>
            <p class="updated">Actualizado a las 20:00hs</p>
            <div class="summary">
                <div class="card">
                    <h2>Resumen de ventas</h2>
                    <div class="info">
                        <div class="item">
                            <p>IMPORTE TOTAL DE VENTAS</p>
                            <h3>$6.522.326</h3>
                        </div>
                        <div class="item">
                            <p>CANTIDAD DE OPERACIONES</p>
                            <h3>8</h3>
                        </div>
                        <div class="item">
                            <p>IMPORTE PROMEDIO POR VENTA</p>
                            <h3>$815.290,73</h3>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <h2>Productos vendidos</h2>
                    <div class="info">
                        <div class="item">
                            <p>TOTAL DE PRODUCTOS VENDIDOS</p>
                            <h3>4.700,00</h3>
                        </div>
                        <div class="item">
                            <p>CANT. PROMEDIO DE PRODUCTOS POR VENTA</p>
                            <h3>587,50</h3>
                        </div>
                        <div class="item">
                            <p>IMPORTE PROMEDIO POR ARTÍCULO</p>
                            <h3>$1.387,73</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="panel panel-bordered">
        <div class="panel-body">
            <h2>Gráfico de ventas por día</h2>
            <div class="container">
                <canvas id="ventasChart" width="800" height="400"></canvas>
            </div>
            <script>
                const ctx = document.getElementById('ventasChart').getContext('2d');
                const ventasChart = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: ['Jue 1 Ago', 'Lun 5 Ago', 'Mar 6 Ago'],
                        datasets: [{
                                label: 'Importe de ventas',
                                data: [5112122.97, 1234567.89, 12345.67],
                                backgroundColor: '#f50418',
                                borderColor: '#f50418',
                                borderWidth: 1,
                                yAxisID: 'y'
                            },
                            {
                                label: 'Cantidad de ventas',
                                data: [5, 3, 1],
                                type: 'line',
                                fill: false,
                                borderColor: 'rgba(200, 200, 200, 0.8)',
                                backgroundColor: 'rgba(200, 200, 200, 0.5)',
                                yAxisID: 'y1'
                            }
                        ]
                    },
                    options: {
                        scales: {
                            y: {
                                beginAtZero: true,
                                type: 'linear',
                                position: 'left',
                                ticks: {
                                    callback: function(value) {
                                        return '$' + value.toLocaleString();
                                    }
                                }
                            },
                            y1: {
                                beginAtZero: true,
                                type: 'linear',
                                position: 'right',
                                grid: {
                                    drawOnChartArea: false
                                }
                            }
                        },
                        plugins: {
                            tooltip: {
                                callbacks: {
                                    label: function(context) {
                                        let label = context.dataset.label || '';
                                        if (context.datasetIndex === 0) {
                                            label += ': $' + context.raw.toLocaleString();
                                        } else {
                                            label += ': ' + context.raw + ',00';
                                        }
                                        return label;
                                    }
                                }
                            }
                        }
                    }
                });
            </script>
        </div>
    </div>
    <div class="panel panel-bordered">
        <div class="panel-body">
            <h2>Resumen de ventas por sucursal</h2>
            <div class="content">
                <table>
                    <thead>
                        <tr>
                            <th>Sucursal</th>
                            <th>Cantidad</th>
                            <th>Importe</th>
                            <th>%</th>
                            <th>Promedio por artículo</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>CREACIONES TRIES ADMIN</td>
                            <td>4.700,00</td>
                            <td>$6.522.325,88</td>
                            <td>100,00%</td>
                            <td>$1.387,73</td>
                        </tr>
                        <tr>
                            <td>ADMIN LASK NADINA</td>
                            <td>0,00</td>
                            <td>$0,00</td>
                            <td>0,00%</td>
                            <td>$0,00</td>
                        </tr>
                        <tr>
                            <td>ADMIN ADMIN LASK MELANIE</td>
                            <td>0,00</td>
                            <td>$0,00</td>
                            <td>0,00%</td>
                            <td>$0,00</td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td>Totales:</td>
                            <td>4.700,00</td>
                            <td>$6.522.325,88</td>
                            <td>100,00%</td>
                            <td>$1.387,73</td>
                        </tr>
                    </tfoot>
                </table>
                <div style="width: 384px !important; height: 384px !important;">
                    <canvas id="ventasDoughnutChart" width="384" height="384"></canvas>
                </div>
            </div>
        </div>
        <script>
            const ctx1 = document.getElementById('ventasDoughnutChart').getContext('2d');
            const ventasDoughnutChart = new Chart(ctx1, {
                type: 'doughnut',
                data: {
                    labels: ['CREACIONES TRIES ADMIN', 'ADMIN LASK NADINA', 'ADMIN ADMIN LASK MELANIE'],
                    datasets: [{
                        data: [6522325.88, 0, 0],
                        backgroundColor: ['#00aaff', '#ffcc00', '#ff0000'],
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'top',
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    let label = context.label || '';
                                    let value = context.raw || 0;
                                    if (label) {
                                        label += ': ';
                                    }
                                    label += '$' + value.toLocaleString();
                                    return label;
                                }
                            }
                        }
                    }
                }
            });
        </script>
    </div>
</div>

{{-- <div class="container">