@extends('app')
@section('content')
<script>
    // Refrescar la página cada 15 segundos para ver actualizaciones
    setTimeout(function(){
       window.location.reload(1);
    }, 15000);
</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">
                    <h3 class="panel-title">Gestión de Pedidos en Curso</h3>
                </div>
                <div class="panel-body">

                    @if (session('success'))
                        <div class="alert alert-success alert-dismissible" role="alert">
                            <button type="button" class="close" data-dismiss="alert"><span>×</span></button>
                            {{ session('success') }}
                        </div>
                    @endif
                    @if (session('error'))
                        <div class="alert alert-danger alert-dismissible" role="alert">
                            <button type="button" class="close" data-dismiss="alert"><span>×</span></button>
                            {{ session('error') }}
                        </div>
                    @endif

                    @forelse($pedidos as $pedido)
                        
                        {{-- El botón "Volver a la Mesa" se mantiene --}}
                        <a href="{{ route('gestionarMesa', $pedido->idMesa ?? 0) }}" class="btn btn-secondary mb-3">Volver a la Mesa</a>

                        {{-- ===================================================================== --}}
                        {{-- === LÍNEA CORREGIDA: Calculamos la clase directamente en el div === --}}
                        {{-- ===================================================================== --}}
                        <div class="panel {{ $pedido->estado == 'en_preparacion' ? 'panel-info' : 'panel-success' }}">
                            <div class="panel-heading">
                                <div class="row">
                                    <div class="col-md-8">
                                        <strong>Pedido #{{ $pedido->idPedido }}</strong>
                                        {{-- Etiqueta para indicar el estado visualmente --}}
                                        <span class="label label-default">{{ $pedido->estado == 'en_preparacion' ? 'En Preparación' : 'Preparado' }}</span>
                                        <br>
                                        Cliente: @if ($pedido->cliente) {{ $pedido->cliente->Nombres }} {{ $pedido->cliente->Apellidos }} @else {{ $pedido->notas_generales }} @endif <br>
                                        Atención al cliente: {{ $pedido->mesero->Nombres }} {{ $pedido->mesero->Apellidos }}
                                    </div>
                                    <div class="col-md-4 text-right">
                                        <small>
                                            <strong>Mesa:</strong> {{ $pedido->idMesa }}<br>
                                            <strong>Tiempo:</strong> {{ \Carbon\Carbon::parse($pedido->created_at)->diffForHumans(null, true) }}
                                        </small>
                                    </div>
                                </div>
                            </div>
                            <div class="panel-body">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th>Producto/Combo</th>
                                            <th>Tipo</th>
                                            <th>Cantidad</th>
                                            <th style="width: 150px;">Acciones</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($pedido->items as $item)
                                            <tr>
                                                <td>{{ $item->nombreProducto ?? 'Sin nombre' }}</td>
                                                <td>{{ ucfirst($item->tipoProducto) }}</td>
                                                
                                                {{-- Formulario para ACTUALIZAR cantidad --}}
                                                {!! Form::open(['url' => route('mesero.pedidos.updateItems', $pedido->idPedido), 'method' => 'PUT', 'style' => 'display:inline;']) !!}
                                                <td>
                                                    {!! Form::number("items[{$item->idPedidoItem}][cantidad]", $item->cantidad, ['min' => 0, 'class' => 'form-control']) !!}
                                                </td>
                                                <td>
                                                    {!! Form::hidden("items[{$item->idPedidoItem}][tipo]", $item->tipoProducto) !!}
                                                    {!! Form::hidden("items[{$item->idPedidoItem}][idProducto]", $item->idProducto) !!}
                                                    
                                                    <button class="btn btn-xs btn-link" type="submit" title="Guardar cambios de cantidad">
                                                        <img src="{{ url('images/Modificar.png') }}" width="25" height="20" alt="Guardar"/>
                                                    </button>
                                                {!! Form::close() !!}

                                                {{-- Formulario para ELIMINAR item --}}
                                                {!! Form::open(['route' => ['mesero.pedidos.item.eliminar', $item->idPedidoItem], 'method' => 'DELETE', 'style' => 'display:inline;', 'onsubmit' => "return confirm('¿Está seguro de eliminar este item?');"]) !!}
                                                    <button type="submit" class="btn btn-xs btn-link" title="Eliminar Item">
                                                        <img src="{{url('images/Eliminar.png')}}" width="25" height="20" alt="Eliminar Item"/>
                                                    </button>
                                                {!! Form::close() !!}
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>

                                {{-- Formulario para CANCELAR pedido completo --}}
                                {!! Form::open(['url' => route('mesero.pedidos.cancelar', $pedido->idPedido), 'method' => 'PUT', 'class' => 'form-cancelar-pedido', 'style' => 'margin-top: 10px;', 'onsubmit' => "return confirm('¿Está seguro que desea cancelar este pedido? Esta acción no se puede deshacer.');"]) !!}
                                    <button type="submit" class="btn btn-danger">Cancelar Pedido</button>
                                {!! Form::close() !!}
                            </div>
                        </div>
                    @empty
                        <p>No hay pedidos en preparación o preparados que coincidan con la búsqueda.</p>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Confirmación para el formulario de cancelar pedido
        document.querySelectorAll('.form-cancelar-pedido').forEach(function (form) {
            form.addEventListener('submit', function (e) {
                if (!confirm('¿Está seguro que desea cancelar este pedido? Esta acción no se puede deshacer.')) {
                    e.preventDefault();
                }
            });
        });
    });
</script>

@endsection