@extends('layouts.app', ['activePage' => 'contabilidad_electronica', 'menuParent' => 'reportes', 'titlePage' => __('Contabilidad - Contabilidad electrónica')])

@section('content')
@include('includes.tailwind')

<div class="content">
    <div class="container-fluid mt-4">
        <div class="row mb-4">
            <div class="col-12">
                <h6 class="text-xl font-semibold text-gray-800 m-0">Contabilidad electrónica</h6>
            </div>
        </div>
        <div class="row d-flex justify-content-center">
            <div class="col-md-12">
                <div class="bg-white rounded-lg shadow-md">
                    <div class="p-6">
                        <form action="#" method="post" id="frm_reportes_contabilidad">
                            <div class="grid grid-cols-12 gap-4">
                                <div class="col-span-4">
                                    <label class="block text-sm font-medium text-gray-700 mb-1">Reporte: <span class="text-red-500">*</span></label>
                                    <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 select2" id="reporte">
                                        <option value="balanza_comprobacion" selected>Balanza de comprobación</option>
                                        <option value="catalogo_cuentas_contables">Catalogo cuentas contables</option>
                                    </select>
                                </div>
                                <div class="col-span-4">
                                    <label class="block text-sm font-medium text-gray-700 mb-1">Periodo: <span class="text-red-500">*</span></label>
                                    <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 select2" id="periodo">
                                        @foreach ($periodos as $periodo)
                                        <option value="{{ $periodo['id'] }}"> {{ $periodo['descripcion'] }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-span-4 flex items-end">
                                    <button type="button" id="btnPdf" class="bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200" onclick="procesarReporte()">
                                        Generar XML
                                    </button>
                                </div>
                            </div>
                            <div class="grid grid-cols-12 gap-4 mt-2 contentBalanzaComprobacion">
                                <div class="col-span-4">
                                    <label class="block text-sm font-medium text-gray-700 mb-1">{{__('Tipo de envio:')}} <span class="text-red-500">*</span></label>
                                    <div class="bg-gray-50 p-2 rounded-md">
                                        <div class="flex space-x-4">
                                            <label class="inline-flex items-center">
                                                <input type="radio" name="radioTipoEnvioBalanza" value="N" checked class="form-radio h-4 w-4 text-blue-600">
                                                <span class="ml-2 text-gray-700">{{__('Normal')}}</span>
                                            </label>
                                            <label class="inline-flex items-center">
                                                <input type="radio" name="radioTipoEnvioBalanza" value="C" class="form-radio h-4 w-4 text-blue-600">
                                                <span class="ml-2 text-gray-700">{{__('Complementaria')}}</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-span-4 hidden" id="contentFechaUltimaModificacionBalanza">
                                    <label class="block text-sm font-medium text-gray-700 mb-1">Fecha último modificación contable: <span class="text-red-500">*</span></label>
                                    <input type="date" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="fechaUltimaModificacionBalanza">
                                </div>
                                <div class="col-span-4">
                                    <label class="block text-sm font-medium text-gray-700 mb-1">{{__('Tipo de consulta:')}} <span class="text-red-500">*</span></label>
                                    <div class="bg-gray-50 p-2 rounded-md">
                                        <div class="flex space-x-4">
                                            <label class="inline-flex items-center">
                                                <input type="radio" name="radioTipoConsultaBalanza" value="todas" checked class="form-radio h-4 w-4 text-blue-600">
                                                <span class="ml-2 text-gray-700">{{__('Todas las cuentas')}}</span>
                                            </label>
                                            <label class="inline-flex items-center">
                                                <input type="radio" name="radioTipoConsultaBalanza" value="conMovimientos" class="form-radio h-4 w-4 text-blue-600">
                                                <span class="ml-2 text-gray-700">{{__('Solo con movimientos')}}</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalCatalogoCuentasContables" tabindex="-1" role="dialog" aria-labelledby="modalCatalogoCuentasContablesLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalCatalogoCuentasContablesLabel">Cuentas contables sin código agrupador</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body text-center">
                <p>El catálogo de cuentas contables contiene cuentas sin código agrupador. Por favor, revise el archivo TXT para más detalles.</p>
                <a id="btn-txt" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors duration-200" href="#" download>
                    <i class="fas fa-file mr-2"></i> Descargar TXT
                </a>
            </div>
            <div class="modal-footer">
                <button type="button" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300 transition-colors duration-200" data-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

<style>
    .select2-container {
        width: 100% !important;
    }

    .select2-container .select2-selection--single {
        height: 40px !important;
    }

    .select2-container .select2-selection--single .select2-selection__rendered {
        line-height: 40px !important;
    }
</style>
@endsection

@push('js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.jsdelivr.net/npm/moment/min/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script>
    const ajaxErrorMessage = {
        icon: 'error',
        title: '¡Lo sentimos!',
        text: 'Ha ocurrido un error inesperado, intentelo de nuevo más tarde'
    }

    const workDoneMessage = {
        icon: 'success',
        title: '¡Hecho!',
        text: 'El documento se descargará en breve.'
    }

    const noContentMessageOptions = {
        icon: 'info',
        title: '¡Sin contenido!',
        text: 'La consulta no obtuvo ningún resultado, no se generó ningún documento.',
        confirmButtonText: 'Aceptar'
    }

    $('.select2').select2({
        placeholder: "-Selecciona-",
        width: '100%',
    });

    $('#reporte').on('change', function() {
        $('.contentBalanzaComprobacion').hide();

        $('#periodo').prop('disabled', false)

        if ($(this).val() == 'catalogo_cuentas_contables') {
            $('#tipoConsultaAuxiliar').val('cuentaMayor').trigger('change');
            $('#periodo').prop('disabled', true)
            return false;
        }

        if ($(this).val() == 'balanza_comprobacion') {
            $('.contentBalanzaComprobacion').show();
            return false;
        }
    });

    $('input[name="radioTipoEnvioBalanza"]').on('change', function() {
        if ($(this).val() == 'N') {
            $('#contentFechaUltimaModificacionBalanza').hide();
            return false;
        }
        $('#contentFechaUltimaModificacionBalanza').show();
    })

    function procesarReporte() {
        $('#loadingLoad').modal('show');
        $.ajax({
                url: "{{ route('contabilidad-electronica.generar-xml') }}",
                type: 'POST',
                data: {
                    periodo: $('#periodo').val(),
                    reporte: $('#reporte').val(),
                    tipoConsultaBalanza: $('input[name="radioTipoConsultaBalanza"]:checked').val(),
                    tipoEnvioBalanza: $('input[name="radioTipoEnvioBalanza"]:checked').val(),
                    fechaUltimaModificacionBalanza: $('#fechaUltimaModificacionBalanza').val(),
                    fechaActualizacionCuentas: $('#fechaActualizacionCuentas').val(),
                },
            })
            .done(function(resp) {
                console.log(resp);
                if (!resp['success']) {
                    Swal.fire({
                        icon: 'error',
                        title: '¡Lo sentimos!',
                        text: resp['message']
                    });
                    return;
                }

                const link = document.createElement('a');
                link.href = resp['file'];
                link.download = "{{ $rfc }}" + $('#reporte').val() + ".xml";
                link.click();

                if ($('#reporte').val() === 'balanza_comprobacion') {
                    setTimeout(() => {
                        const linkPDF = document.createElement('a');
                        linkPDF.href = "{{url('temps')}}/{{auth()->user()->username}}_BalanzaComprobacion_{{date('Y-m-d')}}.pdf";
                        linkPDF.setAttribute('download', "{{auth()->user()->username}}_BalanzaComprobacion_{{date('Y-m-d')}}.pdf");
                        document.body.appendChild(linkPDF);
                        linkPDF.click();
                        document.body.removeChild(linkPDF);
                    }, 1500);
                    return;
                }

                if ($('#reporte').val() === 'catalogo_cuentas_contables' && resp['cuentaSinCodigoAgrupador']) {
                    setTimeout(() => {
                        $('#modalCatalogoCuentasContables').modal('show');
                        const linkTXT = document.getElementById('btn-txt');
                        linkTXT.href = "{{url('temps')}}/{{auth()->user()->username}}_CatalogoCuentasContablesSinCodigoAgrupador_{{date('Y-m-d')}}.txt";
                        linkTXT.setAttribute('download', "{{auth()->user()->username}}_CatalogoCuentasContablesSinCodigoAgrupador_{{date('Y-m-d')}}.txt");
                    });
                }
            })
            .fail(function(jqXHR, textStatus, errorThrown) {
                console.log(jqXHR);
                Swal.fire({
                    icon: 'error',
                    title: '¡Lo sentimos!',
                    text: 'Error al generar el archivo XML.' + jqXHR.responseJSON.message
                });
            })
            .always(function() {
                setTimeout(() => {
                    $('#loadingLoad').modal('hide')
                }, 2000);
            });
    }

    $('#tipoConsultaAuxiliar').on('change', function() {
        if ($(this).val() == 'cuentaMayor') {
            let cuentasMayor = @json($cuentasMayor);
            let cuentasOptions = cuentasMayor.map(cuenta => {
                return new Option(`(${cuenta.cuenta}) ${cuenta.descripcion}`, cuenta.id, false, false);
            });
            $('#cuentasAuxiliar').empty().append(cuentasOptions).trigger('change');
            return false;
        }

        let cuentasUltimaExpresion = @json($cuentasUltimaExpresion);
        let cuentasOptions = cuentasUltimaExpresion.map(cuenta => {
            return new Option(`(${cuenta.cuenta}) ${cuenta.descripcion}`, cuenta.id, false, false);
        });
        $('#cuentasAuxiliar').empty().append(cuentasOptions).trigger('change');
    })

    var periodoACerrar = @json($periodoAbierto);

    $('input[name="radioTipoConsultaResultados"]').on('change', function() {
        if ($(this).val() == 'real') {
            $('#periodo').prop('disabled', true);
            $('#periodo').val(periodoACerrar['id']).trigger('change');
            return false;
        }

        $('#periodo').val($('#periodo option:first').val()).trigger('change');
        $('#periodo').prop('disabled', false)
    })
</script>
@endpush