@extends('layouts.app', ['activePage' => 'calculo_isr', 'menuParent' => 'reportes', 'titlePage' => __('Impuestos')])
@section('content')
@include('includes.tailwind')

<div class="content">
    <div class="container-fluid mt-4">
        <div class="row mb-2">
            <div class="col-6">
                <h6 class="text-xl font-semibold text-gray-800">Calculo de ISR</h6>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="bg-white rounded-lg shadow-md">
                    <div class="p-6">
                        <div class="grid grid-cols-12 gap-4 mb-4">
                            <div class="col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Tipo de consulta: <span class="text-red-500">*</span></label>
                                <select id="tipoConsulta" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                    <option value="" disabled selected>-Seleccione-</option>
                                    <option value="mensual">Mensual</option>
                                    <option value="anual">Anual</option>
                                </select>
                            </div>
                            <div class="col-span-2" id="divMes" style="display:none;">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Mes: <span class="text-red-500">*</span></label>
                                <select id="mesFilter" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                    <option value="" disabled selected>-Seleccione-</option>
                                    <option value="1">Enero</option>
                                    <option value="2">Febrero</option>
                                    <option value="3">Marzo</option>
                                    <option value="4">Abril</option>
                                    <option value="5">Mayo</option>
                                    <option value="6">Junio</option>
                                    <option value="7">Julio</option>
                                    <option value="8">Agosto</option>
                                    <option value="9">Septiembre</option>
                                    <option value="10">Octubre</option>
                                    <option value="11">Noviembre</option>
                                    <option value="12">Diciembre</option>
                                </select>
                            </div>
                            <div class="col-span-2" id="divAnio" style="display:none;">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Año: <span class="text-red-500">*</span></label>
                                <select id="anioFilter" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                    <option value="" disabled selected>-Seleccione-</option>
                                    @for($i = date('Y'); $i >= 2020; $i--)
                                    <option value="{{ $i }}">{{ $i }}</option>
                                    @endfor
                                </select>
                            </div>
                            <div class="col-span-4 mt-2 flex items-end flex-nowrap gap-2">
                                <div class="flex flex-row space-x-2 w-full">
                                    <button id="btnGenerar" class="bg-[#0A415F] hover:bg-[#083549] text-white px-5 py-2 text-sm rounded-md transition-all duration-200 inline-flex items-center gap-2 shadow-sm hover:shadow-md disabled:opacity-50 disabled:cursor-not-allowed" onclick="generarCalculos()">
                                        <i class="material-icons align-middle text-sm">calculate</i>
                                        <span id="btnGenerarText">Generar cálculo</span>
                                        <span id="btnGenerarLoader" class="hidden">
                                            <i class="material-icons animate-spin text-sm">refresh</i>
                                        </span>
                                    </button>
                                    <button id="btnDescargarExcel" class="bg-green-600 hover:bg-green-700 text-white px-5 py-2 text-sm rounded-md transition-all duration-200 inline-flex items-center gap-2 shadow-sm hover:shadow-md hidden" onclick="descargarExcel()">
                                        <i class="material-icons align-middle text-sm">file_download</i>
                                        Descargar Excel
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="relative overflow-hidden rounded-lg" style="min-height: 300px;">
                            <div id="loader-table" class="hidden absolute inset-0 bg-white bg-opacity-95 flex items-center justify-center z-10">
                                <div class="text-center">
                                    <div class="inline-block animate-spin rounded-full h-12 w-12 border-4 border-[#0A415F] border-t-transparent mb-3"></div>
                                    <p class="text-gray-600 font-medium">Generando cálculo...</p>
                                </div>
                            </div>
                            <div class="table-scroll px-2" id="content-table-isr">
                                <div class="text-center py-12 text-gray-400">
                                    <i class="material-icons text-6xl mb-3">table_chart</i>
                                    <p class="text-sm">Seleccione los filtros y genere el cálculo para ver los resultados</p>
                                </div>
                            </div>
                        </div>
                    </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;
    }


    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_processing,
    .dataTables_wrapper .dataTables_paginate {
        font-size: 10px;
    }

    .dataTables_wrapper .dataTables_length select,
    .dataTables_wrapper .dataTables_filter input {
        font-size: 10px !important;
    }

    table.dataTable thead th,
    table.dataTable thead td {
        font-size: 10px !important;
    }

    table.dataTable tfoot th,
    table.dataTable tfoot td {
        font-size: 11px !important;
    }

    table.dataTable tbody td {
        font-size: 11px !important;
    }


    table.dataTable tbody tr:hover {
        background-color: #f8f9fa;
        cursor: pointer;
    }

    .dataTables_wrapper .dataTables_filter input {
        padding: 0.25rem 0.5rem !important;
        border-radius: 0.375rem !important;
        border: 1px solid #e2e8f0 !important;
    }

    .dataTables_wrapper .dataTables_filter input:focus {
        outline: none !important;
        border-color: #0A415F !important;
        box-shadow: 0 0 0 2px rgba(10, 65, 95, 0.1) !important;
    }

    .table-scroll {
        max-height: 550px;
        overflow-y: auto;
    }


    .estatus-row {
        margin-right: 6px;
        width: 110%;
        max-width: 100px;
        display: inline-block;
    }

    .bg-red {
        background: #f8d7da;
    }

    .bg-warning {
        background: #fff3cd;
    }

    .bg-green {
        background: #d4edda;
    }

    .bg-gray {
        background: rgb(222, 221, 221);
    }

    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }

    .animate-spin {
        animation: spin 1s linear infinite;
    }

    .table-scroll {
        position: relative;
    }

    .table-scroll::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    .table-scroll::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
    }

    .table-scroll::-webkit-scrollbar-thumb {
        background: #0A415F;
        border-radius: 4px;
    }

    .table-scroll::-webkit-scrollbar-thumb:hover {
        background: #083549;
    }
