@extends('admin.layout')

@section('title', 'Dashboard')

@section('content')
    <div class="row mb-4">
        <!-- Ventas Hoy -->
        <div class="col-md-6 col-xl-4 mb-3">
            <div class="card text-white bg-success h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="card-title text-uppercase mb-0">Ventas Hoy</h6>
                            <h2 class="font-weight-bold mb-0">€ {{ number_format($ventasHoy, 2) }}</h2>
                        </div>
                        <div>
                            <i class="fas fa-euro-sign fa-3x opacity-50"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Cajas Abiertas -->
        <div class="col-md-6 col-xl-4 mb-3">
            <div class="card text-white bg-primary h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="card-title text-uppercase mb-0">Cajas Abiertas</h6>
                            <h2 class="font-weight-bold mb-0">{{ $cajasAbiertas }}</h2>
                        </div>
                        <div>
                            <i class="fas fa-cash-register fa-3x opacity-50"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Top Productos -->
        <div class="col-md-6 mb-4">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-light">
                    <h5 class="mb-0 text-secondary font-weight-bold">Top 5 Productos Más Vendidos</h5>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-striped mb-0">
                            <thead>
                                <tr>
                                    <th>Producto</th>
                                    <th>Vendidos</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($topProductos as $item)
                                    <tr>
                                        <td>{{ $item->producto ? $item->producto->nombre : 'Producto Eliminado' }}</td>
                                        <td class="fw-bold">{{ $item->total_sold }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Rendimiento Camareros -->
        <div class="col-md-6 mb-4">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-light">
                    <h5 class="mb-0 text-secondary font-weight-bold">Ventas por Camarero</h5>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-striped mb-0">
                            <thead>
                                <tr>
                                    <th>Camarero</th>
                                    <th>Total Ventas</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($ventasCamareros as $item)
                                    <tr>
                                        <td>{{ $item->usuario ? $item->usuario->name : 'Desconocido' }}</td>
                                        <td class="fw-bold">€ {{ number_format($item->total_sales, 2) }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Últimos Cierres -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-header bg-light d-flex justify-content-between align-items-center">
                    <h5 class="mb-0 text-secondary font-weight-bold">Últimos Cierres de Caja</h5>
                    <a href="{{ route('admin.cajas') }}" class="btn btn-sm btn-outline-primary">Ver Todos</a>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead>
                                <tr>
                                    <th>Fecha Cierre</th>
                                    <th>Cajera</th>
                                    <th>Total Final</th>
                                    <th>Acciones</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($ultimosCierres as $caja)
                                    <tr>
                                        <td>{{ $caja->fecha_cierre->format('d/m/Y H:i') }}</td>
                                        <td>{{ $caja->nombre_cajera ?? 'N/A' }}</td>
                                        <td>€
                                            {{ number_format(($caja->total_efectivo + $caja->total_tarjeta + $caja->total_bizum - $caja->total_gastos), 2) }}
                                        </td>
                                        <td>
                                            <a href="{{ route('admin.cajas.show', $caja->id) }}"
                                                class="btn btn-sm btn-info text-white">Ver Detalle</a>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection