<?php $__env->startSection('title', 'Dashboard Almacen'); ?>

<?php $__env->startSection('content'); ?>
    <div class="dashboard-home">
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 mb-4">
        <div>
            <h1 class="h2 mb-1">Dashboard de Almacen</h1>
            <p class="text-muted-brand mb-0">Bienvenido, <?php echo e(auth()->user()->nombre ?? auth()->user()->name ?? 'Usuario'); ?></p>
        </div>
    </div>

    <div class="row g-3 mb-4">
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="metric-card metric-blue">
                <div class="icon">📦</div>
                <div class="title">Stock Total Disponible</div>
                <div class="value"><?php echo e(number_format($totalStock, 0, ',', '.')); ?></div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="metric-card metric-green">
                <div class="icon">🏷️</div>
                <div class="title">Categorias Activas</div>
                <div class="value"><?php echo e($activeCategories); ?></div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="metric-card metric-purple">
                <div class="icon">⬇️</div>
                <div class="title">Entradas (7 Dias)</div>
                <div class="value"><?php echo e(number_format($totalLoads7d, 0, ',', '.')); ?></div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="metric-card metric-red">
                <div class="icon">⬆️</div>
                <div class="title">Salidas (7 Dias)</div>
                <div class="value"><?php echo e(number_format($totalUnloads7d, 0, ',', '.')); ?></div>
            </div>
        </div>
    </div>

    <div class="row g-4">
        <div class="col-12 col-md-6 col-lg-4">
            <div class="card dash-panel h-100">
                <div class="card-header">Distribucion de Stock por Categoria</div>
                <div class="card-body">
                    <div class="chart-wrap">
                        <canvas id="pieChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6 col-lg-8">
            <div class="card dash-panel h-100">
                <div class="card-header">Movimientos Recientes</div>
                <div class="card-body">
                    <div class="chart-wrap">
                        <canvas id="barChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

   </div>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>
    <script src="<?php echo e(asset('js/chart.min.js')); ?>"></script>
    <script>
        (() => {
            const root = document.documentElement;

            Object.keys(sessionStorage)
                .filter((key) => key.startsWith('asignacion-alimentos:'))
                .forEach((key) => sessionStorage.removeItem(key));

            Chart.defaults.font.family = "'Open Sans', sans-serif";

            const catLabels = <?php echo json_encode($catLabels, 15, 512) ?>;
            const catData = <?php echo json_encode($catData, 15, 512) ?>;
            const dates = <?php echo json_encode($dates, 15, 512) ?>;
            const loads = <?php echo json_encode($loads, 15, 512) ?>;
            const unloads = <?php echo json_encode($unloads, 15, 512) ?>;

            const getThemePalette = () => {
                const darkMode = root.getAttribute('data-theme') === 'dark';

                return {
                    text: darkMode ? '#d7e6f0' : '#7E8080',
                    grid: darkMode ? 'rgba(150, 175, 191, 0.18)' : 'rgba(126, 128, 128, 0.18)',
                    tooltipBg: darkMode ? 'rgba(20, 33, 44, 0.94)' : 'rgba(255, 255, 255, 0.96)',
                    tooltipTitle: darkMode ? '#f4fbff' : '#264054',
                    tooltipBody: darkMode ? '#d7e6f0' : '#446078',
                    tooltipBorder: darkMode ? 'rgba(57, 166, 201, 0.3)' : 'rgba(7, 123, 161, 0.18)',
                };
            };

            const buildLegend = (position = 'right') => ({
                position,
                labels: {
                    usePointStyle: true,
                    padding: 18,
                    boxWidth: 8,
                    color: getThemePalette().text,
                },
            });

            const buildTooltip = () => ({
                backgroundColor: getThemePalette().tooltipBg,
                titleColor: getThemePalette().tooltipTitle,
                bodyColor: getThemePalette().tooltipBody,
                borderColor: getThemePalette().tooltipBorder,
                borderWidth: 1,
            });

            const buildScales = () => ({
                y: {
                    beginAtZero: true,
                    ticks: {
                        color: getThemePalette().text,
                    },
                    grid: {
                        color: getThemePalette().grid,
                        borderDash: [2, 2],
                        drawBorder: false,
                    },
                },
                x: {
                    ticks: {
                        color: getThemePalette().text,
                    },
                    grid: {
                        color: getThemePalette().grid,
                        display: false,
                        drawBorder: false,
                    },
                },
            });

            const applyThemeDefaults = () => {
                Chart.defaults.color = getThemePalette().text;
            };

            applyThemeDefaults();

            const pieCtx = document.getElementById('pieChart').getContext('2d');
            const pieChart = new Chart(pieCtx, {
                type: 'doughnut',
                data: {
                    labels: catLabels,
                    datasets: [{
                        data: catData,
                        backgroundColor: ['#077BA1', '#446078', '#BB0808', '#0a95c3', '#5d7f9c', '#b44d4d', '#2c8cab', '#6a889f'],
                        borderWidth: 0,
                        hoverOffset: 6
                    }]
                },
                options: {
                    maintainAspectRatio: false,
                    cutout: '68%',
                    plugins: {
                        legend: buildLegend('right'),
                        tooltip: buildTooltip(),
                    }
                }
            });

            const barCtx = document.getElementById('barChart').getContext('2d');
            const barChart = new Chart(barCtx, {
                type: 'bar',
                data: {
                    labels: dates,
                    datasets: [{
                        label: 'Entradas',
                        data: loads,
                        backgroundColor: '#077BA1',
                        borderRadius: 6
                    }, {
                        label: 'Salidas',
                        data: unloads,
                        backgroundColor: '#BB0808',
                        borderRadius: 6
                    }]
                },
                options: {
                    maintainAspectRatio: false,
                    scales: buildScales(),
                    plugins: {
                        legend: buildLegend('top'),
                        tooltip: buildTooltip(),
                    }
                }
            });

            const refreshChartsTheme = () => {
                applyThemeDefaults();

                pieChart.options.plugins.legend = buildLegend('right');
                pieChart.options.plugins.tooltip = buildTooltip();
                pieChart.update();

                barChart.options.scales = buildScales();
                barChart.options.plugins.legend = buildLegend('top');
                barChart.options.plugins.tooltip = buildTooltip();
                barChart.update();
            };

            const themeObserver = new MutationObserver(() => {
                refreshChartsTheme();
            });

            themeObserver.observe(root, {
                attributes: true,
                attributeFilter: ['data-theme'],
            });
        })();
    </script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\xampp\htdocs\almacen2\resources\views/dashboard.blade.php ENDPATH**/ ?>