</style>
@endsection

@push('js')
<script>
    $(document).ready(function() {

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

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


        // Obtener mes y año actual
        var fecha = new Date();
        var anioActual = fecha.getFullYear();

        // Establecer valores en los selectores
        $('#anioFilter').val(anioActual).trigger('change');

    });

    function mostrarFiltros() {
        var tipo = $('#tipoConsulta').val();
        if (tipo === 'mensual') {
            $('#divMes').show();
            $('#divAnio').show();
            $('#mesFilter').val('').trigger('change');
            $('#anioFilter').val('').trigger('change');
        } else if (tipo === 'anual') {
            $('#divMes').hide();
            $('#divAnio').show();
            $('#anioFilter').val('').trigger('change');
        } else {
            $('#divMes').hide();
            $('#divAnio').hide();
        }
    }

    $('#tipoConsulta').on('change', function() {
        mostrarFiltros();
    });

    // Variable para almacenar la información del Excel
    let excelData = null;

    function validarFiltros() {
        const tipoConsulta = $('#tipoConsulta').val();
        const anio = $('#anioFilter').val();

        if (!tipoConsulta) {
            Swal.fire({
                icon: 'warning',
                title: 'Filtro requerido',
                text: 'Por favor seleccione el tipo de consulta',
                confirmButtonColor: '#0A415F'
            });
            return false;
        }

        if (!anio) {
            Swal.fire({
                icon: 'warning',
                title: 'Filtro requerido',
                text: 'Por favor seleccione el año',
                confirmButtonColor: '#0A415F'
            });
            return false;
        }

        if (tipoConsulta === 'mensual' && !$('#mesFilter').val()) {
            Swal.fire({
                icon: 'warning',
                title: 'Filtro requerido',
                text: 'Por favor seleccione el mes',
                confirmButtonColor: '#0A415F'
            });
            return false;
        }

        return true;
    }

    function mostrarLoader(mostrar) {
        if (mostrar) {
            $('#loader-table').removeClass('hidden');
            $('#btnGenerar').prop('disabled', true);
            $('#btnGenerarText').addClass('hidden');
            $('#btnGenerarLoader').removeClass('hidden');
            $('#btnDescargarExcel').addClass('hidden').css('display', 'none');
        } else {
            $('#loader-table').addClass('hidden');
            $('#btnGenerar').prop('disabled', false);
            $('#btnGenerarText').removeClass('hidden');
            $('#btnGenerarLoader').addClass('hidden');
        }
    }

    function generarCalculos() {
        if (!validarFiltros()) {
            return;
        }

        mostrarLoader(true);

        $.ajax({
            url: "{{route('calculo-isr.generar-calculo')}}",
            type: "POST",
            data: {
                mes: $('#mesFilter option:selected').val(),
                anio: $('#anioFilter option:selected').val(),
                tipoConsulta: $('#tipoConsulta option:selected').val(),
            },
            success: function(res) {
                // Guardar información del Excel para descarga posterior
                excelData = {
                    url: res.file.url,
                    fileName: res.file.fileName
                };

                // Mostrar la tabla
                $('#content-table-isr').html(res.file.table);
                // Aumentar el tamaño de letra de la tabla después de agregarse
                $('#content-table-isr #table-calculo-isr').css('font-size', '11px');
                $('#content-table-isr #table-calculo-iva').css('font-size', '11px');
                $('#content-table-isr #encabezado-contribuyente').css('font-size', '11px');

                // Mostrar botón de descarga
                $('#btnDescargarExcel').removeClass('hidden').css('display', 'inline-flex');

                // Ocultar loader
                mostrarLoader(false);

                // Mostrar mensaje de éxito
                Swal.fire({
                    icon: 'success',
                    title: 'Cálculo generado',
                    text: 'El cálculo se ha generado correctamente',
                    confirmButtonColor: '#0A415F',
                    timer: 2000,
                    showConfirmButton: false
                });
            },
            error: function(xhr, status, error) {
                mostrarLoader(false);
                let mensaje = 'Ocurrió un error al obtener los datos';

                if (xhr.responseJSON && xhr.responseJSON.message) {
                    mensaje = xhr.responseJSON.message;
                }

                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: mensaje,
                    confirmButtonColor: '#0A415F'
                });
            }
        });
    }

    function descargarExcel() {
        if (!excelData) {
            Swal.fire({
                icon: 'warning',
                title: 'Sin archivo',
                text: 'No hay archivo disponible para descargar',
                confirmButtonColor: '#0A415F'
            });
            return;
        }

        const excelLink = document.createElement('a');
        excelLink.href = excelData.url;
        excelLink.download = excelData.fileName;
        excelLink.style.display = 'none';
        document.body.appendChild(excelLink);
        excelLink.click();
        document.body.removeChild(excelLink);
    }
</script>

@endpush