@extends('layouts.app')

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

@section('content')
<section class="detail-page">
    <a class="back-link" href="{{ route('orders.index') }}">← Volver</a>
    <div class="detail-layout">
        <div class="detail-main">
            <div class="detail-title">
                <div>
                    <h1>Pedido #{{ str_pad((string) $orderNumber, 4, '0', STR_PAD_LEFT) }}</h1>
                    <p>Mesa 5 <i>•</i> 4 comensales <i>•</i> 09:05 a. m.</p>
                </div>
                <span class="pill red">Retrasado</span>
            </div>
            <section class="detail-table">
                <h2>Productos</h2>
                <div class="detail-table-head">
                    <span>Producto</span>
                    <span>Cantidad</span>
                    <span>Estado</span>
                    <span>Tiempo</span>
                </div>
                <div class="detail-product">
                    <b>Lomo Saltado</b>
                    <span>1</span>
                    <span class="pill amber">En preparación</span>
                    <small>14 min</small>
                </div>
                <div class="detail-product">
                    <b>Arroz con Mariscos</b>
                    <span>1</span>
                    <span class="pill amber">En preparación</span>
                    <small>14 min</small>
                </div>
            </section>
            <section class="order-notes">
                <h2>Notas del pedido</h2>
                <p>▣ &nbsp; Sin cebolla, por favor</p>
            </section>
            <section class="assigned-team">
                <div>
                    <i>AT</i>
                    <span>Mesero<strong>Ana Torres</strong></span>
                </div>
                <div>
                    <i>CL</i>
                    <span>Chef asignado<strong>Carlos López</strong></span>
                </div>
            </section>
        </div>
        <aside class="detail-actions">
            <div class="time-alert">
                <span>Tiempo transcurrido</span>
                <strong>◷ 19 min</strong>
                <small>Límite: 15 min</small>
            </div>
            <button class="button green" data-mock-action="pedido marcado como listo">✓ Marcar como listo</button>
            <button class="button blue" data-mock-action="pedido transferido a otra estación">⇄ Transferir a otra estación</button>
            <button class="button red" data-mock-action="solicitud de cancelación registrada">⟳ Cancelar pedido</button>
        </aside>
    </div>
</section>
@endsection