@extends('app')
@section('content')

<script>
    setInterval(() => {
    $("#formulario_pedidos").load(window.location.href + " #formulario_pedidos>*");
}, 10000);
</script>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="text-center" style="margin:0;"><strong>Monitor de Pedidos en Preparación</strong></h4>
                </div>
                <div class="panel-body">

                    {{-- FORMULARIO DE FILTROS --}}
                    {{-- La acción apunta a la ruta que nombramos en el paso 1 --}}
                    <form method="GET" action="{{ route('pedidos.en_preparacion.vista') }}" class="form-horizontal well well-sm">
                        <div class="row">
                            <div class="col-md-5">
                                <div class="form-group" style="margin-left:0; margin-right:0;">
                                    <label for="fecha1" class="col-sm-3 control-label">Desde:</label>
                                    <div class="col-sm-9">
                                        {{-- El valor se rellena con la fecha de la petición o la de hoy por defecto --}}
                                        <input type="date" name="fecha1" id="fecha1" class="form-control" value="{{ request('fecha1', date('Y-m-d')) }}" required>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-5">
                                <div class="form-group" style="margin-left:0; margin-right:0;">
                                    <label for="fecha2" class="col-sm-3 control-label">Hasta:</label>
                                    <div class="col-sm-9">
                                        <input type="date" name="fecha2" id="fecha2" class="form-control" value="{{ request('fecha2', date('Y-m-d')) }}" required>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <button type="submit" class="btn btn-primary btn-block">
                                    <span class="glyphicon glyphicon-search" aria-hidden="true"></span> Buscar
                                </button>
                            </div>
                        </div>
                    </form>

                    <hr>

                    {{-- LISTA DE PEDIDOS --}}
                    {{-- Usamos @forelse para mostrar un mensaje si no hay pedidos --}}
                    @forelse ($pedidosEnPreparacion as $pedido)
                        <div class="panel panel-info" id="formulario_pedidos">
                            <div class="panel-heading">
                                <strong>Pedido #{{ $pedido->idPedido }} | Mesa: {{ $pedido->mesa->descripcion ?? 'N/A'}} | Cliente: {{ $pedido->notas_generales ?? 'N/A'}} </strong>
                                <small class="pull-right">
                                    <strong>Atendido por:</strong> {{ $pedido->mesero->Nombres ?? 'No asignado' }} | {{ $pedido->created_at->format('d/m/Y h:i A') }} ({{ $pedido->created_at->diffForHumans() }})
                                </small>
                            </div>
                            <div class="panel-body table-responsive" style="padding-bottom: 0;">
                                <table class="table table-bordered table-hover" style="margin-bottom: 10px;">
                                    <thead>
                                        <tr>
                                            <th style="width: 50%;">Producto</th>
                                            <th style="width: 15%;">Cantidad</th>
                                            <th>Notas del Ítem</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($pedido->items as $item)
                                            <tr>
                                                <td>{{ $item->nombreProducto }}</td>
                                                <td>{{ $item->cantidad }}</td>
                                                <td>{{ $item->notas_item ?: '--' }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    @empty
                        <div class="alert alert-warning text-center">
                            <strong>No se encontraron pedidos en preparación para el rango de fechas seleccionado.</strong>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
</div>
@endsection