@extends('layouts.main')

@section('title', 'Comanda do Pedido')

@section('content')
<div class="row">
    {{-- Coluna da Comanda (Esquerda) --}}
    <div class="col-md-4">
        <div class="card h-100">
            <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                <h5 class="mb-0">
                    Comanda #{{ $pedido->id }}
                    @if ($pedido->tipo_venda == 'mesa')
                        - {{ optional($pedido->mesa)->nome }}
                    @elseif ($pedido->tipo_venda == 'balcao')
                        - Balcão
                    @elseif ($pedido->tipo_venda == 'delivery')
                        - Delivery
                    @endif
                </h5>
                <a href="{{ route('pedidos.abertos') }}" class="btn btn-sm btn-light">Voltar</a>
            </div>
            <div class="card-body">
                @if ($pedido->tipo_venda == 'delivery' && $pedido->cliente)
                    <div class="mb-3 p-3 bg-light rounded">
                        <h6 class="border-bottom pb-2 mb-2">Dados do Cliente:</h6>
                        <p class="mb-0"><strong>Nome:</strong> {{ $pedido->cliente->nome }}</p>
                        <p class="mb-0"><strong>Telefone:</strong> {{ $pedido->cliente->telefone }}</p>
                        <p class="mb-0">
                            <strong>Endereço:</strong> 
                            {{ $pedido->cliente->rua }}, {{ $pedido->cliente->numero }} - {{ $pedido->cliente->bairro }}
                        </p>
                    </div>
                @endif

                <h6 class="border-bottom pb-2 mb-3">Itens do Pedido:</h6>
                <div id="lista-itens-pedido">
                    @forelse ($pedido->itens as $item)
                        @php
                            $status = strtolower($item->status_item ?? 'novo');
                        @endphp
                        <div class="d-flex justify-content-between align-items-center mb-2 border-bottom pb-2">
                            <div>
                                <span class="badge bg-secondary">1x</span> {{ $item->produto->nome }}
                                <small class="badge rounded-pill
                                    @if ($status == 'pronto') bg-success
                                    @elseif ($status == 'novo') bg-info
                                    @else bg-warning @endif
                                ">
                                    {{ ucfirst(str_replace('_', ' ', $status)) }}
                                </small>
                            </div>
                            <div>
                                <span>R$ {{ number_format($item->preco_unitario, 2, ',', '.') }}</span>
                            </div>
                        </div>
                    @empty
                        <p class="text-muted text-center">Nenhum item adicionado ainda.</p>
                    @endforelse
                </div>
            </div>
            <div class="card-footer">
                <h5 class="d-flex justify-content-between">
                    <span>Total:</span>
                    <span id="total-pedido">R$ {{ number_format($pedido->total, 2, ',', '.') }}</span>
                </h5>
                <hr>
                <div class="d-grid gap-2">
                    <form action="{{ route('pedidos.enviar_para_cozinha', $pedido->id) }}" method="POST">
                        @csrf
                        <button type="submit" class="btn btn-warning w-100">Enviar para Cozinha</button>
                    </form>
                    <button type="button" class="btn btn-success w-100" data-bs-toggle="modal" data-bs-target="#fecharPedidoModal">Fechar Pedido</button>
                </div>
            </div>
        </div>
    </div>

    {{-- Coluna do Cardápio (Direita) - RESTAURADA --}}
    <div class="col-md-8">
        <div class="card h-100">
            <div class="card-header bg-info text-white">
                <h5 class="mb-0">Cardápio</h5>
            </div>
            <div class="card-body">
                <nav>
                    <div class="nav nav-tabs" id="nav-tab" role="tablist">
                        @foreach ($categorias as $key => $categoria)
                        <button class="nav-link @if($key == 0) active @endif" id="nav-{{ $categoria->id }}-tab" data-bs-toggle="tab" data-bs-target="#nav-{{ $categoria->id }}" type="button" role="tab" aria-controls="nav-{{ $categoria->id }}" aria-selected="@if($key == 0) true @else false @endif">
                            {{ $categoria->nome }}
                        </button>
                        @endforeach
                    </div>
                </nav>
                <div class="tab-content mt-3" id="nav-tabContent">
                    @foreach ($categorias as $key => $categoria)
                    <div class="tab-pane fade @if($key == 0) show active @endif" id="nav-{{ $categoria->id }}" role="tabpanel" aria-labelledby="nav-{{ $categoria->id }}-tab">
                        <div class="row">
                            @foreach ($categoria->produtos as $produto)
                            <div class="col-md-4 mb-3">
                                <div class="card h-100">
                                    <div class="card-body text-center">
                                        <h6 class="card-title">{{ $produto->nome }}</h6>
                                        <p class="card-text text-muted mb-1">{{ $produto->descricao ?? '' }}</p>
                                        <p class="card-text fw-bold">R$ {{ number_format($produto->preco, 2, ',', '.') }}</p>
                                    </div>
                                    <div class="card-footer text-center">
                                        <button class="btn btn-sm btn-primary adicionar-item-btn" data-produto-id="{{ $produto->id }}">Adicionar</button>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>

