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

<?php $__env->startSection('content'); ?>
<?php
    $estadosLabels = \App\Models\Orden::estados();
?>

<div class="page-head">
    <div>
        <h1>Dashboard</h1>
        <div class="crumb">Resumen general de tu taller · <?php echo e(now()->translatedFormat('l, d \d\e F Y')); ?></div>
    </div>
    <div style="display:flex; gap:10px;">
        <a href="<?php echo e(route('ordenes.index')); ?>" class="btn btn-light"><i class="fa-solid fa-clipboard-list"></i> Ver órdenes</a>
        <a href="<?php echo e(route('ordenes.index')); ?>" class="btn btn-primary"><i class="fa-solid fa-plus"></i> Nueva orden</a>
    </div>
</div>


<div class="stats-grid" style="margin-bottom:22px;">
    <div class="stat-card grad-teal">
        <div class="s-label">Órdenes abiertas</div>
        <div class="s-value"><?php echo e($kpis['ordenes_abiertas']); ?></div>
        <div class="s-sub"><i class="fa-solid fa-wrench"></i> Activas en el taller</div>
        <i class="fa-solid fa-clipboard-list s-icon"></i>
    </div>
    <div class="stat-card grad-blue">
        <div class="s-label">Ingresos del mes</div>
        <div class="s-value">S/ <?php echo e(number_format($kpis['ingresos_mes'], 0)); ?></div>
        <div class="s-sub"><i class="fa-solid fa-arrow-trend-up"></i> Órdenes pagadas</div>
        <i class="fa-solid fa-sack-dollar s-icon"></i>
    </div>
    <div class="stat-card grad-cyan">
        <div class="s-label">Clientes</div>
        <div class="s-value"><?php echo e($kpis['clientes']); ?></div>
        <div class="s-sub"><i class="fa-solid fa-user-check"></i> Registrados</div>
        <i class="fa-solid fa-users s-icon"></i>
    </div>
    <div class="stat-card grad-violet">
        <div class="s-label">Vehículos</div>
        <div class="s-value"><?php echo e($kpis['vehiculos']); ?></div>
        <div class="s-sub"><i class="fa-solid fa-car"></i> En el parque</div>
        <i class="fa-solid fa-car-side s-icon"></i>
    </div>
    <div class="stat-card grad-amber">
        <div class="s-label">Citas hoy</div>
        <div class="s-value"><?php echo e($kpis['citas_hoy']); ?></div>
        <div class="s-sub"><i class="fa-solid fa-calendar-day"></i> Agendadas</div>
        <i class="fa-solid fa-calendar-check s-icon"></i>
    </div>
    <div class="stat-card grad-rose">
        <div class="s-label">Stock bajo</div>
        <div class="s-value"><?php echo e($kpis['repuestos_bajos']); ?></div>
        <div class="s-sub"><i class="fa-solid fa-triangle-exclamation"></i> Requieren reposición</div>
        <i class="fa-solid fa-boxes-stacked s-icon"></i>
    </div>
</div>


<div class="charts-grid" style="margin-bottom:20px;">
    <div class="panel">
        <div class="panel-head">
            <div><h3>Ingresos por mes</h3><div class="sub">Últimos 7 meses (S/)</div></div>
            <span class="badge-pill b-primary">Facturación</span>
        </div>
        <div class="panel-body"><div class="chart-box"><canvas id="chartIngresos"></canvas></div></div>
    </div>

    <div class="panel">
        <div class="panel-head">
            <div><h3>Órdenes por estado</h3><div class="sub">Distribución actual</div></div>
            <span class="badge-pill b-info">Operaciones</span>
        </div>
        <div class="panel-body"><div class="chart-box"><canvas id="chartEstados"></canvas></div></div>
    </div>

    <div class="panel">
        <div class="panel-head">
            <div><h3>Servicios más solicitados</h3><div class="sub">Ranking por cantidad</div></div>
            <span class="badge-pill b-success">Servicios</span>
        </div>
        <div class="panel-body"><div class="chart-box"><canvas id="chartServicios"></canvas></div></div>
    </div>

    <div class="panel">
        <div class="panel-head">
            <div><h3>Productividad por mecánico</h3><div class="sub">Órdenes atendidas</div></div>
            <span class="badge-pill b-warning">Personal</span>
        </div>
        <div class="panel-body"><div class="chart-box"><canvas id="chartMecanicos"></canvas></div></div>
    </div>
