@extends('layouts.pos')

@section('content')
    <div class="row h-100 g-0">
        <!-- SECCIÓN IZQUIERDA: CLIENTES Y CUENTAS -->
        <div class="col-md-5 col-lg-4 d-flex flex-column border-end bg-white" style="height: calc(100vh - 60px);">

            <!-- Header Mesa -->
            <div class="p-2 border-bottom d-flex justify-content-between align-items-center bg-light">
                <h5 class="m-0 fw-bold">{{ $mesa->nombre }}</h5>
                <div>
                    <button class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#modalUnir">
                        <i class="fas fa-object-group"></i> Unir
                    </button>
                    <form id="form-nuevo-cliente" action="{{ route('cliente.store') }}" method="POST" class="d-inline">
                        @csrf
                        <input type="hidden" name="mesa_id" value="{{ $mesa->id }}">
                        <button type="submit" class="btn btn-sm btn-success">
                            <i class="fas fa-plus"></i> Cliente
                        </button>
                    </form>
                </div>
            </div>

            <!-- Lista de Clientes (Contenedor AJAX) -->
            <div class="flex-grow-1 overflow-auto p-2" id="clientes-container">
                @include('pos.partials.clientes_list', ['mesa' => $mesa])
            </div>
        </div>

        <!-- SECCIÓN DERECHA: PRODUCTOS -->
        <div class="col-md-7 col-lg-8 d-flex flex-column bg-light" style="height: calc(100vh - 60px);">
            <!-- Categorías -->
            <div class="p-2 shadow-sm bg-white overflow-auto text-nowrap" id="categorias-bar">
                <button class="btn btn-dark rounded-pill me-1 px-4 active" onclick="filterProductos('all')">Todos</button>
                @foreach($categorias as $cat)
                    <button class="btn btn-outline-secondary rounded-pill me-1 px-3" onclick="filterProductos({{ $cat->id }})">
                        {{ $cat->nombre }}
                    </button>
                @endforeach
            </div>

            <!-- Grid Productos -->
            <div class="flex-grow-1 overflow-auto p-3">
                <div class="row g-2" id="productos-grid">
                    @foreach($categorias as $cat)
                        @foreach($cat->productos as $prod)
                            <div class="col-6 col-sm-4 col-md-3 col-xl-2 producto-item cat-{{ $cat->id }}">
                                <button
                                    class="btn btn-white border shadow-sm w-100 h-100 py-4 d-flex flex-column align-items-center justify-content-center btn-producto"
                                    onclick="addProducto({{ $prod->id }})">
                                    <span class="fw-bold small text-wrap mb-1">{{ $prod->nombre }}</span>
                                    <span class="badge bg-light text-dark border">{{ number_format($prod->precio, 2) }} €</span>
                                </button>
                            </div>
                        @endforeach
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Cobrar -->
    <div class="modal fade" id="modalCobrar" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-success text-white">
                    <h5 class="modal-title">Cobrar Cuenta</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body text-center">
                    <h2 class="display-4 fw-bold mb-4" id="cobrar-total">0.00 €</h2>
                    <div class="d-grid gap-3">
                        <button class="btn btn-lg btn-outline-dark p-3" onclick="submitPago('efectivo')">
                            <i class="fas fa-money-bill me-2"></i> EFECTIVO
                        </button>
                        <button class="btn btn-lg btn-outline-primary p-3" onclick="submitPago('tarjeta')">
                            <i class="fas fa-credit-card me-2"></i> TARJETA
                        </button>
                        <button class="btn btn-lg btn-warning p-3 text-white" onclick="submitPago('bizum')">
                            <i class="fas fa-mobile-alt me-2"></i> BIZUM
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Unir -->
    <div class="modal fade" id="modalUnir" tabindex="-1">
        <div class="modal-dialog">
            <form action="{{ route('cliente.merge') }}" method="POST" id="form-unir">
                @csrf
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Unir Cuentas</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div id="modal-unir-body">
                            @include('pos.partials.modal_unir_content', ['mesa' => $mesa])
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Fusionar</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