{{-- MODAL DE PAGAMENTO FRACIONADO --}}
<div class="modal fade" id="fecharPedidoModal" tabindex="-1" aria-labelledby="fecharPedidoModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="fecharPedidoModalLabel">Finalizar Pedido #{{ $pedido->id }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="formFinalizarPedido" method="POST" action="{{ route('pedidos.fechar', $pedido->id) }}">
                @csrf
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6>Resumo da Conta</h6>
                            <p>Subtotal: R$ <span id="modal-subtotal">{{ number_format($pedido->total, 2, ',', '.') }}</span></p>
                            <div class="form-check form-switch mb-3">
                                <input class="form-check-input" type="checkbox" name="taxa_servico_check" id="taxaServicoSwitch" role="switch">
                                <label class="form-check-label" for="taxaServicoSwitch">Adicionar Taxa de Serviço (10%)</label>
                            </div>
                            <h4 class="fw-bold">Total a Pagar: R$ <span id="modal-total">{{ number_format($pedido->total, 2, ',', '.') }}</span></h4>
                            <hr>
                            <h4 class="text-danger fw-bold">Valor Restante: R$ <span id="valor-restante">{{ number_format($pedido->total, 2, ',', '.') }}</span></h4>
                        </div>
                        <div class="col-md-6">
                            <h6>Adicionar Pagamento</h6>
                            <div class="input-group mb-3">
                                <span class="input-group-text">R$</span>
                                <input type="number" class="form-control" id="valor-parcial" placeholder="0,00" step="0.01">
                            </div>
                            <div class="mb-3">
                                <select class="form-select" id="forma-pagamento-parcial">
                                    <option value="dinheiro">Dinheiro</option>
                                    <option value="pix">Pix</option>
                                    <option value="cartao">Cartão</option>
                                </select>
                            </div>
                            <div class="d-grid">
                                <button type="button" class="btn btn-primary" id="btn-adicionar-pagamento">Adicionar Pagamento</button>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <h6>Pagamentos Adicionados</h6>
                    <ul class="list-group" id="lista-pagamentos">
                        {{-- Pagamentos serão adicionados aqui via JS --}}
                    </ul>
                    <input type="hidden" name="pagamentos_json" id="pagamentos_json">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" id="btn-finalizar-pedido" class="btn btn-success" disabled>Finalizar Pedido</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    // --- Lógica da Comanda (Adicionar Item) ---
    const listaItens = document.getElementById('lista-itens-pedido');
    const totalPedidoSpan = document.getElementById('total-pedido');
    const pedidoId = @json($pedido->id);
    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

    const formatoBR = (valor) => 'R$ ' + valor.toFixed(2).replace('.', ',');

    document.querySelectorAll('.adicionar-item-btn').forEach(function(button) {
        button.addEventListener('click', function () {
            const produtoId = this.dataset.produtoId;
            fetch('/pedidos/' + pedidoId + '/adicionar-item', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken
                },
                body: JSON.stringify({ produto_id: produtoId })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    listaItens.innerHTML = ''; 
                    data.pedido.itens.forEach(function(item) {
                        const status = item.status_item || 'novo';
                        let statusClass = 'bg-warning';
                        if (status === 'novo') statusClass = 'bg-info';
                        if (status === 'pronto') statusClass = 'bg-success';
                        
                        const itemHtml = `<div class="d-flex justify-content-between align-items-center mb-2 border-bottom pb-2">
                            <div>
                                <span class="badge bg-secondary">1x</span> ${item.produto.nome}
                                <small class="badge rounded-pill ${statusClass}">
                                    ${status.charAt(0).toUpperCase() + status.slice(1).replace('_', ' ')}
                                </small>
                            </div>
                            <div>
                                <span>${formatoBR(parseFloat(item.preco_unitario))}</span>
                            </div>
                        </div>`;
                        listaItens.insertAdjacentHTML('beforeend', itemHtml);
                    });
                    // Atualiza o total na comanda e no modal
                    totalPedidoSpan.textContent = formatoBR(data.pedido.total);
                    document.getElementById('modal-subtotal').textContent = data.pedido.total.toFixed(2).replace('.', ',');
                    taxaServicoSwitch.dispatchEvent(new Event('change')); // Força o recálculo do total no modal
                } else {
                    alert('Erro: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Erro:', error);
                alert('Ocorreu um erro de comunicação com o servidor.');
            });
        });
    });

    // --- Lógica do Novo Modal de Pagamento ---
    const pedidoTotalInicial = @json((float) $pedido->total);
    let pagamentosAdicionados = [];

    const taxaServicoSwitch = document.getElementById('taxaServicoSwitch');
    const modalSubtotalSpan = document.getElementById('modal-subtotal');
    const modalTotalSpan = document.getElementById('modal-total');
    const valorRestanteSpan = document.getElementById('valor-restante');
    const valorParcialInput = document.getElementById('valor-parcial');
    const formaPagamentoParcialSelect = document.getElementById('forma-pagamento-parcial');
    const btnAdicionarPagamento = document.getElementById('btn-adicionar-pagamento');
    const listaPagamentosUl = document.getElementById('lista-pagamentos');
    const pagamentosJsonInput = document.getElementById('pagamentos_json');
    const btnFinalizarPedido = document.getElementById('btn-finalizar-pedido');

    const formatoBRSpan = (valor) => valor.toFixed(2).replace('.', ',');

    function atualizarResumo() {
        let subtotal = parseFloat(modalSubtotalSpan.textContent.replace(',', '.')) || 0;
        let totalAPagar = subtotal;
        if (taxaServicoSwitch.checked) {
            totalAPagar *= 1.10;
        }

        const totalPago = pagamentosAdicionados.reduce((acc, p) => acc + p.valor, 0);
        const valorRestante = totalAPagar - totalPago;

        modalTotalSpan.textContent = formatoBRSpan(totalAPagar);
        valorRestanteSpan.textContent = formatoBRSpan(valorRestante > 0 ? valorRestante : 0);

        btnFinalizarPedido.disabled = valorRestante > 0.001;
    }

    function renderizarPagamentos() {
        listaPagamentosUl.innerHTML = '';
        pagamentosAdicionados.forEach((p, index) => {
            const li = document.createElement('li');
            li.className = 'list-group-item d-flex justify-content-between align-items-center';
            li.innerHTML = `
                <span>${p.forma.charAt(0).toUpperCase() + p.forma.slice(1)}: R$ ${formatoBRSpan(p.valor)}</span>
                <button type="button" class="btn-close" data-index="${index}"></button>
            `;
            listaPagamentosUl.appendChild(li);
        });
        
        pagamentosJsonInput.value = JSON.stringify(pagamentosAdicionados);
        atualizarResumo();
    }

    btnAdicionarPagamento.addEventListener('click', function() {
        const valor = parseFloat(valorParcialInput.value);
        const forma = formaPagamentoParcialSelect.value;
        
        if (isNaN(valor) || valor <= 0) {
            alert('Por favor, insira um valor válido.');
            return;
        }

        pagamentosAdicionados.push({ valor: valor, forma: forma });
        valorParcialInput.value = '';
        renderizarPagamentos();
    });

    listaPagamentosUl.addEventListener('click', function(event) {
        if (event.target.classList.contains('btn-close')) {
            const index = parseInt(event.target.getAttribute('data-index'));
            pagamentosAdicionados.splice(index, 1);
            renderizarPagamentos();
        }
    });

    taxaServicoSwitch.addEventListener('change', atualizarResumo);

    atualizarResumo();
});
</script>
@endpush