@php
use App\Enum\StatusVenda;
$title = 'Nova Venda';
@endphp

<div class="container-fluid pt-1" style="margin-top: -32px;">
    <nav aria-label="breadcrumb" class="mb-2" style="margin-top: -18px;">
        <ol class="breadcrumb bg-transparent px-0 py-1 mb-1" style="font-size: 0.98rem;">
            <li class="breadcrumb-item"><a href="/" class="text-decoration-none text-secondary">Início</a></li>
            <li class="breadcrumb-item"><a href="#" onclick="carregarConteudo(`{{ route('operacoes.vendas') }}`)" class="text-decoration-none text-secondary">Vendas</a></li>
            <li class="breadcrumb-item active text-dark" aria-current="page">Nova Venda</li>
        </ol>
    </nav>
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="fw-bold mb-0" style="font-size:2.1rem; letter-spacing:1px;">
                <i class="bi bi-plus-circle me-2 text-primary"></i>Nova Venda
            </h1>
            <span class="text-muted small">Cadastre uma nova venda no sistema</span>
        </div>
        <div>
            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="carregarConteudo(`{{ route('operacoes.vendas') }}`)">
                <i class="bi bi-arrow-left me-2"></i>Voltar
            </button>
        </div>
    </div>

    <div class="card shadow border-0 mb-4">
        <div class="card-header bg-white border-0 pb-1">
            <span class="fw-bold">Dados da Venda</span>
        </div>
        <div class="card-body">
         <form id="formNovaVenda" class="needs-validation" novalidate>
                @csrf
                <div class="row mb-3">
                    <div class="col-md-3">
                        <label for="codigo" class="form-label">Número</label>
                        <input type="text" class="form-control" id="codigo" name="dados[codigo]" value="{{ $codigo }}" disabled>
                    </div>
                    <div class="col-md-3">
                        <label for="dataVenda" class="form-label required-field">Data da Venda</label>
                        <div class="input-group">
                            <input type="text" class="form-control datepicker" id="dataVenda"
                                style="z-index: 1 !important;"
                                name="dados[data_venda]"
                                data-mask="date"
                                readonly>
                            <span class="input-group-text"><i class="bi bi-calendar3"></i></span>
                        </div>
                        <div class="invalid-feedback">Por favor, informe a data da venda.</div>
                    </div>
                    <div class="col-md-3">
                        <label for="dataVencimento" class="form-label required-field">Data de Vencimento</label>
                        <div class="input-group">
                            <input type="text" class="form-control datepicker" id="dataVencimento"
                                style="z-index: 1 !important;"
                                name="dados[data_vencimento]"
                                data-mask="date"
                                readonly>
                            <span class="input-group-text"><i class="bi bi-calendar3"></i></span>
                        </div>
                        <div class="invalid-feedback">Por favor, informe a data de vencimento.</div>
                    </div>
                    <div class="col-md-3">
                        <label for="statusVenda" class="form-label">Status</label>
                        <input type="text" class="form-control" id="statusVenda" name="dados[status]" value="{{ StatusVenda::PENDENTE->value }}" readonly>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label for="clienteVenda" class="form-label required-field">Cliente</label>
                        <select class="form-select" id="clienteVenda" name="dados[cliente_id]" required>
                            <option value="">Selecione o cliente...</option>
                            @foreach($clientes as $cliente)
                            <option value="{{ $cliente->id }}">{{ $cliente->nome_fantasia }}</option>
                            @endforeach
                        </select>
                        <div class="invalid-feedback">Por favor, selecione o cliente.</div>
                    </div>
                    <div class="col-md-6">
                        <label for="orcamentoId" class="form-label">Orçamento</label>
                        <select class="form-select" id="orcamentoId" name="dados[orcamento_id]">
                            <option value="">Selecione o orçamento...</option>
                            @foreach($orcamentos ?? [] as $orcamento)
                            <option value="{{ $orcamento->id }}">{{ $orcamento->codigo }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-md-6">
                        <label for="formaPagamento" class="form-label required-field">Forma de Pagamento</label>
                        <select class="form-select" id="formaPagamento" name="dados[forma_pagamento]" required>
                            <option value="">Selecione a forma de pagamento...</option>
                            @foreach($formasPagamento ?? [] as $forma)
                            <option value="{{ $forma->codigo }}">{{ $forma->nome }}</option>
                            @endforeach
                        </select>
                        <div class="invalid-feedback">Por favor, selecione a forma de pagamento.</div>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-md-12">
                        <label for="observacoesVenda" class="form-label">Observações</label>
                        <textarea class="form-control" id="observacoesVenda" name="dados[observacoes]" rows="3"></textarea>
                    </div>
                </div>

                <h5 class="mt-4 mb-3">Itens da Venda</h5>

                <div class="table-responsive mb-3">
                    <table class="table table-bordered" id="tabelaItensVenda">
                        <thead class="table-light">
                            <tr>
                                <th style="width: 4%">#</th>
                                <th style="width: 12%">Tipo</th>
                                <th style="width: 22%">Item</th>
                                <th style="width: 18%">Descrição</th>
                                <th style="width: 8%">Qtd</th>
                                <th style="width: 9%">Unidade</th>
                                <th style="width: 11%">Valor Unit.</th>
                                <th style="width: 11%">Total</th>
                                <th style="width: 5%">Ações</th>
                            </tr>
                        </thead>
                        <tbody id="itensVenda">
                            <tr data-index="0">
                                <td>1</td>
                                <td>
                                    <select class="form-select form-select-sm tipo-item" name="itens[0][tipo_item]" onchange="alterarTipoItemVenda(this, 0)" required>
                                        <option value="">Tipo...</option>
                                        <option value="SERVICO">Serviço</option>
                                        <option value="PRODUTO">Produto</option>
                                    </select>
                                </td>
                                <td>
                                    <select class="form-select form-select-sm campo-servico" name="itens[0][servico_id]" onchange="buscarDadosServicoVenda(this, 0)" style="display:none;">
                                        <option value="">Selecione o serviço...</option>
                                        @foreach($servicos ?? [] as $servico)
                                        <option value="{{ $servico->id }}" data-valor="{{ $servico->valor_venda }}" data-unidade="{{ $servico->unidade_id }}">{{ $servico->nome }}</option>
                                        @endforeach
                                    </select>
                                    <select class="form-select form-select-sm campo-produto" name="itens[0][produto_id]" onchange="buscarDadosProdutoVenda(this, 0)" style="display:none;">
                                        <option value="">Selecione o produto...</option>
                                        @foreach($produtos ?? [] as $produto)
                                        <option value="{{ $produto->id }}" data-valor="{{ $produto->preco_venda }}" data-unidade="{{ $produto->unidade_id }}">{{ $produto->nome }}</option>
                                        @endforeach
                                    </select>
                                    <div class="text-muted small placeholder-item"><i class="bi bi-arrow-left"></i> Selecione o tipo</div>
                                </td>
                                <td>
                                    <input type="text" class="form-control form-control-sm" name="itens[0][descricao]" placeholder="Detalhes">
                                </td>
                                <td>
                                    <input type="number" class="form-control form-control-sm quantidade-item" name="itens[0][quantidade]" min="0.01" step="0.01" value="1.00" onchange="calcularTotalItemVenda(0)" required>
                                </td>
                                <td>
                                    <select class="form-select form-select-sm unidade-item" name="itens[0][unidade]" required>
                                        @foreach($unidades ?? [] as $unidade)
                                        <option value="{{ $unidade->tipo }}">{{ $unidade->unidade }}</option>
                                        @endforeach
                                    </select>
                                </td>
                                <td>
                                    <input type="text" class="form-control form-control-sm valor-unitario-item" name="itens[0][valor_unitario]" value="0,00" data-mask="money" onblur="calcularTotalItemVenda(0)" required>
                                </td>
                                <td>
                                    <input type="text" class="form-control form-control-sm valor-total-item bg-light" name="itens[0][valor_total]" value="0,00" readonly>
                                </td>
                                <td class="text-center">
                                    <button type="button" class="btn btn-sm btn-danger btn-remover-item" onclick="removerItemVenda(0)" disabled>
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="9">
                                    <button type="button" class="btn btn-sm btn-success" id="btnadicionarItemVenda" onclick="adicionarItemVenda()">
                                        <i class="bi bi-plus-circle me-1"></i>Adicionar Item
                                    </button>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>

                <div class="row mb-3">
                    <div class="col-md-4 offset-md-8">
                        <div class="card">
                            <div class="card-body p-3" id="resumoVenda">
                                <div class="d-flex justify-content-between mb-3">
                                    <span>Subtotal:</span>
                                    <span id="subtotalVenda" class="text-nowrap ms-4" data-mask="money">R$ 0,00</span>
                                    <input type="hidden" name="dados[subtotal]" id="subtotalVendaHidden" value="0">
                                </div>
                                <div class="d-flex justify-content-between mb-3">
                                    <div class="input-group input-group-sm">
                                        <span class="input-group-text">Desconto</span>
                                        <input type="text" class="form-control form-control-sm" id="descontoVenda" name="dados[desconto]" value="" data-mask="percent" placeholder="0.0">
                                        <span class="input-group-text">%</span>
                                    </div>
                                    <span id="valorDescontoVenda" class="text-nowrap ms-4">R$ 0,00</span>
                                    <input type="hidden" name="dados[valor_desconto]" id="valorDescontoVendaHidden" value="0">
                                </div>
                                <div class="d-flex justify-content-between fw-bold">
                                    <span>Total:</span>
                                    <span id="totalVenda" class="text-nowrap ms-4" data-mask="money">R$ 0,00</span>
                                    <input type="hidden" name="dados[total]" id="totalVendaHidden" value="0">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="d-grid gap-2 d-md-flex justify-content-md-end mt-4">
                    <button type="button" class="btn btn-sm btn-outline-secondary me-md-2" onclick="carregarConteudo(`{{ route('operacoes.vendas') }}`)">
                        <i class="bi bi-x-circle me-2"></i>Cancelar
                    </button>
                    <button type="button" class="btn btn-sm btn-primary" onclick="salvar(`{{ route('operacoes.vendas.store') }}`, 'formNovaVenda')">
                        <i class="bi bi-check-circle me-2"></i>Salvar
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
// Alterar tipo de item (SERVICO ou PRODUTO)
function alterarTipoItemVenda(select, index) {
    const tipo = select.value;
    const row = select.closest('tr');
    
    const campoServico = row.querySelector('.campo-servico');
    const campoProduto = row.querySelector('.campo-produto');
    const placeholder = row.querySelector('.placeholder-item');
    
    campoServico.value = '';
    campoProduto.value = '';
    row.querySelector('.valor-unitario-item').value = '0,00';
    row.querySelector('.valor-total-item').value = '0,00';
    
    if (tipo === 'SERVICO') {
        campoServico.style.display = 'block';
        campoProduto.style.display = 'none';
        placeholder.style.display = 'none';
        campoServico.required = true;
        campoProduto.required = false;
        campoProduto.value = '';
    } else if (tipo === 'PRODUTO') {
        campoServico.style.display = 'none';
        campoProduto.style.display = 'block';
        placeholder.style.display = 'none';
        campoProduto.required = true;
        campoServico.required = false;
        campoServico.value = '';
    } else {
        campoServico.style.display = 'none';
        campoProduto.style.display = 'none';
        placeholder.style.display = 'block';
        campoServico.required = false;
        campoProduto.required = false;
    }
    
    calcularTotaisVenda();
}

function buscarDadosServicoVenda(select, index) {
    const option = select.options[select.selectedIndex];
    const row = select.closest('tr');
    
    if (option.value) {
        const valor = option.getAttribute('data-valor') || '0';
        const unidade = option.getAttribute('data-unidade');
        
        const valorFormatado = parseFloat(valor).toLocaleString('pt-BR', {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        });
        row.querySelector('.valor-unitario-item').value = valorFormatado;
        
        if (unidade) {
            row.querySelector('.unidade-item').value = unidade;
        }
        
        calcularTotalItemVenda(index);
    }
}

function buscarDadosProdutoVenda(select, index) {
    const option = select.options[select.selectedIndex];
    const row = select.closest('tr');
    
    if (option.value) {
        const valor = option.getAttribute('data-valor') || '0';
        const unidade = option.getAttribute('data-unidade');
        
        const valorFormatado = parseFloat(valor).toLocaleString('pt-BR', {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        });
        row.querySelector('.valor-unitario-item').value = valorFormatado;
        
        if (unidade) {
            row.querySelector('.unidade-item').value = unidade;
        }
        
        calcularTotalItemVenda(index);
    }
}

function calcularTotalItemVenda(index) {
    const rows = document.querySelectorAll('#itensVenda tr');
    const row = rows[index];
    
    if (!row) return;
    
    const quantidade = parseFloat(row.querySelector('.quantidade-item').value) || 0;
    const valorUnitarioStr = row.querySelector('.valor-unitario-item').value || '0';
    const valorUnitario = parseFloat(valorUnitarioStr.replace(/\./g, '').replace(',', '.')) || 0;
    
    const total = quantidade * valorUnitario;
    
    const totalFormatado = total.toLocaleString('pt-BR', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
    });
    
    row.querySelector('.valor-total-item').value = totalFormatado;
    
    calcularTotaisVenda();
}

