@php
    $id_usuario = session('id_usuario');
@endphp

<style>
    .custom-file-label::after {
        content: "Seleccionar";
    }

    td.primary {
        background-color: #d9edf7 !important;
        font-weight: bold;
    }

    td.success {
        background-color: #dff0d8 !important;
        font-weight: bold;
    }

    td.danger {
        background-color: #f2dede !important;
        font-weight: bold;
    }

    td.warning {
        background-color: #fcf8e3 !important;
        font-weight: bold;
    }

    td.info {
        background-color: #d9edf7 !important;
        font-weight: bold;
    }


    /*
     * Historial bancario por pago.
     * Se deja compacto para que no compita visualmente con los datos principales del pago.
     */
    #contenedor_pagos_seccion2_4 .historial-bancos-24 {
        font-size: 12px;
    }

    #contenedor_pagos_seccion2_4 .historial-bancos-24 .card-header {
        padding: 6px 10px;
    }

    #contenedor_pagos_seccion2_4 .historial-bancos-24 .historial-toggle-24 {
        font-size: 12px;
        font-weight: 600;
        line-height: 1.2;
    }

    #contenedor_pagos_seccion2_4 .historial-bancos-24 .badge {
        font-size: 10px;
    }

    #contenedor_pagos_seccion2_4 .historial-bancos-24 table {
        font-size: 11px;
    }

    #contenedor_pagos_seccion2_4 .historial-bancos-24 table th,
    #contenedor_pagos_seccion2_4 .historial-bancos-24 table td {
        padding: 5px 6px;
        vertical-align: middle;
    }

    .cuenta-bancaria-pago-24 {
        border: 1px solid #d9edf7;
        background: #f7fbfd;
        border-radius: 4px;
        padding: 10px;
        margin-bottom: 12px;
    }

    .cuenta-bancaria-pago-24 small {
        display: block;
        margin-top: 4px;
    }

    .pago-card-24 .badge {
        font-size: 85%;
    }

    .titulo-seccion-24 {
        margin: 0 0 16px 0;
        text-align: center;
        font-size: 16px;
    }
</style>

<div class="modal fade" name="create_seccion2_4_modal" id="create_seccion2_4_modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable modal-xl" role="document">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title">2.4 Aprobación de pago</h5>
                <button type="button" class="close reset" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body">

                {{-- =========================
                     BLOQUE NUEVO
                     ========================= --}}
                <div id="bloque_nuevo_seccion2_4" style="display:none;">

                    <div class="card">
                        <div class="card-body">

                            <h5 class="titulo-seccion-24"><strong>Datos generales</strong></h5>

                            <div class="table-responsive">
                                <table class="table table-bordered text-center">
                                    <thead class="thead-light">
                                        <tr>
                                            <th>Total pagado</th>
                                            <th>Saldo pendiente</th>
                                            <th>Total de la requisición</th>
                                        </tr>
                                    </thead>

                                    <tbody>
                                        <tr>
                                            <td width="33%" class="primary" id="total_pagado_24">$0.00</td>
                                            <td width="33%" class="danger"  id="saldo_pendiente_24">$0.00</td>
                                            <td width="34%" class="success" id="total_requisicion_24">$0.00</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <div class="table-responsive mt-3">
                                <table class="table table-bordered text-center">
                                    <thead class="thead-light">
                                        <tr>
                                            <th>Estatus general</th>
                                            <th>Fecha para el siguiente pago</th>
                                            <th>Tipo de pago</th>
                                            <th>Tipo de moneda</th>
                                        </tr>
                                    </thead>

                                    <tbody>
                                        <tr>
                                            <td width="25%" id="estatus_pago_general_24">Pendiente de pago</td>
                                            <td width="25%" id="fecha_siguiente_pago_24">Sin fecha</td>
                                            <td width="25%" id="tipo_pago_24">Sin definir</td>
                                            <td width="25%" id="tipo_moneda_24">Sin definir</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <hr>

                            <div id="contenedor_pagos_seccion2_4"></div>

                            <hr>

                            <div id="contenedor_archivos_globales_seccion2_4"></div>

                        </div>
                    </div>

                </div>

                {{-- =========================
                     BLOQUE LEGACY
                     ========================= --}}
                <div id="bloque_legacy_seccion2_4" style="display:none;">

                    <div class="card text-center">
                        <div class="card-header">
                            Aprobación de pago - Modo anterior
                        </div>

                        <div class="card-body">

                            <div id="firma_pago_legacy_contenedor"></div>

                            <hr>

                            <small class="text-muted">
                                <i class="exclamation triangle icon"></i>
                                <strong>Modo anterior:</strong> Este registro fue creado con la versión anterior del sistema y no utiliza el nuevo control de pagos por parcialidad.
                            </small>

                        </div>
                    </div>

                </div>

                {{-- =========================
                     BLOQUE SIN SECCIÓN 2.2
                     ========================= --}}
                <div id="bloque_sin_seccion_22_seccion2_4" style="display:none;">

                    <div class="alert alert-warning text-center">
                        <i class="exclamation triangle icon"></i>
                        Primero debes completar la sección <strong>2.2 Cómo se recibe el suministro y formas de pago</strong>
                        para poder ejecutar el control de pagos.
                    </div>

                </div>

            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">
                    <i class="times icon"></i>Cerrar
                </button>
            </div>

            <input type="hidden" id="id_requisicion_reporte_24" value="{{ $id_requisicion_reporte }}">
        </div>
    </div>
