@extends('layouts.app')

@section('content')
<div class="container">
    <h3 class="mb-4">Editar Transacción Contable</h3>

    <form id="transaction-form" action="{{ route('transactions.update', $header->id) }}" method="POST">
        @csrf
        @method('PUT')

        {{-- Información general --}}
        <div class="card mb-3">
            <div class="card-body">
                <div class="row mb-3">
                    <div class="col-md-4">
                        <label for="company_id">Compañía</label>
                        <select name="company_id" id="company_id" class="form-select">
                            <option value="">Seleccione una compañía</option>
                            @foreach($companies as $company)
                            <option value="{{ $company->id }}"
                                {{ $header->company_id == $company->id ? 'selected' : '' }}>
                                {{ $company->name }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label for="accounting_document_id">Documento</label>
                        <select name="accounting_document_id" id="accounting_document_id" class="form-select" required>
                            <option value="">Seleccione un documento</option>
                            @foreach($documentos as $documento)
                            <option value="{{ $documento->id }}"
                                {{ $header->accounting_document_id == $documento->id ? 'selected' : '' }}>
                                {{ $documento->name }} - {{ $documento->prefix }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="document_number" class="form-label">Número documento</label>
                        <input type="number" name="document_number" id="document_number"
                            class="form-control"
                            value="{{ $header->document_number }}" required>
                    </div>
                    <input type="hidden" name="prefix" id="prefix" value="{{ $header->prefix }}" required>
                    <input type="hidden" name="prefix_document_number" id="prefix_document_number"
                        value="{{ $header->prefix_document_number }}" required>
                    <input type="hidden" name="year" id="year" value="{{ $header->year }}" required>
                    <input type="hidden" name="month" id="month" value="{{ $header->month }}" required>

                    <div class="col-md-3">
                        <label for="date" class="form-label">Fecha</label>
                        <input type="datetime-local" name="date" id="date" class="form-control"
                            value="{{ \Carbon\Carbon::parse($header->date)->format('Y-m-d\TH:i') }}" required>
                    </div>

                </div>

                <div class="row mb-3">
                    <div class="col-md-4">
                        <label for="entity_id">Terceros</label>
                        <select name="entity_id" id="entity_id" class="form-select">
                            <option value="">Seleccione un Tercero</option>
                            @foreach($entidades as $entidad)
                            <option value="{{ $entidad->id }}"
                                {{ $header->entity_id == $entidad->id ? 'selected' : '' }}>
                                @if($entidad->person_type === 'juridico')
                                {{ $entidad->business_name }}
                                @else
                                {{ $entidad->first_surname }} {{ $entidad->first_name }}
                                @endif
                            </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label for="cost_center_id" class="form-label">Centro de costos</label>
                        <select name="cost_center_id" id="cost_center_id" class="form-select">
                            <option value="">Seleccione un centro de costos</option>
                            @foreach($costcenters as $cc)
                            {{-- el value debe ser el id del centro (cost_center_id) --}}
                            <option value="{{ $cc->cost_center_id }}"
                                {{ $header->cost_center_id == $cc->cost_center_id ? 'selected' : '' }}>
                                {{ optional($cc->costCenter)->name ?? 'Centro #' . $cc->cost_center_id }}
                            </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-4">
                        <label for="observations" class="form-label">Observaciones</label>
                        <input type="text" name="observations" id="observations"
                            value="{{ $header->observations }}" class="form-control">
                    </div>
                </div>
            </div>
        </div>

        {{-- Entradas --}}
        <div class="card mb-3">
            <div class="card-body">
                <h5 class="mb-3">Movimientos contables</h5>
                <div class="row fw-bold border-bottom pb-2 mb-2">
                    <div class="col-md-1">Orden</div>
                    <div class="col-md-2">Cuenta contable</div>
                    <div class="col-md-2">Tercero</div>
                    <div class="col-md-2">Base</div>
                    <div class="col-md-2">% Tarifa</div>
                    <div class="col-md-1">Débito</div>
                    <div class="col-md-1">Crédito</div>
                    <div class="col-md-1">Acción</div>
                </div>
                <div id="entries-wrapper">
                    @foreach($header->entries as $i => $entry)
                    <div class="row g-2 entry-item mb-2">
                        <div class="col-md-1">
                            <input type="number" name="entries[{{ $i }}][transaction_order]" class="form-control"
                                value="{{ $entry->transaction_order }}" readonly>
                            <input type="hidden" name="entries[{{ $i }}][id]" value="{{ $entry->id }}">
                        </div>
                        <div class="col-md-2">
                            <select name="entries[{{ $i }}][chart_of_account_id]" class="form-select select2" required>
                                <option value="">Seleccione una Cuenta contable</option>
                                @foreach($cuentas as $cuenta)
                                <option value="{{ $cuenta->id }}"
                                    {{ $entry->chart_of_account_id == $cuenta->id ? 'selected' : '' }}>
                                    {{ $cuenta->code }} - {{ $cuenta->name }}
                                </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <select name="entries[{{ $i }}][entity_id]" id="entity_id2" class="form-select entity-select">
                                <option value="">Seleccione un Tercero</option>
                                @foreach($entidades as $entidad)
                                <option value="{{ $entidad->id }}"
                                    {{ $entry->entity_id == $entidad->id ? 'selected' : '' }}>
                                    @if($entidad->person_type === 'juridico')
                                    {{ $entidad->business_name }}
                                    @else
                                    {{ $entidad->first_surname }} {{ $entidad->first_name }}
                                    @endif
                                </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <input type="number" name="entries[{{ $i }}][tax_base]" class="form-control"
                                value="{{ $entry->tax_base }}" step="0.01">
                        </div>
                        <div class="col-md-2">
                            <input type="number" name="entries[{{ $i }}][tax_percentage]" class="form-control"
                                value="{{ $entry->tax_percentage }}" step="0.01">
                        </div>
                        <div class="col-md-1">
                            <input type="number" name="entries[{{ $i }}][debit]" class="form-control"
                                value="{{ $entry->debit }}" step="0.01">
                        </div>
                        <div class="col-md-1">
                            <input type="number" name="entries[{{ $i }}][credit]" class="form-control"
                                value="{{ $entry->credit }}" step="0.01">
                        </div>
                        <div class="col-md-1">
                            <button type="button" class="btn btn-danger remove-entry">X</button>
                        </div>
                    </div>
                    @endforeach
                </div>

                <button type="button" class="btn btn-sm btn-success" id="add-entry">Agregar movimiento</button>
            </div>
        </div>

        <button type="submit" class="btn btn-primary">Actualizar Transacción</button>
        <a href="{{ route('transactions.index') }}" class="btn btn-secondary">Cancelar</a>
    </form>
</div>
<script>
    const cuentas = @json($cuentas);
    // let filteredTerceros = []; // terceros según la compañía seleccionada
    var filteredTerceros = @json($entidades ?? []);

    document.addEventListener('DOMContentLoaded', () => {
        jQuery(document).ready(function() {
            jQuery('.select2').select2({
                placeholder: "Buscar...",
                allowClear: true,
                language: "es",
                width: '100%'
            });
        });
        let entryIndex = Number("{{ count($header->entries) }}");
        const wrapper = document.getElementById('entries-wrapper');
        const addBtn = document.getElementById('add-entry');
        const accountingDocumentSelect = document.getElementById('accounting_document_id');
        const companySelect = document.getElementById('company_id');
        const documentNumberInput = document.getElementById('document_number');
        const prefix_document_number = document.getElementById('prefix_document_number');
        const prefix = document.getElementById('prefix');
        const dateInput = document.getElementById('date');
        const yearInput = document.getElementById('year');
        const monthInput = document.getElementById('month');
        const form = document.getElementById('transaction-form');

        // Armar select de cuentas
        function buildCuentaSelect(index) {
            let options = '<option value="">Seleccione una Cuenta contable</option>';
            cuentas.forEach(cuenta => {
                options += `<option value="${cuenta.id}">${cuenta.code}-${cuenta.name}</option>`;
            });

            // Generamos un id único para ese select
            let selectId = `chart_of_account_id_${index}`;

            let selectHtml = `
        <select id="${selectId}" name="entries[${index}][chart_of_account_id]" 
            class="form-select select2" required>
            ${options}
        </select>
    `;

            // Esperamos a que se inserte en el DOM y luego aplicamos select2
            setTimeout(() => {
                jQuery(`#${selectId}`).select2({
                    placeholder: "Buscar...",
                    allowClear: true,
                    language: "es",
                    width: '100%'
                });
            }, 0);

            return selectHtml;
        }


        // Armar select de terceros filtrados
        function buildTercerosSelect(index) {
            let options = '<option value="">Seleccione un tercero</option>';
            filteredTerceros.forEach(tecer => {
                let displayName = '';
                if (tecer.person_type === 'juridico') {
                    displayName = tecer.business_name;
                } else {
                    displayName = `${tecer.first_surname} ${tecer.first_name}`;
                }
                options += `<option value="${tecer.id}">${displayName}</option>`;
            });

            return `
                <select id="entity_id2" name="entries[${index}][entity_id]" class="form-select entity-select" required>
                    ${options}
                </select>
            `;
        }

        // Agregar movimiento
        addBtn.addEventListener('click', () => {
            const row = document.createElement('div');
            row.classList.add('row', 'g-2', 'entry-item', 'mb-2');
            row.innerHTML = `
                <div class="col-md-1">
                    <input type="number" name="entries[${entryIndex}][transaction_order]" class="form-control" placeholder="Orden" value="${entryIndex+1}" required readonly>
                </div>
                <div class="col-md-2">
                    ${buildCuentaSelect(entryIndex)}
                </div>
                <div class="col-md-2">
                    ${buildTercerosSelect(entryIndex)}
                </div>
                <div class="col-md-2">
                    <input type="number" name="entries[${entryIndex}][tax_base]" class="form-control" placeholder="Base" step="0.01" value="0">
                </div>
                <div class="col-md-2">
                    <input type="number" name="entries[${entryIndex}][tax_percentage]" class="form-control" placeholder="% tarifa" step="0.01" value="0">
                </div>
                <div class="col-md-1">
                    <input type="number" name="entries[${entryIndex}][debit]" class="form-control" placeholder="Débito" step="0.01" value="0">
                </div>
                <div class="col-md-1">
                    <input type="number" name="entries[${entryIndex}][credit]" class="form-control" placeholder="Crédito" step="0.01" value="0">
                </div>
                <div class="col-md-1">
                    <button type="button" class="btn btn-danger remove-entry">X</button>
                </div>
            `;
            wrapper.appendChild(row);
            entryIndex++;
        });

        // Eliminar movimiento
        wrapper.addEventListener('click', (e) => {
            if (e.target.classList.contains('remove-entry')) {
                e.target.closest('.entry-item').remove();
            }
        });

        // Cargar número de documento (POST con docId + companyId)
        accountingDocumentSelect.addEventListener('change', function() {
            const docId = this.value;
            const companyId = companySelect.value;

            if (docId && companyId) {
                fetch(`/transactionspost/next-document-number/${docId}/${companyId}`)
                    .then(res => res.json())
                    .then(data => {
                        documentNumberInput.value = data.nextNumber;
                        prefix.value = data.prefix;
                        prefix_document_number.value = data.prefix + data.nextNumber;
                    })
                    .catch(err => console.error('Error obteniendo número de documento:', err));
            } else {
                documentNumberInput.value = '';
            }
        });

        // Extraer año y mes de la fecha
        dateInput.addEventListener('change', function() {
            if (this.value) {
                const date = new Date(this.value);
                yearInput.value = date.getFullYear();
                monthInput.value = date.getMonth() + 1;
            } else {
                yearInput.value = '';
                monthInput.value = '';
            }
        });

        // Validación débitos y créditos
        form.addEventListener('submit', function(e) {
            const debits = document.querySelectorAll('input[name*="[debit]"]');
            const credits = document.querySelectorAll('input[name*="[credit]"]');

            let totalDebit = 0;
            let totalCredit = 0;
            let hasValue = false;

            debits.forEach(input => {
                const value = parseFloat(input.value) || 0;
                totalDebit += value;
                if (value > 0) hasValue = true;
            });

            credits.forEach(input => {
                const value = parseFloat(input.value) || 0;
                totalCredit += value;
                if (value > 0) hasValue = true;
            });

            if (!hasValue) {
                e.preventDefault();
                alert('Debe ingresar al menos un valor en débito o crédito');
                return false;
            }

            if (totalDebit !== totalCredit) {
                e.preventDefault();
                alert(`Error: La suma de débitos (${totalDebit.toFixed(2)}) no es igual a la suma de créditos (${totalCredit.toFixed(2)})\nDiferencia: ${Math.abs(totalDebit - totalCredit).toFixed(2)}`);
                return false;
            }
        });

        // Cargar datos dependientes de la compañía
        companySelect.addEventListener("change", function() {
            const companyId = this.value;

            if (companyId) {
                fetch(`/documents/company-relations/${companyId}`)
                    .then(res => res.json())
                    .then(data => {
                        // 1. Documentos
                        const docSelect = document.getElementById("accounting_document_id");
                        docSelect.innerHTML = '<option value="">Seleccione un documento</option>';
                        data.documentos.forEach(doc => {
                            const opt = document.createElement("option");
                            opt.value = doc.id;
                            opt.textContent = `${doc.name} - ${doc.prefix ?? ''}`;
                            docSelect.appendChild(opt);
                        });

                        // 2. Entidades
                        const entSelect = document.getElementById("entity_id");
                        entSelect.innerHTML = '<option value="">Seleccione un tercero</option>';
                        data.entidades.forEach(ent => {
                            const opt = document.createElement("option");
                            if (ent.person_type === "juridico") {
                                opt.textContent = ent.business_name;
                            } else {
                                opt.textContent = `${ent.first_surname} ${ent.first_name}`;
                            }
                            opt.value = ent.id;
                            entSelect.appendChild(opt);
                        });
                        document.querySelectorAll(".entity-select").forEach(select => {
                            select.innerHTML = '<option value="">Seleccione un tercero</option>';
                            data.entidades.forEach(ent => {
                                const opt = document.createElement("option");
                                if (ent.person_type === "juridico") {
                                    opt.textContent = ent.business_name;
                                } else {
                                    opt.textContent = `${ent.first_surname} ${ent.first_name}`;
                                }
                                opt.value = ent.id;
                                select.appendChild(opt);
                            });
                        });

                        // Guardamos los terceros filtrados para las filas dinámicas
                        filteredTerceros = data.entidades;

                        // 3. Centros de costos
                        const ccSelect = document.getElementById("cost_center_id");
                        ccSelect.innerHTML = '<option value="">Seleccione un centro de costos</option>';
                        data.costcenters.forEach(item => {
                            const opt = document.createElement("option");
                            opt.value = item.cost_center.id;
                            opt.textContent = item.cost_center.name;
                            ccSelect.appendChild(opt);
                        });
                    })
                    .catch(err => console.error("Error cargando relaciones:", err));
            } else {
                // Si no hay compañía, resetea selects
                document.getElementById("accounting_document_id").innerHTML = '<option value="">Seleccione un documento</option>';
                document.getElementById("entity_id").innerHTML = '<option value="">Seleccione un tercero</option>';
                document.getElementById("cost_center_id").innerHTML = '<option value="">Seleccione un centro de costos</option>';
                filteredTerceros = [];
            }
        });
    });
</script>
@endsection