@php
$title = 'Nova Compra';
@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('suprimentos.compras') }}`)" class="text-decoration-none text-secondary">Compras</a></li>
            <li class="breadcrumb-item active text-dark" aria-current="page">Nova Compra</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 Compra
            </h1>
            <span class="text-muted small">Cadastre uma nova compra no sistema</span>
        </div>
        <div>
            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="carregarConteudo(`{{ route('suprimentos.compras') }}`)">
                <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 do Pedido</span>
        </div>
        <div class="card-body">
            <form id="formNovaCompra" class="needs-validation" novalidate>
                @csrf
                
                <div class="row mb-3">
                    <div class="col-md-2">
                        <label for="numero_pedido" class="form-label">Número do Pedido</label>
                        <input type="text" class="form-control" id="numero_pedido" name="dados[numero_pedido]" value="{{ $proximoNumero }}" readonly>
                    </div>
                    <div class="col-md-8">
                        <label for="fornecedor_id" class="form-label required-field">Fornecedor</label>
                        <select class="form-select" id="fornecedor_id" name="dados[fornecedor_id]" required>
                            <option value="">Selecione o fornecedor...</option>
                            @foreach($fornecedores as $fornecedor)
                                <option value="{{ $fornecedor->id }}">{{ $fornecedor->razao_social }} - {{ $fornecedor->nome_fantasia }}</option>
                            @endforeach
                        </select>
                        <div class="invalid-feedback">Por favor, selecione o fornecedor.</div>
                    </div>
                    <div class="col-md-2">
                        <label for="data_compra" class="form-label required-field">Data do Pedido</label>
                        <div class="input-group">
                            <input type="text" class="form-control datepicker" id="data_compra"
                                style="z-index: 1 !important;"
                                name="dados[data_compra]"
                                data-mask="date"
                                readonly
                                required>
                            <span class="input-group-text"><i class="bi bi-calendar3"></i></span>
                        </div>
                        <div class="invalid-feedback">Por favor, informe a data.</div>
                    </div>                    
                </div>

                <div class="row mb-3">
                    <div class="col-md-12">
                        <label for="codigo_rastreio" class="form-label">Código de Rastreio</label>
                        <input type="text" class="form-control" id="codigo_rastreio" name="dados[codigo_rastreio]" placeholder="Ex: BR123456789BR">
                        <small class="text-muted">Código da transportadora (pode ser preenchido depois)</small>
                    </div>
                </div>

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

                <div class="table-responsive mb-3">
                    <table class="table table-bordered" id="tabelaItensCompra">
                        <thead class="table-light">
                            <tr>
                                <th style="width: 4%">#</th>
                                <th style="width: 30%">Produto</th>
                                <th style="width: 10%">Quantidade</th>
                                <th style="width: 14%">Unidade</th>
                                <th style="width: 16%">Valor Unit.</th>
                                <th style="width: 18%">Valor Total</th>
                                <th style="width: 8%">Ações</th>
                            </tr>
                        </thead>
                        <tbody id="itensCompra" data-unidades='@json($unidades ?? [])'>
                            <!-- Linhas de itens serão adicionadas aqui dinamicamente -->
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="7">
                                    <button type="button" class="btn btn-sm btn-success" onclick="adicionarItemCompra()">
                                        <i class="bi bi-plus-circle me-1"></i>Adicionar Item
                                    </button>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>

                <!-- Template oculto para novos itens -->
                <template id="templateItemCompra">
                    @foreach($produtos as $produto)
                        <option value="{{ $produto->id }}" data-valor-custo="{{ $produto->valor_custo }}" data-unidade="{{ $produto->unidade_id }}">{{ $produto->nome }}</option>
                    @endforeach
                </template>

                <!-- Template de unidades -->
                <template id="templateUnidadesCompra">
                    <option value="">Selecione...</option>
                    @foreach($unidades as $unidade)
                        <option value="{{ $unidade->id }}">{{ $unidade->unidade }} ({{ $unidade->tipo }})</option>
                    @endforeach
                </template>

                <!-- Resumo de Totais -->
                <div class="row mb-3">
                    <div class="col-12">
                        <div class="border rounded p-3 bg-light">
                            <div class="d-flex justify-content-between mb-2">
                                <span class="fw-bold">Total Geral:</span>
                                <span id="totalGeralCompra" class="fw-bold">R$ 0,00</span>
                            </div>
                            <div class="row mb-2">
                                <div class="col-md-6">
                                    <label for="desconto_percentual" class="form-label">Desconto (%)</label>
                                    <input type="text" class="form-control" id="desconto_percentual" name="dados[desconto_percentual]" value="" data-mask="percentage" onblur="validarPercentualCompra(this); calcularTotalFinalCompra();" placeholder="0,00">
                                </div>
                                <div class="col-md-6 d-flex align-items-end">
                                    <div class="w-100">
                                        <label class="form-label">Valor do Desconto</label>
                                        <div class="form-control bg-white text-danger fw-bold" id="valorDescontoDisplay">- R$ 0,00</div>
                                    </div>
                                </div>
                            </div>
                            <hr>
                            <div class="d-flex justify-content-between align-items-center">
                                <span class="fw-bold fs-5 text-primary">VALOR TOTAL:</span>
                                <span id="valorFinalCompra" class="fw-bold fs-5 text-primary">R$ 0,00</span>
                            </div>
                            
                            <!-- Campo hidden para enviar valor_total ao backend -->
                            <input type="hidden" id="valor_total_hidden" name="dados[valor_total]" value="0,00">
                        </div>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-md-12">
                        <label for="observacoes" class="form-label">Observações Gerais</label>
                        <textarea class="form-control" id="observacoes" name="dados[observacoes]" rows="3" placeholder="Informações adicionais sobre a compra..."></textarea>
                    </div>
                </div>

                <div class="d-flex justify-content-end gap-2">
                    <button type="button" class="btn btn-secondary" onclick="carregarConteudo(`{{ route('suprimentos.compras') }}`)">
                        <i class="bi bi-x-circle me-2"></i>Cancelar
                    </button>
                    <button type="button" class="btn btn-primary" onclick="salvar(`{{ route('compras.store') }}`, 'formNovaCompra')">
                        <i class="bi bi-check-circle me-2"></i>Salvar Compra
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="{{ asset('js/compras.js') }}"></script>