@extends('layouts.app')

@section('content')

{{-- TÍTULO --}}
<div class="mb-6">
    <h1 class="text-2xl font-bold">
        Hola, {{ auth()->user()->name }} 👋
    </h1>
    <p class="text-gray-500">¡Bienvenido!</p>
</div>

{{-- CARDS --}}
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">

    <div class="bg-orange-500 text-white p-5 rounded shadow">
        <p class="text-sm">Órdenes de Lavado</p>
        <p class="text-3xl font-bold">77</p>
    </div>

    <div class="bg-pink-500 text-white p-5 rounded shadow">
        <p class="text-sm">Total de Clientes</p>
        <p class="text-3xl font-bold">42</p>
    </div>

    <div class="bg-indigo-500 text-white p-5 rounded shadow">
        <p class="text-sm">Órdenes Pendientes</p>
        <p class="text-3xl font-bold">3</p>
    </div>

    <div class="bg-cyan-500 text-white p-5 rounded shadow">
        <p class="text-sm">Total de Vehículos</p>
        <p class="text-3xl font-bold">38</p>
    </div>

</div>

{{-- GRÁFICAS --}}
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">

    {{-- DONA --}}
    <div class="bg-white p-6 rounded shadow">
        <h3 class="font-semibold mb-4">
            Análisis de Tipos de Vehículos Atendidos
        </h3>
        <canvas id="vehiculosChart"></canvas>
    </div>

    {{-- BARRAS --}}
    <div class="bg-white p-6 rounded shadow">
        <h3 class="font-semibold mb-4">
            Tendencia de Órdenes de Lavado por Día
        </h3>
        <canvas id="ordenesChart"></canvas>
    </div>

</div>

@endsection
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', () => {

    new Chart(document.getElementById('vehiculosChart'), {
        type: 'doughnut',
        data: {
            labels: ['Automóvil', 'Camioneta', 'Motocicleta'],
            datasets: [{
                data: [40, 25, 12],
                backgroundColor: ['#3b82f6', '#f59e0b', '#14b8a6']
            }]
        }
    });

    new Chart(document.getElementById('ordenesChart'), {
        type: 'bar',
        data: {
            labels: ['01','02','03','04','05','06','07'],
            datasets: [{
                label: 'Órdenes',
                data: [2,5,23,10,4,6,3],
                backgroundColor: '#6366f1'
            }]
        }
    });

});
</script>
@endpush