{% extends 'componentes/menu_contable.html' %}
{% load static %}

{% block title %}
NUEVA PARTIDA MANUAL
{% endblock %}


{% block body %}

<div class="row align-items-center">
    <div class="col d-flex align-items-center">
        <button id="toggle-sidebar" class="hamburger btnMenu me-3" title="Mostrar/Ocultar Menu">
            <i class="fas fa-bars"></i>
        </button>
        <h3 class="page-title mb-0">NUEVA PARTIDA MANUAL</h3>
    </div>
</div>

<hr>

<div class="row">

    <div class="row mb-3">

        <div class="col-md-4">
            <div class="form-group">
                <label for="fechaPartida">Fecha Partida:</label>
                <input type="datetime-local" class="form-control form-control-sm" id="fechaPartida">
            </div>
        </div>

        <div class="col-md-4">
            <div class="form-group">
                <label for="partida">Partida:</label>
                <input type="text" class="form-control form-control-sm" id="partida" placeholder="Nueva Partida">
            </div>
        </div>

        <div class="col-md-4">
            <div class="form-group">
                <label for="tasaCambio">Tasa de Cambio:</label>
                <input type="number" class="form-control form-control-sm" id="tasaCambio" placeholder="0.00"
                    step="0.01">
            </div>
        </div>

        <div class="col-md-4">
            <div class="form-group">
                <label for="">Tipo de Partda:</label>
                <select id="tipo_partida" class="form-select form-select-sm" name="tipo_partida">
                    <option value="#">Seleccione un Tipo de Partida</option>
                    <option value="12">PARTIDAS MANUALES</option>
                </select>
            </div>
        </div>

    </div>

    <div class="table-responsive">
        <table id="tablePartidaManual"
            class="table table-striped table-bordered mb-0 table-sm rounded-4 table-hover align-middle"
            style="width: 100%;">
            <thead class="table-gradient text-dark">
                <tr>
                    <th>Codigo</th>
                    <th>Concepto</th>
                    <th>Sinopsis</th>
                    <th>Debe</th>
                    <th>Haber</th>
                    <th>Acciones</th>
                </tr>
            </thead>

            <tbody>

            </tbody>
        </table>

        <table class="table table-bordered table-sm mt-2">
            <tbody>
                <tr>
                    <td class="text-right font-weight-bold">Total Debe:</td>
                    <td><input type="text" class="form-control form-control-sm text-right" id="totalDebe" readonly
                            value="0.00"></td>
                    <td class="text-right font-weight-bold">Total Haber:</td>
                    <td><input type="text" class="form-control form-control-sm text-right" id="totalHaber" readonly
                            value="0.00"></td>
                </tr>
            </tbody>
        </table>

    </div>
</div>

{% endblock %}



{% block scripts %}

<script>
    $(document).ready(function () {
        var csrfToken = "{{ csrf_token }}";

        var toastMixin = Swal.mixin({
            toast: true,
            icon: 'success',
            title: 'General Title',
            animation: false,
            position: 'top-right',
            showConfirmButton: false,
            timer: 2000,
            timerProgressBar: true,
            didOpen: (toast) => {
                toast.addEventListener('mouseenter', Swal.stopTimer);
                toast.addEventListener('mouseleave', Swal.resumeTimer);
            }
        });

        /* MENU ID Y SUBMENU ID */
        $('#contabilidadMenu, #nuevaPartidaManual_submenu').addClass('active');
        
        // Actualizar concepto automáticamente al seleccionar un código
        $('#codigo').change(function () {
            const codigoConcepto = $(this).val();
            const concepto = codigoConcepto ? codigoConcepto.split('|')[1] : '';
            $('#concepto').text(concepto);
        });

        // Agregar fila a la tabla
        $('#agregar').click(function () {
            // Validar campos
            const codigoConcepto = $('#codigo').val();
            const concepto = codigoConcepto ? codigoConcepto.split('|')[1] : '';
            const codigo = codigoConcepto ? codigoConcepto.split('|')[0] : '';
            const sinopsis = $('#sinopsis').val();
            const debe = parseFloat($('#debe').val()) || 0;
            const haber = parseFloat($('#haber').val()) || 0;

            if (!codigo) {
                alert('Seleccione un código.');
                return;
            }
            if (!sinopsis.trim()) {
                alert('Ingrese una sinopsis.');
                return;
            }
            if ((debe === 0 && haber === 0) || (debe > 0 && haber > 0)) {
                alert('Debe llenar solo uno de los campos: Debe o Haber.');
                return;
            }

            // Agregar fila
            const nuevaFila = `
                <tr>
                    <td>
                        <select class="form-control form-control-sm codigo-select">
                            <option value="1-01-001-01|ACTIVO / CAJA / FONDO DE CAMBIO / CAJA TIENDA DC1" ${codigo === "1-01-001-01" ? "selected" : ""}>1-01-001-01</option>
                            <option value="1-01-001-02|ACTIVO / CAJA / FONDO DE CAMBIO / CAJA TIENDA DC2" ${codigo === "1-01-001-02" ? "selected" : ""}>1-01-001-02</option>
                            <option value="1-01-001-03|ACTIVO / CAJA / FONDO DE CAMBIO / CAJA MAYOREO" ${codigo === "1-01-001-03" ? "selected" : ""}>1-01-001-03</option>
                        </select>
                    </td>
                    <td class="concepto align-middle">${concepto}</td>
                    <td class="editable sinopsis" contenteditable="true">${sinopsis}</td>
                    <td class="editable debe text-right" contenteditable="true">${debe > 0 ? debe.toFixed(2) : ''}</td>
                    <td class="editable haber text-right" contenteditable="true">${haber > 0 ? haber.toFixed(2) : ''}</td>
                    <td><button type="button" class="btn btn-sm btn-danger eliminar">Eliminar</button></td>
                </tr>
            `;
            $('#tabla-datos').append(nuevaFila);

            // Actualizar totales
            actualizarTotales();

            // Limpiar campos
            $('#codigo').val('');
            $('#concepto').text('');
            $('#sinopsis').val('');
            $('#debe').val('');
            $('#haber').val('');
        });

        // Actualizar concepto automáticamente al cambiar el select en una fila
        $('#tabla-datos').on('change', '.codigo-select', function () {
            const codigoConcepto = $(this).val();
            const concepto = codigoConcepto ? codigoConcepto.split('|')[1] : '';
            $(this).closest('tr').find('.concepto').text(concepto);
        });

        // Validar y actualizar totales al editar
        $('#tabla-datos').on('blur', '.editable', function () {
            actualizarTotales();
        });

        // Eliminar fila
        $('#tabla-datos').on('click', '.eliminar', function () {
            $(this).closest('tr').remove();
            actualizarTotales();
        });

        // Actualizar totales
        function actualizarTotales() {
            let totalDebe = 0;
            let totalHaber = 0;

            $('#tabla-datos tr').each(function () {
                const debe = parseFloat($(this).find('.debe').text()) || 0;
                const haber = parseFloat($(this).find('.haber').text()) || 0;

                totalDebe += debe;
                totalHaber += haber;
            });

            $('#totalDebe').val(totalDebe.toFixed(2));
            $('#totalHaber').val(totalHaber.toFixed(2));
        }




        /*  */
    });
</script>
{% endblock %}