function calcularTotaisVenda() {
    let subtotal = 0;
    
    document.querySelectorAll('.valor-total-item').forEach(input => {
        const valor = parseFloat(input.value.replace(/\./g, '').replace(',', '.')) || 0;
        subtotal += valor;
    });
    
    const descontoPercent = parseFloat(document.getElementById('descontoVenda').value) || 0;
    const valorDesconto = (subtotal * descontoPercent) / 100;
    const total = subtotal - valorDesconto;
    
    document.getElementById('subtotalVenda').textContent = 'R$ ' + subtotal.toLocaleString('pt-BR', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
    });
    document.getElementById('subtotalVendaHidden').value = subtotal;
    
    document.getElementById('valorDescontoVenda').textContent = 'R$ ' + valorDesconto.toLocaleString('pt-BR', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
    });
    document.getElementById('valorDescontoVendaHidden').value = valorDesconto;
    
    document.getElementById('totalVenda').textContent = 'R$ ' + total.toLocaleString('pt-BR', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
    });
    document.getElementById('totalVendaHidden').value = total;
}

function adicionarItemVenda() {
    const tbody = document.getElementById('itensVenda');
    const rows = tbody.querySelectorAll('tr');
    const newIndex = rows.length;
    const novoNumero = newIndex + 1;
    
    const primeiraLinha = rows[0];
    const novaLinha = primeiraLinha.cloneNode(true);
    
    novaLinha.setAttribute('data-index', newIndex);
    novaLinha.querySelector('td:first-child').textContent = novoNumero;
    
    novaLinha.querySelectorAll('[name^="itens["]').forEach(input => {
        const name = input.getAttribute('name');
        const newName = name.replace(/\[\d+\]/, `[${newIndex}]`);
        input.setAttribute('name', newName);
    });
    
    novaLinha.querySelector('.tipo-item').value = '';
    novaLinha.querySelector('.campo-servico').value = '';
    novaLinha.querySelector('.campo-produto').value = '';
    novaLinha.querySelector('.campo-servico').style.display = 'none';
    novaLinha.querySelector('.campo-produto').style.display = 'none';
    novaLinha.querySelector('.placeholder-item').style.display = 'block';
    novaLinha.querySelector('.quantidade-item').value = '1.00';
    novaLinha.querySelector('.valor-unitario-item').value = '0,00';
    novaLinha.querySelector('.valor-total-item').value = '0,00';
    novaLinha.querySelector('input[name*="descricao"]').value = '';
    
    novaLinha.querySelector('.tipo-item').setAttribute('onchange', `alterarTipoItemVenda(this, ${newIndex})`);
    novaLinha.querySelector('.campo-servico').setAttribute('onchange', `buscarDadosServicoVenda(this, ${newIndex})`);
    novaLinha.querySelector('.campo-produto').setAttribute('onchange', `buscarDadosProdutoVenda(this, ${newIndex})`);
    novaLinha.querySelector('.quantidade-item').setAttribute('onchange', `calcularTotalItemVenda(${newIndex})`);
    novaLinha.querySelector('.valor-unitario-item').setAttribute('onblur', `calcularTotalItemVenda(${newIndex})`);
    novaLinha.querySelector('.btn-remover-item').setAttribute('onclick', `removerItemVenda(${newIndex})`);
    novaLinha.querySelector('.btn-remover-item').disabled = false;
    
    tbody.appendChild(novaLinha);
    aplicarMascaras();
}

function removerItemVenda(index) {
    const tbody = document.getElementById('itensVenda');
    const rows = tbody.querySelectorAll('tr');
    
    if (rows.length > 1) {
        rows[index].remove();
        
        tbody.querySelectorAll('tr').forEach((row, idx) => {
            row.setAttribute('data-index', idx);
            row.querySelector('td:first-child').textContent = idx + 1;
            
            if (idx === 0) {
                row.querySelector('.btn-remover-item').disabled = true;
            }
        });
        
        calcularTotaisVenda();
    }
}