@extends('layouts.app')

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/modules/reports.css') }}">
@endpush

@section('content')
<section class="reports-page">
    <div class="page-heading">
        <div>
            <h1>Reportes</h1>
            <p>Visualiza el desempeño del turno y toma decisiones operativas.</p>
        </div>
        <div class="report-actions">
            <button class="date-select">23/04/2025 - 23/04/2025 ▾</button>
            <button class="button blue" data-mock-action="reporte generado">Generar</button>
        </div>
    </div>
    <div class="report-kpis">
        <article>
            <span>Ventas totales</span>
            <strong>S/ 2,480.00</strong>
            <small>↗ 12% vs. día anterior</small>
        </article>
        <article>
            <span>Pedidos</span>
            <strong>42</strong>
            <small>↗ 8% vs. día anterior</small>
        </article>
        <article>
            <span>Ticket promedio</span>
            <strong>S/ 59.05</strong>
            <small>↗ 5% vs. día anterior</small>
        </article>
    </div>
    <div class="report-charts">
        <section>
            <h2>Ventas por hora</h2>
            <div class="bar-chart">
                @foreach ([26,39,48,70,54,87,69,75,42,65] as $height)
                    <i style="height: {{ $height }}%"></i>
                @endforeach
            </div>
            <div class="chart-labels">
                <span>9am</span>
                <span>11am</span>
                <span>1pm</span>
                <span>3pm</span>
                <span>5pm</span>
                <span>7pm</span>
            </div>
        </section>
        <section>
            <h2>Ventas por categoría</h2>
            <div class="donut-chart">
                <span>42<br><small>pedidos</small></span>
            </div>
            <ul class="chart-legend">
                <li><i class="l1"></i>Platos Fuertes <b>40%</b></li>
                <li><i class="l2"></i>Pastas y Arroces <b>25%</b></li>
                <li><i class="l3"></i>Entradas <b>15%</b></li>
                <li><i class="l4"></i>Bebidas <b>15%</b></li>
                <li><i class="l5"></i>Postres <b>5%</b></li>
            </ul>
        </section>
    </div>
</section>
@endsection