@extends('layouts.app')

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

@section('content')
<section class="orders-page">
    <div class="page-heading">
        <div>
            <h1>Pedidos</h1>
            <p>Consulta el ciclo completo: caja → cocina → salón → entrega.</p>
        </div>
        <button class="button blue" data-mock-action="nuevo pedido creado">+ Crear pedido</button>
    </div>
    <div class="orders-toolbar">
        <div class="table-filters">
            <button class="active">Todos <b>6</b></button>
            <button>Pendientes <b>3</b></button>
            <button>En preparación <b>2</b></button>
            <button>Listos <b>2</b></button>
            <button>Entregados <b>1</b></button>
        </div>
        <label>⌕ <input type="search" placeholder="Buscar por mesa o cliente..."></label>
    </div>
    <div class="data-table">
        <div class="data-head">
            <span>N° Pedido</span>
            <span>Mesa</span>
            <span>Cliente</span>
            <span>Productos</span>
            <span>Estado</span>
            <span>Hora</span>
        </div>
        @foreach ([['0011','5','Ana Torres','2 productos','En preparación','09:05','amber'],['0010','3','Carlos Ramírez','3 productos','En preparación','08:50','amber'],['0009','8','María López','1 producto','Listo','08:42','green'],['0008','2','Luis García','2 productos','Entregado','08:15','teal'],['0007','6','Sofía Ramírez','3 productos','En preparación','08:10','amber'],['0006','4','Pedro Castillo','2 productos','Listo','07:52','green'],['0005','7','Valeria Soto','1 producto','Entregado','07:30','teal'],['0004','1','Jorge Vargas','2 productos','Entregado','07:18','teal']] as $order)
            <a class="data-row" href="{{ route('orders.show', (int) $order[0]) }}">
                <span>{{ $order[0] }}</span>
                <span>{{ $order[1] }}</span>
                <span>{{ $order[2] }}</span>
                <span>{{ $order[3] }}</span>
                <span class="pill {{ $order[6] }}">{{ $order[4] }}</span>
                <small>{{ $order[5] }}</small>
            </a>
        @endforeach
    </div>
</section>
@endsection