</div>


<div class="lists-grid">
    <div class="panel" style="grid-column: span 2; min-width:0;">
        <div class="panel-head">
            <div><h3>Órdenes recientes</h3><div class="sub">Últimos ingresos al taller</div></div>
            <a href="<?php echo e(route('ordenes.index')); ?>" class="btn btn-light" style="height:34px;">Ver todas</a>
        </div>
        <div class="table-wrap">
            <table class="tbl">
                <thead><tr><th>Orden</th><th>Cliente</th><th>Vehículo</th><th>Mecánico</th><th>Estado</th><th>Total</th></tr></thead>
                <tbody>
                <?php $__empty_1 = true; $__currentLoopData = $recientes; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $o): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                    <tr>
                        <td class="cell-strong"><?php echo e($o->numero); ?></td>
                        <td><?php echo e($o->cliente->nombre_completo ?? '—'); ?></td>
                        <td><?php echo e($o->vehiculo->placa ?? '—'); ?> <span class="cell-muted"><?php echo e($o->vehiculo->marca ?? ''); ?></span></td>
                        <td class="cell-muted"><?php echo e($o->mecanico->name ?? 'Sin asignar'); ?></td>
                        <td><span class="badge-pill b-<?php echo e($o->estadoColor()); ?>"><?php echo e($estadosLabels[$o->estado] ?? $o->estado); ?></span></td>
                        <td class="cell-strong">S/ <?php echo e(number_format($o->total, 2)); ?></td>
                    </tr>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                    <tr><td colspan="6" class="cell-muted" style="text-align:center; padding:30px;">Sin órdenes registradas.</td></tr>
                <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>

    <div class="panel" style="min-width:0;">
        <div class="panel-head"><div><h3>Próximas citas</h3></div></div>
        <div class="panel-body" style="padding-top:6px; padding-bottom:6px;">
            <?php $__empty_1 = true; $__currentLoopData = $citas; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $c): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                <div class="list-row">
                    <div class="mini-avatar bg-amber"><i class="fa-solid fa-calendar-day"></i></div>
                    <div>
                        <div class="lr-title"><?php echo e($c->cliente->nombre_completo ?? 'Cliente'); ?></div>
                        <div class="lr-sub"><?php echo e($c->vehiculo->placa ?? ''); ?> · <?php echo e($c->titulo); ?></div>
                    </div>
                    <div class="lr-right">
                        <div class="lr-title" style="font-size:12.5px;"><?php echo e($c->fecha_hora->translatedFormat('d M')); ?></div>
                        <div class="lr-sub"><?php echo e($c->fecha_hora->format('h:i A')); ?></div>
                    </div>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                <div class="cell-muted" style="text-align:center; padding:20px;">Sin citas próximas.</div>
            <?php endif; ?>
        </div>
    </div>

    <div class="panel" style="min-width:0;">
        <div class="panel-head"><div><h3>Stock bajo</h3><div class="sub">Requieren reposición</div></div></div>
        <div class="panel-body" style="padding-top:6px; padding-bottom:6px;">
            <?php $__empty_1 = true; $__currentLoopData = $stockBajo; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $r): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                <div class="list-row">
                    <div class="mini-avatar bg-rose"><i class="fa-solid fa-box"></i></div>
                    <div>
                        <div class="lr-title"><?php echo e($r->nombre); ?></div>
                        <div class="lr-sub"><?php echo e($r->categoria); ?></div>
                    </div>
                    <div class="lr-right">
                        <span class="badge-pill b-danger"><?php echo e($r->stock); ?> / <?php echo e($r->stock_minimo); ?></span>
                    </div>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                <div class="cell-muted" style="text-align:center; padding:20px;">Todo el stock está en orden. 👍</div>
            <?php endif; ?>
        </div>
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>
<script>
    const mesesData    = <?php echo json_encode($meses, 15, 512) ?>;
    const estadosData  = <?php echo json_encode($porEstado, 15, 512) ?>;
    const estadosLabels = <?php echo json_encode($estadosLabels, 15, 512) ?>;
    const serviciosData = <?php echo json_encode($topServicios, 15, 512) ?>;
    const mecanicosData = <?php echo json_encode($porMecanico, 15, 512) ?>;

    Chart.defaults.font.family = "'Inter', system-ui, sans-serif";
    Chart.defaults.color = '#7a8a92';
    const commonOpts = { responsive: true, maintainAspectRatio: false };

    // ---- 1) Ingresos por mes (barras con degradado) ----
    const ctxI = document.getElementById('chartIngresos').getContext('2d');
    const gI = ctxI.createLinearGradient(0, 0, 0, 300);
    gI.addColorStop(0, '#14b8a6'); gI.addColorStop(1, '#0d9488');
    new Chart(ctxI, {
        type: 'bar',
        data: {
            labels: mesesData.map(m => m.label),
            datasets: [{ label: 'Ingresos S/', data: mesesData.map(m => m.total),
                backgroundColor: gI, borderRadius: 8, maxBarThickness: 42 }]
        },
        options: { ...commonOpts,
            plugins: { legend: { display: false } },
            scales: { y: { beginAtZero: true, grid: { color: '#eef1f4' }, ticks: { callback: v => 'S/ ' + v } },
                      x: { grid: { display: false } } } }
    });

    // ---- 2) Órdenes por estado (dona) ----
    const palette = { recepcion:'#94a3b8', diagnostico:'#0ea5e9', en_proceso:'#f59e0b',
        esperando_repuestos:'#f97316', terminado:'#16a34a', entregado:'#0d9488', anulado:'#dc2626' };
    const keys = Object.keys(estadosData);
    new Chart(document.getElementById('chartEstados'), {
        type: 'doughnut',
        data: { labels: keys.map(k => estadosLabels[k] || k),
            datasets: [{ data: keys.map(k => estadosData[k]),
                backgroundColor: keys.map(k => palette[k] || '#94a3b8'), borderWidth: 2, borderColor: '#fff' }] },
        options: { ...commonOpts, cutout: '62%',
            plugins: { legend: { position: 'bottom', labels: { boxWidth: 12, padding: 12, font: { size: 11 } } } } }
    });

    // ---- 3) Servicios más solicitados (barras horizontales) ----
    new Chart(document.getElementById('chartServicios'), {
        type: 'bar',
        data: { labels: serviciosData.map(s => s.descripcion),
            datasets: [{ label: 'Cantidad', data: serviciosData.map(s => s.total),
                backgroundColor: '#6366f1', borderRadius: 6, maxBarThickness: 26 }] },
        options: { ...commonOpts, indexAxis: 'y',
            plugins: { legend: { display: false } },
            scales: { x: { beginAtZero: true, grid: { color: '#eef1f4' }, ticks: { precision: 0 } },
                      y: { grid: { display: false }, ticks: { font: { size: 11 } } } } }
    });

    // ---- 4) Productividad por mecánico (barras) ----
    const ctxM = document.getElementById('chartMecanicos').getContext('2d');
    const gM = ctxM.createLinearGradient(0, 0, 0, 300);
    gM.addColorStop(0, '#f59e0b'); gM.addColorStop(1, '#ea580c');
    new Chart(ctxM, {
        type: 'bar',
        data: { labels: mecanicosData.map(m => m.name),
            datasets: [{ label: 'Órdenes', data: mecanicosData.map(m => m.total),
                backgroundColor: gM, borderRadius: 8, maxBarThickness: 46 }] },
        options: { ...commonOpts,
            plugins: { legend: { display: false } },
            scales: { y: { beginAtZero: true, grid: { color: '#eef1f4' }, ticks: { precision: 0 } },
                      x: { grid: { display: false }, ticks: { font: { size: 11 } } } } }
    });
</script>
<?php $__env->stopPush(); ?>

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