@if($mesa->clientes->where('estado', 'abierto')->count() == 0)
    <div class="text-center mt-5 text-muted">
        <i class="fas fa-chair fa-3x mb-3"></i>
        <p>Mesa libre.<br>Añade un cliente para empezar.</p>
    </div>
@endif

<div class="accordion" id="accordionClientes">
    @foreach($mesa->clientes->where('estado', 'abierto') as $index => $cliente)
        <div class="accordion-item shadow-sm mb-2 border-0 cliente-card" data-id="{{ $cliente->id }}">
            <h2 class="accordion-header">
                <button
                    class="accordion-button {{ (isset($activeId) && $activeId == $cliente->id) || (!isset($activeId) && $loop->first) ? '' : 'collapsed' }} p-3 fw-bold"
                    type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ $cliente->id }}"
                    onclick="setActiveCliente({{ $cliente->id }})">
                    <div class="d-flex justify-content-between w-100 pe-3 align-items-center">
                        <span>
                            <i class="fas fa-user me-2"></i>
                            {{ $cliente->nombre_opcional ?? 'Cliente ' . ($cliente->id) }}
                        </span>
                        <span class="badge bg-primary rounded-pill total-badge">{{ number_format($cliente->total, 2) }}
                            €</span>
                    </div>
                </button>
            </h2>
            <div id="collapse{{ $cliente->id }}"
                class="accordion-collapse collapse {{ (isset($activeId) && $activeId == $cliente->id) || (!isset($activeId) && $loop->first) ? 'show' : '' }}"
                data-bs-parent="#accordionClientes">
                <div class="accordion-body p-0">
                    <!-- Lista Pedidos -->
                    <ul class="list-group list-group-flush pedido-list">
                        @forelse($cliente->pedidos as $pedido)
                            @if($pedido->estado == 'activo')
                                <li class="list-group-item d-flex justify-content-between align-items-center py-2"
                                    data-pedido-id="{{ $pedido->id }}">
                                    <div>
                                        <small class="fw-bold">{{ $pedido->cantidad }}x {{ $pedido->producto->nombre }}</small>
                                        <div class="text-muted small">{{ number_format($pedido->precio_unitario, 2) }} €</div>
                                    </div>
                                    <div class="d-flex align-items-center">
                                        <span
                                            class="fw-bold me-3">{{ number_format($pedido->cantidad * $pedido->precio_unitario, 2) }}
                                            €</span>
                                        <button class="btn btn-link text-danger p-0 btn-sm"
                                            onclick="deletePedido({{ $pedido->id }})"><i class="fas fa-times"></i></button>
                                    </div>
                                </li>
                            @endif
                        @empty
                            <li class="list-group-item text-muted text-center py-3 small">Sin consumiciones</li>
                        @endforelse
                    </ul>

                    <!-- Acciones Cliente -->
                    <div class="p-2 border-top bg-light d-flex gap-2">
                        <button class="btn btn-outline-dark btn-sm flex-grow-1"
                            onclick="openSplitModal({{ $cliente->id }})">
                            <i class="fas fa-cut"></i> Dividir
                        </button>
                        <button class="btn btn-success btn-sm flex-grow-1 fw-bold"
                            onclick="openCobrarModal({{ $cliente->id }}, {{ $cliente->total }})">
                            <i class="fas fa-money-bill-wave"></i> COBRAR
                        </button>
                    </div>
                </div>
            </div>
        </div>
    @endforeach
</div>