@extends('app')

@section('content')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

<style>
    .mr-1 { margin-right: 0.25rem !important; }
    .panel-footer { background-color: #f5f5f5; }

    /* Badge rojo estilo Bootstrap 3 */
    .btn-badge {
        position: relative;
        display: inline-block;
    }
    .btn-badge .badge {
        position: absolute;
        top: -8px;
        right: -8px;
        background-color: red;
        color: white;
        border-radius: 50%;
        padding: 4px 7px;
        font-size: 12px;
    }
</style>

<script>
    // Recarga automática cada 15 segundos
    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 text-center">
                    <h4 class="mb-0">
                        <strong>Pedidos en Preparación</strong>
                    </h4>
                </div>

                {{-- Botones con badges --}}
                <div class="text-center my-2" style="margin: 10px 0;">
                    <a href="{{ route('index-preparacion') }}"
                       class="btn btn-{{ $tipo == 'atencion' ? 'primary' : 'default' }} btn-sm btn-badge" 
                       style="margin-right: 2%;">
                        Atención al Cliente
                        @if($totalAtencion > 0)
                            <span class="badge">{{ $totalAtencion }}</span>
                        @endif
                    </a>

                    <a href="{{ route('index-preparacion', ['tipo' => 'autogestion']) }}"
                       class="btn btn-{{ $tipo == 'autogestion' ? 'primary' : 'default' }} btn-sm btn-badge">
                        Autogestión
                        @if($totalAutogestion > 0)
                            <span class="badge">{{ $totalAutogestion }}</span>
                        @endif
                    </a>
                </div>

                <div class="panel-body">
                    {{-- Mensajes de éxito o error --}}
                    @if (session('success'))
                        <div class="alert alert-success">
                            {{ session('success') }}
                        </div>
                    @endif
                    @if($errors->any())
                        <div class="alert alert-danger">
                            <ul class="list-unstyled mb-0">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    {{-- Listado de pedidos --}}
                    @forelse ($pedidosEnPreparacion as $pedido)
                        <div class="panel panel-info">
                            <div class="panel-heading">
                                <strong>
                                    Pedido #{{ $pedido->idPedido }} | 
                                    Mesa: {{ $pedido->mesa->descripcion ?? 'Mesa Desconocida'}} | 
                                    Cliente: {{ $pedido->notas_generales ?? 'N/A'}}
                                </strong>
                                <small class="pull-right">
                                    <strong>
                                        Atendido Por: {{ $pedido->mesero->Nombres ?? 'No asignado' }} {{ $pedido->mesero->Apellidos ?? '' }}
                                    </strong> - {{ $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>Producto</th>
                                            <th>Cantidad</th>
                                            <th>Notas Ítem</th>
                                            <th style="width: 150px;">Acciones</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                                                                @foreach($pedido->items as $item)
                                                                                        <tr>
                                                    <td>{{ $item->nombreProducto }}</td>
                                                {!! Form::open(['url' => route('preparacion.updateItems', $pedido->idPedido), 'method' => 'PUT', 'style' => 'display:inline;']) !!}
                                                    <td>{!! Form::number("items[{$item->idPedidoItem}][cantidad]", $item->cantidad, ['min' => 0, 'class' => 'form-control']) !!}</td>
                                                    <td>{{ $item->notas_item ?: 'N/A' }}</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() !!}

                                                    {!! Form::open(['route' => ['preparacion.eliminarItem', $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>
                                {!! Form::open(['url' => route('preparacion.cancelar', $pedido->idPedido), 'method' => 'PUT', 'class' => 'form-cancelar-pedido', 'style' => 'margin-top: 10px;'
                                ,'onsubmit' => 'return confirmarCancelacion()']) !!}
                                        <button type="submit" class="btn btn-danger">Cancelar Pedido Completo</button>
                                {!! Form::close() !!}

                                <div style="padding: 0 15px 15px 15px;">
                                    <hr style="margin-top:0; margin-bottom: 10px;">
                                    <p class="mb-0"><strong>Total a pagar:</strong> {{ number_format($total, 0, ',', '.') }}</p>
                                </div>
                            </div>

                            <div class="panel-footer text-center">
                                {!! Form::open([
                                    'route' => ['marcarPreparado', $pedido->idPedido],
                                    'method' => 'POST',
                                    'onsubmit' => "return confirm('¿Marcar este pedido como preparado?');",
                                    'style' => 'display: inline;'
                                ]) !!}
                                    <button type="submit" class="btn btn-success btn-sm">
                                        <i class="fa fa-check mr-1"></i> Marcar como Preparado
                                    </button>
                                {!! Form::close() !!}
                            </div>
                        </div>
                    @empty
                        <div class="alert alert-info">
                            No hay pedidos en preparación en este momento.
                        </div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
<script>
function confirmarCancelacion() {
    return confirm("¿Seguro que quieres cancelar este pedido?");
}
</script>