</div>


{{-- =========================
     MODAL MOTIVO PARA SOLICITAR DESHACER PAGO
     ========================= --}}
<div class="modal fade" id="motivo_cancelacion_pago_24_modal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog" role="document">
        <div class="modal-content">

            <div class="modal-header bg-warning">
                <h5 class="modal-title">
                    <i class="exclamation triangle icon"></i>
                    Solicitar cancelación en Bancos
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body">
                <input type="hidden" id="id_parcialidad_cancelar_pago_24">

                <div class="alert alert-warning">
                    Esta acción enviará a Bancos una solicitud para cancelar el movimiento. El pago se mantendrá como <strong>Pagado con cancelación solicitada</strong> hasta que Bancos autorice o rechace la cancelación.
                </div>

                <div class="form-group">
                    <label class="font-weight-bold">Motivo de cancelación</label>
                    <textarea id="motivo_cancelacion_pago_24" class="form-control" rows="4" maxlength="1000" placeholder="Describe el motivo por el cual solicitas cancelar este movimiento bancario."></textarea>
                    <small class="text-muted">Este motivo se guardará en el historial de la parcialidad y como referencia del movimiento bancario.</small>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">
                    Cerrar
                </button>

                <button type="button" class="btn btn-warning" id="confirmar_cancelacion_pago_24">
                    <i class="undo icon"></i> Solicitar cancelación en Bancos
                </button>
            </div>

        </div>
    </div>
</div>


