@include('contabilidad.includes.fetchCreacionPeriodo')
<div id="modal-preview-poliza" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="previewPolizaContableLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header bg-gray-50 border-b border-gray-200 px-6 py-4">
                <h5 class="modal-title text-lg font-semibold text-gray-900" id="title-modal-preview-poliza">Previsualización de póliza contable</h5>
                <button type="button" class="close text-gray-400 hover:text-gray-500" data-dismiss="modal" aria-label="Close">
                    <i class="material-icons">close</i>
                </button>
            </div>
            <div class="modal-body">
                <div class="grid grid-cols-3 gap-4 mb-6 text-center">
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <h3 class="text-lg font-semibold text-gray-700 mb-2">Total cargos</h3>
                        <p class="text-2xl font-bold text-green-600" id="totalCargos"></p>
                    </div>
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <h3 class="text-lg font-semibold text-gray-700 mb-2">Total abonos</h3>
                        <p class="text-2xl font-bold text-red-600" id="totalAbonos"></p>
                    </div>
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <h3 class="text-lg font-semibold text-gray-700 mb-2">Diferencia</h3>
                        <p class="text-2xl font-bold text-blue-600" id="totalDiferencia"></p>
                    </div>
                </div>
                <div class="bg-gray-50 border-b border-gray-200 p-2 mb-2">
                    <div class="grid grid-cols-12 gap-4 ">
                        <div class="col-span-6">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Tipo de póliza: <span class="text-red-500">*</span></label>
                            <select id="tipo_poliza" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 select2">
                                <option value="0">-Selecciona-</option>
                                @foreach($tiposPolizas as $p)
                                <option value="{{$p->id}}" descripcionTP="{{$p->descripcion}}" tipoTP="{{$p->tipo}}">({{$p->tipo}}) {{$p->descripcion}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-span-6">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Fecha: <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="fecha_creacion">
                        </div>
                    </div>

                    <div class="grid grid-cols-12 gap-4 mt-2">
                        <div class="col-span-6">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Descripción póliza: <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="descripcion">
                        </div>
                        <div class="col-span-6">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Referencia póliza:</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="referencia_poliza">
                        </div>
                    </div>
                </div>

                <!-- Loading indicator -->
                <div id="loading-movimientos" class="flex items-center justify-center py-8">
                    <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-[#0A415F]"></div>
                    <span class="ml-3 text-gray-600">Cargando movimientos...</span>
                </div>

                <div class="overflow-x-auto" id="contenido-movimientos" style="display: none;">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-6 py-3 text-left text-[11px] font-medium text-gray-500 uppercase tracking-wider">Cuenta</th>
                                <th class="px-6 py-3 text-left text-[11px] font-medium text-gray-500 uppercase tracking-wider">Concepto</th>
                                <th class="px-6 py-3 text-left text-[11px] font-medium text-gray-500 uppercase tracking-wider">Cargo</th>
                                <th class="px-6 py-3 text-left text-[11px] font-medium text-gray-500 uppercase tracking-wider">Abono</th>
                                <th class="px-6 py-3 text-left text-[11px] font-medium text-gray-500 uppercase tracking-wider"></th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200" id="body-movimientos-poliza">

                        </tbody>
                    </table>
                    <div class="mt-4">
                        <button type="button" onclick="agregarRegistro()" class="bg-[#0A415F] hover:bg-[#083549] text-white  px-4 py-1.5 text-sm rounded-md font-medium transition-colors duration-200">
                            <i class="material-icons align-middle">add</i> Agregar movimiento
                        </button>
                    </div>
                </div>
            </div>
            <div class="modal-footer px-6 py-4 bg-gray-50 border-t border-gray-200 px-6 py-4">
                <button type="button" class="bg-transparent text-red-500 hover:text-red-600 mr-2 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200" data-dismiss="modal">Cerrar</button>
                <button type="button" class="bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200" onclick="guardarPoliza()">Guardar</button>
            </div>
        </div>
    </div>
</div>

<script>
    var tipoComprobante = @json($tipoComprobante);
    var routesArr = {
        emitidas: {
            'get-data-poliza': "{{route('ventas.get-factura')}}",
            'guardar-poliza': "{{route('ventas.guardar-poliza')}}",
            'add-poliza': "{{route('ventas.change-estatus-factura')}}",
            'generar-pdf-poliza': "{{route('polizas.generar-pdf-poliza',['id_poliza' => ':id_poliza', 'ejercicio' => ':ejercicio'])}}"
        },
        recibidas: {
            'get-data-poliza': "{{route('gastos.get-factura')}}",
            'guardar-poliza': "{{route('gastos.guardar-poliza')}}",
            'add-poliza': "{{route('gastos.change-estatus-factura')}}",
            'generar-pdf-poliza': "{{route('polizas.generar-pdf-poliza',['id_poliza' => ':id_poliza', 'ejercicio' => ':ejercicio'])}}"
        },
        abonos: {
            'get-data-poliza': "{{route('depositos.get-data-poliza')}}",
            'guardar-poliza': "{{route('depositos.guardar-poliza')}}",
            'add-poliza': "{{route('depositos.add-poliza-deposito')}}",
            'generar-pdf-poliza': "{{route('polizas.generar-pdf-poliza',['id_poliza' => ':id_poliza', 'ejercicio' => ':ejercicio'])}}"
        },
        pagos: {
            'get-data-poliza': "{{route('pagos.get-data-poliza')}}",
            'guardar-poliza': "{{route('pagos.guardar-poliza')}}",
            'add-poliza': "{{route('pagos.add-poliza-pago')}}",
            'generar-pdf-poliza': "{{route('polizas.generar-pdf-poliza',['id_poliza' => ':id_poliza', 'ejercicio' => ':ejercicio'])}}"
        }
    };

    var descripcionPoliza = {
        'emitidas': 'Poliza de provisión de ventas',
        'recibidas': 'Poliza de provisión de gastos',
        'abonos': 'Poliza de provisión de depósitos',
        'pagos': 'Poliza de provisión de pagos'
    };

    var table = {
        'abonos': '#list-depositos',
        'pagos': '#list-pagos',
        'emitidas': '#list-ventas',
        'recibidas': '#list-ventas',
    }

    function generarPoliza(id, fechaPoliza, referencia) {
        id_factura = id;
        // $('#loadingLoad').modal('show');
        $.ajax({
            url: routesArr[tipoComprobante]['get-data-poliza'],
            type: "POST",
            data: {
                id: id_factura
            },
            beforeSend: function() {
                $('#loadingLoad').modal('show');
            },
            success: function(response) {
                $('#modal-preview-poliza').modal('show');
                constructPreviewPoliza(response, fechaPoliza, referencia);
            },
            complete: function() {
                setTimeout(() => {
                    $('#loadingLoad').modal('hide');
                }, 1000);
            },
            error: function(response) {
                // $('#loadingLoad').modal('hide');
                Swal.fire({
                    icon: 'error',
                    title: 'Atención',
                    html: '<div class="text-gray-700">No se puede generar la póliza, debido a: <span class="font-semibold text-red-500">' + response.responseJSON.message + '</span></div>',
                    confirmButtonColor: '#0A415F',
                    confirmButtonText: 'Cerrar'
                });
            }
        });
    }

    var arrCuentasContables = @json($cuentasContables);
    var isOnFacturaDetalles = @json($isOnFacturaDetalles ?? false);

    function constructPreviewPoliza(data, fechaPoliza, referencia) {
        // Mostrar loading y ocultar contenido
        $('#loading-movimientos').show();
        $('#contenido-movimientos').hide();
        $('#body-movimientos-poliza').empty();

        data.movimientos.forEach((row, index) => {
            $('#body-movimientos-poliza').append(`
            <tr class="hover:bg-gray-50 row-movimientos-poliza" data-id="${index}">
                <td class="px-3 py-2 max-w-[200px]">
                    <select id="cuenta-select-${index}" class="w-full px-2 py-1 text-[11px] border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 cuenta-select" data-id="${row.id_cuenta}" onchange="actualizarConcepto(${index})">
                        <option value="0">-Selecciona-</option>
                        ${arrCuentasContables.map(cuenta => 
                            `<option value="${cuenta.id}" data-descripcion="${cuenta.cuenta}" ${cuenta.id === row.id_cuenta ? 'selected' : ''}>
                                ${cuenta.numero_cuenta} - ${cuenta.cuenta}
                            </option>`
                        ).join('')}
                    </select>
                </td>
                <td class="px-3 py-2 whitespace-nowrap text-[11px] text-gray-500">
                    <input type="text" id="concepto-input-${index}" class="w-full px-4 py-2 text-[11px] border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" value="${row.concepto}">
                </td>
                <td class="px-3 py-2 whitespace-nowrap max-w-[150px]">
                    <input type="number" id="cargo-input-${index}"
                           class="w-full px-4 py-2 text-xs border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 cargo-input" 
                           value="${row.cargo}" 
                           step="0.01"
                           onchange="calcularTotales()"
                           onkeydown="handleEnterKey(event, ${index})">
                </td>
                <td class="px-3 py-2 whitespace-nowrap max-w-[150px]">
                    <input type="number" id="abono-input-${index}"
                           class="w-full px-4 py-2 text-[11px] border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 abono-input" 
                           value="${row.abono}" 
                           step="0.01"
                           onchange="calcularTotales()"
                           onkeydown="handleEnterKey(event, ${index})">
                </td>
                <td class="px-3 py-2 whitespace-nowrap">
                    <button type="button" onclick="eliminarRegistro(${index})" class="text-red-500 hover:text-red-600">
                        <i class="material-icons">delete</i>
                    </button>
                </td>
            </tr>
        `);
            $(`#cuenta-select-${index}`).select2({
                width: '100%',
                placeholder: '-Selecciona-',
                dropdownParent: $('#modal-preview-poliza'),
                templateResult: function(data) {
                    if (!data.id) return data.text;
                    return $('<span class="text-[13px]">' + data.text + '</span>');
                },
                templateSelection: function(data) {
                    if (!data.id) return data.text;
                    return $('<span class="text-[13px]">' + data.text + '</span>');
                }
            });
        });

        calcularTotales();
        $('#tipo_poliza').val(data.tipo_poliza.id).trigger('change');
        $('#fecha_creacion').val(fechaPoliza);
        $('#referencia_poliza').val(referencia);
        $('#descripcion').val(descripcionPoliza[tipoComprobante]);


        // Ocultar loading y mostrar contenido
        setTimeout(() => {
            $('#loading-movimientos').hide();
            $('#contenido-movimientos').show();
        }, 500);
    }

    var diferencia = 0;

    function calcularTotales() {
        let totalCargos = 0;
        let totalAbonos = 0;

        // Calcular totales de los inputs
        $('.cargo-input').each(function() {
            const valor = $(this).val() || 0;
            totalCargos += Number(parseFloat(valor).toFixed(2));
        });

        $('.abono-input').each(function() {
            const valor = $(this).val() || 0;
            totalAbonos += Number(parseFloat(valor).toFixed(2));
        });

        // Actualizar los totales en la vista
        $('#totalCargos').text(`$${totalCargos.toLocaleString('es-MX', {minimumFractionDigits: 2, maximumFractionDigits: 2})}`);
        $('#totalAbonos').text(`$${totalAbonos.toLocaleString('es-MX', {minimumFractionDigits: 2, maximumFractionDigits: 2})}`);
        diferencia = Number((totalCargos - totalAbonos).toFixed(2));
        $('#totalDiferencia').text(`$${diferencia.toLocaleString('es-MX', {minimumFractionDigits: 2, maximumFractionDigits: 2})}`);
    }

    function validarPoliza() {
        let isValid = true;
        let firstInvalidElement = null;
        let mensajeError = '';
        // Validar datos generales
        if ($('#tipo_poliza').val() === '0') {
            $('#tipo_poliza').addClass('border-red-500').focus();
            isValid = false;
            firstInvalidElement = firstInvalidElement || $('#tipo_poliza');
            mensajeError = 'Por favor seleccione un tipo de póliza';
        } else {
            $('#tipo_poliza').removeClass('border-red-500');
        }

        if (!$('#fecha_creacion').val()) {
            $('#fecha_creacion').addClass('border-red-500').focus();
            isValid = false;
            firstInvalidElement = firstInvalidElement || $('#fecha_creacion');
            mensajeError = 'Por favor seleccione una fecha';
        } else {
            $('#fecha_creacion').removeClass('border-red-500');
        }

        if (!$('#descripcion').val()) {
            $('#descripcion').addClass('border-red-500').focus();
            isValid = false;
            firstInvalidElement = firstInvalidElement || $('#descripcion');
            mensajeError = 'Por favor ingrese una descripción';
        } else {
            $('#descripcion').removeClass('border-red-500');
        }

        // Validar movimientos
        $('.row-movimientos-poliza').each(function(index) {
            const cuenta = $(this).find('.cuenta-select').val();
            const cargo = parseFloat($(this).find('.cargo-input').val()) || 0;
            const abono = parseFloat($(this).find('.abono-input').val()) || 0;

            console.log(cuenta, cargo, abono);
            if (cuenta === '0') {
                $(this).find('.cuenta-select').addClass('border-red-500');
                isValid = false;
                firstInvalidElement = firstInvalidElement || $(this).find('.cuenta-select');
                mensajeError = 'Por favor seleccione una cuenta';
            } else {
                $(this).find('.cuenta-select').removeClass('border-red-500');
            }

            if (cargo === 0 && abono === 0) {
                $(this).find('.cargo-input, .abono-input').addClass('border-red-500');
                isValid = false;
                firstInvalidElement = firstInvalidElement || $(this).find('.cargo-input');
                mensajeError = 'Por favor ingrese un cargo o abono';
            } else {
                $(this).find('.cargo-input, .abono-input').removeClass('border-red-500');
            }
        });

        if (!isValid) {
            Swal.fire({
                icon: 'warning',
                title: 'Atención',
                html: '<div class="text-gray-700">' + mensajeError + '</div>',
                confirmButtonColor: '#0A415F'
            });
            firstInvalidElement.focus();
        }

        return isValid;
    }

    function guardarPoliza() {
        // Validar la póliza antes de continuar
        if (!validarPoliza()) {
            return false;
        }

        if (Math.abs(diferencia) > 0.01) {
            Swal.fire({
                icon: 'warning',
                title: 'Atención',
                text: 'La diferencia no es cero, por favor verifique los datos',
                confirmButtonColor: '#0A415F'
            });
            return false;
        }

        var movimientos = [];
        $('.row-movimientos-poliza').each(function() {
            var id = $(this).data('id');
            var cuenta = $('#cuenta-select-' + id).val();
            var cargo = $('#cargo-input-' + id).val();
            var abono = $('#abono-input-' + id).val();
            movimientos.push({
                id_cuenta: cuenta,
                cargo: cargo,
                abono: abono,
                referencia: $('#concepto-input-' + id).val(),
            });
        });

        $.ajax({
            url: routesArr[tipoComprobante]['guardar-poliza'],
            type: "POST",
            data: {
                tipo_poliza: $('#tipo_poliza').val(),
                fecha: $('#fecha_creacion').val(),
                descripcion: $('#descripcion').val(),
                referencia: $('#referencia_poliza').val(),
                movimientos: movimientos,
                numero_poliza: '',
                id_poliza: '',
            },
            beforeSend: function() {
                $('#loadingLoad').modal('show');
            },
            success: function(response) {
                if (response.result == 'success') {
                    addPoliza(id_factura, response.id_poliza, response.ejercicio);
                    id_factura = '';
                    return false;
                }

                if (response.type && response.type == 'periodo') {
                    Swal.fire({
                        icon: 'error',
                        title: 'Atención',
                        html: '<div class="text-gray-700">No se puede guardar la póliza, debido a: <span class="font-semibold text-red-500">' + response.mensaje + '</span></div>',
                        confirmButtonColor: '#0A415F',
                        confirmButtonText: 'Abrir periodo',
                        showDenyButton: true,
                        denyButtonText: 'Cerrar',
                    }).then((result) => {
                        if (result.isConfirmed) {
                            fetchAbrirPeriodo($('#fecha_creacion').val());
                        }
                    });
                    return false;
                }



                Swal.fire({
                    icon: 'error',
                    title: 'Atención',
                    html: '<div class="text-gray-700">No se puede guardar la póliza, debido a: <span class="font-semibold text-red-500">' + response.mensaje + '</span></div>',
                });
            },
            complete: function() {
                setTimeout(() => {
                    $('#loadingLoad').modal('hide');
                }, 1000);
            },
            error: function(response) {
                Swal.fire({
                    icon: 'error',
                    title: 'Atención',
                    text: 'Error al guardar la póliza',
                    confirmButtonColor: '#0A415F'
                });
            }
        });
    }

    function addPoliza(id_factura, id_poliza, ejercicio) {
        $.ajax({
            url: routesArr[tipoComprobante]['add-poliza'],
            type: "POST",
            data: {
                id_factura: id_factura,
                id_poliza: id_poliza
            },
            success: function(response) {
                $(table[tipoComprobante]).DataTable().ajax.reload();
                generarPDFPoliza(id_poliza, ejercicio);
                if (isOnFacturaDetalles) {
                    getFactura();
                }
            },
            error: function(response) {
                console.log(response);
            }
        });
    }

    function agregarRegistro() {
        const index = $('.row-movimientos-poliza').length;
        const nuevaFila = `
            <tr class="hover:bg-gray-50 row-movimientos-poliza" data-id="${index}">
                <td class="px-3 py-2 max-w-[200px]">
                    <select id="cuenta-select-${index}" class="w-full px-2 py-1 text-[11px] border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 cuenta-select" onchange="actualizarConcepto(${index})">
                        <option value="0">-Selecciona-</option>
                        ${arrCuentasContables.map(cuenta => 
                            `<option value="${cuenta.id}" data-descripcion="${cuenta.descripcion}">${cuenta.cuenta}</option>`
                        ).join('')}
                    </select>
                </td>
                <td class="px-3 py-2 whitespace-nowrap text-[11px] text-gray-500">
                    <input type="text" id="concepto-input-${index}" class="w-full px-4 py-2 text-[11px] border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" value="">
                </td>
                <td class="px-3 py-2 whitespace-nowrap max-w-[150px]">
                    <input type="number" id="cargo-input-${index}"
                           class="w-full px-4 py-2 text-xs border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 cargo-input" 
                           value="0" 
                           step="0.01"
                           onchange="calcularTotales()"
                           onkeydown="handleEnterKey(event, ${index})">
                </td>
                <td class="px-3 py-2 whitespace-nowrap max-w-[150px]">
                    <input type="number" id="abono-input-${index}"
                           class="w-full px-4 py-2 text-[11px] border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 abono-input" 
                           value="0" 
                           step="0.01"
                           onchange="calcularTotales()"
                           onkeydown="handleEnterKey(event, ${index})">
                </td>
                <td class="px-3 py-2 whitespace-nowrap">
                    <button type="button" onclick="eliminarRegistro(${index})" class="text-red-500 hover:text-red-600">
                        <i class="material-icons">delete</i>
                    </button>
                </td>
            </tr>
        `;

        // Inicializar select2 en el nuevo select
        $(`#cuenta-select-${index}`).select2({
            width: '100%',
            placeholder: '-Selecciona-',
            dropdownParent: $('#modal-preview-poliza'),
            templateResult: function(data) {
                if (!data.id) return data.text;
                return $('<span class="text-[13px]">' + data.text + '</span>');
            },
            templateSelection: function(data) {
                if (!data.id) return data.text;
                return $('<span class="text-[13px]">' + data.text + '</span>');
            }
        });
        $('#body-movimientos-poliza').append(nuevaFila);
        calcularTotales();
    }

    function actualizarConcepto(index) {
        const select = $(`#cuenta-select-${index}`);
        const descripcion = select.find('option:selected').data('descripcion');
        $(`#concepto-input-${index}`).val(descripcion);
    }

    function eliminarRegistro(index) {
        $(`tr[data-id="${index}"]`).remove();
        // Reindexar las filas restantes
        $('.row-movimientos-poliza').each(function(newIndex) {
            $(this).attr('data-id', newIndex);
            $(this).find('select').attr('id', `cuenta-select-${newIndex}`).attr('onchange', `actualizarConcepto(${newIndex})`);
            $(this).find('#concepto-input-' + index).attr('id', `concepto-input-${newIndex}`);
            $(this).find('.cargo-input').attr('id', `cargo-input-${newIndex}`);
            $(this).find('.abono-input').attr('id', `abono-input-${newIndex}`);
            $(this).find('button').attr('onclick', `eliminarRegistro(${newIndex})`);
        });
        calcularTotales();
    }

    function handleEnterKey(event, index) {
        if (event.keyCode === 13 || event.which === 13) {
            event.preventDefault();

            // Obtener todos los valores de cargo y abono
            let totalCargos = 0;
            let totalAbonos = 0;

            $('.row-movimientos-poliza').each(function(i) {
                if (i !== index) { // Excluir la fila actual
                    const cargo = Number(parseFloat($(this).find('.cargo-input').val() || 0).toFixed(2));
                    const abono = Number(parseFloat($(this).find('.abono-input').val() || 0).toFixed(2));
                    totalCargos += cargo;
                    totalAbonos += abono;
                }
            });

            // Calcular la diferencia necesaria para balancear
            const diferencia = Number((totalCargos - totalAbonos).toFixed(2));

            // Determinar en qué campo aplicar la diferencia
            if (totalCargos <= totalAbonos) {
                // Si el cargo es mayor o igual, aplicar la diferencia en cargo
                $(`#cargo-input-${index}`).val(Math.abs(diferencia).toFixed(2));
            } else {
                // Si el abono es mayor, aplicar la diferencia en abono
                $(`#abono-input-${index}`).val(Math.abs(diferencia).toFixed(2));
            }

            calcularTotales();
        }
    }

    function generarPDFPoliza(id_poliza, ejercicio) {
        Swal.fire({
            title: '¿Desea generar el PDF de la póliza?',
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: 'Sí, generar',
            cancelButtonText: 'No, cancelar',
            confirmButtonColor: '#0A415F',
            cancelButtonColor: '#d33'
        }).then((result) => {
            $('#modal-preview-poliza').modal('hide');
            if (result.isConfirmed) {

                $.ajax({
                    url: routesArr[tipoComprobante]['generar-pdf-poliza'].replace(':id_poliza', id_poliza).replace(':ejercicio', ejercicio),
                    type: "GET",
                    beforeSend: function() {
                        $('#loadingLoad').modal('show');
                    },
                    success: function(response) {
                        if (response.pdf && response.pdf) {
                            let modalHtml = `
                            <div class="modal fade draggable" id="pdfModal" tabindex="-1" role="dialog">
                                <div class="modal-dialog modal-lg">
                                    <div class="modal-content">
                                        <div class="modal-header bg-gray-50 border-b border-gray-200 px-6 py-4">
                                            <h5 class="modal-title text-lg font-semibold">Vista previa del PDF</h5>
                                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                                        </div>
                                        <div class="modal-body">
                                            <iframe src="${response.pdf.url}" style="width:100%; height:500px;" frameborder="0"></iframe>
                                        </div>
                                    </div>
                                </div>
                            </div>`;

                            $('body').append(modalHtml);
                            $('#pdfModal').modal('show');

                            $('#pdfModal').on('hidden.bs.modal', function() {
                                $(this).remove();
                            });
                        }
                    },
                    complete: function() {
                        setTimeout(() => {
                            $('#loadingLoad').modal('hide');
                        }, 1000);
                    }
                });
            }

        });
    }
</script>