@endsection

@push('scripts')
    <script>
        let activeClienteId = {{ $mesa->clientes->where('estado', 'abierto')->first()->id ?? 0 }};
        const mesaId = {{ $mesa->id }};

        function setActiveCliente(id) {
            activeClienteId = id;
        }

        function refreshClientes() {
            $.get('{{ route("pos.refresh", $mesa->id) }}', { active_id: activeClienteId })
                .done(function (data) {
                    $('#clientes-container').html(data.list_html);
                    $('#modal-unir-body').html(data.modal_html);
                })
                .fail(function () {
                    console.error('Error refreshing table');
                });
        }

        function filterProductos(catId) {
            if (catId === 'all') {
                $('.producto-item').show();
                $('#categorias-bar button').removeClass('active btn-dark').addClass('btn-outline-secondary');
                $('#categorias-bar button:first-child').addClass('active btn-dark').removeClass('btn-outline-secondary');
            } else {
                $('.producto-item').hide();
                $('.cat-' + catId).show();
                // Optional: visual toggle
            }
        }

        function addProducto(productoId) {
            if (!activeClienteId || activeClienteId === 0) {
                // Try to auto-select first available if exists?
                let firstId = $('.cliente-card').first().data('id');
                if (firstId) {
                    activeClienteId = firstId;
                } else {
                    alert('Añade un cliente primero.');
                    return;
                }
            }

            $.post('{{ route("pedido.store") }}', {
                cliente_id: activeClienteId,
                producto_id: productoId,
                cantidad: 1
            })
                .done(function () {
                    refreshClientes();
                })
                .fail(function () {
                    alert('Error añadiendo producto');
                });
        }

        // Nuevo Cliente via AJAX
        $('#form-nuevo-cliente').on('submit', function (e) {
            e.preventDefault();
            let form = $(this);
            $.post(form.attr('action'), form.serialize())
                .done(function () {
                    refreshClientes();
                })
                .fail(function () {
                    alert('Error creando cliente');
                });
        });

        // Borrar Pedido
        window.deletePedido = function (pedidoId) {
            if (!confirm('¿Eliminar producto?')) return;

            $.ajax({
                url: '/pedido/' + pedidoId,
                type: 'DELETE',
                success: function (result) {
                    if (result.success) {
                        refreshClientes();
                    } else {
                        alert('No se pudo borrar: ' + (result.message || 'Error desconocido'));
                    }
                },
                error: function (xhr) {
                    console.error('Error delete:', xhr);
                    let msg = 'No se pudo borrar';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        msg += ': ' + xhr.responseJSON.message;
                    } else if (xhr.status === 404) {
                        msg += ': Pedido no encontrado (404)';
                    } else if (xhr.status === 405) {
                        msg += ': Método no permitido (405)';
                    } else if (xhr.status === 500) {
                        msg += ': Error del servidor (500)';
                    }
                    alert(msg);
                }
            });
        };

        let cobrarClienteId = 0;
        window.openCobrarModal = function (clienteId, total) {
            cobrarClienteId = clienteId;
            $('#cobrar-total').text(total.toFixed(2) + ' €');
            $('#modalCobrar').modal('show');
        };

        window.submitPago = function (metodo) {
            if (!cobrarClienteId) return;

            let url = '{{ route("cliente.pay", ":id") }}';
            url = url.replace(':id', cobrarClienteId);

            $.post(url, { metodo_pago: metodo })
                .done(function () {
                    $('#modalCobrar').modal('hide');
                    refreshClientes();
                })
                .fail(function (xhr) {
                    alert('Error: ' + xhr.responseJSON.message);
                });
        };

        // Note: Split functionality kept simpler for now or needs update to match partials
        window.openSplitModal = function (clienteId) {
            // Implementation for Split left basic for now as requested quick fluid UX
            alert('Funcionalidad de dividir compleja pendiente de adaptar a AJAX puro. Usa "Unir" para reorganizar.');
        };
    </script>
@endpush