<script>

    var cuentasBancariasSeccion24 = [];
    var tipoMonedaSeccion24 = 'MXN';

    function formatoMonedaSeccion24(valor) {
        valor = parseFloat(valor) || 0;

        return '$' + valor.toLocaleString('en-US', {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        });
    }

    function escapeHtmlSeccion24(texto) {
        if (texto === null || texto === undefined) {
            return '';
        }

        return String(texto)
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#039;');
    }

    function renderArchivosSeccion24(archivos, tipo, estatusPago, puedeGestionar) {

        if (!archivos || archivos.length <= 0) {
            return '<small class="text-muted">Sin archivos cargados</small>';
        }

        var html = '<ul style="padding-left:0; list-style:none;">';

        $.each(archivos, function(index, archivo) {

            html += '<li style="margin-bottom:8px;">';

            html += '   <div class="btn-group" style="width:100%;">';

            html += '       <a href="{{ url("ver_archivo_pago_requisicion") }}/' + archivo.id_requisicion_reporte_pago_archivo + '" ';
            html += '          target="_blank" ';
            html += '          class="btn btn-default text-left" ';
            html += '          style="width:90%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">';

            html +=            escapeHtmlSeccion24(archivo.nombre_original || archivo.nombre_archivo);

            html += '       </a>';

            /*
             * Nueva regla:
             * Se permite eliminar facturas/complementos aunque el pago esté firmado,
             * siempre que el usuario tenga permiso para gestionar pagos.
             */
            if (puedeGestionar) {

                html += '       <button ';
                html += '          type="button" ';
                html += '          class="btn btn-danger eliminar_archivo_pago_24" ';
                html += '          data-id_archivo="' + archivo.id_requisicion_reporte_pago_archivo + '" ';
                html += '          style="width:10%;">';

                html += '          <i class="trash icon"></i>';
                html += '       </button>';
            }

            html += '   </div>';

            html += '</li>';
        });

        html += '</ul>';

        return html;
    }

    function renderArchivosGlobalesSeccion24(facturas, complementos, puedeGestionar, numeroCotizacion) {

        var idReporte = $('#id_requisicion_reporte_24').val();
        var deshabilitado = puedeGestionar ? '' : 'disabled';
        var numeroCotizacionLimpio = numeroCotizacion || '';

        var html = '';
        html += '<div class="mb-3 archivos-globales-24">';
        html += '   <h5 class="titulo-seccion-24"><strong>Facturas y Complementos</strong></h5>';
        html += '   <form id="form_archivos_globales_24" enctype="multipart/form-data">';
        html += '       {{ csrf_field() }}';
        html += '       <input type="hidden" name="id_requisicion_reporte" value="' + escapeHtmlSeccion24(idReporte) + '">';
        html += '       <div class="form-group">';
        html += '           <label class="font-weight-bold">Número de cotización</label>';
        html += '           <input type="text" class="form-control" name="numero_cotizacion" id="numero_cotizacion_24" maxlength="250" value="' + escapeHtmlSeccion24(numeroCotizacionLimpio) + '" ' + deshabilitado + '>';
        html += '       </div>';
        html += '       <div class="form-row">';

        html += '           <div class="form-group col-md-6">';
        html += '               <label class="font-weight-bold">Factura(s)</label>';
        html += '               <div class="custom-file">';
        html += '                   <input type="file" class="custom-file-input input_factura_global_24" name="facturas[]" id="facturas_globales_24" multiple ' + deshabilitado + '>';
        html += '                   <label class="custom-file-label" for="facturas_globales_24">Seleccionar archivo</label>';
        html += '               </div>';
        html += '               <small class="text-muted">Solo PDF, máximo 5 MB por archivo.</small>';
        html += '               <div class="mt-2">';
        html +=                     renderArchivosSeccion24(facturas, 'factura', 'Global', puedeGestionar);
        html += '               </div>';
        html += '           </div>';

        html += '           <div class="form-group col-md-6">';
        html += '               <label class="font-weight-bold">Complemento(s)</label>';
        html += '               <div class="custom-file">';
        html += '                   <input type="file" class="custom-file-input input_complemento_global_24" name="complementos[]" id="complementos_globales_24" multiple ' + deshabilitado + '>';
        html += '                   <label class="custom-file-label" for="complementos_globales_24">Seleccionar archivo</label>';
        html += '               </div>';
        html += '               <small class="text-muted">Solo PDF, máximo 5 MB por archivo.</small>';
        html += '               <div class="mt-2">';
        html +=                     renderArchivosSeccion24(complementos, 'complemento', 'Global', puedeGestionar);
        html += '               </div>';
        html += '           </div>';

        html += '       </div>';
        html += '       <div class="text-right">';
        html += '           <button type="button" class="btn btn-primary guardar_archivos_globales_24" ' + deshabilitado + '>';
        html += '               <i class="save icon"></i> Guardar';
        html += '           </button>';
        html += '       </div>';
        html += '   </form>';
        html += '</div>';

        return html;
    }


    function renderSelectCuentaBancariaSeccion24(pago, cuentas, deshabilitado, tipoMoneda) {

        var cuentaTexto = pago.cuenta_bancaria_texto;

        if (!cuentaTexto && (pago.id_banco_cuenta || pago.banco_pago || pago.nombre_cuenta_pago || pago.numero_cuenta_pago)) {
            cuentaTexto = [
                pago.banco_pago || 'Banco sin nombre',
                pago.nombre_cuenta_pago || 'Cuenta sin nombre',
                pago.numero_cuenta_pago || 'Sin número'
            ].join(' - ');
        }

        if (pago.estatus_pago === 'Pagado' || pago.movimiento_pendiente_bancos) {

            var htmlLectura = '';
            htmlLectura += '<input type="text" class="form-control" value="' + escapeHtmlSeccion24(cuentaTexto || 'Sin cuenta bancaria registrada') + '" readonly>';

            if (pago.folio_movimiento_banco) {
                htmlLectura += '<small class="text-muted">Folio movimiento: ' + escapeHtmlSeccion24(pago.folio_movimiento_banco) + '</small>';
            }

            if (pago.estatus_movimiento_banco) {
                htmlLectura += '<small class="text-muted">Movimiento bancario: ' + escapeHtmlSeccion24(pago.estatus_movimiento_banco) + '</small>';
            }

            if (pago.movimiento_pendiente_bancos) {
                htmlLectura += '<small class="text-warning"><i class="clock icon"></i> La solicitud está pendiente de revisión en Bancos.</small>';
            }

            if (pago.cancelacion_solicitada_bancos) {
                htmlLectura += '<small class="text-warning"><i class="clock icon"></i> Cancelación de pago pendiente en Bancos.</small>';
            }

            return htmlLectura;
        }

        if (!cuentas || cuentas.length <= 0) {
            var htmlSinCuentas = '';
            htmlSinCuentas += '<div class="alert alert-warning text-left" style="margin-bottom:0;">';
            htmlSinCuentas += 'No hay cuentas bancarias activas para la moneda <strong>' + escapeHtmlSeccion24(tipoMoneda || 'MXN') + '</strong>.';
            htmlSinCuentas += '</div>';
            return htmlSinCuentas;
        }

        var html = '';
        html += '<select name="id_banco_cuenta" class="form-control select_cuenta_bancaria_24" ' + deshabilitado + '>';
        html += '   <option value="">Seleccione una cuenta bancaria</option>';

        $.each(cuentas, function(index, cuenta) {

            var numeroCuenta = cuenta.cuenta_enmascarada || cuenta.numero_cuenta || 'Sin número';
            var limite = parseFloat(cuenta.monto_maximo_sin_autorizacion || 0);
            var selected = (parseInt(pago.id_banco_cuenta || 0) === parseInt(cuenta.id_banco_cuenta || 0)) ? 'selected' : '';

            var texto = cuenta.banco + ' - ' + cuenta.nombre_cuenta + ' - ' + numeroCuenta + ' | Límite: ' + formatoMonedaSeccion24(limite);

            html += '   <option ';
            html += '       value="' + cuenta.id_banco_cuenta + '" ';
            html += '       data-limite="' + limite + '" ';
            html += '       data-moneda="' + escapeHtmlSeccion24(cuenta.moneda || '') + '" ' + selected + '>';
            html +=         escapeHtmlSeccion24(texto);
            html += '   </option>';
        });

        html += '</select>';
        html += '<small class="text-muted">Solo se muestran cuentas activas con moneda ' + escapeHtmlSeccion24(tipoMoneda || 'MXN') + '.</small>';

        if (pago.movimiento_cancelado_bancos) {
            html += '<small class="text-success"><i class="check icon"></i> Bancos autorizó la cancelación; puedes modificar y volver a firmar este pago.</small>';
        }

        return html;
    }



    function renderBadgeHistorialBancosSeccion24(estatus) {
        if (estatus === 'Aplicado') {
            return '<span class="badge badge-success">Aplicado</span>';
        }

        if (estatus === 'Pendiente') {
            return '<span class="badge badge-warning">Pendiente</span>';
        }

        if (estatus === 'Cancelado') {
            return '<span class="badge badge-danger">Cancelado</span>';
        }

        return '<span class="badge badge-secondary">Sin estatus</span>';
    }


    function renderHistorialBancarioSeccion24(pago) {
        var historial = pago.historial_movimientos || [];
        var collapseId = 'historial_bancos_pago_24_' + pago.id_requisicion_reporte_parcialidad;

        var html = '';
        html += '<div class="mt-3">';
        html += '   <div class="card historial-bancos-24">';
        html += '       <div class="card-header" style="padding:8px 12px;">';
        html += '           <a class="text-primary historial-toggle-24" data-toggle="collapse" href="#' + collapseId + '" role="button" aria-expanded="false" aria-controls="' + collapseId + '">';
        html += '               <i class="history icon"></i> Ver historial bancario';
        html += '           </a>';

        if (historial.length > 0) {
            html += '           <span class="badge badge-secondary pull-right">' + historial.length + '</span>';
        }

        html += '       </div>';
        html += '       <div class="collapse" id="' + collapseId + '">';
        html += '           <div class="card-body" style="padding:10px;">';

        if (historial.length <= 0) {
            html += '           <small class="text-muted">Sin historial bancario para este pago.</small>';
        } else {
            html += '           <div class="table-responsive">';
            html += '               <table class="table table-sm table-bordered table-striped" style="margin-bottom:0;">';
            html += '                   <thead class="thead-light">';
            html += '                       <tr>';
            html += '                           <th>Fecha</th>';
            html += '                           <th>Evento</th>';
            html += '                           <th>Folio</th>';
            html += '                           <th>Cuenta</th>';
            html += '                           <th>Monto</th>';
            html += '                           <th>Estatus Bancos</th>';
            html += '                           <th>Usuario</th>';
            html += '                           <th>Motivo / Observaciones</th>';
            html += '                       </tr>';
            html += '                   </thead>';
            html += '                   <tbody>';

            $.each(historial, function(index, item) {
                var cuenta = [
                    item.banco || '',
                    item.nombre_cuenta || '',
                    item.numero_cuenta || ''
                ].filter(function(valor) { return valor !== ''; }).join(' - ');

                html += '                   <tr>';
                html += '                       <td>' + escapeHtmlSeccion24(item.fecha_evento || '') + '</td>';
                html += '                       <td>' + escapeHtmlSeccion24(item.tipo_evento || '') + '</td>';
                html += '                       <td>' + escapeHtmlSeccion24(item.folio_banco || 'Sin folio') + '</td>';
                html += '                       <td>' + escapeHtmlSeccion24(cuenta || 'Sin cuenta') + '</td>';
                html += '                       <td class="text-right">' + formatoMonedaSeccion24(item.monto || 0) + ' ' + escapeHtmlSeccion24(item.moneda || '') + '</td>';
                html += '                       <td>' + renderBadgeHistorialBancosSeccion24(item.estatus_movimiento || '') + '</td>';
                html += '                       <td>' + escapeHtmlSeccion24(item.usuario_accion_nombre || 'Sistema/Bancos') + '</td>';
                html += '                       <td>';

                if (item.motivo) {
                    html += '                       <strong>Motivo:</strong> ' + escapeHtmlSeccion24(item.motivo) + '<br>';
                }

                if (item.observaciones) {
                    html += '                       <small>' + escapeHtmlSeccion24(item.observaciones) + '</small>';
                }

                html += '                       </td>';
                html += '                   </tr>';
            });

            html += '                   </tbody>';
            html += '               </table>';
            html += '           </div>';
        }

        html += '           </div>';
        html += '       </div>';
        html += '   </div>';
        html += '</div>';

        return html;
    }



    function renderPagosSeccion24(pagos, puedeGestionar, cuentas, tipoMoneda) {

        var html = '';

        cuentasBancariasSeccion24 = cuentas || [];
        tipoMonedaSeccion24 = tipoMoneda || 'MXN';

        if (!pagos || pagos.length === 0) {
            $('#contenedor_pagos_seccion2_4').html(
                '<h5 class="titulo-seccion-24"><strong>Pagos 0 de 0</strong></h5>' +
                '<div class="alert alert-warning text-center">No hay pagos programados.</div>'
            );
            return;
        }

        var totalPagos = pagos.length;
        var pagosAplicados = 0;

        $.each(pagos, function(index, pago) {
            if (pago.estatus_pago === 'Pagado' || pago.movimiento_aplicado_bancos === true) {
                pagosAplicados++;
            }
        });

        html += '<h5 class="titulo-seccion-24"><strong>Pagos ' + pagosAplicados + ' de ' + totalPagos + '</strong></h5>';

        $.each(pagos, function(index, pago) {

            var pagado = pago.estatus_pago === 'Pagado';
            var movimientoPendiente = pago.movimiento_pendiente_bancos === true || pago.estatus_movimiento_banco === 'Pendiente';
            var movimientoCancelado = pago.movimiento_cancelado_bancos === true || pago.estatus_movimiento_banco === 'Cancelado';
            var cancelacionSolicitada = pago.cancelacion_solicitada_bancos === true;
            var sinCuentas = (!cuentas || cuentas.length <= 0);

            var deshabilitadoPago = (!pago.habilitado || !puedeGestionar || pagado || movimientoPendiente) ? 'disabled' : '';

            var deshabilitarFirmaPorCuenta = (!pagado && !movimientoPendiente && sinCuentas) ? 'disabled' : '';

            html += '<div class="card mb-3 pago-card-24">';
            html += '   <div class="card-header text-center">';
            html += '       <h4><strong>Pago ' + pago.numero_parcialidad + '</strong> &nbsp; &nbsp; ';

            if (pagado) {
                if (cancelacionSolicitada) {
                    html += '<span class="badge badge-warning">Pagado con cancelación solicitada</span>';
                } else {
                    html += '<span class="badge badge-success">Pago aplicado</span>';
                }
            } else if (movimientoPendiente) {
                html += '<span class="badge badge-warning">Pendiente en Bancos</span>';
            } else if (pago.habilitado) {
                html += '<span class="badge badge-primary">Pendiente de Pago</span>';
            } else {
                html += '<span class="badge badge-secondary">Bloqueado</span>';
            }

            if (movimientoCancelado) {
                html += ' <span class="badge badge-info">Cancelación autorizada</span>';
            }

            if (pago.folio_movimiento_banco) {
                html += '<br><small class="text-muted">Movimiento: ' + escapeHtmlSeccion24(pago.folio_movimiento_banco) + '</small>';
            }

            html += '   </h4>   </div>';

            html += '   <div class="card-body">';

            if (cancelacionSolicitada) {
                html += '<div class="alert alert-warning text-center">';
                html += '<i class="clock icon"></i> La cancelacion de este pago esta pendiente en Bancos. ';
                html += 'El pago permanece como <strong>Pagado</strong> hasta que Bancos autorice o rechace la cancelacion.';
                html += '</div>';
            }

            if (movimientoPendiente) {
                html += '<div class="alert alert-warning text-center">';
                html += '<i class="clock icon"></i> Este pago está pendiente de autorización/aplicación en el módulo de Bancos. ';
                html += 'No se podrá modificar el monto, fecha ni cuenta bancaria hasta que Bancos lo deje como <strong>Aplicado</strong> o <strong>Cancelado</strong>. ';
                html += 'Si Bancos lo deja como <strong>Aplicado</strong>, el pago quedará realizado; si lo deja como <strong>Cancelado</strong>, deberás corregirlo.';
                html += '</div>';
            }

            if (movimientoCancelado) {
                html += '<div class="alert alert-success text-center">';
                html += '<i class="check icon"></i> Bancos canceló el movimiento. Puedes corregir este pago y volver a enviarlo a Bancos.';
                html += '</div>';
            }

            html += '       <form class="form_pago_parcialidad_24" enctype="multipart/form-data">';
            html += '           {{ csrf_field() }}';
            html += '           <input type="hidden" name="id_requisicion_reporte_parcialidad" value="' + pago.id_requisicion_reporte_parcialidad + '">';

            html += '           <div class="form-row text-center">';

            // MONTO PAGADO
            html += '               <div class="form-group col-md-3">';
            html += '                   <label class="font-weight-bold">Monto pagado</label>';
            html += '                   <div class="input-group">';
            html += '                       <div class="input-group-prepend">';
            html += '                           <span class="input-group-text">$</span>';
            html += '                       </div>';
            html += '                       <input ';
            html += '                           type="number" ';
            html += '                           step="0.01" ';
            html += '                           min="0" ';
            html += '                           class="form-control text-right monto_pagado_24" ';
            html += '                           name="monto_pagado" ';
            html += '                           value="' + (pago.monto_pagado || '') + '" ';
            html += '                           ' + deshabilitadoPago + '>';
            html += '                   </div>';
            html += '               </div>';

            // FECHA PROGRAMADA
            html += '               <div class="form-group col-md-3">';
            html += '                   <label class="font-weight-bold">Fecha programada</label>';
            html += '                   <input type="date" class="form-control" value="' + (pago.fecha_programada || '') + '" readonly>';
            html += '               </div>';

            // FECHA PAGO REALIZADO
            html += '               <div class="form-group col-md-3">';
            html += '                   <label class="font-weight-bold">Fecha pago realizado</label>';
            html += '                   <input type="date" class="form-control" name="fecha_pago_realizado" value="' + (pago.fecha_pago_realizado || '') + '" ' + deshabilitadoPago + '>';
            html += '               </div>';

            // CUENTA BANCARIA
            html += '               <div class="form-group col-md-3 cuenta-bancaria-pago-24">';
            html += '                   <label class="font-weight-bold">Cuenta bancaria</label>';
            html +=                     renderSelectCuentaBancariaSeccion24(pago, cuentas, deshabilitadoPago, tipoMoneda);
            html += '               </div>';

            html += '           </div>';

            html += '           <div class="form-row text-center">';
            html += '               <div class="form-group col-md-12">';
            html += '                   <label class="font-weight-bold">Estatus Firma</label>';

            if (!pagado && !movimientoPendiente) {
                html += '               <button type="button" class="btn btn-primary btn-block firmar_pago_24" ' + deshabilitadoPago + ' ' + deshabilitarFirmaPorCuenta + '>';
                html += '                   <i class="paper plane icon"></i> Enviar pago a Bancos';
                html += '               </button>';
            } else if (movimientoPendiente) {
                html += '               <button type="button" class="btn btn-warning btn-block" disabled>';
                html += '                   <i class="clock icon"></i> Pendiente de autorización en Bancos';
                html += '               </button>';
            } else if (cancelacionSolicitada) {
                html += '               <button type="button" class="btn btn-warning btn-block" disabled>';
                html += '                   <i class="clock icon"></i> Cancelacion solicitada en Bancos';
                html += '               </button>';
            } else {
                html += '               <button type="button" class="btn btn-success btn-block deshacer_pago_24" ';
                html += '                   data-id_parcialidad="' + pago.id_requisicion_reporte_parcialidad + '" ';
                html += '                   ' + (puedeGestionar ? '' : 'disabled') + '>';
                html += '                    <i class="undo icon"></i> &nbsp; Solicitar cancelación en Bancos';
                html += '               </button>';
            }

            html += '               </div>';
            html += '           </div>';

            html +=             renderHistorialBancarioSeccion24(pago);

            html += '       </form>';

            html += '   </div>';
            html += '</div>';
        });

        $('#contenedor_pagos_seccion2_4').html(html);
    }



    $(document).on('change', '.custom-file-input', function () {

        var maxSize = 5 * 1024 * 1024; // 5 MB
        var archivos = this.files;
        var valido = true;
        var mensaje = '';

        for (var i = 0; i < archivos.length; i++) {

            if (!archivos[i].name.toLowerCase().endsWith('.pdf')) {
                valido = false;
                mensaje = 'Solo se permiten archivos PDF.';
                break;
            }

            if (archivos[i].type && archivos[i].type !== 'application/pdf') {
                valido = false;
                mensaje = 'El archivo debe ser un PDF válido.';
                break;
            }

            if (archivos[i].size > maxSize) {
                valido = false;
                mensaje = 'Cada archivo debe pesar máximo 5 MB.';
                break;
            }
        }

        if (!valido) {
            mostrarMensajePago24(mensaje, 'danger');

            $(this).val('');
            $(this).next('.custom-file-label').html('Seleccionar archivo');
            return;
        }

        var fileName = '';

        if (archivos.length > 1) {
            fileName = archivos.length + ' archivos seleccionados';
        } else if (archivos.length === 1) {
            fileName = archivos[0].name;
        } else {
            fileName = 'Seleccionar archivo';
        }

        $(this).next('.custom-file-label').html(fileName);
    });


    $(document).on('change', '.select_cuenta_bancaria_24, .monto_pagado_24', function () {

        var form = $(this).closest('form');
        var selectCuenta = form.find('.select_cuenta_bancaria_24');
        var monto = parseFloat(form.find('.monto_pagado_24').val() || 0);
        var limite = parseFloat(selectCuenta.find(':selected').data('limite') || 0);

        if (selectCuenta.val() && monto > 0 && monto > limite) {
            mostrarMensajePago24(
                'El monto capturado supera el limite sin autorizacion de la cuenta seleccionada. Al enviarlo se mandara a autorizacion en Bancos.',
                'warning'
            );
        }
    });


    function cargarModalSeccion24() {

        var id = $('#id_requisicion_reporte_24').val();

        $.ajax({
            url: "{{ url('show_detalles_requisicion_reporte_seccion2_4') }}",
            method: "POST",
            dataType: "json",
            data: {
                id_requisicion_reporte: id,
                _token: $('input[name="_token"]').val()
            },
            success: function(response) {

                var data = response.data;

                $('#bloque_nuevo_seccion2_4').hide();
                $('#bloque_legacy_seccion2_4').hide();
                $('#bloque_sin_seccion_22_seccion2_4').hide();

                if (data.modo_24 === 'nuevo') {

                    $('#bloque_nuevo_seccion2_4').show();

                    $('#total_requisicion_24').text(formatoMonedaSeccion24(data.total_requisicion));
                    $('#total_pagado_24').text(formatoMonedaSeccion24(data.total_pagado));
                    $('#saldo_pendiente_24').text(formatoMonedaSeccion24(data.saldo_pendiente));

                    $('#fecha_siguiente_pago_24').text(data.fecha_siguiente_pago_display || 'Sin fecha');
                    $('#tipo_pago_24').text(data.tipo_pago || 'Sin definir');
                    $('#tipo_moneda_24').text(data.tipo_moneda || 'Sin definir');
                    $('#estatus_pago_general_24').text(data.estatus_pago_general || 'Pendiente de pago');

                    $('#estatus_pago_general_24')
                        .removeClass('badge-success badge-warning badge-danger badge-secondary');

                    if (data.estatus_pago_general === 'Pago Finalizado') {
                        $('#estatus_pago_general_24').addClass('badge-success');
                    } else if (data.estatus_pago_general === 'Pagos realizados con saldo pendiente') {
                        $('#estatus_pago_general_24').addClass('badge-danger');
                    } else {
                        $('#estatus_pago_general_24').addClass('badge-warning');
                    }

                    $('#contenedor_archivos_globales_seccion2_4').html(
                        renderArchivosGlobalesSeccion24(
                            data.facturas_globales || [],
                            data.complementos_globales || [],
                            data.puede_gestionar_pagos,
                            data.datos_reporte ? data.datos_reporte.numero_cotizacion : ''
                        )
                    );

                    renderPagosSeccion24(
                        data.pagos,
                        data.puede_gestionar_pagos,
                        data.cuentas_bancarias || [],
                        data.tipo_moneda || 'MXN'
                    );
                }

                if (data.modo_24 === 'legacy') {

                    $('#bloque_legacy_seccion2_4').show();

                    var htmlFirma = '';

                    if (data.firma_pago && data.firma_pago.estatus_firma == 1) {
                        htmlFirma += '<div class="alert alert-success">';
                        htmlFirma += '<strong>Pago aprobado.</strong>';
                        htmlFirma += '</div>';
                    } else {
                        htmlFirma += '<div class="alert alert-info">';
                        htmlFirma += 'Este registro usa el flujo anterior de aprobación de pago.';
                        htmlFirma += '</div>';

                        htmlFirma += '<button type="button" class="ui button fluid blue requisicion_estatus_pago" ';
                        htmlFirma += 'data-seccion="2.4" ';
                        htmlFirma += 'data-id="' + (data.firma_pago ? data.firma_pago.id_requisicion_firma : '') + '" ';
                        htmlFirma += 'data-id_usuario="{{ session('id_usuario') }}" ';
                        htmlFirma += 'data-id_requisicion_reporte="' + id + '">';
                        htmlFirma += 'Firmar pago';
                        htmlFirma += '</button>';
                    }

                    $('#firma_pago_legacy_contenedor').html(htmlFirma);
                }

                if (data.modo_24 === 'sin_seccion_22') {
                    $('#bloque_sin_seccion_22_seccion2_4').show();
                }

                if (!$('#create_seccion2_4_modal').hasClass('show')) {
                    $('#create_seccion2_4_modal').modal('show');
                } else {
                    $('#create_seccion2_4_modal .modal-body').scrollTop(0);
                }

            },
            error: function() {
                mostrarMensajePago24('No fue posible cargar la información de la sección 2.4', 'danger');
            }
        });
    }

    $(document).on('click', '.create_seccion2_4', function() {
        cargarModalSeccion24();
    });

    function refrescarFilaDetalleSeccion24SiExiste() {
        if (typeof window.refrescarFilaSeccion24Requisicion === 'function') {
            window.refrescarFilaSeccion24Requisicion({ forzar: true });
        }
    }

    /**
     * Guardar archivos globales de pago.
     */
    $(document).on('click', '.guardar_archivos_globales_24', function() {

        var form = $('#form_archivos_globales_24')[0];
        var formData = new FormData(form);

        $.ajax({
            url: "{{ url('guardar_pago_parcialidad_requisicion') }}",
            method: "POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                mostrarMensajePago24(response.message, 'success');

                setTimeout(function () {
                    $('body').addClass('modal-open');
                    cargarModalSeccion24();
                    refrescarFilaDetalleSeccion24SiExiste();
                }, 300);

            },
            error: function(xhr) {
                mostrarMensajePago24(
                    xhr.responseJSON && xhr.responseJSON.message
                        ? xhr.responseJSON.message
                        : 'No fue posible guardar los archivos.',
                    xhr.status === 422 ? 'warning' : 'danger'
                );
            }
        });
    });

    /**
     * Enviar pago a Bancos.
     * Guarda monto + fecha + cuenta bancaria.
     * Bancos aplica directo si no supera limite; si lo supera crea autorizacion.
     */
    $(document).on('click', '.firmar_pago_24', function() {

        var boton = this;
        var formJq = $(boton).closest('form');
        var monto = parseFloat(formJq.find('input[name="monto_pagado"]').val() || 0);
        var fechaPago = formJq.find('input[name="fecha_pago_realizado"]').val();
        var cuenta = formJq.find('select[name="id_banco_cuenta"]').val();
        var limiteCuenta = parseFloat(formJq.find('select[name="id_banco_cuenta"] option:selected').data('limite') || 0);

        if (monto <= 0) {
            mostrarMensajePago24('Debes capturar un monto pagado válido.', 'warning');
            return;
        }

        if (!fechaPago) {
            mostrarMensajePago24('Debes capturar la fecha de pago realizado.', 'warning');
            return;
        }

        if (!cuenta) {
            mostrarMensajePago24('Debes seleccionar la cuenta bancaria con la que se realizará el pago.', 'warning');
            return;
        }

        var mensajeConfirmacion = monto > limiteCuenta
            ? 'El monto supera el limite de la cuenta seleccionada. Se enviara a autorizacion en Bancos. Deseas continuar?'
            : 'El monto esta dentro del limite de la cuenta seleccionada. Se aplicara directamente en Bancos. Deseas continuar?';

        mostrarConfirmacionPago24(mensajeConfirmacion, function () {

            var form = $(boton).closest('form')[0];
            var formData = new FormData(form);

            $.ajax({
                url: "{{ url('firmar_pago_parcialidad_requisicion') }}",
                method: "POST",
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    mostrarMensajePago24(response.message, 'success');

                    setTimeout(function () {
                        $('body').addClass('modal-open');
                        cargarModalSeccion24();
                        refrescarFilaDetalleSeccion24SiExiste();
                    }, 300);

                },
                error: function(xhr) {
                    mostrarMensajePago24(
                        xhr.responseJSON && xhr.responseJSON.message
                            ? xhr.responseJSON.message
                            : 'No fue posible enviar el pago a Bancos.',
                        xhr.status === 422 ? 'warning' : 'danger'
                    );
                }
            });

        });
    });

    /**
     * Solicitar cancelación del pago en Bancos.
     * Solicita motivo y conserva el pago aplicado hasta que Bancos resuelva.
     */
    $(document).on('click', '.deshacer_pago_24', function() {

        var idParcialidad = $(this).data('id_parcialidad');

        $('#id_parcialidad_cancelar_pago_24').val(idParcialidad);
        $('#motivo_cancelacion_pago_24').val('');

        $('#motivo_cancelacion_pago_24_modal').modal('show');
    });


    $(document).on('click', '#confirmar_cancelacion_pago_24', function() {

        var idParcialidad = $('#id_parcialidad_cancelar_pago_24').val();
        var motivo = $.trim($('#motivo_cancelacion_pago_24').val());

        if (!motivo) {
            mostrarMensajePago24('Debes capturar el motivo para solicitar la cancelación del movimiento.', 'warning');
            return;
        }

        $.ajax({
            url: "{{ url('deshacer_pago_parcialidad_requisicion') }}",
            method: "POST",
            dataType: "json",
            data: {
                id_requisicion_reporte_parcialidad: idParcialidad,
                motivo_cancelacion: motivo,
                _token: $('input[name="_token"]').val()
            },
            success: function(response) {
                $('#motivo_cancelacion_pago_24_modal').modal('hide');
                mostrarMensajePago24(response.message, 'success');

                setTimeout(function () {
                    $('body').addClass('modal-open');
                    cargarModalSeccion24();
                    refrescarFilaDetalleSeccion24SiExiste();
                }, 300);

            },
            error: function(xhr) {
                mostrarMensajePago24(
                    xhr.responseJSON && xhr.responseJSON.message
                        ? xhr.responseJSON.message
                        : 'No fue posible solicitar la cancelación del pago.',
                    xhr.status === 422 ? 'warning' : 'danger'
                );
            }
        });
    });


    $('#motivo_cancelacion_pago_24_modal').on('hidden.bs.modal', function () {
        if ($('#create_seccion2_4_modal').hasClass('show')) {
            $('body').addClass('modal-open');
        }
    });


    /**
     * Eliminar archivo de pago.
     * Permitido aunque el pago esté firmado, siempre que el usuario tenga permiso.
     */
    $(document).on('click', '.eliminar_archivo_pago_24', function() {

        var idArchivo = $(this).data('id_archivo');

        mostrarConfirmacionPago24('¿Deseas eliminar este archivo?', function () {

            $.ajax({
                url: "{{ url('eliminar_archivo_pago_requisicion') }}",
                method: "POST",
                dataType: "json",
                data: {
                    id_requisicion_reporte_pago_archivo: idArchivo,
                    _token: $('input[name="_token"]').val()
                },
                success: function(response) {
                    mostrarMensajePago24(response.message, 'success');

                    setTimeout(function () {
                        $('body').addClass('modal-open');
                        cargarModalSeccion24();
                        refrescarFilaDetalleSeccion24SiExiste();
                    }, 300);

                },
                error: function(xhr) {
                    mostrarMensajePago24(
                        xhr.responseJSON && xhr.responseJSON.message
                            ? xhr.responseJSON.message
                            : 'No fue posible eliminar el archivo.',
                        xhr.status === 422 ? 'warning' : 'danger'
                    );
                }
            });

        });
    });

    $('#create_seccion2_4_modal').on('hidden.bs.modal', function () {
        $('#bloque_nuevo_seccion2_4').hide();
        $('#bloque_legacy_seccion2_4').hide();
        $('#bloque_sin_seccion_22_seccion2_4').hide();
        $('#contenedor_pagos_seccion2_4').html('');
        $('#contenedor_archivos_globales_seccion2_4').html('');
        $('#firma_pago_legacy_contenedor').html('');

        $('#fecha_siguiente_pago_24').text('Sin fecha');
        $('#tipo_pago_24').text('Sin definir');
        $('#tipo_moneda_24').text('Sin definir');
        $('#estatus_pago_general_24')
            .text('Pendiente de pago')
            .removeClass('badge-success badge-danger badge-warning')
            .addClass('badge-secondary');
    });

</script>