@extends('layouts.cozinha')
@section('menu', 'active')
@section('page_titulo', '🧮 Caixa')
@section('titulo', 'Caixa')
@section('conteudo')

    <div class="container-fluid">

        <div class="row">

            <!-- LISTA DE PEDIDOS -->
            <div class="col-md-4 border-end">

                <h5>Pedidos</h5>

                <ul class="list-group" id="ordersList">
                    @foreach ($pedidos as $pedido)
                        <li class="list-group-item d-flex justify-content-between align-items-center"
                            onclick="loadOrder({{ $pedido->id }})">

                            Mesa {{ $pedido->pedido_sessao->sessao_mesa->mesa }} -
                            {{ $pedido->pedido_sessao->sessao_mesa->area }}
                            <span class="badge">{{ $pedido->estado }}</span>
                        </li>
                    @endforeach
                </ul>

            </div>

            <!-- DETALHE DO PEDIDO -->
            <div class="col-md-8">

                <h5>Itens do Pedido</h5>

                <table class="table">
                    <thead>
                        <tr>
                            <th>Produto</th>
                            <th>Qtd</th>
                            <th>Preço</th>
                            <th>Total</th>
                            <th></th>
                        </tr>
                    </thead>

                    <tbody id="orderItems"></tbody>
                </table>

                <h4>Total: <span id="orderTotal">0</span></h4>

                <button class="btn btn-success" onclick="finalizeOrder()">
                    💳 Finalizar / Facturar
                </button>

            </div>

        </div>
    </div>

@endsection

@push('script')
    <script>
        let CURRENT_ORDER = null;

        function loadOrder(id) {

            fetch(`/api/pedidos/${id}`)
                .then(r => r.json())
                .then(order => {

                    CURRENT_ORDER = order;

                    renderItems(order.pedido_items);

                    toggleEditState(order.estado);

                });
        }

        function renderItems(items) {

            let html = '';
            let total = 0;

            items.forEach(i => {

                let subtotal = i.quantidade * i.preco;
                total += subtotal;

                html += `
        <tr>
            <td>${i.descricao}</td>

            <td>
                <input type="number" value="${i.quantidade}" min="1"
                    onchange="updateQty(${i.id}, this.value)">
            </td>

            <td>${formatKz(i.preco)}</td>
            <td>${formatKz(subtotal)}</td>

            <td>
                <button class="btn btn-danger btn-sm"
                    onclick="removeItem(${i.id})">
                    ❌
                </button>
            </td>
        </tr>
        `;
            });

            document.getElementById('orderItems').innerHTML = html;
            document.getElementById('orderTotal').innerText = formatKz(total);
        }

        function toggleEditState(status) {

            const disabled = status !== 'Aberto';

            document.querySelectorAll('#orderItems input, #orderItems button')
                .forEach(el => {
                    el.disabled = disabled;
                });
            /*if (status !== 'Aberto') {
                document.getElementById('orderItems')
                    .insertAdjacentHTML('beforebegin',
                        `<div class="alert alert-warning">
            Pedido em preparação — edição bloqueada
        </div>`
                    );

            }*/
        }

        function updateQty(itemId, qtd) {

            fetch(`/api/pedido-items/${itemId}`, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        quantidade: qtd
                    })
                })
                .then(() => loadOrder(CURRENT_ORDER.id));
        }

        function removeItem(itemId) {

            if (!confirm('Remover item?')) return;

            fetch(`/api/pedido-items/${itemId}`, {
                    method: 'DELETE'
                })
                .then(() => loadOrder(CURRENT_ORDER.id));
        }

        function addProductToOrder(product) {

            fetch('/api/pedido-items', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        order_id: CURRENT_ORDER.id,
                        product_id: product.id,
                        qtd: 1
                    })
                })
                .then(() => loadOrder(CURRENT_ORDER.id));
        }

        function finalizeOrder() {

            fetch(`/api/pedidos/${CURRENT_ORDER.id}/checkout`, {
                    method: 'POST'
                })
                .then(() => {

                    alert('Factura gerada!');
                    location.reload();

                });
        }

        
    </script>
@endpush