@php
$title = 'Editar 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">Editar 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-pencil-square me-2 text-primary"></i>Editar Compra
            </h1>
            <span class="text-muted small">Pedido Nº {{ $compra->numero_pedido }}</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="formEditarCompra" class="needs-validation" novalidate>
                @csrf
                @method('PUT')
                
                <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="{{ $compra->numero_pedido }}" 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 }}" {{ $compra->fornecedor_id == $fornecedor->id ? 'selected' : '' }}>
                                    {{ $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"
                                value="{{ \Carbon\Carbon::parse($compra->data_compra)->format('d/m/Y') }}"
                                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]" value="{{ $compra->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 ?? [])'>
                            @php $index = 0; @endphp
                            @foreach($compra->itens as $item)
                            <tr data-index="{{ $index }}">
                                <td>
                                    <span class="numero-linha">{{ $index + 1 }}</span>
                                </td>
                                <td>
                                    <select class="form-select form-select-sm produto-select" name="dados[itens][{{ $index }}][produto_id]" onchange="carregarDadosProdutoCompra(this)" required>
                                        <option value="">Selecione o produto...</option>
                                        @foreach($produtos as $produto)
                                            <option value="{{ $produto->id }}" data-valor-custo="{{ $produto->valor_custo }}" data-unidade="{{ $produto->unidade_id }}" {{ $item->produto_id == $produto->id ? 'selected' : '' }}>
                                                {{ $produto->nome }}
                                            </option>
                                        @endforeach
                                    </select>
                                </td>
                                <td>
                                    <input type="text" class="form-control form-control-sm quantidade-item" name="dados[itens][{{ $index }}][quantidade]" value="{{ number_format($item->quantidade, 0, ',', '.') }}" oninput="formatarQuantidade(this)" onchange="calcularTotalItemCompra(this.closest('tr'))" required>
                                </td>
                                <td>
                                    <select class="form-select form-select-sm unidade-item" name="dados[itens][{{ $index }}][unidade_id]" required>
                                        <option value="">Selecione...</option>
                                        @foreach($unidades as $unidade)
                                            <option value="{{ $unidade->id }}" {{ $item->unidade_id == $unidade->id ? 'selected' : '' }}>
                                                {{ $unidade->unidade }} ({{ $unidade->tipo }})
                                            </option>
                                        @endforeach
                                    </select>
                                </td>
                                <td>
                                    <input type="text" class="form-control form-control-sm valor-unitario-item no-auto-format" name="dados[itens][{{ $index }}][valor_unitario]" value="{{ number_format($item->valor_unitario, 2, ',', '.') }}" placeholder="0,00" onblur="calcularTotalItemCompra(this.closest('tr'))" required>
                                </td>
                                <td>
                                    <input type="text" class="form-control form-control-sm valor-total-item bg-light" name="dados[itens][{{ $index }}][valor_total]" value="{{ number_format($item->valor_total, 2, ',', '.') }}" readonly>
                                </td>
                                <td class="text-center"> 
                                    <button type="button" class="btn btn-sm btn-danger btn-remover-item" onclick="removerItemCompra(this)" {{ count($compra->itens) === 1 ? 'disabled' : '' }}>
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </td>
                            </tr>
                            @php $index++; @endphp
                            @endforeach
                        </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 -->
                @php
                    $totalGeral = $compra->itens->sum('valor_total');
                    $descontoPercentual = $compra->desconto_percentual ?? 0;
                    $valorDesconto = $totalGeral * ($descontoPercentual / 100);
                    $valorFinal = $totalGeral - $valorDesconto;
                @endphp
                <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$ {{ number_format($totalGeral, 2, ',', '.') }}</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="{{ number_format($descontoPercentual, 2, ',', '.') }}" 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$ {{ number_format($valorDesconto, 2, ',', '.') }}</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$ {{ number_format($valorFinal, 2, ',', '.') }}</span>
                            </div>
                            
                            <!-- Campo hidden para enviar valor_total ao backend -->
                            <input type="hidden" id="valor_total_hidden" name="dados[valor_total]" value="{{ number_format($valorFinal, 2, ',', '.') }}">
                        </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...">{{ $compra->observacoes }}</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="atualizar(`{{ route('compras.update', $compra->id) }}`, 'formEditarCompra')">
                        <i class="bi bi-check-circle me-2"></i>Salvar Alterações
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

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