@extends('layouts.app', ['activePage' => 'contabilidad', 'menuParent' => 'reportes', 'titlePage' => __('Contabilidad - Reportes contables')])

@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">Reportes contables</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="auxiliar_cuentas">Auxiliar de cuentas</option>
                                        <option value="balanza_comprobacion">Balanza de comprobación</option>
                                        <option value="estado_resultados">Estado de resultados</option>
                                        <option value="balance_general" selected>Balance general</option>
                                        <option value="anexos">Anexos</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 space-x-2">
                                    <button type="button" id="btnPdf" class="bg-[#C62A2A] hover:bg-[#A82323] text-white px-4 py-2 rounded-md transition-colors duration-200 flex items-center" title="Procesar archivo PDF del reporte" onclick="procesarReporte('pdf')">
                                        <i class="material-icons mr-2">picture_as_pdf</i> Generar PDF
                                    </button>
                                    <button type="button" id="btnExcel" class="bg-[#00994C] hover:bg-[#007A3D] text-white px-4 py-2 rounded-md transition-colors duration-200 flex items-center" title="Procesar archivo EXCEL del reporte" onclick="procesarReporte('xlsx')">
                                        <i class="material-icons mr-2">table_view</i> Generar EXCEL
                                    </button>
                                </div>
                            </div>

                            <div class="grid grid-cols-12 gap-4 mt-4 contentAuxiliar" style="display: none;">
                                <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>
                                    <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="tipoConsultaAuxiliar">
                                        <option value="cuentaMayor" selected>Cuenta de mayor</option>
                                        <option value="UltimaExpresion">Última expresión</option>
                                    </select>
                                </div>
                                <div class="col-span-4">
                                    <label class="block text-sm font-medium text-gray-700 mb-1">Cuentas: <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" name="cuentasAuxiliar[]" multiple="multiple" id="cuentasAuxiliar">
                                    </select>
                                </div>
                                <div class="col-span-4">
                                    <label class="block text-sm font-medium text-gray-700 mb-1">Rango de periodos: <span class="text-red-500">*</span></label>
                                    <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="rangoFechasAuxiliar">
                                </div>
                            </div>

                            <div class="grid grid-cols-12 gap-4 mt-2 contentBalanzaComprobacion" style="display: none;">
                                <div class="col-span-4">
                                    <div class="bg-gray-50 rounded-lg p-2">
                                        <label class="block text-sm font-medium text-gray-700 mb-2">Tipo de cuenta: <span class="text-red-500">*</span></label>
                                        <div class="space-y-2">
                                            <label class="inline-flex items-center">
                                                <input type="radio" name="radioTipoCuentaBalanza" value="cuentaMayor" checked class="form-radio text-blue-600">
                                                <span class="ml-2">Cuenta de mayor</span>
                                            </label>
                                            <label class="inline-flex items-center">
                                                <input type="radio" name="radioTipoCuentaBalanza" value="ultimaExpresion" class="form-radio text-blue-600">
                                                <span class="ml-2">Última expresión</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="grid grid-cols-12 gap-4 mt-4 contentAnexos" style="display: none;">
                                <div class="col-span-4">
                                    <label class="block text-sm font-medium text-gray-700 mb-1">Cuentas: <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" name="cuentasAnexos[]" multiple="multiple" id="cuentasAnexos">
                                    </select>
                                </div>
                            </div>

                            <div class="grid grid-cols-12 gap-4 mt-2 contentEstadosResultados" style="display: none;">
                                <div class="col-span-4">
                                    <div class="bg-gray-50 rounded-lg p-2">
                                        <label class="block text-sm font-medium text-gray-700 mb-2">Tipo de consulta: <span class="text-red-500">*</span></label>
                                        <div class="space-y-2">
                                            <label class="inline-flex items-center">
                                                <input type="radio" name="radioTipoConsultaResultados" value="previo" checked class="form-radio text-blue-600">
                                                <span class="ml-2">Previo</span>
                                            </label>
                                            <label class="inline-flex items-center">
                                                <input type="radio" name="radioTipoConsultaResultados" value="real" class="form-radio text-blue-600">
                                                <span class="ml-2">Real</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </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%',
    });

    $(document).ready(() => {
        $('#rangoFechasAuxiliar').daterangepicker({
            locale: {
                format: 'YYYY-MM', // Formato de la fecha
                separator: ' a ', // Separador entre las fechas
                applyLabel: 'Aplicar',
                cancelLabel: 'Cancelar',
                fromLabel: 'Desde',
                toLabel: 'Hasta',
                customRangeLabel: 'Personalizado'
            },
            startDate: moment().startOf('month'), // Fecha inicial predeterminada
            endDate: moment().endOf('month'), // Fecha final predeterminada
            ranges: {
                'Este Mes': [moment().startOf('month'), moment().endOf('month') + 1],
                'Mes Pasado': [
                    moment().subtract(1, 'month').startOf('month'),
                    moment().endOf('month') - 1
                ]
            },
            showDropdowns: true,
            minYear: 2010,
            // maxYear: parseInt(moment().format('YYYY'), 10),
            isInvalidDate: function(date) {
                return date.date() !== 1; // Solo permitir seleccionar el primer día del mes
            },
            showCustomRangeLabel: false,
            alwaysShowCalendars: true,
            linkedCalendars: false
        }).on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('YYYY-MM') + ' a ' + picker.endDate.format('YYYY-MM'));
        });

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


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

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

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

            if ($(this).val() == 'estado_resultados') {
                $('.contentEstadosResultados').show();
                return false;
            }

            if ($(this).val() == 'anexos') {
                $('.contentAnexos').show();
                let cuentasMayor = @json($cuentasMayor);
                let cuentasOptions = cuentasMayor.map(cuenta => {
                    return new Option(`(${cuenta.cuenta}) ${cuenta.descripcion}`, cuenta.id, false, false);
                });
                $('#cuentasAnexos').empty().append(cuentasOptions).trigger('change');

                return false;
            }

        });


    });

    function procesarReporte(type) {

        const [startDate, endDate] = $('#rangoFechasAuxiliar').val().split(' a ');
        $.ajax({
            url: type == 'pdf' ? "{{ route('reporte-contabilidad.generar-reporte-pdf') }}" : "{{ route('reporte-contabilidad.generar-reporte-excel') }}",
            data: {
                reporte: $('#reporte').val(),
                periodo: $('#periodo').val(),
                tipoConsultaAuxiliar: $('#tipoConsultaAuxiliar option:selected').val(),
                cuentasAuxiliar: $('#cuentasAuxiliar').val(),
                fechaInicialAuxiliar: startDate,
                fechaFinalAuxiliar: endDate,
                tipoCuentaBalanza: $('input[name="radioTipoCuentaBalanza"]:checked').val(),
                tipoConsultaResultados: $('input[name="radioTipoConsultaResultados"]:checked').val(),
                cuentasAnexos: $('#cuentasAnexos').val()
            },
            beforeSend: () => {
                $("#loadingLoad").modal("show");
            },
            success: (res, _, jqXHR) => {
                setTimeout(() => {

                    $("#loadingLoad").modal("hide")

                    if (jqXHR.status == 204) {
                        Swal.fire(noContentMessageOptions);
                        return false;
                    }

                    Swal.fire(workDoneMessage);

                    let link = document.createElement('a');
                    link.href = res.fileInfo.url;
                    link.download = res.fileInfo.filename;

                    link.click();
                    link.remove();

                    if ($('#reporte').val() == 'estado_resultados') {
                        location.reload();
                    }
                }, 500);
            },
            error: (error) => {
                setTimeout(() => {
                    $("#loadingLoad").modal("hide")
                    Swal.fire(ajaxErrorMessage);
                }, 500);
            }
        })
    }

    $('#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