@extends('layouts.app')

@section('content')
<div class="container">
    @if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        <strong>¡Éxito!</strong> {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    @endif

    @if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <strong>Error:</strong> {{ session('error') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    @endif

    @if($errors->any())
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <strong>Errores de validación:</strong>
        <ul>
            @foreach($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    @endif
    <h3 class="mb-4">Crear Transacción Contable</h3>

    <form id="transaction-form" action="{{ route('transactionspost.store') }}" method="POST">
        @csrf

        {{-- 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 }}">{{ $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>
                        </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="" required>
                    </div>
                    <input type="hidden" name="prefix" id="prefix" value="" required>
                    <input type="hidden" name="prefix_document_number" id="prefix_document_number" value="" required>
                    <input type="hidden" name="year" id="year" value="" required>
                    <input type="hidden" name="month" id="month" value="" 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="" 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>
                        </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" required>
                            <option value="">Seleccione un centro de costos</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label for="observations" class="form-label">Observaciones</label>
                        <input type="text" name="observations" id="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">
                    <div class="row g-2 entry-item mb-2">
                        <div class="col-md-1">
                            <input type="number" name="entries[0][transaction_order]" class="form-control" placeholder="Orden" value="1" required readonly>
                        </div>
                        <div class="col-md-2">
                            <select id="chart_of_account_id" name="entries[0][chart_of_account_id]" class="form-select select2" required>
                                <option value="">Seleccione una Cuenta contable</option>
                                @foreach($cuentas as $cuenta)
                                <option value="{{ $cuenta->id }}">{{ $cuenta->code }}-{{ $cuenta->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <select name="entries[0][entity_id]" id="entity_id2" class="form-select">
                                <option value="">Seleccione una Tercero</option>
                                @foreach($entidades as $entidad)
                                <option value="{{ $entidad->id }}">
                                    @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[0][tax_base]" class="form-control" placeholder="Base" step="0.01" value="0">
                        </div>
                        <div class="col-md-2">
                            <input type="number" name="entries[0][tax_percentage]" class="form-control" placeholder="% tarifa" step="0.01" value="0">
                        </div>
                        <div class="col-md-1">
                            <input type="number" name="entries[0][debit]" class="form-control" placeholder="Débito" step="0.01" value="0">
                        </div>
                        <div class="col-md-1">
                            <input type="number" name="entries[0][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>
                        <!-- <input type="hidden" name="entries[0][entity_id]" value="5"> -->
                    </div>
                </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">Guardar 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

    document.addEventListener('DOMContentLoaded', () => {
        jQuery(document).ready(function() {
            jQuery('.select2').select2({
                placeholder: "Buscar...",
                allowClear: true,
                language: "es",
                width: '100%'
            });
        });
        let entryIndex = 1;
        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>`;
            });
            return `
                <select name="entries[${index}][chart_of_account_id]" class="form-select" required>
                    ${options}
                </select>
            `;
        }

        // 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 name="entries[${index}][entity_id]" class="form-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);
                        });
                        const entSelect2 = document.getElementById("entity_id2");
                        entSelect2.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;
                            entSelect2.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