{extends file="$layouts_admin"}
{block name="head"}

 

<link
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
  rel="stylesheet"
/>

 
{/block}

{block name="content"}

<style type="text/css">

    .list-group{
        max-height: 150px;
        margin-bottom: 10px;
        overflow:scroll;
        -webkit-overflow-scrolling: touch;
    }    

    .swal2-container {
         z-index: 9999;
      }

.wrapper {
  overflow: hidden;  
}

ul.breadcrumbs {
  margin: 0;
  padding: 0;
  display: flex; /* Cambiar a flex para un mejor ajuste en pantallas pequeñas */
  flex-wrap: wrap; /* Permitir que los elementos se ajusten en múltiples líneas si es necesario */
  justify-content:center;
}

ul.breadcrumbs li {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  display: inline-block;
  border-left: 1px solid #ccc;
  transition: 0.3s ease;
}

ul.breadcrumbs li:hover:before {
  /* border-left: 10px solid #5e6e82; */
}

ul.breadcrumbs li:hover a {
  /* color: white;
  background: #5e6e82; */
 
}

ul.breadcrumbs li:before {
  content: "";
  position: absolute;
  right: -9px;
  top: 50%; /* Centrar el triángulo verticalmente */
  transform: translateY(-50%); /* Ajustar la posición */
  z-index: 20;
  border-left: 10px solid #fff;
  border-top: 22px solid transparent;
  border-bottom: 22px solid transparent;
  transition: 0.3s ease;
}

ul.breadcrumbs li:after {
  content: "";
  position: absolute;
  right: -10px;
  top: 50%; /* Centrar el triángulo verticalmente */
  transform: translateY(-50%); /* Ajustar la posición */
  z-index: 10;
  border-left: 10px solid #ccc;
  border-top: 22px solid transparent;
  border-bottom: 22px solid transparent;
}

ul.breadcrumbs li.active {
  background: #5e6e82; /* Fondo para el activo */
}

ul.breadcrumbs li.active a {
  color: white !important; /* Color del texto activo */
  padding: 0 15px 0 25px; /* Ajustar el padding */
  background: #5e6e82;
}

ul.breadcrumbs li.first {
  border-left: none;
}

ul.breadcrumbs li.first a {
  font-size: 18px;
  padding-left: 20px;
  border-radius: 5px 0px 0px 5px;
}

ul.breadcrumbs li.last:before {
  display: none;
}

ul.breadcrumbs li.last:after {
  display: none;
}

ul.breadcrumbs li.last a {
  padding-right: 20px;
  border-radius: 0px 40px 40px 0px;
}

ul.breadcrumbs li a {
  display: block;
  font-size: 12px;
  line-height: 40px;
  color: #757575;
  padding: 0px 15px 0px 25px;
  text-decoration: none;
  background: #fff;
  border: 1px solid #ddd;
  white-space: nowrap; /* Evitar que el texto se envuelva */
  overflow: hidden;
  transition: 0.3s ease;
}

ul.breadcrumbs li.active:before {
  display: block; /* Mostrar el triángulo en el activo */
}

ul.breadcrumbs li.active:after {
  display: block; /* Mostrar el triángulo secundario en el activo */
}

@media (max-width: 768px) {
  ul.breadcrumbs {
    flex-direction: column; /* Cambiar a una columna en pantallas más pequeñas */
  }

  ul.breadcrumbs li {
    border-left: none; /* Eliminar el borde izquierdo en pantallas pequeñas */
    margin-bottom: 5px; /* Espaciado entre elementos */
    margin-right: 10px;
  }
}
ul.breadcrumbs li.active:before {
  border-left: 10px solid #5e6e82; /* Cambia el color del triángulo al hacer hover sobre el activo */
}

.cursor_manito {
  cursor: pointer;
}

table.estilosTabla > :not(caption) > * > * {
        /*
        padding-top: 5px !important;
        padding-bottom: 5px !important;
        */
    }

    .quitar_borde_puntos_suspencivos{
        border: none;
        background: transparent;
    }

    .quitar_borde_puntos_suspencivos.dropdown-toggle::after {
        display: none;
    }

    table.estilosTabla > :not(caption) > tr {
        border-bottom: 1px solid #dee2e6; /* Bootstrap's default border color */
    }

    table.estilosTabla > :not(caption) > * > * {
        border-bottom: 1px solid #dee2e6; /* Bootstrap's default border color */
   }

   .btn-edit-referencia-personal {
         margin-bottom: 4px; 
         background-color: #001b3b; 
         color: white; 
         border: 1px solid rgb(211, 202, 192) !important; 
         box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; 
         float: inline-end;
    }

   .btn-eliminar-referencia-personal {
      margin-bottom: 4px;
      background-color: red;
      color: white;
      border: 1px solid rgb(211, 202, 192) !important;
      box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
      float: inline-end;
    }

   .btn-edit-referencia-personal:hover i,
   .btn-eliminar-referencia-personal:hover i {
      color: white; /* Mantén el color blanco del icono en hover */
   }

   .tamano-icono{
      font-size:small;
   }
    
   .centrar-botones{
      text-align: center;
      justify-content: center;
      display: flex;
      padding: 0px;
   }

   .btn-descargar {
         margin-bottom: 4px; 
         background-color: #001b3b; 
         color: white; 
         border: 1px solid rgb(211, 202, 192) !important; 
         box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; 
         float: inline-end;
    }

   .btn-eliminar {
      margin-bottom: 4px;
      background-color: red;
      color: white;
      border: 1px solid rgb(211, 202, 192) !important;
      box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
      float: inline-end;
    }

   .btn-descargar:hover i,
   .btn-eliminar:hover i {
      color: white; /* Mantén el color blanco del icono en hover */
   }

   @media (max-width: 576px)
   {
      .btn_general_plan{
         margin-top: 10px;
      }
   }

   .btn-edit {
         margin-bottom: 4px; 
         background-color: #001b3b; 
         color: white; 
         border: 1px solid rgb(211, 202, 192) !important; 
         box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; 
         float: inline-end;
   }

   .btn-eliminar {
      margin-bottom: 4px;
      background-color: red;
      color: white;
      border: 1px solid rgb(211, 202, 192) !important;
      box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
      float: inline-end;
    }

   .btn-edit:hover i,
   .btn-eliminar:hover i {
      color: white; /* Mantén el color blanco del icono en hover */
   }


.bg-succes{
   background-color: green;
}
 

.alert.alert-danger {
    padding: 15px;
    border: 1px solid #d9534f;
    border-radius: 4px;
    background-color: #f2dede;
    color: #a94442;
}
.info-row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 8px;
}
.label {
    font-weight: 600;
    width: 150px; /* Ancho fijo para los títulos */
    display: inline-block;
}
.value {
    flex: 1; /* Ocupa el espacio restante */
}


.btn-add-code {
    margin-bottom: 4px;
    background-color: #1e5eab;
    color: white;
    border: 1px solid rgb(211, 202, 192) !important;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
    float: inline-end;
}
 
.btn-add-code:hover i {
   color: white; /* Mantén el color blanco del icono en hover */
}

</style>

    <input
         type="text"
         value="{$url_base}"
         disabled
         hidden
         id="URL_BASE"
    />

    <input
         type="text"
         value="{$UUID_ENC}"
         disabled
         hidden
         id="UUID_ENC"
    />

    <input
         type="text"
         value="{$UUID}"
         disabled
         hidden
         id="UUID"
    />

    <input
         type="text"
         value="{$id_ifp}"
         disabled
         hidden
         id="id_ifp"
    />

    <input
         type="text"
         value="{$id_user}"
         disabled
         hidden
         id="ID_USER"
    />

   <input
         type="text"
         value="{$aplicacion_id_square}"
         disabled
         hidden
         id="aplicacion_id_square"
    />

    <input
         type="text"
         value="{$location_id_square}"
         disabled
         hidden
         id="location_id_square"
    />

   <input
         type="text"
         value="{$version_square}"
         disabled
         hidden
         id="version_square"
   />

   <input
         type="text"
         value="{$token_square}"
         disabled
         hidden
         id="token_square"
   />

   <input
         type="text"
         value="{$url_square}"
         disabled
         hidden
         id="url_square"
   />

   <input
         type="text"
         value="{$bloquear_botones}"
         disabled
         hidden
         id="bloquear_botones"
   />

    

 
<div class="row pantalla_cargada"  style="display: none;">
   <div class="col-12 col-lg-12 col-sm-12 col-md-12">
      <div class="panel">
         <div class="panel-hdr">
            <h2><span></span>Prospecting Stages  <span class="ms-2 titulo_cabecera_credito"></span>  </h2>

            <div class="panel-toolbar">
               <div class="btn-group">
                  <button
                     class="btn btn-sm btn-default btn-edicion"
                     data-edicion="1"
                  >
                     <i class="fa-solid fa-pencil"></i>
                     <span class="btn-edicion-text">Enable editing</span>
                  </button>
               </div>
            </div>

         </div>

         <div class="panel-container show" id="ibox_form">
            <div class="panel-content">
               <div class="wrapper">
                  <ul class="breadcrumbs">

                     <li class="cursor_manito enableMenu" data-id="datos_prestamos" style="display: none;">
                        <a>Loan details</a>
                     </li>

                     <li class="cursor_manito enableMenu" data-id="historial_crediticio" style="display: none;">
                        <a>Credit history</a>
                     </li>

                     <li class="cursor_manito" data-id="general_information">
                        <a>General information</a>
                     </li>

                     <li class="cursor_manito" data-id="referencia">
                        <a>References</a>
                     </li>

                     <li class="cursor_manito" data-id="documento_respaldo">
                        <a>Supporting documents</a>
                     </li>

                     <li class="cursor_manito" data-id="preaprobacion">
                        <a>Pre-approval</a>
                     </li>

                     <li class="cursor_manito active" data-id="plan_pago">
                        <a>Payment plan</a>
                     </li>

                     <li class="cursor_manito" data-id="desembolzo">
                        <a>Disbursement</a>
                     </li>

                     <!--  -->
                  </ul>
               </div>
            </div>
         </div>
      </div>

      {**}
      <div class="col-md-12">
         <div class="panel">
            <div class="panel-hdr">
               <h2>Loan information</h2>
            </div>

            <div class="panel-container show" id="ibox_form">
               <div class="panel-content">
                  <div class="px-2">
                     <div>
                        <div class="row">
                           <div class="col-md-12 col-sm-12">
                              <div class="mb-3 row">
                                 <label
                                    for="valor_monto_solicitado_li"
                                    class="col-sm-3"
                                    ><span class="h6"
                                       >Value of the requested amount</span
                                    ><span class="text-danger"></span
                                 ></label>
                                 <div class="col-sm-9">
                                     
                                    <div class="input-group">
                                       <input
                                          type="text"
                                          id="valor_monto_solicitado_li"
                                          name="valor_monto_solicitado_li"
                                          class="form-control valor_monto_solicitado_li"
                                          disabled
                                       />
                                       <span class="input-group-text" >$</span>
                                    </div>

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

                           <div class="col-md-12 col-sm-12">
                              <div class="mb-3 row">
                                 <label
                                    for="motivo_prestamo_li"
                                    class="col-sm-3"
                                    ><span class="h6">Reason for the loan</span
                                    ><span class="text-danger"></span
                                 ></label>
                                 <div class="col-sm-9">
                                    <textarea
                                       rows="3"
                                       id="motivo_prestamo_li"
                                       name="motivo_prestamo_li"
                                       class="form-control motivo_prestamo_li"
                                       disabled
                                    ></textarea>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>

      {*configuracion stripe*}

      {*
         <div class="col-md-12">
            <div class="panel">
               <div class="panel-hdr">
                  <h2>Stripe setup for bank accounts only</h2>
               </div>

               <div class="panel-container show" id="ibox_form">
                  <div class="panel-content">
                     <div class="px-2">
                        <form id="rform">
                           <div class="row">

                              <div class="col-md-12 col-sm-12">
                                 <div class="mb-3 row">
                                    <label for="configuracion_stripe_cuentas_bancarias" class="col-sm-3"
                                       ><span class="h6">Select a configuration</span
                                       ><span class="text-danger"></span></label
                                    >
                                    <div class="col-sm-9">
                                       <select
                                          id="configuracion_stripe_cuentas_bancarias"
                                          name="configuracion_stripe_cuentas_bancarias"
                                          class="form-select configuracion_stripe_cuentas_bancarias"
                                       >
                                       
                                       </select>
                                    </div>
                                 </div>
                              </div>

                           </div>
                        </form>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      *}
       
      {*configuracion de stripe*}


      {*metodo de pagos acreditar este solo se hace una ves no es necesario tabla ni cron*}
      <div class="col-md-12">
         <div class="panel">
            <div class="panel-hdr">
               <h2>Specify to which account the loan amount will be credited (Informational only)</h2>
            </div>

            <div class="panel-container show" id="ibox_form">
               <div class="panel-content">
                  <div class="px-2">
                     <form id="rform">
                        <div class="row">

                           <div class="col-md-12 col-sm-12">
                              <div class="mb-3 row">
                                 <label for="tipo_cuenta_acreditar" class="col-sm-3"
                                    ><span class="h6">Disbursement Method</span
                                    ><span class="text-danger">*</span></label
                                 >
                                 <div class="col-sm-9">
                                    <select
                                       id="tipo_cuenta_acreditar"
                                       name="tipo_cuenta_acreditar"
                                       class="form-select tipo_cuenta_acreditar"
                                    >
                                       <option value="" selected disabled>
                                          Select a option
                                       </option>
                                    </select>
                                 </div>
                              </div>
                           </div>
 

                           <div class="col-md-12 col-sm-12 mostrar_no_cash_acreditar" style="display:none"> 
                              <div class="mb-3 row">
                                 <label for="banco_acreditar" class="col-sm-3"
                                    ><span class="h6">Bank</span
                                    ><span class="text-danger">*</span></label
                                 >
                                 <div class="col-sm-9">

                                    <input
                                       type="text"
                                       id="banco_acreditar"
                                       name="banco_acreditar"
                                       class="form-control banco_acreditar"
                                    />

                                    {*
                                       <select
                                          id="banco_acreditar"
                                          name="banco_acreditar"
                                          class="form-select banco_acreditar"
                                       >
                                          <option value="" selected disabled>
                                             Select a option
                                          </option>
                                       </select>
                                    *}
 
                                 </div>
                              </div>
                           </div>

                           <div class="col-md-12 col-sm-12 mostrar_no_cash_acreditar" style="display:none">
                              <div class="mb-3 row">
                                 <label for="numero_cuenta_acreditar" class="col-sm-3"
                                    ><span class="h6">Account number</span
                                    ><span class="text-danger">*</span></label
                                 >
                                 <div class="col-sm-9">
                                    <input
                                       type="text"
                                       id="numero_cuenta_acreditar"
                                       name="numero_cuenta_acreditar"
                                       class="form-control numero_cuenta_acreditar"
                                    />
                                 </div>
                              </div>
                           </div>

                           <div class="col-md-12 col-sm-12 mostrar_no_cash_acreditar" style="display:none">
                              <div class="mb-3 row">
                                 <label for="numero_ruta_acredita" class="col-sm-3"
                                    ><span class="h6">Route number</span
                                    ><span class="text-danger">*</span></label
                                 >
                                 <div class="col-sm-9">
                                    <input
                                       type="text"
                                       id="numero_ruta_acredita"
                                       name="numero_ruta_acredita"
                                       class="form-control numero_ruta_acredita"
                                    />
                                 </div>
                              </div>
                           </div>

                           <div class="col-md-12 col-sm-12 mostrar_no_cash_acreditar" style="display:none"> 
                              <div class="mb-3 row">
                                 <label for="tipo_titular_tarjeta_acreditar" class="col-sm-3"
                                    ><span class="h6">Account Holder Type</span
                                    ><span class="text-danger">*</span></label
                                 >
                                 <div class="col-sm-9">
                                    <select
                                       id="tipo_titular_tarjeta_acreditar"
                                       name="tipo_titular_tarjeta_acreditar"
                                       class="form-select tipo_titular_tarjeta_acreditar"
                                    >
                                       <option value="" selected disabled>
                                          Select a option
                                       </option>

                                       <option value="individual">Individual</option>
                                       <option value="company">Company</option>

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

                           <div class="col-md-12 col-sm-12 mostrar_no_cash_acreditar" style="display:none">
                              <div class="mb-3 row">
                                 <label for="nombre_beneficiario_acreditar" class="col-sm-3"
                                    ><span class="h6">Account Holder</span
                                    ><span class="text-danger">*</span></label
                                 >
                                 <div class="col-sm-9">
                                    <input
                                       type="text"
                                       id="nombre_beneficiario_acreditar"
                                       name="nombre_beneficiario_acreditar"
                                       class="form-control nombre_beneficiario_acreditar"
                                    />
                                 </div>
                              </div>
                           </div>

                           <div class="col-md-12 col-sm-12 mostrar_no_cash_acreditar" style="display:none">
                              <div class="mb-3 row">
                                 <label for="correo_electronico_acreditar" class="col-sm-3"
                                    ><span class="h6">Email</span
                                    ><span class="text-danger">*</span></label
                                 >
                                 <div class="col-sm-9">
                                    <input
                                       type="text"
                                       id="correo_electronico_acreditar"
                                       name="correo_electronico_acreditar"
                                       class="form-control correo_electronico_acreditar"
                                    />
                                 </div>
                              </div>
                           </div>

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



      {*metodo de pago donde de la cuenta de cliente va a pagar las cuotas *}
      <div class="col-md-12">
         <div class="panel">
            <div class="panel-hdr">
 
               <h2>Specify the payment method for installments (Automatic debit for payment of installments)</h2>

               <span class="badge badge-subtle-primary rounded-pill">14</span>

               <div class="panel-toolbar">
                  <button
                     class="btn btn-success mt-2 mb-2 waves-effect waves-themed btnMetodoPago"
                     type="button"
                  >
                     add payment method
                  </button>
               </div>

            </div>

            <div class="panel-container show" id="ibox_form">
               <div>
               
               {* class="panel-content" *}
                  
                  {**}

                  <div class="table-responsive">
                     <table
                        class="table table-striped table-hover estilosTabla"
                        id="clx_datatable"
                        style="margin: 0px"
                     >
                        <thead>
                           <tr>
                              <th class="centrar">Type</th>
                              <th class="centrar">Name</th>
                              <th class="centrar">Payment gateway</th>
                              <th class="centrar">Bank</th>
                              {*
                              <th class="centrar">Account Number</th>
                              
                              *}
                              <th class="centrar">last 4 digits</th>
                              <th class="centrar">State</th>
                              <th class="centrar">Automatic payment</th>
                              <th class="centrar">Verification type</th>
                              <th class="centrar">Verified</th>
                              <th class="centrar"></th>
                           </tr>
                        </thead>

                        <tbody class="tbody_envios_metodo_pagos">

                           <tr><th colspan="9" class="centrar " style=" text-align: center; "> No information</th></tr>

                           {*
                           
                              <tr>
                                 <td class="centrar">1</td>
                                 <td class="centrar">28/abril/2025</td>
                                 <td class="centrar">600.00</td>
                                 <td class="centrar">413.38</td>
                                 <td class="centrar">70.20</td>
                                 <td class="centrar">5,656.82</td>
                              </tr>
                           *}
 
                        </tbody>
                     </table>
                  </div>

                  {**}

                  
                  <div style=" padding: 10px; float: inline-end; ">

                     {*boton que me servira para guardar solo tabla*}

                     <button
                        class="btn btn-danger mt-2 waves-effect waves-themed ver_errores_tarjetas"
                        type="button"  style="display: none;"
                     >
                        See errors
                     </button>

                     <button
                        class="btn btn-primary mt-2 waves-effect waves-themed guardar_metodos_pagos"
                        type="button"
                        id="submit"
                        style="display: none;"
                     >
                        Save information
                     </button>

                     <button
                        class="btn btn-primary mt-2 waves-effect waves-themed loading_guardar_metodos_pagos"
                        style="display: none"
                        disabled
                     >
                        <div
                           style="
                              display: flex;
                              align-items: center;
                           "
                        >
                           <span
                              class="spinner-border spinner-border-sm"
                              style="
                                 height: 20px;
                                 width: 20px;
                                 margin-right: 5px;
                              "
                              role="status"
                              aria-hidden="true"
                           ></span>
                           Save information
                        </div>
                     </button>
                     {*---*}

                  </div>

                   

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

     
      {**}
      <div class="col-md-12">
         <div class="panel">
            <div class="panel-hdr">
               <h2>Payment plan</h2>
            </div>

            <div class="panel-container show" id="ibox_form">
               <div class="panel-content">
                  <div class="px-2">
                     <form id="rform">
                        <div class="row">


                           <div class="col-md-6 col-sm-6">
                              <div class="mb-3 row">
                                 <label for="plan_crediticio" class="col-sm-3"
                                    ><span class="h6">Credit plan</span
                                    ><span class="text-danger">*</span></label
                                 >
                                 <div class="col-9 col-sm-9 col-lg-9">
                                    <select
                                       id="plan_crediticio"
                                       name="plan_crediticio"
                                       class="form-select plan_crediticio"
                                    >
                                       <option value="" selected disabled>
                                          Select a option
                                       </option>
                                    
                                    </select>
                                 </div>

                                 {*

                                 <div
                                    class="col-sm-3 col-lg-2"
                                    style="display: flex; justify-content: end"
                                 >
                                    <button
                                       class="btn btn-default btn_general_plan"
                                       type="button"
                                       id="submit"
                                    >
                                       Generate paid plan
                                    </button>
                                 </div>

                                 *}



                                 {**}

                              </div>
                           </div>

                           <div class="col-12 col-md-6 col-sm-6">
                              <div class="mb-3 row">
                                    <label
                                       for="numero_pago_cuotas"
                                       class="col-sm-6"
                                       ><span class="h6">Number of payment quotas</span><span class="text-danger">*</span></label>
 
                                    <div class="col-sm-6">
                                       <input
                                          type="number"
                                          id="numero_pago_cuotas"
                                          name="numero_pago_cuotas"
                                          class="form-control numero_pago_cuotas"
                                          disabled
                                       />
                                    </div>
                              </div>
                           </div>

                           <div class="col-12 col-md-12 col-sm-12">
                              <div class="mb-3 row">
                                    <label
                                       for="relacion_cuota_ingreso"
                                       class="col-sm-3"
                                       ><span class="h6">Income quota ratio</span><span class="text-danger">*</span></label>
 
                                    <div class="col-sm-9">
                                    
                                       <div class="input-group mb-3">
                                          <input
                                             class="form-control relacion_cuota_ingreso"
                                             type="number"
                                             id="relacion_cuota_ingreso"
                                             name="relacion_cuota_ingreso"
                                          /><span class="input-group-text" >%</span>
                                       </div>

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

                           <div class="col-md-12 col-sm-12">
                              <div class="mb-3 row">
                                 <label for="cliente_aprueba" class="col-sm-3"
                                    ><span class="h6">Client approves?</span
                                    ><span class="text-danger">*</span></label
                                 >
                                 <div class="col-sm-9">
                                    <select
                                       id="cliente_aprueba"
                                       name="cliente_aprueba"
                                       class="form-select cliente_aprueba"
                                    >
                                       <option value="" selected disabled>
                                          Select a option
                                       </option>

                                       <option value="1">Yes</option>
                                       <option value="2">No</option>
                                                                                 
                                    </select>
                                 </div>
                              </div>
                           </div>



                        </div>

                        <div class="row">
                           <div class="col-md-12">
                              <div
                                 class="mb-3"
                                 style="
                                    display: flex;
                                    justify-content: space-between;
                                 "
                              >
                                 <button
                                    class="btn btn-default mt-2 waves-effect waves-themed back"
                                    type="button"
                                    id="submit"
                                 >
                                    Back
                                 </button>

                                 <button
                                    class="btn btn-default mt-2 waves-effect waves-themed guardar_borrador"
                                    type="button"
                                    id="submit"
                                 >
                                    Save draft
                                 </button>

                                 <button
                                    class="btn btn-default mt-2 waves-effect waves-themed loading_guardar_borrador"
                                    style="display: none"
                                    disabled
                                 >
                                    <div
                                       style="
                                          display: flex;
                                          align-items: center;
                                       "
                                    >
                                       <span
                                          class="spinner-border spinner-border-sm"
                                          style="
                                             height: 20px;
                                             width: 20px;
                                             margin-right: 5px;
                                          "
                                          role="status"
                                          aria-hidden="true"
                                       ></span>
                                       Save draft
                                    </div>
                                 </button>


                                 <div>
                                 
                                    {*---*}
                                    <button
                                       class="btn btn-danger mt-2 waves-effect waves-themed guardar_close_finish"
                                       type="button"
                                       style="display: none"
                                    >
                                       Close and Finish
                                    </button>

                                    <button
                                       class="btn btn-danger mt-2 waves-effect waves-themed loading_guardar_close_finish"
                                       style="display: none"
                                       disabled
                                    >
                                       <div
                                          style="
                                             display: flex;
                                             align-items: center;
                                          "
                                       >
                                          <span
                                             class="spinner-border spinner-border-sm"
                                             style="
                                                height: 20px;
                                                width: 20px;
                                                margin-right: 5px;
                                             "
                                             role="status"
                                             aria-hidden="true"
                                          ></span>
                                          Close and Finish
                                       </div>
                                    </button>
                                    {*--------------------------------------*}

                                    {*---*}
                                    <button
                                       class="btn btn-primary mt-2 waves-effect waves-themed guardar_siguiente"
                                       type="button"
                                       id="submit"
                                    >
                                       Approve and Next
                                    </button>

                                    <button
                                       class="btn btn-primary mt-2 waves-effect waves-themed loading_guardar_siguiente"
                                       style="display: none"
                                       disabled
                                    >
                                       <div
                                          style="
                                             display: flex;
                                             align-items: center;
                                          "
                                       >
                                          <span
                                             class="spinner-border spinner-border-sm"
                                             style="
                                                height: 20px;
                                                width: 20px;
                                                margin-right: 5px;
                                             "
                                             role="status"
                                             aria-hidden="true"
                                          ></span>
                                          Approve and Next
                                       </div>
                                    </button>
                                    {*---*}

                                 </div>

                                  

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

      {**}
      <div class="col-md-12">
         <div class="panel">
            <div class="panel-container show" id="ibox_form">
               <div class="panel-content" style="padding: 0px">
                  <div>
                     <div>
                        <div>
                           <div class="table-responsive">
                              <table
                                 class="table table-striped table-hover estilosTabla"
                                 id="clx_datatable"
                                 style="margin: 0px"
                              >
                                 <thead>
                                    <tr>
                                       <th class="centrar">No. fee</th>
                                       <th class="centrar">Payment date</th>
                                       <th class="centrar">Interest value</th>
                                       <th class="centrar">Capital value</th>
                                       <th class="centrar">Total quota</th>
                                       <th class="centrar">Capital balance</th>
                                    </tr>
                                 </thead>

                                 <tbody class="tbody_envios">

                                    <tr><th colspan="6" class="centrar " style=" text-align: center; "> No information</th></tr>

                                    {*
                                    
                                       <tr>
                                       <td class="centrar">1</td>
                                       <td class="centrar">28/abril/2025</td>
                                       <td class="centrar">600.00</td>
                                       <td class="centrar">413.38</td>
                                       <td class="centrar">70.20</td>
                                       <td class="centrar">5,656.82</td>
                                    </tr>
                                    *}

                                     
 
                                 </tbody>
                              </table>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>

   <div
      class="modal fade"
      id="modalMensaje"
      data-bs-backdrop="static"
      data-bs-keyboard="false"
      tabindex="-1"
      aria-labelledby="staticBackdropLabel"
      aria-hidden="true"
   >
      <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content">
            <div class="modal-header">
               <h5
                  class="modal-title modal_titulo_mensaje"
                  id="staticBackdropLabel"
               >
                  Group Message
               </h5>
               <button
                  type="button"
                  class="btn-close btn_cerrar_confirmacion_modal"
               ></button>
            </div>
            <div class="modal-body text-center">
               <p class="modal_contenido_mensaje">
                  The group advertising campaign has been sent. For more
               </p>
            </div>
         </div>
      </div>
   </div>

   <div
      class="modal fade"
      id="ventana_confirmacion"
      tabindex="-1"
      aria-labelledby="exampleModalLabel__ventanaconfirmacion"
      aria-hidden="true"
      data-bs-backdrop="static"
      data-bs-keyboard="false"
   >
      <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content" style="background-color: white">
            <div class="modal-header">
               <h3 class="titulo_modal_confirmar">Estas seguro de eliminar</h3>
               <button
                  type="button"
                  class="btn-close"
                  id="btn_close_ventana_confirmacion"
               ></button>
            </div>
            <div
               class="modal-body"
               style="background-color: white; border-radius: 10px"
            >
               <div class="row">
                  <div class="col-md-12">
                     <div class="panel-container show" id="ibox_form">
                        <div class="panel-content">
                           <div class="px-2">
                              <div
                                 class="alert alert-danger"
                                 id="emsg"
                                 style="display: none"
                              >
                                 <span id="emsgbody"></span>
                              </div>
                              <input
                                 class="tipo_modal_confirmar"
                                 hidden
                                 disabled
                              />
                              <input class="data_id" hidden disabled />
                              <div class="row">
                                 <div class="col-md-12 col-sm-12">
                                    <h4
                                       class="mensaje_modal_confirmar"
                                       style="text-align: center; color: black"
                                    >
                                       Estas seguro de eliminar
                                    </h4>

                                    <p
                                       class="mensaje_espera_moda_confirmacion mt-3"
                                       style="
                                          text-align: center;
                                          color: red;
                                          font-weight: 600;
                                       "
                                    >
                                       Espere mientras termina el proceso
                                    </p>
                                 </div>
                              </div>

                              <div class="row mt-2">
                                 <div class="col-md-12">
                                    <div style="float: inline-end">
                                       <button
                                          class="btn me-2"
                                          type="button"
                                          id="btn_cerrar_ventana_confirmacion"
                                          style="background: #001b3b"
                                       >
                                          close
                                       </button>
                                       <button
                                          class="btn"
                                          type="button"
                                          id="btn_aplicar_ventana_confirmacion"
                                          style="background: red"
                                       >
                                          Remove
                                       </button>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

<div class="row cargando_pantalla " style=" margin: 0px; ">

   <div
      class="container"
      style="
         display: flex;
         justify-content: center;
         align-items: center;
         height: 45vh;
         box-shadow: 0 0 13px 0 rgba(31,17,173,.08);
         border-radius: 11px;
         background-color: white;
      "
   >
      <div style="text-align: center">
         <span
         class="spinner-border spinner-border-sm"
         style="height: 45px; width: 45px; margin-bottom: 10px"
         role="status"
         aria-hidden="true"
         ></span>
         <br />
         <strong>Please wait while the <span style=" font-weight: 600; ">"Payment plan"</span> screen loads...</strong>
         <br />
      </div>
   </div>

</div>


{*modal para metodo de pagos*}

<div class="modal fade" id="addModalPlanes" tabindex="-1" aria-labelledby="exampleModalLabel_" aria-hidden="true"  data-bs-backdrop="static">
   <div class="modal-dialog modal-lg modal-dialog-centered" style="width: 97%; max-width:97%;">
      <div class="modal-content" style="background-color:white">
         <div class="modal-header">
         <div>
            <h3 class="modal-title" id="exampleModalLabel_">Payment method</h3>
            <span>Please enter your bank information as it is recorded at the bank.</span>
         </div>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
         </div>
         <div class="modal-body" style="background-color:white;border-radius:10px">
          
            <div class="row">
               <div class="col-md-12">
                  <div class="panel-container show" id="ibox_form">
                           <div class="panel-content">
                              <div class="px-2">
                                    <div class="alert alert-danger" id="emsg" style="display: none;">
                                       <span id="emsgbody"></span>
                                    </div>

                                      <input type="text" id="id" name="id" class="form-control id" disabled hidden/>
                                   
                                       <div class="row">

                                          <div class="col-md-12 col-sm-12">
                                                   <div class="mb-3 row">
                                                      <label for="tipo_cuenta" class="col-sm-3"><span class="h6">Account type</span><span class="text-danger">*</span></label>
                                                      <div class="col-sm-9">
                                                         <select id="tipo_cuenta" name="tipo_cuenta" class="form-select tipo_cuenta">
                                                               
                                                               <option value="" selected disabled>Select a option</option>

                                                               {*
                                                                  <option value="1">Savings account</option>
                                                                  <option value="2">Checking Account</option>
                                                                  <option value="3">Credit Card</option>
                                                               *}
                                                                
                                                         </select>
                                                      </div>
                                                   </div>
                                          </div>

                                          <div class="col-md-12 col-sm-12 mostrar_credit_card ocultar_todo_metodo_pago" >
                                                <div class="mb-3 row">
                                                   <label for="tipo_pasarela_pago" class="col-sm-3"><span class="h6">Payment gateway type</span><span class="text-danger">*</span></label>
                                                   <div class="col-sm-9">
                                                      <select id="tipo_pasarela_pago" name="tipo_pasarela_pago" class="form-select tipo_pasarela_pago">
                                                             
                                                            <option value="Stripe">Stripe</option>
                                                            <option value="Square">Square</option>
                                                      </select>
                                                   </div>
                                                </div>
                                          </div>

                                          <div class="col-md-12 col-sm-12 ocultar_tppg">
                                             <div class="mb-3 row">
                                                <label for="tipo_pasarela_pago_general" class="col-sm-3"
                                                   ><span class="h6">General payment gateway</span
                                                   ><span class="text-danger">*</span></label
                                                >
                                                <div class="col-sm-9">
                                                   <select
                                                      id="tipo_pasarela_pago_general"
                                                      name="tipo_pasarela_pago_general"
                                                      class="form-select tipo_pasarela_pago_general"
                                                   >
                                                      <option value="" selected disabled>
                                                         Select a option
                                                      </option>
                                                   </select>
                                                </div>
                                             </div>
                                          </div>

                                          <div class="col-md-12 col-sm-12 ocultar_todo_metodo_pago mostrarDefault">
                                                <div class="mb-3 row">
                                                   <label for="titular_tarjeta" class="col-sm-3"><span class="h6 titulo_metodo_pago_nombre">Card name</span><span class="text-danger">*</span></label>
                                                   <div class="col-sm-9">
                                                      <input type="text" id="titular_tarjeta" name="titular_tarjeta" class="form-control titular_tarjeta" placeholder="Juan perez" >
                                                   </div>
                                                </div>
                                          </div>

                                          <div class="col-md-12 col-sm-12 mostrar_saving_cheking ocultar_todo_metodo_pago"> 
                                             <div class="mb-3 row">
                                                <label for="banco_metodo_pago" class="col-sm-3"
                                                   ><span class="h6">Bank</span
                                                   ><span class="text-danger">*</span></label
                                                >
                                                <div class="col-sm-9">

                                                   <input type="text" id="banco_metodo_pago" name="banco_metodo_pago" class="form-control banco_metodo_pago" >

                                                   {*
                                                      <select
                                                         id="banco_metodo_pago"
                                                         name="banco_metodo_pago"
                                                         class="form-select banco_metodo_pago"
                                                      >
                                                         <option value="" selected disabled>
                                                            Select a option
                                                         </option>
                                                      </select>
                                                   *}

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



                                          <div class="col-md-12 col-sm-12 mostrar_saving_cheking ocultar_todo_metodo_pago">
                                             <div class="mb-3 row">
                                                <label for="numero_cuenta_metodo_pago" class="col-sm-3"
                                                   ><span class="h6">Account number</span
                                                   ><span class="text-danger">*</span></label
                                                >
                                                <div class="col-sm-9">
                                                   <input
                                                      type="text"
                                                      id="numero_cuenta_metodo_pago"
                                                      name="numero_cuenta_metodo_pago"
                                                      class="form-control numero_cuenta_metodo_pago"
                                                   />
                                                </div>
                                             </div>
                                          </div>

                                          <div class="col-md-12 col-sm-12 mostrar_saving_cheking ocultar_todo_metodo_pago"> 
                                             <div class="mb-3 row">
                                                <label for="numero_ruta_metodo_pago" class="col-sm-3"
                                                   ><span class="h6">Route number</span
                                                   ><span class="text-danger">*</span></label
                                                >
                                                <div class="col-sm-9">
                                                   <input
                                                      type="text"
                                                      id="numero_ruta_metodo_pago"
                                                      name="numero_ruta_metodo_pago"
                                                      class="form-control numero_ruta_metodo_pago"
                                                   />
                                                </div>
                                             </div>
                                          </div>

                                          <div class="col-md-12 col-sm-12 mostrar_saving_cheking ocultar_todo_metodo_pago"> 
                                             <div class="mb-3 row">
                                                <label for="tipo_titular_metodo_pago" class="col-sm-3"
                                                   ><span class="h6">Account Holder Type</span
                                                   ><span class="text-danger">*</span></label
                                                >
                                                <div class="col-sm-9">
                                                   <select
                                                      id="tipo_titular_tarjeta_metodo_pago"
                                                      name="tipo_titular_tarjeta_metodo_pago"
                                                      class="form-select tipo_titular_metodo_pago"
                                                   >
                                                      <option value="" selected disabled>
                                                         Select a option
                                                      </option>

                                                      <option value="individual">Individual</option>
                                                      <option value="company">Company</option>

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

                                          <div class="col-md-12 col-sm-12 mostrar_saving_cheking ocultar_todo_metodo_pago"> 
                                             <div class="mb-3 row">
                                                <label for="numero_ruta_metodo_pago" class="col-sm-3"
                                                   ><span class="h6">Email</span
                                                   ><span class="text-danger">*</span></label
                                                >
                                                <div class="col-sm-9">
                                                   <input
                                                      type="text"
                                                      id="email_metodo_pago"
                                                      name="email_metodo_pago"
                                                      class="form-control email_metodo_pago"
                                                   />
                                                </div>
                                             </div>
                                          </div>

                                          {*
                                             <div class="col-md-12 col-sm-12 mostrar_saving_cheking ocultar_todo_metodo_pago" >
                                                <div class="mb-3 row">
                                                   <label for="nombre_beneficiario" class="col-sm-3"
                                                      ><span class="h6">Account Holder</span
                                                      ><span class="text-danger">*</span></label
                                                   >
                                                   <div class="col-sm-9">
                                                      <input
                                                         type="text"
                                                         id="nombre_beneficiario"
                                                         name="nombre_beneficiario"
                                                         class="form-control nombre_beneficiario"
                                                      />
                                                   </div>
                                                </div>
                                             </div>
                                          *}
                                           

                                          <div class="MostrarSoloSquare ocultar_todo_metodo_pago" style="display:none">

                                             <div id="card-container" ></div>
                                          
                                          </div>

                                          <div class="col-md-12 col-sm-12 MostrarSoloStripe ocultar_todo_metodo_pago">
                                                <div class="mb-3 row">
                                                   <label for="numero_tarjeta" class="col-sm-3"><span class="h6">Card number</span><span class="text-danger">*</span></label>
                                                   <div class="col-sm-9">
                                                      <input type="text" id="numero_tarjeta" name="numero_tarjeta" class="form-control numero_tarjeta" placeholder="4242424242424242" >
                                                   </div>
                                                </div>
                                          </div>

                                          <div class="col-md-12 col-sm-12 MostrarSoloStripe ocultar_todo_metodo_pago">
                                                <div class="mb-3 row">
                                                   <label for="codigo_ccv" class="col-sm-3"><span class="h6">CCV </span><span class="text-danger">*</span></label>
                                                   <div class="col-sm-9">
                                                      <input type="text" id="codigo_ccv" name="codigo_ccv" placeholder="123" class="form-control codigo_ccv" >
                                                   </div>
                                                </div>
                                          </div>

                                          <div class="col-md-12 col-sm-12 MostrarSoloStripe ocultar_todo_metodo_pago">
                                                <div class="mb-3 row">
                                                   <label for="exp_month" class="col-sm-3"><span class="h6">Expiration month</span><span class="text-danger">*</span></label>
                                                   <div class="col-sm-9">
                                                      <select id="exp_month" name="exp_month" class="form-select exp_month">
                                                            <option value="" selected="" disabled="">Select a Option</option>
                                                            <option value="1">January</option>
                                                            <option value="2">February</option>
                                                            <option value="3">March</option>
                                                            <option value="4">April</option>
                                                            <option value="5">May</option>
                                                            <option value="6">June</option>
                                                            <option value="7">July</option>
                                                            <option value="8">August</option>
                                                            <option value="9">September</option>
                                                            <option value="10">October</option>
                                                            <option value="11">November</option>
                                                            <option value="12">December</option>
                                                      </select>
                                                   </div>
                                                </div>
                                          </div>

                                          <div class="col-md-12 col-sm-12 MostrarSoloStripe ocultar_todo_metodo_pago">
                                                <div class="mb-3 row">
                                                   <label for="exp_year" class="col-sm-3"><span class="h6">Year of expiration</span><span class="text-danger">*</span></label>
                                                   <div class="col-sm-9">
                                                      <select id="exp_year" name="exp_year" class="form-select exp_year">
                                                            <option value="" selected="" disabled="">YYYY</option>
                                                             
                                                      </select>
                                                   </div>
                                                </div>
                                          </div>

                                          <div class="col-md-12 col-sm-12 ocultar_todo_metodo_pago mostrarDefault">
                                                <div class="mb-3 row">
                                                   <label for="estado_id" class="col-sm-3"><span class="h6">Payment method status </span><span class="text-danger">*</span></label>
                                                   <div class="col-sm-9">
                                                      <select id="estado_id" name="estado_id" class="form-select estado_id">
                                                            <option value="" selected="" disabled="">Select a Option</option>
                                                            <option value="1">Active</option>
                                                            <option value="2">Inactive</option>
                                                      </select>
                                                   </div>
                                                </div>
                                          </div>

                                          <div class="col-md-12 col-sm-12 ocultar_todo_metodo_pago mostrarDefault">
                                                <div class="mb-3 row">
                                                   <label for="use_credit_card" class="col-sm-3"><span class="h6">Set as default payment method</span><span class="text-danger">*</span></label>
                                                   <div class="col-sm-9">
                                                      <select id="use_credit_card" name="use_credit_card" class="form-select use_credit_card">
                                                            <option value="" selected="" disabled="">Select a Option</option>
                                                            <option value="1">Predetermined</option>
                                                            <option value="2">Secondary</option>
                                                      </select>
                                                   </div>
                                                </div>
                                          </div>
                                    
                                       </div>
                                        
                                       <div class="row">
                                          <div class="col-md-12">
                                                <div class="mb-3" style="float: inline-end;">
  
                                                      <button class="btn btn-primary mt-3 cambiar_texto_botones" type="button" id="guardar_modal_planes" style="float: inline-end;">Add</button>

                                                      <button class="btn btn-primary mt-3 loading_modal_planes" style="display: none;" disabled>
                                                         <div style="display: flex; align-items: center">
                                                            <span
                                                            class="spinner-border spinner-border-sm"
                                                            style="height: 20px; width: 20px; margin-right: 5px"
                                                            role="status"
                                                            aria-hidden="true"
                                                            ></span>
                                                            <span class="cambiar_texto_botones">Add</span>
                                                             
                                                         </div>
                                                      </button>
                                                
                                                </div>
                                          </div>
                                       </div>
                              
                              </div>
                           </div>
                        </div>
               </div>
            </div>
          
         </div>
         
      </div>
   </div>
</div>

<div class="modal fade" id="modalVerErroresCard" tabindex="-1" aria-labelledby="exampleModalLabel_" aria-hidden="true"  data-bs-backdrop="static">
   <div class="modal-dialog modal-lg modal-dialog-centered" style="width: 97%; max-width:97%;">
      <div class="modal-content" style="background-color:white">
         <div class="modal-header">
         <div>
            <h3 class="modal-title" id="exampleModalLabel_">Credit card errors</h3>
            <span>Cards could not be created</span>
         </div>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
         </div>
         <div class="modal-body" style="background-color:white;border-radius:10px">
          
            <div class="row">
               <div class="col-md-12">
                  <div class="panel-container show" id="ibox_form">
                           <div class="panel-content">
                              <div class="px-2">
                                    <div class="alert alert-danger" id="emsg" style="display: none;">
                                       <span id="emsgbody"></span>
                                    </div>

                                       <div class="row html_errores_card">

                                          <div class="col-md-12 col-sm-12">
                                                 
                                            
                                             <div class="alert alert-danger" role="alert">

                                                <span> <span style='font-weight: 600'>Type account</span>: <span>Savings account</span> </span>
                                                <br>
                                                <span> <span style='font-weight: 600'>Payment gateway</span>: <span>Stripe</span> </span>
                                                <br>
                                                <span> <span style='font-weight: 600'>Error detail</span>: <span>Aqui tenemos erro</span> </span>
 
                                             </div>

                                          </div>
 
                                       </div>
                                        
                                       <div class="row">
                                          <div class="col-md-12">
                                                <div class="" style="float: inline-end;">
  
                                                   <button class="btn btn-default btn-sm mt-3" type="button" id="cerrar_ventana_modal_errores" style="float: inline-end;">Close</button>
 
                                                </div>
                                          </div>
                                       </div>
                              
                              </div>
                           </div>
                        </div>
               </div>
            </div>
          
         </div>
         
      </div>
   </div>
</div>

{*modal para la verificacion de codigo*}
<div class="modal fade" id="modaVerificacionCodigo" tabindex="-1" aria-labelledby="exampleModalLabel_" aria-hidden="true"  data-bs-backdrop="static">
   <div class="modal-dialog modal-xl modal-dialog-centered" >
      <div class="modal-content" style="background-color:white">
         <div class="modal-header">
         <div>
            <h3 class="modal-title" id="exampleModalLabel_">Enter the code</h3>
            <span>You must enter the code</span>
         </div>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
         </div>
         <div class="modal-body" style="background-color:white;border-radius:10px">
          
            <div class="row">
               <div class="col-md-12">
                  <div class="panel-container show" id="ibox_form">
                           <div class="panel-content">
                              <div class="px-2">
                                    <div class="alert alert-danger" id="emsg" style="display: none;">
                                       <span id="emsgbody"></span>
                                    </div>

                                       <input type="text" hidden disabled id="dc_uuid_enc" name="dc_uuid_enc"  class="form-control dc_uuid_enc" >

                                       <div class="row">

                                          {*description_code*}
                                          <div class="col-md-12 col-sm-12">
                                                <div class="mb-3 row">
                                                   <label for="description_code" class="col-sm-3"><span class="h6">Code </span><span class="text-danger">*</span></label>
                                                   <div class="col-sm-9">
                                                      <input type="text" id="description_code" name="description_code" placeholder="SM123" class="form-control description_code" placeholder="Example: SM3432" >
                                                   </div>
                                                </div>
                                          </div>
                                          {*description_code*}
                                           
                                       </div>

                                        
                                       <div class="row">
                                          <div class="col-md-12">

                                                <div class="mb-3" style="float: inline-end;">

                                                      {* ----------- *}
                                                      <button class="btn btn-default mt-3 " type="button" id="cerrar_ventana_modal_codigo_verificacion" style="float: inline-end;">Close</button>
                                                      {*  --------  *}

                                                      <button class="btn btn-primary mt-3 me-2 btnSendCode" type="button" id="btnSendCode" style="float: inline-end;">Send code</button>

                                                      <button class="btn btn-primary mt-3 me-2 loading_btnSendCode" style="display: none;" disabled>
                                                         <div style="display: flex; align-items: center">
                                                            <span
                                                            class="spinner-border spinner-border-sm"
                                                            style="height: 20px; width: 20px; margin-right: 5px"
                                                            role="status"
                                                            aria-hidden="true"
                                                            ></span>
                                                            <span >Send code</span>
                                                             
                                                         </div>
                                                      </button>

                                                
                                                </div>

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


{/block}

{block name="script"}

{literal}
<script>

   var URL_BASE = $("#URL_BASE").val();
   var ID_USER = $("#ID_USER").val();
   var url_dashboard = $("#url_dashboard").val();
   var roll_id = $("#roll_id").val();

   var UUID_ENC = $("#UUID_ENC").val();
   var UUID     = $("#UUID").val();
   var id_ifp   = $("#id_ifp").val();
   var bloquear_botones   = $("#bloquear_botones").val();

    

   var COLOR_FONDO_VENTANA_CERRAR = "#001b3b";
   var COLOR_TEXT_VENTANA_CERRAR = "white";

   var COLOR_FONDO_VENTANA_CONFIRMACION = "red";
   var COLOR_TEXT_VENTANA_CONFIRMACION = "white";

   var COLOR_FONDO_VENTANA_IR = "#001b3b";
   var COLOR_TEXT_VENTANA_IR = "white";

   var menus_disponibles = {};

   var planes = [
      /*
      {
         no_fee: 1,
         payment_date: "2025-05-25",
         share_value: "600",
         capital: "413.38",
         interest: "70.20",
         capital_balance: "5556.82",
         state: "earring"
      },
      {
         no_fee: 2,
         payment_date: "2025-05-24",
         share_value: "800",
         capital: "913.38",
         interest: "170.20",
         capital_balance: "456.82",
         state: "earring"
      },
      */
   ];

   var arreglo_planes = [];

   var valor_monto_solicitado_li = 0;

   var data_plan_pago = [];

   var timeZone = "";

   var planGenerado = false;

   var total_ingresos_egresos = 0;

   var arreglo_tipo_bancos = [];
   var arreglo_tipo_cuentas = [];

   var eliminar_metodo_pagos = [];

   var pasarela_pago_stripe = [];

   var arreglo_data_tipo_cuenta = [
      {
         "id": 1,
         "descripcion": "Savings account",
      },
      
      {
         "id": 2,
         "descripcion": "Checking Account",
      },

      {
         "id": 3,
         "descripcion": "Credit Card",
      },
   ];

   var habiliarConfiguracionStripe = false;

   async function initializeCard(payments) {
     
      if (cardInstance) {
         await cardInstance.destroy();
         cardInstance = null; // Clear the reference
      }

      const card = await payments.card();
      await card.attach("#card-container");
      cardInstance = card; // Store the new card instance
      return card;
   }

   async function tokenize(paymentMethod) {
      const tokenResult = await paymentMethod.tokenize();

      return tokenResult;

      console.log(tokenResult);
      console.log("tokenResult");

      if (tokenResult.status == "OK") {
         return tokenResult.token;
      } else {
         throw new Error(
            "Tokenization failed: " + JSON.stringify(tokenResult.errors),
         );
      }
   }

   var aplicacion_id_square = $("#aplicacion_id_square").val();
   var location_id_square   = $("#location_id_square").val();

   console.log("aplicacion_id_square");
   console.log(aplicacion_id_square);

   console.log("location_id_square");
   console.log(location_id_square);

   var version_square       = $("#version_square").val();
   var token_square         = $("#token_square").val();
   var url_square           = $("#url_square").val();
 
   var card_datos_square = null;
   let cardInstance = null; // Store the current card instance

   var errores_tarjeta = [
      /*
      {
            "tipo_cuenta_id": "1",
            "numero_ruta_metodo_pago": "34423423",
            "tipo_cuenta": "Savings account",
            "pasarela_pago": "Stripe",
            "mensaje_error": "Invalid test mode account number (1122333332) used. See a list of the valid account numbers at https://stripe.com/docs/payments/ach-direct-debit/accept-a-payment#test-account-numbers.",
            "titular_tarjeta": "Jair Herrera Itgrahn",
            "numero_tarjeta": "1122333332",
            "exp_month": null,
            "exp_year": null,
            "nombre_banco_metodo_pago": "Ficosa",
            "tipo_titular_metodo_pago": "individual"
        },
        {
            "tipo_cuenta_id": "3",
            "numero_ruta_metodo_pago": null,
            "tipo_cuenta": "Credit Card",
            "pasarela_pago": "Square",
            "mensaje_error": "Square Invalid card data.",
            "titular_tarjeta": "cesar",
            "numero_tarjeta": "1111",
            "exp_month": 11,
            "exp_year": 2044,
            "nombre_banco_metodo_pago": null,
            "tipo_titular_metodo_pago": null
        }
        */
   ];


   //$(".html_errores_card").html(html_errores_card(errores_tarjeta));
 
   async function initializeSquare(data = {}) {

      let  aplicacion_id_square = data.aplicacion_id_square;
      let  location_id_square   = data.location_id_square;

      //var aplicacion_id_square = $("#aplicacion_id_square").val();
      //var location_id_square   = $("#location_id_square").val();
     
      try {
            // Initialize Square Payments SDK
            const payments = window.Square.payments(
               aplicacion_id_square,
               location_id_square,
            );
 
            const card = await initializeCard(payments);
            return card;

      } catch (error) {
            console.log('Error initializing Square:', error);
            alert(error.message);
            $("#card-container").html("");

             
            $('.tipo_pasarela_pago_general')[0].selectedIndex = 0;
            return null;
      }
   }

   $(document).ready(function () {

      $(".ocultar_todo_metodo_pago").css("display", "none");

      //----------------------------------------------------
       

      //initializeSquare().then(card => {
      //   card_datos_square = card; // Store card instance for later use
      //   console.log('Square card initialized:', card_datos_square);
      //});
      //----------------------------------------------------

      const currentYear = new Date().getFullYear();
   
      let optionsString = '';

      for (let i = 0; i <= 10; i++) {
         const year = currentYear + i;
         //const value = year.toString().slice(-2); // Últimos 2 dígitos del año
         const value = year.toString(); // Últimos 2 dígitos del año
  
         optionsString += `<option value="${value}">${year}</option>`;
      }

      $("#exp_year").append(optionsString);

      cargarPrincipal();
  
      $(".progress").hide();
      $("#emsg").hide();
      $("#emsgSuccess").hide();

      var _url = '{$_url}';

      $('.cursor_manito').click(function() {

         const atributo_data =  $(this).attr('data-id');
 
         if(atributo_data == "datos_prestamos")
         {
            window.location = URL_BASE + "credit/data-loans/" + UUID_ENC;
         }

         if(atributo_data == "historial_crediticio")
         {
            window.location = URL_BASE + "credit/credit-history/" + UUID_ENC;
         }

         if(atributo_data == "general_information")
         {
            if(menus_disponibles.general_information == 1)
            {
               window.location = URL_BASE + "credit/new-prospecting/" + UUID_ENC;
            }else{
               $("#modalMensaje").modal("show");
               $(".modal_titulo_mensaje").text("Prospecting stage");
               $(".modal_contenido_mensaje").text("You must complete each of the stages to reach that point.");
               $(".btn_cerrar_confirmacion_modal").attr("disabled", false);
            }
            
         }

         if(atributo_data == "referencia")
         {
            if(menus_disponibles.referencia == 1)
            {
               window.location = URL_BASE + "credit/reference-prospecting/" + UUID_ENC;
            }else{
               $("#modalMensaje").modal("show");
               $(".modal_titulo_mensaje").text("Prospecting stage");
               $(".modal_contenido_mensaje").text("You must complete each of the stages to reach that point.");
               $(".btn_cerrar_confirmacion_modal").attr("disabled", false);
            }
         }

         if(atributo_data == "documento_respaldo")
         {
            if(menus_disponibles.documento_respaldo == 1)
            {
               window.location = URL_BASE + "credit/supporting-document-prospecting/" + UUID_ENC;
            }else{
               $("#modalMensaje").modal("show");
               $(".modal_titulo_mensaje").text("Prospecting stage");
               $(".modal_contenido_mensaje").text("You must complete each of the stages to reach that point.");
               $(".btn_cerrar_confirmacion_modal").attr("disabled", false);
            }
         }

         if(atributo_data == "preaprobacion")
         {
            if(menus_disponibles.preaprobacion == 1)
            {
               window.location = URL_BASE + "credit/pre-approval-prospecting/" + UUID_ENC;
            }else{
               $("#modalMensaje").modal("show");
               $(".modal_titulo_mensaje").text("Prospecting stage");
               $(".modal_contenido_mensaje").text("You must complete each of the stages to reach that point.");
               $(".btn_cerrar_confirmacion_modal").attr("disabled", false);
            }
         }

         if(atributo_data == "plan_pago")
         {
            return;
            
            if(menus_disponibles.plan_pago == 1)
            {
               window.location = URL_BASE + "credit/payment-plan-prospecting/" + UUID_ENC;
            }else{
               $("#modalMensaje").modal("show");
               $(".modal_titulo_mensaje").text("Prospecting stage");
               $(".modal_contenido_mensaje").text("You must complete each of the stages to reach that point.");
               $(".btn_cerrar_confirmacion_modal").attr("disabled", false);
            }
         }

         if(atributo_data == "desembolzo")
         {
            if(menus_disponibles.desembolzo == 1)
            {
               window.location = URL_BASE + "credit/disbursement-prospecting/" + UUID_ENC;
            }else{
               $("#modalMensaje").modal("show");
               $(".modal_titulo_mensaje").text("Prospecting stage");
               $(".modal_contenido_mensaje").text("You must complete each of the stages to reach that point.");
               $(".btn_cerrar_confirmacion_modal").attr("disabled", false);
            }
         }

 
      });

      $(".btn-edicion").off("click")
      .on("click", function () {

         const edicionValue = $(this).data('edicion');

         $('.ver_errores_tarjetas').prop('disabled', false);
         $('#cerrar_ventana_modal_errores').prop('disabled', false);

         //console.log("edicionValue");
         //console.log(edicionValue);

         if(edicionValue == "1")
         {
            $(this).data("edicion", "2")
            $(".btn-edicion-text").text("Disable editing");

            if(menus_disponibles.plan_pago == 1)
            {
               // cuando es 1 es qie se finalizo pero queremos seguir guardando cuentas

               $(".guardar_metodos_pagos").attr("disabled", false);
               $(".btnMetodoPago").attr("disabled", false);
               $(".btn-edit").attr("disabled", false);
               $(".btn-eliminar").attr("disabled", false);

               $(".btn-close").attr("disabled", false);
               $("#guardar_modal_planes").attr("disabled", false);
               $(".titular_tarjeta").attr("disabled", false);
               $(".banco_metodo_pago").attr("disabled", false);
               $(".numero_cuenta_metodo_pago").attr("disabled", false);
               $(".numero_ruta_metodo_pago").attr("disabled", false);
               $(".tipo_titular_metodo_pago").attr("disabled", false);
               $(".email_metodo_pago").attr("disabled", false);
               $(".estado_id").attr("disabled", false);
               $(".use_credit_card").attr("disabled", false);

               $(".ocultar_tppg").css("display", "none");

               $(".titular_tarjeta").attr("disabled", false);
               $(".numero_tarjeta").attr("disabled", false);
               $(".codigo_ccv").attr("disabled", false);
               $(".exp_month").attr("disabled", false);
               $(".exp_year").attr("disabled", false);
               $(".exp_year").attr("disabled", false);

            }else{
               $('input, select, button, textarea').prop('disabled', false);

               //$(".guardar_borrador").css("display", "none");
               //$(".guardar_siguiente").css("display", "");             

               $(".guardar_siguiente").text("Save and Next");
               //$(".guardar_siguiente").attr("disabled", false);
            }


         }else{
            $(this).data("edicion", "1")
            $(".btn-edicion-text").text("Enable editing");

            if(menus_disponibles.plan_pago == 1)
            {

               $(".guardar_metodos_pagos").attr("disabled", true);

               $(".btnMetodoPago").attr("disabled", true);
               $(".btn-edit").attr("disabled", true);
               $(".btn-eliminar").attr("disabled", true);

               $(".btn-close").attr("disabled", true);
               $("#guardar_modal_planes").attr("disabled", true);
               $(".titular_tarjeta").attr("disabled", true);
               $(".banco_metodo_pago").attr("disabled", true);
               $(".numero_cuenta_metodo_pago").attr("disabled", true);
               $(".numero_ruta_metodo_pago").attr("disabled", true);
               $(".tipo_titular_metodo_pago").attr("disabled", true);
               $(".email_metodo_pago").attr("disabled", true);
               $(".estado_id").attr("disabled", true);
               $(".use_credit_card").attr("disabled", true);

               $(".titular_tarjeta").attr("disabled", true);
               $(".numero_tarjeta").attr("disabled", true);
               $(".codigo_ccv").attr("disabled", true);
               $(".exp_month").attr("disabled", true);
               $(".exp_year").attr("disabled", true);
               $(".exp_year").attr("disabled", true);

            }else{

               $('input, select, button, textarea').prop('disabled', true);

               //$(".guardar_siguiente").css("display", "none");
               $(".guardar_siguiente").text("Next");

            }

             

             
         }

         $('.back').prop('disabled', false);
         $('.btn-edicion').prop('disabled', false);

         $('.valor_monto_solicitado_li, .motivo_prestamo_li, .relacion_cuota_ingreso').prop('disabled', true);


         if(habiliarConfiguracionStripe == true)
         {
            $('.configuracion_stripe_cuentas_bancarias').prop('disabled', true);
         }else{
            $('.configuracion_stripe_cuentas_bancarias').prop('disabled', false);
         }

       
      });
 
      $('#submit_modal_confirmacion_correo').on('click', function() {
         window.location = url_dashboard;    
      });
 
      $("#btn_aplicar_ventana_confirmacion").off("click")
      .on("click", function () {

            $('#btn_aplicar_ventana_confirmacion').prop('disabled', true);
            $('#btn_close_ventana_confirmacion').prop('disabled', true);
            $('#btn_cerrar_ventana_confirmacion').prop('disabled', true);
             
            let opcion_predefinida = $(".tipo_modal_confirmar").val();
            let data_id = $(".data_id").val();

            if(opcion_predefinida == "eliminar_card_documento")
            {

               $(".mensaje_espera_moda_confirmacion").text("Please wait while the process finishes...");

               $(".card_eliminar_" + data_id).remove();

               $('#btn_aplicar_ventana_confirmacion').prop('disabled', false);
               $('#btn_close_ventana_confirmacion').prop('disabled', false);
               $('#btn_cerrar_ventana_confirmacion').prop('disabled', false);
               
               //$("#ventana_confirmacion").modal("hide");

               ventanaRegistroExito("Record deleted", "¡The record has been successfully deleted!");

            }

            if(opcion_predefinida == "navegar_pantalla_siguiente")
            {
               window.location = URL_BASE + "credit/disbursement-prospecting/"+data_id;
            }

            if(opcion_predefinida == "navegar_otras_pantallas")
            {
               window.location = URL_BASE + data_id;
            }

            if(opcion_predefinida == "eliminar_plan")
            {

               let informacionFrontend = {
                  id: data_id,
               };

               let BusquedadInformacion = arreglo_planes.find(function(item) {
                  return item.UUID_ENC == data_id;
               });
 
               if(BusquedadInformacion)
               {
                  
                  let indiceAEliminar = arreglo_planes.findIndex(
                     (obj) => obj.UUID_ENC == data_id 
                  );

                  if (indiceAEliminar !== -1) {
                     arreglo_planes.splice(indiceAEliminar, 1);

                     console.log("BusquedadInformacion llegamos")
                     console.log(BusquedadInformacion)

                     if(isEmpty(BusquedadInformacion.id) == false)
                     {
                        eliminar_metodo_pagos.push(BusquedadInformacion);
                     }

                     $(".tbody_envios_metodo_pagos").html(tabla_html_planes(arreglo_planes));
                     eventosTablaPlanes();

                     $("#ventana_confirmacion").modal("hide");

                  }

               }
  
            }
       
      });

      $("#btn_cerrar_ventana_confirmacion").off("click")
      .on("click", function () {
         
         $('#btn_aplicar_ventana_confirmacion').prop('disabled', false);
         $('#btn_close_ventana_confirmacion').prop('disabled', false);
         $('#btn_cerrar_ventana_confirmacion').prop('disabled', false);
         $("#ventana_confirmacion").modal("hide");
       
      });

      $("#btn_close_ventana_confirmacion").off("click")
      .on("click", function () {

         $('#btn_aplicar_ventana_confirmacion').prop('disabled', false);
         $('#btn_close_ventana_confirmacion').prop('disabled', false);
         $('#btn_cerrar_ventana_confirmacion').prop('disabled', false);
         
         $("#ventana_confirmacion").modal("hide");
       
      });

      $('.btn_cerrar_confirmacion_modal').click(function() {
         $("#modalMensaje").modal("hide");
      });

      $('.abrir_modal_contacto').click(function() {
         $("#modal_asignar_clientes_contactos").modal("show");
      });

      $('.back').click(function() {
          
         window.location = URL_BASE + "credit/pre-approval-prospecting/" + UUID_ENC;

      });

      $('.guardar_siguiente').click(function() {

         //window.location = URL_BASE + "credit/disbursement-prospecting/UUID_ENCRIPTION";
         //return;

         if(menus_disponibles.plan_pago == 1)
         {
            let edicion = $(".btn-edicion").data("edicion");

            if(edicion == "1")
            {
               window.location = URL_BASE + "credit/disbursement-prospecting/" + UUID_ENC;
               return;
            } 

         }

         //cuando se le de click a guardar y siguiente, se cambira el estado
         guardarInformacion(1);
          
      });

      $('.guardar_close_finish').click(function() {

 
         if(menus_disponibles.plan_pago == 1)
         {
            let edicion = $(".btn-edicion").data("edicion");

            if(edicion == "1")
            {
               window.location = URL_BASE + "credit/disbursement-prospecting/" + UUID_ENC;
               return;
            } 

         }

         //cuando se le de click a guardar y siguiente, se cambira el estado

         let esBorrador =  1;
         
         var aplicacion_id_square = $("#aplicacion_id_square").val();
         var location_id_square   = $("#location_id_square").val();
         var version_square       = $("#version_square").val();
         var token_square         = $("#token_square").val();
         var url_square           = $("#url_square").val();

         let tipo_cuenta_desembolsar = $(".tipo_cuenta_desembolsar").val();
         let banco_desembolsar = $(".banco_desembolsar").val();
         let numero_cuenta_desembolsar = $(".numero_cuenta_desembolsar").val();
         let nombre_beneficiario_desembolsar = $(".nombre_beneficiario_desembolsar").val();

         let tipo_cuenta_acreditar = $(".tipo_cuenta_acreditar").val();

         let banco_acreditar = $(".banco_acreditar").val();
         let numero_cuenta_acreditar = $(".numero_cuenta_acreditar").val();
         let nombre_beneficiario_acreditar = $(".nombre_beneficiario_acreditar").val();

         let tipo_titular_tarjeta_acreditar = $(".tipo_titular_tarjeta_acreditar").val();
         let numero_ruta_acredita           = $(".numero_ruta_acredita").val();
         let correo_electronico_acreditar   = $(".correo_electronico_acreditar").val();

         let configuracion_stripe_cuentas_bancarias   = $(".configuracion_stripe_cuentas_bancarias").val();

         //------------------------------------------------------------
         let plan_crediticio = $(".plan_crediticio").val();

         let cliente_aprueba = $(".cliente_aprueba").val();

         let numero_pago_cuotas = $(".numero_pago_cuotas").val();

         let relacion_cuota_ingreso = $(".relacion_cuota_ingreso").val();

         if(esBorrador == 1)
         {
            if(arreglo_planes.length == 0)
            {

               toastr.options.onclick = function() {
                  const targetDiv = document.querySelector('.tbody_envios_metodo_pagos');
                  
                  if (targetDiv) {
                     targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
                  }
               }
               toastr.error('!The "Specify the payment method for installments" section must have at least one payment method added.');
               return;
            }

            //--------- ---- -- -- -- -
            /*
            
            if(isEmpty(tipo_cuenta_desembolsar))
            {
               
               toastr.options.onclick = function() {
                  const targetDiv = document.querySelector('.tipo_cuenta_desembolsar');
                  
                  if (targetDiv) {
                     targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
                  }
               }

               toastr.error('!In "Payment method for disbursement" the field "Account type" is required.');
               return;
            }
            */

            /*
            
            if(tipo_cuenta_desembolsar != 1)
            {

               if(isEmpty(banco_desembolsar))
               {
                  
                  toastr.options.onclick = function() {
                     const targetDiv = document.querySelector('.banco_desembolsar');
                     
                     if (targetDiv) {
                        targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
                     }
                  }

                  toastr.error('!In "Payment method for disbursement" the field "Bank" is required.');
                  return;
               }

               //
               if(isEmpty(numero_cuenta_desembolsar))
               {
                  
                  toastr.options.onclick = function() {
                     const targetDiv = document.querySelector('.numero_cuenta_desembolsar');
                     
                     if (targetDiv) {
                        targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
                     }
                  }

                  toastr.error('!In "Payment method for disbursement" the field "Account number" is required.');
                  return;
               }

               //
               if(isEmpty(nombre_beneficiario_desembolsar))
               {
                  
                  toastr.options.onclick = function() {
                     const targetDiv = document.querySelector('.nombre_beneficiario_desembolsar');
                     
                     if (targetDiv) {
                        targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
                     }
                  }

                  toastr.error('!In "Payment method for disbursement" the field "Account Holder" is required.');
                  return;
               }
               //

            }
            */

            //datos bancarios para acreditar --------

            if(isEmpty(tipo_cuenta_acreditar))
            {
               
               toastr.options.onclick = function() {
                  const targetDiv = document.querySelector('.tipo_cuenta_acreditar');
                  
                  if (targetDiv) {
                     targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
                  }
               }

               toastr.error('!In "Specify to which account the loan amount will be credited" the field "Disbursement Method" is required.');
               return;
            }
   
            //cuenta a creditar es cuando le vamos a ingresear dinearo a su cuenta
            if(tipo_cuenta_acreditar != 1)
            {
               if(isEmpty(banco_acreditar))
               {
                  
                  toastr.options.onclick = function() {
                     const targetDiv = document.querySelector('.banco_acreditar');
                     
                     if (targetDiv) {
                        targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
                     }
                  }

                  toastr.error('!In "Specify to which account the loan amount will be credited" the field "Bank" is required.');
                  return;
               }

               if(isEmpty(numero_cuenta_acreditar))
               {
                  
                  toastr.options.onclick = function() {
                     const targetDiv = document.querySelector('.numero_cuenta_acreditar');
                     
                     if (targetDiv) {
                        targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
                     }
                  }

                  toastr.error('!In "Specify to which account the loan amount will be credited" the field "Account number" is required.');
                  return;
               }

               if(isEmpty(numero_ruta_acredita))
               {
                  
                  toastr.options.onclick = function() {
                     const targetDiv = document.querySelector('.numero_ruta_acredita');
                     
                     if (targetDiv) {
                        targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
                     }
                  }

                  toastr.error('!In "Specify to which account the loan amount will be credited" the field "Route number" is required.');
                  return;
               }
   
               if(isEmpty(tipo_titular_tarjeta_acreditar))
               {
                  
                  toastr.options.onclick = function() {
                     const targetDiv = document.querySelector('.tipo_titular_tarjeta_acreditar');
                     
                     if (targetDiv) {
                        targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
                     }
                  }

                  toastr.error('!In "Specify to which account the loan amount will be credited" the field "Account Holder Type" is required.');
                  return;
               }
               
               if(isEmpty(nombre_beneficiario_acreditar))
               {
                  
                  toastr.options.onclick = function() {
                     const targetDiv = document.querySelector('.nombre_beneficiario_acreditar');
                     
                     if (targetDiv) {
                        targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
                     }
                  }

                  toastr.error('!In "Specify to which account the loan amount will be credited" the field "Account Holder" is required.');
                  return;
               }

               if(isEmpty(correo_electronico_acreditar))
               {
                  
                  toastr.options.onclick = function() {
                     const targetDiv = document.querySelector('.correo_electronico_acreditar');
                     
                     if (targetDiv) {
                        targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
                     }
                  }

                  toastr.error('!In "Specify to which account the loan amount will be credited" the field "Email" is required.');
                  return;
               }

               if(esCorreo(correo_electronico_acreditar) == false)
               {
                  toastr.options.onclick = function() {
                     const targetDiv = document.querySelector('.correo_electronico_acreditar');
                     
                     if (targetDiv) {
                        targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
                     }
                  }

                  toastr.error('!In "Specify the account to which the loan amount will be credited" the "Email" field is invalid.');
                  return;
               }


            }
   
            if(isEmpty(plan_crediticio))
            {
               
               toastr.options.onclick = function() {
                  const targetDiv = document.querySelector('.plan_crediticio');
                  
                  if (targetDiv) {
                     targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
                  }
               }

               toastr.error('!In "Payment plan" the field "Credit plan" is required.');
               return;
            }

            if(isEmpty(cliente_aprueba))
            {
               
               toastr.options.onclick = function() {
                  const targetDiv = document.querySelector('.cliente_aprueba');
                  
                  if (targetDiv) {
                     targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
                  }
               }

               toastr.error('!In "Payment plan" the field "Client approves?" is required.');
               return;
            }

            if(isEmpty(numero_pago_cuotas))
            {
               
               toastr.options.onclick = function() {
                  const targetDiv = document.querySelector('.numero_pago_cuotas');
                  
                  if (targetDiv) {
                     targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
                  }
               }

               toastr.error('!In "Payment plan" the field "Number of payment quotas" is required.');
               return;
            }

            if(isEmpty(relacion_cuota_ingreso))
            {
               
               toastr.options.onclick = function() {
                  const targetDiv = document.querySelector('.relacion_cuota_ingreso');
                  
                  if (targetDiv) {
                     targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
                  }
               }

               toastr.error('!In "Payment plan" the field "Income quota ratio" is required.');
               return;
            }

            let valorParseado = parseToFloatOrZero(numero_pago_cuotas);

            if(valorParseado <= 0)
            {
               toastr.error('!In "Payment Plan" the "Number of Payment quotas" field cannot be less than or equal to 0.');
               return;
            }


         }
 
         var informacionEnviar = {
            esBorrador:                                esBorrador,
            id_ifp:                                    id_ifp,
            plan_crediticio:                           plan_crediticio,
            numero_pago_cuotas:                        numero_pago_cuotas,
            relacion_cuota_ingreso:                    relacion_cuota_ingreso,
            cliente_aprueba:                           cliente_aprueba,

            //----------------------
            tipo_cuenta_desembolsar:                   null, //tipo_cuenta_desembolsar,
            banco_desembolsar:                         null, //banco_desembolsar,
            numero_cuenta_desembolsar:                 null, //numero_cuenta_desembolsar,
            nombre_beneficiario_desembolsar:           null, //nombre_beneficiario_desembolsar,

            tipo_cuenta_acreditar:                     tipo_cuenta_acreditar,
            banco_acreditar:                           banco_acreditar,
            numero_cuenta_acreditar:                   numero_cuenta_acreditar,
            nombre_beneficiario_acreditar:             nombre_beneficiario_acreditar,

            tipo_titular_tarjeta_acreditar:            tipo_titular_tarjeta_acreditar,
            numero_ruta_acredita:                      numero_ruta_acredita,
            correo_electronico_acreditar:              correo_electronico_acreditar,
            configuracion_stripe_cuentas_bancarias:    configuracion_stripe_cuentas_bancarias,

            //-----------------------
            planes:                                    planes,
            arreglo_planes:                            arreglo_planes,
            
            aplicacion_id_square: aplicacion_id_square,
            location_id_square:   location_id_square,
            version_square:       version_square,
            token_square:         token_square,
            url_square:           url_square,

            eliminar_metodo_pagos:          eliminar_metodo_pagos,
         }; 
 
         console.log(JSON.stringify(informacionEnviar));
         //console.log("return aqui abajo")
         //alert("return aqui abajo");
         //return;

         $('input, select, button, textarea').prop('disabled', true);
 
         //if(esBorrador == 2)
         //{
         //   $('.loading_guardar_borrador').css('display', '');
         //   $('.guardar_borrador').css('display', 'none');
         //}

         $('.loading_guardar_close_finish').css('display', '');
         $('.guardar_close_finish').css('display', 'none');

         $.ajax({
            type: "POST",
            url: URL_BASE + "credit/post-save-plan-payment",
            data: JSON.stringify(informacionEnviar), // Convertir datos a formato JSON
            contentType: "application/json", // Tipo de contenido JSON
            success: function (response) {

               $('input, select, button, textarea').prop('disabled', false);
               $('.valor_monto_solicitado_li, .motivo_prestamo_li').prop('disabled', true);

               //if(esBorrador == 2)
               //{
               //   $('.loading_guardar_borrador').css('display', 'none');
               //   $('.guardar_borrador').css('display', '');
               //}

               $('.loading_guardar_close_finish').css('display', 'none');
               $('.guardar_close_finish').css('display', '');
 
               try {
                  let info = JSON.parse(response);

                  if (info.type == "success") {

                     toastr.success(
                         "Credit closed",
                         "¡Credit closed and successfully completed!",
                     );

                     setTimeout(() => {
                        window.location = URL_BASE + "credit/search-loans";
                     }, 1000);
       
                     /*
                     if(esBorrador == 1)
                     {
                        toastr.success(
                            "Record added",
                            "¡Record added successfully!",
                        );

                        window.location = URL_BASE + "credit/disbursement-prospecting/"+UUID_ENC;
       
                        //navegarPantallaSiguiente(UUID_ENC); 
                     }

                     if(esBorrador == 2)
                     {
                        toastr.success(
                            "Draft saved successfully",
                            "¡Draft saved successfully, you can edit again!",
                        );

                        //ventanaRegistroExito("Draft saved successfully", "¡Draft saved successfully, you can edit again!")
                     }
                     */

                     arreglo_planes = info.data_credit_plan_payment_method || [];

                     arreglo_planes.forEach((data) => {
 
                        data.estado_nombre = data.estado_id == 1 ? "Active" : "Inactive";
                        data.use_credit_card_nombre = data.use_credit_card == 1 ? "Predetermined" : "Secondary";

                        let encontroDatosTipoCuenta = arreglo_data_tipo_cuenta.find((data_1) => data_1.id == data.tipo_cuenta);

                        if(encontroDatosTipoCuenta)
                        {
                           data.nombre_tipo_cuenta = encontroDatosTipoCuenta.descripcion;
                        }

                     });

                     $(".tbody_envios_metodo_pagos").html(tabla_html_planes(arreglo_planes));
                     eventosTablaPlanes();

                     errores_tarjeta =  info.arreglo_lista_errores_metodos || [];

                     if(errores_tarjeta.length == 0)
                     {
                        $(".ver_errores_tarjetas").css("display", "none");

                     }else{
                        $(".ver_errores_tarjetas").css("display", "");
                        $(".html_errores_card").html(html_errores_card(errores_tarjeta));

                        $("#modalVerErroresCard").modal("show");
                     }
 
                  } else if (info.type == "error") {

                     //Swal.fire({
                     //   icon: "error",
                     //   title: "Oops...",
                     //   text: info.message,
                     //});

                     ventanaError("Opps there was an error", info.message);
                  }
               } catch (error) {

                  //Swal.fire({
                  //   icon: "error",
                  //   title: "Oops...",
                  //   text: error,
                  //});

                  ventanaError("Opps there was an error", error);
               }
            },
            error: function (xhr, status, error) {
               console.error("Error en la solicitud:", error);
            
               //Swal.fire({
               //   icon: "error",
               //   title: "Oops...",
               //   text: error,
               //});

               ventanaError("Opps there was an error", error);

               $('input, select, button, textarea').prop('disabled', false);
               $('.valor_monto_solicitado_li, .motivo_prestamo_li').prop('disabled', true);

               if(esBorrador == 2)
               {
                  $('.loading_guardar_borrador').css('display', 'none');
                  $('.guardar_borrador').css('display', '');
               }

               if(esBorrador == 1)
               {
                  $('.loading_guardar_siguiente').css('display', 'none');
                  $('.guardar_siguiente').css('display', '');
               }
            },
         });
          
      });

      $('.guardar_borrador').click(function() {

         guardarInformacion(2);

      });

      function guardarInformacion(esBorrador = 2)
      {

         var aplicacion_id_square = $("#aplicacion_id_square").val();
         var location_id_square   = $("#location_id_square").val();
         var version_square       = $("#version_square").val();
         var token_square         = $("#token_square").val();
         var url_square           = $("#url_square").val();

         let tipo_cuenta_desembolsar = $(".tipo_cuenta_desembolsar").val();
         let banco_desembolsar = $(".banco_desembolsar").val();
         let numero_cuenta_desembolsar = $(".numero_cuenta_desembolsar").val();
         let nombre_beneficiario_desembolsar = $(".nombre_beneficiario_desembolsar").val();

         let tipo_cuenta_acreditar = $(".tipo_cuenta_acreditar").val();

         let banco_acreditar = $(".banco_acreditar").val();
         let numero_cuenta_acreditar = $(".numero_cuenta_acreditar").val();
         let nombre_beneficiario_acreditar = $(".nombre_beneficiario_acreditar").val();

         let tipo_titular_tarjeta_acreditar = $(".tipo_titular_tarjeta_acreditar").val();
         let numero_ruta_acredita           = $(".numero_ruta_acredita").val();
         let correo_electronico_acreditar   = $(".correo_electronico_acreditar").val();

         let configuracion_stripe_cuentas_bancarias   = $(".configuracion_stripe_cuentas_bancarias").val();

         //------------------------------------------------------------
         let plan_crediticio = $(".plan_crediticio").val();

         let cliente_aprueba = $(".cliente_aprueba").val();

         let numero_pago_cuotas = $(".numero_pago_cuotas").val();

         let relacion_cuota_ingreso = $(".relacion_cuota_ingreso").val();

         if(esBorrador == 1)
         {
            if(arreglo_planes.length == 0)
            {

               toastr.options.onclick = function() {
                  const targetDiv = document.querySelector('.tbody_envios_metodo_pagos');
                  
                  if (targetDiv) {
                     targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
                  }
               }
               toastr.error('!The "Specify the payment method for installments" section must have at least one payment method added.');
               return;
            }

            //--------- ---- -- -- -- -
            /*
            
            if(isEmpty(tipo_cuenta_desembolsar))
            {
               
               toastr.options.onclick = function() {
                  const targetDiv = document.querySelector('.tipo_cuenta_desembolsar');
                  
                  if (targetDiv) {
                     targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
                  }
               }

               toastr.error('!In "Payment method for disbursement" the field "Account type" is required.');
               return;
            }
            */

            /*
            
            if(tipo_cuenta_desembolsar != 1)
            {

               if(isEmpty(banco_desembolsar))
               {
                  
                  toastr.options.onclick = function() {
                     const targetDiv = document.querySelector('.banco_desembolsar');
                     
                     if (targetDiv) {
                        targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
                     }
                  }

                  toastr.error('!In "Payment method for disbursement" the field "Bank" is required.');
                  return;
               }

               //
               if(isEmpty(numero_cuenta_desembolsar))
               {
                  
                  toastr.options.onclick = function() {
                     const targetDiv = document.querySelector('.numero_cuenta_desembolsar');
                     
                     if (targetDiv) {
                        targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
                     }
                  }

                  toastr.error('!In "Payment method for disbursement" the field "Account number" is required.');
                  return;
               }

               //
               if(isEmpty(nombre_beneficiario_desembolsar))
               {
                  
                  toastr.options.onclick = function() {
                     const targetDiv = document.querySelector('.nombre_beneficiario_desembolsar');
                     
                     if (targetDiv) {
                        targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
                     }
                  }

                  toastr.error('!In "Payment method for disbursement" the field "Account Holder" is required.');
                  return;
               }
               //

            }
            */

            //datos bancarios para acreditar --------

            if(isEmpty(tipo_cuenta_acreditar))
            {
               
               toastr.options.onclick = function() {
                  const targetDiv = document.querySelector('.tipo_cuenta_acreditar');
                  
                  if (targetDiv) {
                     targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
                  }
               }

               toastr.error('!In "Specify to which account the loan amount will be credited" the field "Disbursement Method" is required.');
               return;
            }
   
            //cuenta a creditar es cuando le vamos a ingresear dinearo a su cuenta
            if(tipo_cuenta_acreditar != 1)
            {
               if(isEmpty(banco_acreditar))
               {
                  
                  toastr.options.onclick = function() {
                     const targetDiv = document.querySelector('.banco_acreditar');
                     
                     if (targetDiv) {
                        targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
                     }
                  }

                  toastr.error('!In "Specify to which account the loan amount will be credited" the field "Bank" is required.');
                  return;
               }

               if(isEmpty(numero_cuenta_acreditar))
               {
                  
                  toastr.options.onclick = function() {
                     const targetDiv = document.querySelector('.numero_cuenta_acreditar');
                     
                     if (targetDiv) {
                        targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
                     }
                  }

                  toastr.error('!In "Specify to which account the loan amount will be credited" the field "Account number" is required.');
                  return;
               }

               if(isEmpty(numero_ruta_acredita))
               {
                  
                  toastr.options.onclick = function() {
                     const targetDiv = document.querySelector('.numero_ruta_acredita');
                     
                     if (targetDiv) {
                        targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
                     }
                  }

                  toastr.error('!In "Specify to which account the loan amount will be credited" the field "Route number" is required.');
                  return;
               }
   
               if(isEmpty(tipo_titular_tarjeta_acreditar))
               {
                  
                  toastr.options.onclick = function() {
                     const targetDiv = document.querySelector('.tipo_titular_tarjeta_acreditar');
                     
                     if (targetDiv) {
                        targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
                     }
                  }

                  toastr.error('!In "Specify to which account the loan amount will be credited" the field "Account Holder Type" is required.');
                  return;
               }
               
               if(isEmpty(nombre_beneficiario_acreditar))
               {
                  
                  toastr.options.onclick = function() {
                     const targetDiv = document.querySelector('.nombre_beneficiario_acreditar');
                     
                     if (targetDiv) {
                        targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
                     }
                  }

                  toastr.error('!In "Specify to which account the loan amount will be credited" the field "Account Holder" is required.');
                  return;
               }

               if(isEmpty(correo_electronico_acreditar))
               {
                  
                  toastr.options.onclick = function() {
                     const targetDiv = document.querySelector('.correo_electronico_acreditar');
                     
                     if (targetDiv) {
                        targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
                     }
                  }

                  toastr.error('!In "Specify to which account the loan amount will be credited" the field "Email" is required.');
                  return;
               }

               if(esCorreo(correo_electronico_acreditar) == false)
               {
                  toastr.options.onclick = function() {
                     const targetDiv = document.querySelector('.correo_electronico_acreditar');
                     
                     if (targetDiv) {
                        targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
                     }
                  }

                  toastr.error('!In "Specify the account to which the loan amount will be credited" the "Email" field is invalid.');
                  return;
               }


            }
   
            if(isEmpty(plan_crediticio))
            {
               
               toastr.options.onclick = function() {
                  const targetDiv = document.querySelector('.plan_crediticio');
                  
                  if (targetDiv) {
                     targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
                  }
               }

               toastr.error('!In "Payment plan" the field "Credit plan" is required.');
               return;
            }

            if(isEmpty(cliente_aprueba))
            {
               
               toastr.options.onclick = function() {
                  const targetDiv = document.querySelector('.cliente_aprueba');
                  
                  if (targetDiv) {
                     targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
                  }
               }

               toastr.error('!In "Payment plan" the field "Client approves?" is required.');
               return;
            }

            if(isEmpty(numero_pago_cuotas))
            {
               
               toastr.options.onclick = function() {
                  const targetDiv = document.querySelector('.numero_pago_cuotas');
                  
                  if (targetDiv) {
                     targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
                  }
               }

               toastr.error('!In "Payment plan" the field "Number of payment quotas" is required.');
               return;
            }

            if(isEmpty(relacion_cuota_ingreso))
            {
               
               toastr.options.onclick = function() {
                  const targetDiv = document.querySelector('.relacion_cuota_ingreso');
                  
                  if (targetDiv) {
                     targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
                  }
               }

               toastr.error('!In "Payment plan" the field "Income quota ratio" is required.');
               return;
            }

            let valorParseado = parseToFloatOrZero(numero_pago_cuotas);

            if(valorParseado <= 0)
            {
               toastr.error('!In "Payment Plan" the "Number of Payment quotas" field cannot be less than or equal to 0.');
               return;
            }


         }
 
         var informacionEnviar = {
            esBorrador:                                esBorrador,
            id_ifp:                                    id_ifp,
            plan_crediticio:                           plan_crediticio,
            numero_pago_cuotas:                        numero_pago_cuotas,
            relacion_cuota_ingreso:                    relacion_cuota_ingreso,
            cliente_aprueba:                           cliente_aprueba,

            //----------------------
            tipo_cuenta_desembolsar:                   null, //tipo_cuenta_desembolsar,
            banco_desembolsar:                         null, //banco_desembolsar,
            numero_cuenta_desembolsar:                 null, //numero_cuenta_desembolsar,
            nombre_beneficiario_desembolsar:           null, //nombre_beneficiario_desembolsar,

            tipo_cuenta_acreditar:                     tipo_cuenta_acreditar,
            banco_acreditar:                           banco_acreditar,
            numero_cuenta_acreditar:                   numero_cuenta_acreditar,
            nombre_beneficiario_acreditar:             nombre_beneficiario_acreditar,

            tipo_titular_tarjeta_acreditar:            tipo_titular_tarjeta_acreditar,
            numero_ruta_acredita:                      numero_ruta_acredita,
            correo_electronico_acreditar:              correo_electronico_acreditar,
            configuracion_stripe_cuentas_bancarias:    configuracion_stripe_cuentas_bancarias,

            //-----------------------
            planes:                                    planes,
            arreglo_planes:                            arreglo_planes,
            
            aplicacion_id_square: aplicacion_id_square,
            location_id_square:   location_id_square,
            version_square:       version_square,
            token_square:         token_square,
            url_square:           url_square,

            eliminar_metodo_pagos:          eliminar_metodo_pagos,
         }; 
 
         console.log(JSON.stringify(informacionEnviar));
         //console.log("return aqui abajo")
         //alert("return aqui abajo");
         //return;

         $('input, select, button, textarea').prop('disabled', true);
 
         if(esBorrador == 2)
         {
            $('.loading_guardar_borrador').css('display', '');
            $('.guardar_borrador').css('display', 'none');
         }

         if(esBorrador == 1)
         {
            $('.loading_guardar_siguiente').css('display', '');
            $('.guardar_siguiente').css('display', 'none');
         }

         $.ajax({
            type: "POST",
            url: URL_BASE + "credit/post-save-plan-payment",
            data: JSON.stringify(informacionEnviar), // Convertir datos a formato JSON
            contentType: "application/json", // Tipo de contenido JSON
            success: function (response) {

               $('input, select, button, textarea').prop('disabled', false);
               $('.valor_monto_solicitado_li, .motivo_prestamo_li').prop('disabled', true);

               if(esBorrador == 2)
               {
                  $('.loading_guardar_borrador').css('display', 'none');
                  $('.guardar_borrador').css('display', '');
               }

               if(esBorrador == 1)
               {
                  $('.loading_guardar_siguiente').css('display', 'none');
                  $('.guardar_siguiente').css('display', '');
               }
 
               try {
                  let info = JSON.parse(response);

                  if (info.type == "success") {

                     if(esBorrador == 1)
                     {
                        toastr.success(
                            "Record added",
                            "¡Record added successfully!",
                        );

                        window.location = URL_BASE + "credit/disbursement-prospecting/"+UUID_ENC;
       
                        //navegarPantallaSiguiente(UUID_ENC); 
                     }

                     if(esBorrador == 2)
                     {
                        toastr.success(
                            "Draft saved successfully",
                            "¡Draft saved successfully, you can edit again!",
                        );

                        //ventanaRegistroExito("Draft saved successfully", "¡Draft saved successfully, you can edit again!")
                     }

                     arreglo_planes = info.data_credit_plan_payment_method || [];

                     arreglo_planes.forEach((data) => {
 
                        data.estado_nombre = data.estado_id == 1 ? "Active" : "Inactive";
                        data.use_credit_card_nombre = data.use_credit_card == 1 ? "Predetermined" : "Secondary";

                        let encontroDatosTipoCuenta = arreglo_data_tipo_cuenta.find((data_1) => data_1.id == data.tipo_cuenta);

                        if(encontroDatosTipoCuenta)
                        {
                           data.nombre_tipo_cuenta = encontroDatosTipoCuenta.descripcion;
                        }

                     });

                     $(".tbody_envios_metodo_pagos").html(tabla_html_planes(arreglo_planes));
                     eventosTablaPlanes();

                     errores_tarjeta =  info.arreglo_lista_errores_metodos || [];
                      

                     if(errores_tarjeta.length == 0)
                     {
                        $(".ver_errores_tarjetas").css("display", "none");

                     }else{
                        $(".ver_errores_tarjetas").css("display", "");
                        $(".html_errores_card").html(html_errores_card(errores_tarjeta));

                        $("#modalVerErroresCard").modal("show");
                     }

 
                  } else if (info.type == "error") {

                     //Swal.fire({
                     //   icon: "error",
                     //   title: "Oops...",
                     //   text: info.message,
                     //});

                     ventanaError("Opps there was an error", info.message);
                  }
               } catch (error) {

                  //Swal.fire({
                  //   icon: "error",
                  //   title: "Oops...",
                  //   text: error,
                  //});

                  ventanaError("Opps there was an error", error);
               }
            },
            error: function (xhr, status, error) {
               console.error("Error en la solicitud:", error);
            
               //Swal.fire({
               //   icon: "error",
               //   title: "Oops...",
               //   text: error,
               //});

               ventanaError("Opps there was an error", error);

               $('input, select, button, textarea').prop('disabled', false);
               $('.valor_monto_solicitado_li, .motivo_prestamo_li').prop('disabled', true);

               if(esBorrador == 2)
               {
                  $('.loading_guardar_borrador').css('display', 'none');
                  $('.guardar_borrador').css('display', '');
               }

               if(esBorrador == 1)
               {
                  $('.loading_guardar_siguiente').css('display', 'none');
                  $('.guardar_siguiente').css('display', '');
               }
            },
         });

      }

      $('.ver_errores_tarjetas').click(function() {

         $("#modalVerErroresCard").modal("show");

      });

      $('#cerrar_ventana_modal_errores').click(function() {

         $("#modalVerErroresCard").modal("hide");

      });

      $('#cerrar_ventana_modal_codigo_verificacion').click(function() {
         $("#modaVerificacionCodigo").modal("hide");
      });
 

      $('.guardar_metodos_pagos').click(function() {

         //window.location = URL_BASE + "credit/disbursement-prospecting/UUID_ENCRIPTION";
         //return;

         /*
         if(menus_disponibles.plan_pago == 1)
         {
            let edicion = $(".btn-edicion").data("edicion");
            if(edicion == "1")
            {
               window.location = URL_BASE + "credit/disbursement-prospecting/" + UUID_ENC;
               return;
            } 
         }
         */

         var informacionEnviar = {
            id_ifp:                                    id_ifp,
            
            //----------------------
            arreglo_planes:                            arreglo_planes,
            eliminar_metodo_pagos:                     eliminar_metodo_pagos,
 
         }; 
 
         console.log(JSON.stringify(informacionEnviar));
         //console.log("return aqui abajo")
         //alert("return aqui abajo");
         //return;

         //$('input, select, button, textarea').prop('disabled', true);
 
         //if(esBorrador == 1)
         //{
         //   $('.loading_guardar_siguiente').css('display', 'none');
         //   $('.guardar_siguiente').css('display', '');
         //}

         $('.loading_guardar_metodos_pagos').css('display', '');
         $('.guardar_metodos_pagos').css('display', 'none');
 

         $.ajax({
            type: "POST",
            url: URL_BASE + "credit/crud-customer-payment-method",
            data: JSON.stringify(informacionEnviar), // Convertir datos a formato JSON
            contentType: "application/json", // Tipo de contenido JSON
            success: function (response) {
               
               /*
               $('input, select, button, textarea').prop('disabled', false);
               $('.valor_monto_solicitado_li, .motivo_prestamo_li').prop('disabled', true);
 
               if(esBorrador == 1)
               {
                  $('.loading_guardar_siguiente').css('display', 'none');
                  $('.guardar_siguiente').css('display', '');
               }*/

               $('.loading_guardar_metodos_pagos').css('display', 'none');
               $('.guardar_metodos_pagos').css('display', '');
 
               try {
                  let info = JSON.parse(response);

                  if (info.type == "success") {


                     //navegarPantallaSiguiente(UUID_ENC); 
                     ventanaRegistroExito("Saved information", "¡The information has been saved successfully!");

                     toastr.success(
                        "Saved information",
                        "¡The information has been saved successfully!",
                     );

                     /*
                     if(esBorrador == 1)
                     {
                        navegarPantallaSiguiente(UUID_ENC); 
                     }

                     if(esBorrador == 2)
                     {
                        ventanaRegistroExito("Draft saved successfully", "¡Draft saved successfully, you can edit again!")
                     }
                     */

                     arreglo_planes = info.data_credit_plan_payment_method || [];

                     arreglo_planes.forEach((data) => {
 
                        data.estado_nombre = data.estado_id == 1 ? "Active" : "Inactive";
                        data.use_credit_card_nombre = data.use_credit_card == 1 ? "Predetermined" : "Secondary";

                        let encontroDatosTipoCuenta = arreglo_data_tipo_cuenta.find((data_1) => data_1.id == data.tipo_cuenta);

                        if(encontroDatosTipoCuenta)
                        {
                           data.nombre_tipo_cuenta = encontroDatosTipoCuenta.descripcion;
                        }

                     });

                     $(".tbody_envios_metodo_pagos").html(tabla_html_planes(arreglo_planes));
                     eventosTablaPlanes();

                     errores_tarjeta =  info.arreglo_lista_errores_metodos || [];
                  

                     if(errores_tarjeta.length == 0)
                     {
                        $(".ver_errores_tarjetas").css("display", "none");

                     }else{
                        $(".ver_errores_tarjetas").css("display", "");
                        $(".html_errores_card").html(html_errores_card(errores_tarjeta));

                        $("#modalVerErroresCard").modal("show");
                     }

 
                  } else if (info.type == "error") {

                     //Swal.fire({
                     //   icon: "error",
                     //   title: "Oops...",
                     //   text: info.message,
                     //});

                     ventanaError("Opps there was an error", info.message);
                  }
               } catch (error) {

                  //Swal.fire({
                  //   icon: "error",
                  //   title: "Oops...",
                  //   text: error,
                  //});

                  ventanaError("Opps there was an error", error);
               }
            },
            error: function (xhr, status, error) {
               console.error("Error en la solicitud:", error);
            
               //Swal.fire({
               //   icon: "error",
               //   title: "Oops...",
               //   text: error,
               //});

               ventanaError("Opps there was an error", error);

               $('input, select, button, textarea').prop('disabled', false);
               $('.valor_monto_solicitado_li, .motivo_prestamo_li').prop('disabled', true);

               if(esBorrador == 2)
               {
                  $('.loading_guardar_borrador').css('display', 'none');
                  $('.guardar_borrador').css('display', '');
               }

               if(esBorrador == 1)
               {
                  $('.loading_guardar_siguiente').css('display', 'none');
                  $('.guardar_siguiente').css('display', '');
               }
            },
         });
         
           
      });

      $('.btnSendCode').click(function() {

         var description_code = $("#description_code").val();

         if(isEmpty(description_code))
         {
            toastr.error("The field code is required.");
            return;
         }

         var dc_uuid_enc = $("#dc_uuid_enc").val();

         if(isEmpty(dc_uuid_enc))
         {
            toastr.error("The identification is required.");
            return;
         }

         var informacionEnviar = {
            description_code:         description_code,
            dc_uuid_enc:              dc_uuid_enc,
            id_ifp:              id_ifp,
         }; 

         console.log(URL_BASE + "credit/post-code-bank-account");
         console.log(JSON.stringify(informacionEnviar));
         //console.log("return aqui abajo")
         //alert("return aqui abajo");
         //return;

         $('.description_code').prop('disabled', true);
         $('.btn-close').prop('disabled', true);
         $('.cerrar_ventana_modal_codigo_verificacion').prop('disabled', true);
         $('.btnSendCode').prop('disabled', true);
         $('#cerrar_ventana_modal_codigo_verificacion').prop('disabled', true);

         $('.loading_btnSendCode').css('display', '');
         $('.btnSendCode').css('display', 'none');
 

         $.ajax({
            type: "POST",
            url: URL_BASE + "credit/post-code-bank-account",
            data: JSON.stringify(informacionEnviar), // Convertir datos a formato JSON
            contentType: "application/json", // Tipo de contenido JSON
            success: function (response) {

               //$('.description_code, .btn-close, .cerrar_ventana_modal_codigo_verificacion').prop('disabled', false);
               
               $('.description_code').prop('disabled', false);
               $('.btn-close').prop('disabled', false);
               $('.cerrar_ventana_modal_codigo_verificacion').prop('disabled', false);
               $('.btnSendCode').prop('disabled', false);
               $('#cerrar_ventana_modal_codigo_verificacion').prop('disabled', false);
   
               $('.loading_btnSendCode').css('display', 'none');
               $('.btnSendCode').css('display', '');
      
               try {

                  let info = JSON.parse(response);

                  if (info.type == "success") {

                     arreglo_planes = info.data_credit_plan_payment_method || [];

                     arreglo_planes.forEach((data) => {
   
                        data.estado_nombre = data.estado_id == 1 ? "Active" : "Inactive";
                        data.use_credit_card_nombre = data.use_credit_card == 1 ? "Predetermined" : "Secondary";
         
                        let encontroDatosTipoCuenta = arreglo_data_tipo_cuenta.find((data_) => data_.id  == data.tipo_cuenta);

                        if(encontroDatosTipoCuenta)
                        {
                           data.nombre_tipo_cuenta = encontroDatosTipoCuenta.descripcion;
                        }

                     });

                     $(".tbody_envios_metodo_pagos").html(tabla_html_planes(arreglo_planes));
                     eventosTablaPlanes();

                     Swal.fire({
                        icon: "success",
                        title: "Successful operation",
                        text: info.message,
                     });

                     $("#description_code").val("");
                     $("#dc_uuid_enc").val("");

                     $("#modaVerificacionCodigo").modal("hide");
                     
                  } else if (info.type == "error") {

                     Swal.fire({
                        icon: "error",
                        title: "Oops...",
                        text: info.message,
                     });
                  }

               } catch (error) {

                  Swal.fire({
                     icon: "error",
                     title: "Oops...",
                     text: error,
                  });
               
               }
            },
            error: function (xhr, status, error) {
               console.error("Error en la solicitud:", error);
            
               Swal.fire({
                  icon: "error",
                  title: "Oops...",
                  text: error,
               });

               //$('.description_code, .btn-close, .cerrar_ventana_modal_codigo_verificacion').prop('disabled', false);
               
               $('.description_code').prop('disabled', false);
               $('.btn-close').prop('disabled', false);
               $('.cerrar_ventana_modal_codigo_verificacion').prop('disabled', false);
               $('.btnSendCode').prop('disabled', false);
               $('#cerrar_ventana_modal_codigo_verificacion').prop('disabled', false);
   
               $('.loading_btnSendCode').css('display', 'none');
               $('.btnSendCode').css('display', '');

            },
         });

         
      });

      function esCorreo(email) {
         // Expresión regular básica para validar correos
         const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
         return regex.test(email);
      }

      $('.btn_general_plan').click(function() {
          
         let plan_crediticio = $(".plan_crediticio").val() || "";

         if(isEmpty(plan_crediticio))
         {
               toastr.error('!In "Payment plan" the field "Credit plan" is required.');
               return;
         }

         generarTarifario(plan_crediticio);

 
      });

      $(".numero_pago_cuotas").on("input", function() {
         let valor = $(this).val();

         let plan_crediticio = $(".plan_crediticio").val() || "";

         if(isEmpty(plan_crediticio))
         {
            toastr.error('!In "Payment plan" the field "Credit plan" is required.');
            return;
         }

         let valorParseado = parseToFloatOrZero(valor);

         if(valorParseado <= 0)
         {
            toastr.error('!In "Payment Plan" the "Number of Payment quotas" field cannot be less than or equal to 0.');
            return;
         }

         generarTarifario(plan_crediticio);

      });

      $(".plan_crediticio").on("change", function() {
         let seleccionado = $(this).val();
         console.log("Nuevo valor seleccionado: " + seleccionado);

         if(isEmpty(seleccionado) == true)
         {
            toastr.error('!In "Payment plan" the field "Credit plan" is required.');
            return;
         }

         let buscarInformacion = data_plan_pago.find(item => item.id == seleccionado);

         if(buscarInformacion)
         {
            //console.log("buscarInformacion");
            //console.log(buscarInformacion);

            $(".numero_pago_cuotas").val(buscarInformacion.plazo_meses);

            $(".numero_pago_cuotas").prop("disabled", false);

            generarTarifario(seleccionado);

            //plazo_meses
         }
 
 
      });

      $(".tipo_cuenta_desembolsar").on("change", function() {
         let seleccionado = $(this).val();
         console.log("Nuevo valor seleccionado: " + seleccionado);

         if(isEmpty(seleccionado) == true)
         {
            //toastr.error('!In "Payment method for disbursement" the field "Credit plan" is required.');
            return;
         }

         $(".mostrar_no_cash_desembolsar").css("display", "none");

         $(".banco_desembolsar").val("");
         $(".numero_cuenta_desembolsar").val("");
         $(".nombre_beneficiario_desembolsar").val("");

         if(seleccionado != 1)
         {
            $(".mostrar_no_cash_desembolsar").css("display", "");
         }
        
      });

      $(".tipo_cuenta_acreditar").on("change", function() {
         let seleccionado = $(this).val();
         console.log("Nuevo valor seleccionado: " + seleccionado);

         if(isEmpty(seleccionado) == true)
         {
            //toastr.error('!In "Payment method to credit" the field "Credit plan" is required.');
            return;
         }

         $(".mostrar_no_cash_acreditar").css("display", "none");

         $(".banco_acreditar").val("");
         $(".numero_cuenta_acreditar").val("");
         $(".nombre_beneficiario_acreditar").val("");

         if(seleccionado != 1)
         {
            $(".mostrar_no_cash_acreditar").css("display", "");
         }
        
 
      });

      $('.btnMetodoPago').on('click', function() {
         
         const currentYear = new Date().getFullYear();

         $(".id").val("");
         
         $('.tipo_pasarela_pago')[0].selectedIndex = 0;
         $('.tipo_cuenta')[0].selectedIndex = 0;

         $(".titular_tarjeta").val("");
         $(".numero_tarjeta").val("");
         $(".codigo_ccv").val("");

         $(".numero_ruta_metodo_pago").val("");
         $(".email_metodo_pago").val("");

         $('.tipo_titular_metodo_pago')[0].selectedIndex = 0;
         $('.tipo_pasarela_pago_general')[0].selectedIndex = 0;

         $(".numero_cuenta_metodo_pago").val("");
 
         $('.banco_metodo_pago').val("");

         //$('.banco_metodo_pago')[0].selectedIndex = 0;

         //$(".exp_month").val("1");
         $('.exp_month')[0].selectedIndex = 0;
 
         $('.exp_year')[0].selectedIndex = 0;
        
         //$(".estado_id").val("1");
         //$(".use_credit_card").val("1");

         $('.estado_id')[0].selectedIndex = 0;
         $('.use_credit_card')[0].selectedIndex = 0;

         $(".cambiar_texto_botones").text("Add");

         $('.tipo_pasarela_pago').prop('disabled', false);
         $('.tipo_cuenta').prop('disabled', false);

         //$(".MostrarSoloSquare").css("display", "none");
         //$(".MostrarSoloStripe").css("display", "");

         $(".ocultar_todo_metodo_pago").css("display", "none");
         $(".mostrarDefault").css("display", "none");
         $(".mostrar_credit_card").css("display", "none");

         $('.numero_cuenta_metodo_pago').prop('disabled', false);
         $('.numero_ruta_metodo_pago').prop('disabled', false);
         $('.tipo_titular_metodo_pago').prop('disabled', false);

         $('.tipo_pasarela_pago_general').prop('disabled', false);

         $("#addModalPlanes").modal("show");
      });

      $('#guardar_modal_planes').on('click', async function()  {

          
         let id = $(".id").val();

 
         let tipo_cuenta = $(".tipo_cuenta").val();
         
         if(isEmpty(tipo_cuenta))
         {
             
            toastr.options.onclick = function() {
               const targetDiv = document.querySelector('.tipo_cuenta');
               
               if (targetDiv) {
                   targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
               }
            }

            toastr.error('!In "Payment method" the field "Account type" is required.');
            return;
         }

         let tipo_pasarela_pago_general = $(".tipo_pasarela_pago_general").val();
         
         if(isEmpty(tipo_pasarela_pago_general))
         {
             
            toastr.options.onclick = function() {
               const targetDiv = document.querySelector('.tipo_pasarela_pago_general');
               
               if (targetDiv) {
                   targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
               }
            }

            toastr.error('!In "Payment method" the field "General payment gateway" is required.');
            return;
         }

         var tipo_pasarela_pago = null;
         var titular_tarjeta = null;
         var numero_tarjeta = null;
         var codigo_ccv = null;
         var exp_month = null;
         var exp_year = null;
         var estado_id = null;
         var use_credit_card = null;
         var cnon_tarjetas_square = null;
         
         var banco_metodo_pago = null;
 
         var numero_ruta_metodo_pago = null;
         var tipo_titular_metodo_pago = null;
         var email_metodo_pago = null;
         //var nombre_beneficiario = null;

         var nombre_banco_metodo_pago = null;
         var nombre_tipo_cuenta = null;

         var configuracion_stripe_id = null;

         //console.log("id");
         //console.log(id); 

         var verificado = null;
 
         let encontroDatosTipoCuenta = arreglo_data_tipo_cuenta.find((data) => data.id == tipo_cuenta);

         if(encontroDatosTipoCuenta)
         {
            nombre_tipo_cuenta = encontroDatosTipoCuenta.descripcion;
         }

         // si es 1 o 2 no es pasarela de pago es cuenta bancaria
         if(tipo_cuenta == "1" || tipo_cuenta == "2")
         {

            titular_tarjeta = $(".titular_tarjeta").val();

            if(isEmpty(titular_tarjeta))
            {
               
               toastr.options.onclick = function() {
                  const targetDiv = document.querySelector('.titular_tarjeta');
                  
                  if (targetDiv) {
                     targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
                  }
               }

               toastr.error('!In "Payment method" the field "Card name" is required.');
               return;
            }

            banco_metodo_pago = $(".banco_metodo_pago").val();

            if(isEmpty(banco_metodo_pago))
            {
               
               toastr.options.onclick = function() {
                  const targetDiv = document.querySelector('.banco_metodo_pago');
                  
                  if (targetDiv) {
                     targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
                  }
               }

               toastr.error('!In "Payment method" the field "Bank" is required.');
               return;
            }

            numero_tarjeta = $(".numero_cuenta_metodo_pago").val();

            if(isEmpty(numero_tarjeta))
            {
               
               toastr.options.onclick = function() {
                  const targetDiv = document.querySelector('.numero_cuenta_metodo_pago');
                  
                  if (targetDiv) {
                     targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
                  }
               }

               toastr.error('!In "Payment method" the field "Card number" is required.');
               return;
            }

            numero_ruta_metodo_pago = $(".numero_ruta_metodo_pago").val();

            if(isEmpty(numero_ruta_metodo_pago))
            {
               
               toastr.options.onclick = function() {
                  const targetDiv = document.querySelector('.numero_ruta_metodo_pago');
                  
                  if (targetDiv) {
                     targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
                  }
               }

               toastr.error('!In "Payment method" the field "Route number" is required.');
               return;
            }

            tipo_titular_metodo_pago = $(".tipo_titular_metodo_pago").val();

            if(isEmpty(tipo_titular_metodo_pago))
            {
               
               toastr.options.onclick = function() {
                  const targetDiv = document.querySelector('.tipo_titular_metodo_pago');
                  
                  if (targetDiv) {
                     targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
                  }
               }

               toastr.error('!In "Payment method" the field "Account Holder Type" is required.');
               return;
            }

            email_metodo_pago = $(".email_metodo_pago").val();

            if(isEmpty(email_metodo_pago))
            {
               
               toastr.options.onclick = function() {
                  const targetDiv = document.querySelector('.email_metodo_pago');
                  
                  if (targetDiv) {
                     targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
                  }
               }

               toastr.error('!In "Payment method" the field "Email" is required.');
               return;
            }
            
            
            if(esCorreo(email_metodo_pago) == false)
            {
               toastr.options.onclick = function() {
                  const targetDiv = document.querySelector('.email_metodo_pago');
                  
                  if (targetDiv) {
                     targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
                  }
               }

               toastr.error('!In "Payment method" the "Email" field is invalid.');
               return;
            }

            nombre_banco_metodo_pago = banco_metodo_pago;
  
            /*
            let BancoEncontrado = arreglo_tipo_bancos.find((data) => data.id == banco_metodo_pago );

            if(BancoEncontrado)
            {
               nombre_banco_metodo_pago = BancoEncontrado.name;
            }
            */

            //solo vamos a consultar solo cuando se cree si modificar no crear eso
            if( isEmpty(id) == true  )
            {
                
               let informacionEncontrada = pasarela_pago_stripe.find((data) => data.id == configuracion_stripe_id  );

               if(informacionEncontrada)
               {

                  console.log("informacionEncontrada");
                  console.log(informacionEncontrada);

                  $('.loading_modal_planes').css('display', '');
                  $('#guardar_modal_planes').css('display', 'none');
                  $('.loading_modal_planes  ').prop('disabled', true);

                  try {
                     

                     //$('.plan_nombre, .plazo_meses, .manejo_mora, .interes_por_mora, .tasa_interes, .monto_maximo, .monto_minimo, .modalidad_cobro, .activo ').prop('disabled', true);
                     

                     const stripe = Stripe(
                        informacionEncontrada.value,
                     );  titular_tarjeta

                     const bankAccountData = {
                        country: "US", // Usar US para datos de prueba
                        currency: "usd",
                        account_number: numero_tarjeta,
                        routing_number: numero_ruta_metodo_pago,
                        account_holder_name:  titular_tarjeta,
                        account_holder_type:  tipo_titular_metodo_pago,
                     };

                     console.log("bankAccountData");
                     console.log(bankAccountData);

                     const result = await stripe.createToken(
                        "bank_account",
                        bankAccountData,
                     );

                     if (result.error) {
                        
                        toastr.error(result.error.message);
                        $('.loading_modal_planes').css('display', 'none');
                        $('#guardar_modal_planes').css('display', '');
                        return;
                     }

                     console.log("result");
                     console.log(result);

                  } catch (error) {
                     toastr.error(error.message);   

                     $('.loading_modal_planes').css('display', 'none');
                     $('#guardar_modal_planes').css('display', '');               
                  }

                  $('.loading_modal_planes').css('display', 'none');
                  $('#guardar_modal_planes').css('display', '');

               }
            }
 
            tipo_pasarela_pago = "Stripe";

            verificado = 2;

         }else{
            
            //solo para 

            tipo_pasarela_pago = $(".tipo_pasarela_pago").val();
         
            if(isEmpty(tipo_pasarela_pago))
            {
               
               toastr.options.onclick = function() {
                  const targetDiv = document.querySelector('.tipo_pasarela_pago');
                  
                  if (targetDiv) {
                     targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
                  }
               }

               toastr.error('!In "Payment method" the field "Payment gateway type" is required.');
               return;
            }

            titular_tarjeta = $(".titular_tarjeta").val();
            numero_tarjeta = $(".numero_tarjeta").val();
            codigo_ccv = $(".codigo_ccv").val();
            exp_month = $(".exp_month").val();
            exp_year = $(".exp_year").val();
 
            
            if(isEmpty(titular_tarjeta))
            {
               
               toastr.options.onclick = function() {
                  const targetDiv = document.querySelector('.titular_tarjeta');
                  
                  if (targetDiv) {
                     targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
                  }
               }

               toastr.error('!In "Payment method" the field "Card name" is required.');
               return;
            }   

            if(tipo_pasarela_pago == "Stripe")
            {

               if(isEmpty(numero_tarjeta))
               {
                  
                  toastr.options.onclick = function() {
                     const targetDiv = document.querySelector('.numero_tarjeta');
                     
                     if (targetDiv) {
                        targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
                     }
                  }

                  toastr.error('!In "Payment method" the field "Card number" is required.');
                  return;
               }

               if(isEmpty(codigo_ccv))
               {
                  
                  toastr.options.onclick = function() {
                     const targetDiv = document.querySelector('.codigo_ccv');
                     
                     if (targetDiv) {
                        targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
                     }
                  }

                  toastr.error('!In "Payment method" the field "CCV" is required.');
                  return;
               }

               if(isEmpty(exp_month))
               {
                  
                  toastr.options.onclick = function() {
                     const targetDiv = document.querySelector('.exp_month');
                     
                     if (targetDiv) {
                        targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
                     }
                  }

                  toastr.error('!In "Payment method" the field "Expiration month" is required.');
                  return;
               }

               if(isEmpty(exp_year))
               {
                  
                  toastr.options.onclick = function() {
                     const targetDiv = document.querySelector('.exp_year');
                     
                     if (targetDiv) {
                        targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
                     }
                  }

                  toastr.error('!In "Payment method" the field "Year of expiration" is required.');
                  return;
               }

               //
               let copia_exp_year = exp_year || "";
               copia_exp_year.toString().slice(-2);

               let fechaExpiracionAno = (copia_exp_year || '0').padStart(2, '0');

               let fechaExpiracionMes = (exp_month || '0').padStart(2, '0');

               const currentYear = (new Date().getFullYear() % 100)
               .toString()
               .padStart(2, '0'); // Últimos dos dígitos del año actual con dos dígitos
               const currentMonth = (new Date().getMonth() + 1)
               .toString()
               .padStart(2, '0'); // Mes actual con dos dígitos

               // Validación del año
               if (parseInt(fechaExpiracionAno, 10) < parseInt(currentYear, 10)) {
                  //this._snackBar.open(
                  //   'The expiration date is invalid.',
                  //   'Cerrar',
                  //   {
                  //      duration: errorTime,
                  //   }
                  //);
                  toastr.error('!The expiration date of the month is invalid.');
                  return;
               } else if (
               parseInt(fechaExpiracionAno, 10) === parseInt(currentYear, 10)
               ) {
                  // El año es igual al actual, validar el mes
                  if (parseInt(fechaExpiracionMes, 10) < parseInt(currentMonth, 10)) {
                     // El mes es menor, la validación falla
                     //this._snackBar.open(
                     //   'La fecha de expiración el mes es inválida',
                     //   'Cerrar',
                     //   {
                     //   duration: errorTime,
                     //   }
                     //);

                     toastr.error('!The expiration date of the month is invalid.');
                     return;
                  }
               }


            }else{

               if( isEmpty(id) == true  )
               {

                  $('.loading_modal_planes').css('display', '');
                  $('#guardar_modal_planes').css('display', 'none');
                  $('.loading_modal_planes  ').prop('disabled', true);

                  try {
                     //console.log("card");
                     //console.log(card_datos_square);

                     const token = await tokenize(card_datos_square);

                     if (token.status == "OK") {
                        console.log(token.token);

                        let details = token.details || {};
                        let card = details.card || {};

                        cnon_tarjetas_square = token.token;

                        exp_month = card.expMonth;
                        exp_year  = card.expYear;
                        numero_tarjeta  = card.last4;

                        $('.loading_modal_planes').css('display', 'none');
                        $('#guardar_modal_planes').css('display', '');

                     } else {
                        
                        $('.loading_modal_planes').css('display', 'none');
                        $('#guardar_modal_planes').css('display', '');

                        if(Array.isArray(token.errors))
                        {

                           token.errors.forEach((data) => {
                              let {
                                 field,
                                 message,
                                 type,
                              } = data;

                              toastr.error(message);
                              return;
                           });

                           if(token.errors.length != 0)
                           {
                              return;
                           }

                        }

                     }
                  
                     console.log("Payment Token:", token); // Use this token as source_id
                  } catch (error) {
                     console.error(error);
                     toastr.error('Error: ' + error);
                     $('.loading_modal_planes').css('display', 'none');
                     $('#guardar_modal_planes').css('display', '');
                     return;
                  }
               }

            }


            let validacionCaracteres = validatePaymentPlanFields();

            if(validacionCaracteres == true){
               return;
            }

            verificado = 1;

            //

         }

         estado_id = $(".estado_id").val();
         use_credit_card = $(".use_credit_card").val();

         if(isEmpty(estado_id))
         {
            
            toastr.options.onclick = function() {
               const targetDiv = document.querySelector('.estado_id');
               
               if (targetDiv) {
                  targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
               }
            }
            toastr.error('!In "Payment method" the field "Status" is required.');
            return;
         }

         if(isEmpty(use_credit_card))
         {
            
            toastr.options.onclick = function() {
               const targetDiv = document.querySelector('.use_credit_card');
               
               if (targetDiv) {
                  targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
               }
            }
            toastr.error('!In "Payment method" the field "Set as default payment method" is required.');
            return;
         }

         if( isEmpty(id) == true  )
         {  
            let UUID = generateUUIDv4();
            let UUID_ENC = uuidToBase64UrlRFC7515(UUID);

            let informacionFrontend = {
               tipo_cuenta: tipo_cuenta,
               nombre_tipo_cuenta: nombre_tipo_cuenta,
               tipo_pasarela_pago: tipo_pasarela_pago,
               titular_tarjeta: titular_tarjeta,
               numero_tarjeta: numero_tarjeta,
               codigo_ccv: codigo_ccv,
               exp_month: exp_month,
               exp_year: exp_year,
               estado_id: estado_id,
               use_credit_card: use_credit_card,
               cnon_tarjetas_square: cnon_tarjetas_square,
               estado_nombre: estado_id == 1 ? "Active" : "Inactive",
               use_credit_card_nombre: use_credit_card == 1 ? "Predetermined" : "Secondary",
               UUID: UUID,
               UUID_ENC: UUID_ENC,
               banco_metodo_pago: banco_metodo_pago,

               //nombre_beneficiario: nombre_beneficiario,
               nombre_banco_metodo_pago: nombre_banco_metodo_pago,

               numero_ruta_metodo_pago:   numero_ruta_metodo_pago,
               tipo_titular_metodo_pago:  tipo_titular_metodo_pago,
               email_metodo_pago:         email_metodo_pago,

               configuracion_stripe_id:   tipo_pasarela_pago_general,

               verificado: verificado,

               id: "",
            }; 
 
            console.log(JSON.stringify(informacionFrontend));
            //return;

            if (use_credit_card == 1) {
               arreglo_planes.forEach((element) => {
                  element.use_credit_card_nombre = 'Secondary';
                  element.use_credit_card = 2;
               });
            }

            arreglo_planes.push(informacionFrontend);

            $(".tbody_envios_metodo_pagos").html(tabla_html_planes(arreglo_planes));
            eventosTablaPlanes();
            
            $("#addModalPlanes").modal("hide");

         }else{
 
            let modificar = arreglo_planes.find((data) => data.UUID_ENC == id  ); 
 
            if(modificar)
            {

               if (use_credit_card == 1) {
                  arreglo_planes.forEach((element) => {
                     element.use_credit_card_nombre = 'Secondary';
                     element.use_credit_card = 2;
                  });
               }
 
               modificar.tipo_cuenta              = tipo_cuenta;
               modificar.nombre_tipo_cuenta       = nombre_tipo_cuenta;

               modificar.banco_metodo_pago        = banco_metodo_pago;
               //modificar.nombre_beneficiario      = nombre_beneficiario;
               modificar.nombre_banco_metodo_pago = nombre_banco_metodo_pago;

               modificar.tipo_pasarela_pago = tipo_pasarela_pago;
               modificar.titular_tarjeta = titular_tarjeta;
                
               if(tipo_pasarela_pago == "Stripe")
               {
                  modificar.numero_tarjeta = numero_tarjeta;
                  modificar.codigo_ccv = codigo_ccv;
                  modificar.exp_month = exp_month;
                  modificar.exp_year = exp_year;
                  modificar.cnon_tarjetas_square = cnon_tarjetas_square;
               }

               modificar.estado_id = estado_id;
               modificar.use_credit_card = use_credit_card;


               modificar.numero_ruta_metodo_pago  = numero_ruta_metodo_pago;
               modificar.tipo_titular_metodo_pago = tipo_titular_metodo_pago;
               modificar.email_metodo_pago        = email_metodo_pago;
               modificar.configuracion_stripe_id        = tipo_pasarela_pago_general;
               
                
 
               modificar.estado_nombre = estado_id == 1 ? "Active" : "Inactive";
               modificar.use_credit_card_nombre = use_credit_card == 1 ? "Predetermined" : "Secondary";

               $(".tbody_envios_metodo_pagos").html(tabla_html_planes(arreglo_planes));
               eventosTablaPlanes();
               
               $("#addModalPlanes").modal("hide");

            }
 

         }
 
         //$('.plan_nombre, .plazo_meses, .manejo_mora, .interes_por_mora, .tasa_interes, .monto_maximo, .monto_minimo, .modalidad_cobro, .activo ').prop('disabled', true);
         //$('.loading_modal_planes').css('display', '');
         //$('#guardar_modal_planes').css('display', 'none');
  
         //alert("return  ");
       
      });

      $(".tipo_cuenta").on("change", function() { 
         
         
         let tipo_cuenta = $(".tipo_cuenta").val();

         //let configuracion_stripe_cuentas_bancarias = $(".configuracion_stripe_cuentas_bancarias").val();

         //console.log("tipo_cuenta");
         //console.log(tipo_cuenta);

         if(isEmpty(tipo_cuenta) == true)
         {
            $(".ocultar_todo_metodo_pago").css("display", "none");
            $(".mostrarDefault").css("display", "none");
            $(".mostrar_credit_card").css("display", "none");
         }

         $(".ocultar_tppg").css("display", "");

         $('.tipo_pasarela_pago')[0].selectedIndex = 0;

         if(tipo_cuenta == "1")
         {  
            //if(isEmpty(configuracion_stripe_cuentas_bancarias) == true)
            //{
            //   toastr.error("You must select a stripe configuration");
            //   return;
            //}

            $(".MostrarSoloSquare").css("display", "none");
            $(".titulo_metodo_pago_nombre").text("Account Holder");
            mostrarSavingCheking();

            let filtro_pasarela = pasarela_pago_stripe.filter((data) => data.processor == "stripe");

            if(filtro_pasarela.length == 0)
            {
               $(".tipo_pasarela_pago_general").html("");
            }else{
               let html_data_pasarela_pago_stripe = select_html_stripe(filtro_pasarela);
               $(".tipo_pasarela_pago_general").html(html_data_pasarela_pago_stripe);
            }

         }

         if(tipo_cuenta == "2")
         {
            //if(isEmpty(configuracion_stripe_cuentas_bancarias) == true)
            //{
            //   toastr.error("You must select a stripe configuration");
            //   return;
            //}

            $(".MostrarSoloSquare").css("display", "none");
            $(".titulo_metodo_pago_nombre").text("Account Holder");
            mostrarSavingCheking();

            let filtro_pasarela = pasarela_pago_stripe.filter((data) => data.processor == "stripe");

            if(filtro_pasarela.length == 0)
            {
               $(".tipo_pasarela_pago_general").html("");
            }else{
               let html_data_pasarela_pago_stripe = select_html_stripe(filtro_pasarela);
               $(".tipo_pasarela_pago_general").html(html_data_pasarela_pago_stripe);
            }
         }
         
         if(tipo_cuenta == "3")
         {
            $(".MostrarSoloStripe").css("display", "");
            $(".MostrarSoloSquare").css("display", "none");

            $(".mostrar_credit_card").css("display", "");

            $(".titulo_metodo_pago_nombre").text("Card name");
            mostrarStripe();

            //console.log("pasarela_pago_stripe");
            //console.log(pasarela_pago_stripe);

            let filtro_pasarela = pasarela_pago_stripe.filter((data) => data.processor == "stripe");

            if(filtro_pasarela.length == 0)
            {
               $(".tipo_pasarela_pago_general").html("");
            }else{
               let html_data_pasarela_pago_stripe = select_html_stripe(filtro_pasarela);
               $(".tipo_pasarela_pago_general").html(html_data_pasarela_pago_stripe);
            }

             

         }

      });

      $(".cliente_aprueba").on("change", function() {

         let cliente_aprueba = $(".cliente_aprueba").val();
         
         if(cliente_aprueba)
         {

            $(".loading_guardar_close_finish").css("display", "none");
            $(".loading_guardar_siguiente").css("display", "none");

            if(cliente_aprueba == 1 || cliente_aprueba == "1" )
            {
               $(".guardar_close_finish").css("display", "none");
               $(".guardar_siguiente").css("display", "");

               //guardar_siguiente
            }else{
               $(".guardar_close_finish").css("display", "");
               $(".guardar_siguiente").css("display", "none");
            }

         }

      });

 

       


   });

   function mostrarStripe()
   {
      $(".MostrarSoloStripe").css("display", "");
      $(".mostrar_saving_cheking").css("display", "none");
      $(".mostrarDefault").css("display", "");
      $(".mostrar_credit_card").css("display", "");
   }

   function mostrarSavingCheking()
   {
      $(".mostrar_saving_cheking").css("display", "");
      $(".MostrarSoloStripe").css("display", "none");
      $(".mostrarDefault").css("display", "");
      $(".mostrar_credit_card").css("display", "none");
   }

   $('.tipo_pasarela_pago').on('change', function() {
      
      let selectedGateway = $(this).val();
      console.log('Selected payment gateway:', selectedGateway);
      // Optionally, trigger additional actions 
      
      if(selectedGateway == "Stripe")
      {
         $(".MostrarSoloStripe").css("display", "");
         $(".MostrarSoloSquare").css("display", "none");

         let filtro_pasarela = pasarela_pago_stripe.filter((data) => data.processor == "stripe");

         if(filtro_pasarela.length == 0)
         {
            $(".tipo_pasarela_pago_general").html("");
         }else{
            let html_data_pasarela_pago_stripe = select_html_stripe(filtro_pasarela);
            $(".tipo_pasarela_pago_general").html(html_data_pasarela_pago_stripe);
         }
         
      }else{
         $(".MostrarSoloStripe").css("display", "none");
         $(".MostrarSoloSquare").css("display", "");

         let filtro_pasarela = pasarela_pago_stripe.filter((data) => data.processor == "square");

         if(filtro_pasarela.length == 0)
         {
            $(".tipo_pasarela_pago_general").html("");
         }else{
            let html_data_pasarela_pago_stripe = select_html_stripe(filtro_pasarela);
            $(".tipo_pasarela_pago_general").html(html_data_pasarela_pago_stripe);
         }
          
      }

       

   });

   $('.tipo_pasarela_pago_general').on('change', function() {
      
      let selectedGateway = $(this).val();
      console.log('Selected payment gateway:', selectedGateway);

      let tipo_cuenta = $(".tipo_cuenta").val();
     
      if(tipo_cuenta)
      {
         if(tipo_cuenta == "3" || tipo_cuenta == 3 )
         {
            $(".MostrarSoloStripe").css("display", "");
            $(".MostrarSoloSquare").css("display", "none");

      
            let filtro_pasarela = pasarela_pago_stripe.find((data) =>  data.processor == "square" && data.id == selectedGateway);

            if(filtro_pasarela)
            {
               console.log("filtro_pasarela")
               console.log(filtro_pasarela)

               $(".MostrarSoloStripe").css("display", "none");
               $(".MostrarSoloSquare").css("display", "");
      
               let informacion = {
                  aplicacion_id_square:  filtro_pasarela.value,
                  location_id_square:  filtro_pasarela.c2,
               };
      
               initializeSquare(informacion).then(card => {
                  card_datos_square = card; // Store card instance for later use
                  console.log('Square card initialized:', card_datos_square);
               });

            
            } 
         }else{

         }
      }

 

   });

   function generarTarifario(plan_crediticio)
   {
      let buscarInformacion = data_plan_pago.find(item => item.id == plan_crediticio);
         
      if(buscarInformacion)
      {
         planGenerado = true; 

         console.log("buscarInformacion");
         console.log(buscarInformacion);

         let tasa_interes = parseToFloatOrZero(buscarInformacion.tasa_interes);
         let periodo_modalidad_cobro = parseToFloatOrZero(buscarInformacion.periodo_modalidad_cobro);
         
         //let plazo_pagos = parseToFloatOrZero(buscarInformacion.plazo_meses);
         let plazo_pagos = parseToFloatOrZero($(".numero_pago_cuotas").val() || 0);

         let interes_periodo = tasa_interes / periodo_modalidad_cobro;
         let modalidad_cobro = parseToFloatOrZero(buscarInformacion.modalidad_cobro);

         interes_periodo = interes_periodo / 100;

         // Debugging
         console.log("valor_monto_solicitado_li:", valor_monto_solicitado_li);
         console.log("tasa_interes:", tasa_interes);
         console.log("periodo_modalidad_cobro:", periodo_modalidad_cobro);
         console.log("plazo_pagos:", plazo_pagos);
         console.log("modalidad_cobro:", modalidad_cobro);
         console.log("getFechaConZonaHoraria:", getFechaConZonaHoraria("", timeZone));

         console.log("interes_periodo:", interes_periodo);
         console.log("plazo_pagos:", plazo_pagos);
         console.log("valor_monto_solicitado_li:", valor_monto_solicitado_li);

         // Obtener fecha actual
         let fechaActual_ = getFechaConZonaHoraria("", timeZone);
         let fechaActual = new Date(fechaActual_);

         planes = [];
         
         let valor_cuota = calcularPago(interes_periodo, plazo_pagos, valor_monto_solicitado_li);

         let relacion_ingreso_cuota =  valor_cuota / total_ingresos_egresos;
 

         $(".relacion_cuota_ingreso").val( redondearNumero(relacion_ingreso_cuota * 100, 0));

         //valor_cuota = redondearNumero(valor_cuota, 2);

         // Generar fechas de pago según la modalidad de cobro
         for (let cuotas = 1; cuotas <= plazo_pagos; cuotas++) {
            let fecha_pago = null;

            if (modalidad_cobro == 3) { // Mensual
                  let nuevaFecha = new Date(fechaActual);
                  nuevaFecha.setMonth(fechaActual.getMonth() + cuotas);
                  fecha_pago = getFechaConZonaHoraria(nuevaFecha.toISOString().replace('T', ' ').substring(0, 19), timeZone);
            } else if (modalidad_cobro == 2) { // Quincenal
                  let nuevaFecha = new Date(fechaActual);
                  nuevaFecha.setDate(fechaActual.getDate() + cuotas * 15); // Sumar 15 días por cuota
                  fecha_pago = getFechaConZonaHoraria(nuevaFecha.toISOString().replace('T', ' ').substring(0, 19), timeZone);
            } else if (modalidad_cobro == 1) { // Semanal
                  let nuevaFecha = new Date(fechaActual);
                  nuevaFecha.setDate(fechaActual.getDate() + cuotas * 7); // Sumar 7 días por cuota
                  fecha_pago = getFechaConZonaHoraria(nuevaFecha.toISOString().replace('T', ' ').substring(0, 19), timeZone);
            } 

            let cantidadPlanes = planes.length;

            //orden de operaciones
            let valor_mora = 0;
            let valor_interes = 0;
            let valor_capital = 0;

            let total_cuota = 0;
            let saldo_capital = 0;

            //detalle del pago realizado por cuota
            let valor_pagado = 0;
            let mora_pagado = 0;
            let interes_pagado = 0;
            let capital_pagado = 0;

            //Detalle de valor pendiente de cuota
            let mora_pendiente = 0;
            let interes_pendiente = 0;
            let capital_pendiente = 0;
            let saldo_pendiente = 0;

            if(cantidadPlanes == 0)
            {
               valor_interes =  ((valor_monto_solicitado_li * interes_periodo));
               valor_capital = ((valor_cuota - valor_interes));
               total_cuota = ((valor_mora + valor_interes + valor_capital));
               saldo_capital = (( valor_monto_solicitado_li - valor_capital ));

               //pendientes
               interes_pendiente = valor_interes;
               capital_pendiente = valor_capital;
               saldo_pendiente   = (( interes_pendiente + capital_pendiente ));

            }else{
               
               let ultimoPlan = planes[cantidadPlanes - 1];

               valor_interes = ((ultimoPlan.saldo_capital * interes_periodo));
               valor_capital = ((valor_cuota - valor_interes));
               total_cuota = ((valor_mora + valor_interes + valor_capital));
               saldo_capital = (( ultimoPlan.saldo_capital - valor_capital ));

               //pendientes
               interes_pendiente = valor_interes;
               capital_pendiente = valor_capital;
               saldo_pendiente   = (( interes_pendiente + capital_pendiente ));

            }

            planes.push({
                  //detalle de cuota
                  cuotas: cuotas,
                  fecha_pago: fecha_pago,
                  valor_cuota: valor_cuota,
                  valor_mora:  0,
                  valor_interes:  valor_interes,
                  valor_capital:  valor_capital,
                  total_cuota:    total_cuota,
                  saldo_capital:  convertirCeroNegativo(saldo_capital),

                  //detalle del pago realizado por cuota
                  valor_pagado: valor_pagado,
                  mora_pagado: mora_pagado,
                  interes_pagado: interes_pagado,
                  capital_pagado: capital_pagado,

                  //Detalle de valor pendiente de cuota
                  mora_pendiente: mora_pendiente,
                  interes_pendiente: interes_pendiente,
                  capital_pendiente: capital_pendiente,
                  saldo_pendiente: saldo_pendiente,
            });
 
         }
   
         console.log("planes");
         console.log(planes);

         var newRow = "";

         planes.forEach((element) => {

            let {
               cuotas,
               fecha_pago,
               valor_cuota,
               valor_mora,
               valor_interes,
               valor_capital,
               total_cuota,
               saldo_capital,
               valor_pagado,
               mora_pagado,
               interes_pagado,
               capital_pagado,
               mora_pendiente,
               interes_pendiente,
               capital_pendiente,
               saldo_pendiente,
            } = element;

   
            newRow +=
               "<tr>" +
                  '<td class="centrar">' + cuotas + "</td>" +
                  '<td class="centrar">' + formatFecha(fecha_pago) + "</td>" +
                  '<td class="centrar">' + formatNumber(valor_interes) + "</td>" +
                  '<td class="centrar">' + formatNumber(valor_capital) + "</td>" +
                  '<td class="centrar">' + formatNumber(total_cuota) + "</td>" +
                  '<td class="centrar">' + formatNumber(saldo_capital) + "</td>" +
               "</tr>";

         });

         $(".tbody_envios").html(newRow);


      }
   }

   function convertirCeroNegativo(numero, umbral = 0.00001) {
      // Validar que el número sea válido, si no, devolver 0
      if (numero === null || numero === undefined || isNaN(numero)) {
         return 0;
      }

      // Convertir a número si es string
      const num = parseFloat(numero);
      if (isNaN(num)) {
         return 0;
      }

      // Si el valor absoluto es menor que el umbral, devolver 0
      if (Math.abs(num) < umbral) {
         return 0;
      }

      // Devolver el número original si no está dentro del umbral
      return num;
   }

   function redondearNumero(numero, decimales) {    

      // Convertir a número si es string
      const num = parseFloat(numero);
      if (isNaN(num)) {
         return 0;
      }

      // Validar que decimales sea un número entero no negativo
      const dec = parseInt(decimales);
      if (isNaN(dec) || dec < 0) {
         return num; // Si decimales no es válido, devolver el número sin redondear
      }

      const factor = Math.pow(10, dec);
      return Math.round(num * factor) / factor;
   }

   function calcularPago(tasa, nper, va) {
      // Fórmula: Pago = (va * tasa) / (1 - (1 + tasa)^(-nper))
      const numerador = va * tasa;
      const denominador = 1 - Math.pow(1 + tasa, -nper);
      const pago = numerador / denominador;
      return isNaN(pago) ? 0 : pago;
   }

   function parseToFloatOrZero(value) {
      // Si es null, undefined o cadena vacía, devolver 0
      if (isEmpty(value) == true) {
         return 0;
      }
      
      // Si es un string, intentar convertirlo a float
      if (typeof value === 'string') {
         const parsed = parseFloat(value);
         // Verificar si el resultado es un número válido
         return isNaN(parsed) ? 0 : parsed;
      }
      
      // Si es un número, devolverlo directamente
      if (typeof value === 'number' && !isNaN(value)) {
         return value;
      }
      
      // Por defecto, devolver 0 si no es un string ni un número válido
      return 0;
   }

   function contadorPosicion()
   {
      if(menus_disponibles.plan_pago == 1 || menus_disponibles.plan_pago == "1")
      {
         menus_disponibles.desembolzo = "1";
      }
 
   }

   function cargarPrincipal()
   {

      let data = {
         id_ifp: id_ifp,
      };

      console.log(JSON.stringify(data));

      $.ajax({
         type: "POST",
         url: URL_BASE + "credit/get-data-payment-plan",
         data: JSON.stringify(data),
         contentType: "application/json", // Tipo de contenido JSON
         success: function (response) {
 
            try {
               let info = JSON.parse(response);

               if (info.type == "success") {

                  menus_disponibles = info.menu_habilitados || {};

                  let dataPreAprobbal = info.data_gip || {};
                  let data_ppp = info.data_ppp || {};
                  let data_gip = info.data_gip || {};
                  data_plan_pago = info.data_plan_pago || [];

                  pasarela_pago_stripe  = info.data_payment_gateway || [];

                  console.log("pasarela_pago_stripe")
                  console.log(pasarela_pago_stripe)

                  //let html_data_pasarela_pago_stripe = select_html_stripe(pasarela_pago_stripe);
                  //$(".configuracion_stripe_cuentas_bancarias").html(html_data_pasarela_pago_stripe);

                  timeZone = info.data_sys_config.zona_horaria || "America/New_York";

                  let data_plan_filtro = data_plan_pago.filter(item => item.activo == 1);

                  if(data_plan_filtro.length > 0)
                  {
                     $(".plan_crediticio").html(select_html_basic(data_plan_filtro));
                  }else{
                     ventanaError("There is no plan for the requested amount", "You don't have a plan for this amount. Go to the payment plan creation section.");
                  }
 
                  arreglo_tipo_bancos  = info.data_bank || [];

                  let html_bancos = select_html_bank(arreglo_tipo_bancos);

                  $(".banco_desembolsar").html(html_bancos);
                  $(".banco_acreditar").html(html_bancos);
                  $(".banco_metodo_pago").html(html_bancos);

                  arreglo_tipo_cuentas  = info.data_type_account || [];

                  let html_tipo_cuenta = select_html_bank(arreglo_tipo_cuentas);

                  $(".tipo_cuenta_desembolsar").html(html_tipo_cuenta);
                  $(".tipo_cuenta_acreditar").html(html_tipo_cuenta);

                  let html_data_tipo_cuenta = select_html_tipo_cuenta(arreglo_data_tipo_cuenta);
                  $(".tipo_cuenta").html(html_data_tipo_cuenta);

                  //console.log("dataPreAprobbal");
                  //console.log(data_ppp);

                  //relacion_cuota_ingreso

                  if(Object.keys(data_gip).length != 0)
                  {

                     //"ingreso_mensual_aproximado_ei": "302",
                     //"otros_ingresos_mensuales_ei": "33",
                     //"gastos_mensaules_aproximados_ei": "104",

                     let ingresos = parseToFloatOrZero(data_gip.ingreso_mensual_aproximado_ei) + parseToFloatOrZero(data_gip.otros_ingresos_mensuales_ei);
                     let egresos  = parseToFloatOrZero(data_gip.gastos_mensaules_aproximados_ei);

                     total_ingresos_egresos = ingresos - egresos; 

                     if(Object.keys(data_gip).length != 0)
                     {
                        if(isEmpty(data_gip.numero_credito) == true)
                        {
                           $(".titulo_cabecera_credito").text(" " + data_gip.account);
                        }else{
                           $(".titulo_cabecera_credito").text(" No. Credit: " + data_gip.numero_credito + " - " + data_gip.account);
                        }

                     }
 

                  }


                  if(Object.keys(dataPreAprobbal).length != 0)
                  {
                     $(".valor_monto_solicitado_li").val(dataPreAprobbal.valor_monto_solicitado_li_formateado);
                     $(".motivo_prestamo_li").val(dataPreAprobbal.motivo_prestamo_li);

                     valor_monto_solicitado_li = parseToFloatOrZero(dataPreAprobbal.valor_monto_solicitado_li);

                  } 

                  if(Object.keys(data_ppp).length != 0)
                  {
                     $(".plan_crediticio").val(data_ppp.plan_crediticio);
                     $(".cliente_aprueba").val(data_ppp.cliente_aprueba);


                     $(".tipo_cuenta_desembolsar").val(data_ppp.tipo_cuenta_desembolsar);
                     $(".tipo_cuenta_acreditar").val(data_ppp.tipo_cuenta_acreditar);

                     $(".numero_ruta_acredita").val(data_ppp.numero_ruta_acredita);
                     $(".tipo_titular_tarjeta_acreditar").val(data_ppp.tipo_titular_tarjeta_acreditar);
                     $(".correo_electronico_acreditar").val(data_ppp.correo_electronico_acreditar);

                     $(".mostrar_no_cash_desembolsar").css("display", "none");

                     $(".banco_desembolsar").val(data_ppp.banco_desembolsar);
                     $(".numero_cuenta_desembolsar").val(data_ppp.numero_cuenta_desembolsar);
                     $(".nombre_beneficiario_desembolsar").val(data_ppp.nombre_beneficiario_desembolsar);

                     if(data_ppp.tipo_cuenta_desembolsar != 1)
                     {
                        $(".mostrar_no_cash_desembolsar").css("display", "");
                     }

                     $(".mostrar_no_cash_acreditar").css("display", "none");

                     $(".banco_acreditar").val(data_ppp.banco_acreditar);
                     $(".numero_cuenta_acreditar").val(data_ppp.numero_cuenta_acreditar);
                     $(".nombre_beneficiario_acreditar").val(data_ppp.nombre_beneficiario_acreditar);

                     if(isEmpty(data_ppp.tipo_cuenta_acreditar) == false)
                     {
                        if(data_ppp.tipo_cuenta_acreditar != 1 )
                        {
                           $(".mostrar_no_cash_acreditar").css("display", "");
                        }
                     }
 
                     $(".numero_pago_cuotas").val(data_ppp.numero_pago_cuotas);
                     $(".relacion_cuota_ingreso").val(data_ppp.relacion_cuota_ingreso);
 

                     //habilitar el modo de edicion
                     $(".btn-edicion").attr("data-edicion", "1");
                     $(".btn-edicion-text").text("Enabled editing");

                     $('input, select, button, textarea').prop('disabled', true);
                     $('.back').prop('disabled', false);
                     $('.btn-edicion').prop('disabled', false);

                     generarTarifario(data_ppp.plan_crediticio);

                     if(isEmpty(data_ppp.sys_pg_stripe_id) == false )
                     {
                        console.log("data_ppp.sys_pg_stripe_id")
                        console.log(data_ppp.sys_pg_stripe_id)

                        $(".configuracion_stripe_cuentas_bancarias").val(data_ppp.sys_pg_stripe_id);
                        $('.configuracion_stripe_cuentas_bancarias').prop('disabled', true);

                        habiliarConfiguracionStripe = true;
                     }else{
                        habiliarConfiguracionStripe = false;
                     }

                     $('.btn-edit, .btn-eliminar ').prop('disabled', true);
 
                  }else{

                     //habilitar el modo de edicion
                     $(".btn-edicion").attr("data-edicion", "2");
                     $(".btn-edicion-text").text("Disabled editing");

                     $('input, select, button, textarea').prop('disabled', false);
                     $('.valor_monto_solicitado_li, .motivo_prestamo_li').prop('disabled', true);

                     $('.back').prop('disabled', false);
                     $('.btn-edicion').prop('disabled', false);

                     $(".btn-edicion").css("display", "none");

                     $('.plan_crediticio, .cliente_aprueba, .btn_general_plan, .guardar_borrador, .guardar_siguiente ').prop('disabled', false);

                     $(".numero_pago_cuotas").prop("disabled", true);

                     //$('.btn-edit').prop('disabled', false);
                     //$('.btn-eliminar').prop('disabled', false);

                     $('.btn-edit, .btn-eliminar ').prop('disabled', false);

                  }

                  if(menus_disponibles.preaprobacion == 1)
                  {
                     //$(".btn-edicion").css("display", "none");
                     //$(".guardar_rechazar").css("display", "none");
                     //$(".guardar_borrador").css("display", "none");
                     //$(".guardar_siguiente").css("display", "");

                     if(menus_disponibles.estado_prestamo == 5)
                     {
                        
                        $(".btn-edicion").css("display", "none");
                        $(".guardar_rechazar").css("display", "none");
                        $(".guardar_borrador").css("display", "none");
                        $(".guardar_siguiente").css("display", "none");

                     }else{
                        //$(".guardar_siguiente").css("display", "none");
                     }
                      
                  }

                  if(menus_disponibles.plan_pago == 1)
                  {
                     $(".guardar_borrador").css("display", "none");
                     //$(".guardar_siguiente").css("display", "none");

                     $(".guardar_siguiente").text("Next");
                     $(".guardar_siguiente").attr("disabled", false);
                     //$(".guardar_siguiente").css("display", "none");

                     //$(".btn-edicion").css("display", "none");

                     $(".guardar_metodos_pagos").css("display", "");
                  }

                  if(menus_disponibles.desembolzo == 1 && menus_disponibles.estado_prestamo == 4)
                  {
                     $(".enableMenu").css("display", "");
                  }

                  console.log("menus_disponibles");
                  console.log(menus_disponibles);
 
                  contadorPosicion();

                  arreglo_planes = info.data_credit_plan_payment_method || [];

                  arreglo_planes.forEach((data) => {
 
                     data.estado_nombre = data.estado_id == 1 ? "Active" : "Inactive";
                     data.use_credit_card_nombre = data.use_credit_card == 1 ? "Predetermined" : "Secondary";
        
                     let encontroDatosTipoCuenta = arreglo_data_tipo_cuenta.find((data_) => data_.id  == data.tipo_cuenta);

                     if(encontroDatosTipoCuenta)
                     {
                        data.nombre_tipo_cuenta = encontroDatosTipoCuenta.descripcion;
                     }

                  });

                  $(".tbody_envios_metodo_pagos").html(tabla_html_planes(arreglo_planes));
                  eventosTablaPlanes();

                  //$('.btn-edit, .btn-eliminar ').prop('disabled', true);
                  
                  $('.relacion_cuota_ingreso').prop('disabled', true);

                  $(".cargando_pantalla").css("display", "none");
                  $(".pantalla_cargada").css("display", "");

                  $('.pos-top').prop('disabled', false);


                  if(bloquear_botones == "usuario_no_aprueba")
                  {
                      
                     $(".btn-edit").css("display", "none");
                     $(".btn-eliminar").css("display", "none");
                     $(".btnMetodoPago").css("display", "none");
                     $(".ver_errores_tarjetas").css("display", "none");
                     $(".guardar_metodos_pagos").css("display", "none");
                  } 
 
               } else if (info.type == "error") {
                  //Swal.fire({
                  //   icon: "error",
                  //   title: "Oops...",
                  //   text: info.message,
                  //});

                  ventanaError("Opps there was an error", info.message);
               }
            } catch (error) {
               //Swal.fire({
               //   icon: "error",
               //   title: "Oops...",
               //   text: error,
               //});

               ventanaError("Opps there was an error", error);
            }
         },
         error: function (xhr, status, error) {
            console.error("Error en la solicitud:", error);
            // Manejar errores aquí
            //Swal.fire({
            //   icon: "error",
            //   title: "Oops...",
            //   text: error,
            //});

            ventanaError("Opps there was an error", error);

         },
      });

       
   }

   // Función para formatear números como 1,000.00
   const formatNumber = (number) => {
      return Number(number).toLocaleString('en-US', {
         minimumFractionDigits: 2,
         maximumFractionDigits: 2
      });
   };

   // Función para formatear fecha YYYY-MM-DD a DD/MMMM/YYYY
   const formatFecha = (fecha) => {
      //const meses = ["enero", "febrero", "marzo", "abril", "mayo", "junio", "julio", "agosto", "septiembre", "octubre", "noviembre", "diciembre"];
      const meses = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

      const date = new Date(fecha);
      return `${date.getDate()}/${meses[date.getMonth()]}/${date.getFullYear()}`;
   };

   function validatePaymentPlanFields() {
 
      const fields = [
         { selector: '.titular_tarjeta', section: 'Payment method', name: 'Card name' },
         { selector: '.numero_tarjeta', section: 'Payment method', name: 'Card number' },
         { selector: '.codigo_ccv', section: 'Payment method', name: 'CCV' },
         { selector: '.exp_month', section: 'Payment method', name: 'Expiration month' },
         { selector: '.exp_year', section: 'Payment method', name: 'Year of expiration' },
         { selector: '.estado_id', section: 'Payment method', name: 'Status' },
         { selector: '.use_credit_card', section: 'Payment method', name: 'Set as default payment method' }
      ];

      for (const field of fields) {
         const value = $(field.selector).val() || "";
         if (value && value.length > 255) {
            toastr.options.onclick = function() {
               const targetDiv = document.querySelector(field.selector);
               if (targetDiv) {
                  targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
               }
            };
            toastr.error(`In "${field.section}" the field "${field.name}" cannot exceed 255 characters.`);
            return true;
         }
      }

      return false;
   }
 
 
   function ventanaRegistroExito(titulo, mensaje) {
      $(".titulo_modal_confirmar").text(titulo);
      $(".mensaje_modal_confirmar").text(mensaje);
      $(".mensaje_espera_moda_confirmacion").text("");
      $(".tipo_modal_confirmar").val("registro_exito");
      $(".data_id").val("");

      $('#btn_aplicar_ventana_confirmacion').prop('disabled', false);
      $('#btn_close_ventana_confirmacion').prop('disabled', false);
      $('#btn_cerrar_ventana_confirmacion').prop('disabled', false);
       
      $('#btn_cerrar_ventana_confirmacion').css({
         'background-color': COLOR_FONDO_VENTANA_CERRAR,
         'color': COLOR_TEXT_VENTANA_CERRAR
      });

      $('#btn_aplicar_ventana_confirmacion').css({
         'background-color': COLOR_FONDO_VENTANA_CONFIRMACION,
         'color': COLOR_TEXT_VENTANA_CONFIRMACION,
         'display': "none"
      });
 
      $("#ventana_confirmacion").modal("show");
   }

   function isEmpty(value) {
       // Verificar si es null o undefined
       if (value == null) return true;

       // Verificar si es una cadena vacía
       if (typeof value === "string" && value.trim() === "") return true;

       // Verificar si es un array vacío
       if (Array.isArray(value) && value.length === 0) return true;

       // Verificar si es un objeto vacío
       if (typeof value === "object" && Object.keys(value).length === 0) return true;

       return false;
   }
 
   function validarSoloNumeros(input) {
       const number = parseInt(input, 10);
       return !isNaN(number) && number.toString() === input;
   }

   function validateEmail(email) {
      // Expresión regular para validar un formato de correo electrónico
      var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
      
      if (emailPattern.test(email)) {
         return true;  // Es un correo válido
      } else {
         return false;  // No es un correo válido
      }
   }
 
   function isInvalidEmail(email) {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      return !emailRegex.test(email);
   }

   function getRandomInt(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
   }

   function validateFormFields() {
      const fields = [
         { selector: '.referencias_contactadas', section: 'Pre-approval', name: 'Were references contacted?' },
         { selector: '.cliente_nuevo', section: 'Pre-approval', name: 'Are you a new customer?' },
         { selector: '.relacion_ingreso_cuota', section: 'Pre-approval', name: 'Income quota ratio' },
         { selector: '.documentacion_completa', section: 'Pre-approval', name: 'Complete documentation?' },
         { selector: '.calificacion_final', section: 'Pre-approval', name: 'Final grade' },
         { selector: '.banco', section: 'Account information', name: 'Bank' },
         { selector: '.tipo_cuenta', section: 'Account information', name: 'Account type' },
         { selector: '.numero_cuenta', section: 'Account information', name: 'Account number' },
         { selector: '.metodo_pago', section: 'Payment methods', name: 'Payment methods' }
      ];

      for (const field of fields) {
         const value = $(field.selector).val();
         if (value && value.length > 255) {
               toastr.options.onclick = function() {
                  const targetDiv = document.querySelector(field.selector);
                  if (targetDiv) {
                     targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
                  }
               };
               toastr.error(`In "${field.section}" the field "${field.name}" cannot exceed 255 characters.`);
               return true;
         }
      }
      
      return false;
   }

   function select_html_basic(arreglo) {
      let html = "<option value='' selected disabled >Select a option</option>";
   
      arreglo.forEach(function (element) {
         let {
            id,
            plan_nombre,
            plazo_meses,
            tasa_interes,
            manejo_mora,
            interes_por_mora,
            monto_maximo,
            monto_minimo,
            modalidad_cobro,
            fecha_post,
            fecha_update,
            activo,
            descripcion_modalidad_cobro,
        } = element;

         html += `<option value="${id}">${plan_nombre} (${tasa_interes}% ${descripcion_modalidad_cobro}) </option>`;
      });

      return html;
   }
 
   function navegarPantallaSiguiente(UUID_ENC_)
   {
      $(".titulo_modal_confirmar").text("Record added");
      $(".mensaje_modal_confirmar").text("¡Record added successfully!");
      $(".mensaje_espera_moda_confirmacion").text("");
      $(".tipo_modal_confirmar").val("navegar_pantalla_siguiente");
      $(".data_id").val(UUID_ENC_);

      $('#btn_aplicar_ventana_confirmacion').prop('disabled', false);
      $('#btn_close_ventana_confirmacion').prop('disabled', false);
      $('#btn_cerrar_ventana_confirmacion').prop('disabled', false);
 
      $('#btn_cerrar_ventana_confirmacion').css({
         'background-color': COLOR_FONDO_VENTANA_CERRAR,
         'color': COLOR_TEXT_VENTANA_CERRAR,
         'display': "none",
      });

      $('#btn_close_ventana_confirmacion').css({
         'background-color': COLOR_FONDO_VENTANA_CERRAR,
         'color': COLOR_TEXT_VENTANA_CERRAR,
         'display': "none",
      });
 
      $('#btn_aplicar_ventana_confirmacion').css({
         'background-color': COLOR_FONDO_VENTANA_IR,
         'color': COLOR_TEXT_VENTANA_IR,
         'display': "",
      });

      $('#btn_aplicar_ventana_confirmacion').text("Continue");
 
      $("#ventana_confirmacion").modal("show");
   }

   function navegarPantallaListado(titulo="", mensaje="", url="")
   {
      $(".titulo_modal_confirmar").text(titulo);
      $(".mensaje_modal_confirmar").text(mensaje);
      $(".mensaje_espera_moda_confirmacion").text("");
      $(".tipo_modal_confirmar").val("navegar_otras_pantallas");
      $(".data_id").val(url);

      $('#btn_aplicar_ventana_confirmacion').prop('disabled', false);
      $('#btn_close_ventana_confirmacion').prop('disabled', false);
      $('#btn_cerrar_ventana_confirmacion').prop('disabled', false);
 
      $('#btn_cerrar_ventana_confirmacion').css({
         'background-color': COLOR_FONDO_VENTANA_CERRAR,
         'color': COLOR_TEXT_VENTANA_CERRAR,
         'display': "none",
      });

      $('#btn_close_ventana_confirmacion').css({
         'background-color': COLOR_FONDO_VENTANA_CERRAR,
         'color': COLOR_TEXT_VENTANA_CERRAR,
         'display': "none",
      });
 
      $('#btn_aplicar_ventana_confirmacion').css({
         'background-color': COLOR_FONDO_VENTANA_IR,
         'color': COLOR_TEXT_VENTANA_IR,
         'display': "",
      });

      $('#btn_aplicar_ventana_confirmacion').text("Continue");
 
      $("#ventana_confirmacion").modal("show");
   }

   function ventanaError(titulo, mensaje) {
      $(".titulo_modal_confirmar").text(titulo);
      $(".mensaje_modal_confirmar").text(mensaje);
      $(".mensaje_espera_moda_confirmacion").text("");
      $(".tipo_modal_confirmar").val("registro_exito");
      $(".data_id").val("");

      $('#btn_aplicar_ventana_confirmacion').prop('disabled', false);
      $('#btn_close_ventana_confirmacion').prop('disabled', false);
      $('#btn_cerrar_ventana_confirmacion').prop('disabled', false);
 
      $('#btn_cerrar_ventana_confirmacion').css({
         'background-color': COLOR_FONDO_VENTANA_CERRAR,
         'color': COLOR_TEXT_VENTANA_CERRAR
      });

      $('#btn_aplicar_ventana_confirmacion').css({
         'background-color': COLOR_FONDO_VENTANA_CONFIRMACION,
         'color': COLOR_TEXT_VENTANA_CONFIRMACION,
         'display': "none"
      });
 
      $("#ventana_confirmacion").modal("show");
   }

   function getFechaConZonaHoraria(dateString = "", timeZone = "America/Tegucigalpa") {
      let date;
      if (!dateString) {
         date = new Date();
      } else {
         const parts = dateString.split(/[- :]/);
         if (parts.length !== 6) {
               console.warn("Formato de fecha inválido, usando fecha actual");
               date = new Date();
         } else {
               date = new Date(Date.UTC(parts[0], parts[1] - 1, parts[2], parts[3], parts[4], parts[5]));
               if (isNaN(date)) {
                  console.warn("Fecha inválida, usando fecha actual");
                  date = new Date();
               }
         }
      }

      const formatter = new Intl.DateTimeFormat('en-US', {
         timeZone,
         year: 'numeric',
         month: '2-digit',
         day: '2-digit',
         hour: '2-digit',
         minute: '2-digit',
         second: '2-digit',
         hour12: false
      });

      const formattedParts = formatter.formatToParts(date);
      const dateParts = {};
      formattedParts.forEach(({ type, value }) => {
         if (type !== 'literal') dateParts[type] = value;
      });

      return `${dateParts.year}-${dateParts.month}-${dateParts.day} ${dateParts.hour}:${dateParts.minute}:${dateParts.second}`;
   }

   function select_html_bank(arreglo) {
      let html = "<option value='' selected disabled >Select a option</option>";
   
      arreglo.forEach(function (element) {
         let {
            id,
            UUID,
            UUID_ENC,
            name,
            state,
        } = element;

         html += `<option value="${id}">${name}</option>`;
      });

      return html;
   }

   function select_html_tipo_cuenta(arreglo) {
      let html = "<option value='' selected disabled >Select a option</option>";
   
      arreglo.forEach(function (element) {
         let {
            id,
            UUID,
            UUID_ENC,
            descripcion,
            state,
        } = element;

         html += `<option value="${id}">${descripcion}</option>`;
      });

      return html;
   }

   function select_html_stripe(arreglo) {
      let html = "<option value='' selected disabled >Select a option</option>";
   
      arreglo.forEach(function (element) {
         let {
            id,
            identificador,
            name,
            settings,
            value,
            processor,
            ins,
            c1,
            c2,
            c3,
            c4,
            c5,
            status,
            sorder,
            logo,
            mode,
            account_id,
            created_at,
            updated_at,
        } = element;

         html += `<option value="${id}">${name} - ${identificador}</option>`;
      });

      return html;
   }

   function generateUUIDv4() {
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
         const r = (Math.random() * 16) | 0;
         const v = c === 'x' ? r : (r & 0x3) | 0x8;
         return v.toString(16);
      });
   }

   function uuidToBase64UrlRFC7515(uuid) {
      // Remove dashes from UUID
      const cleanedUuid = uuid.replace(/-/g, '');

      // Convert UUID from hex to binary array
      const binaryUuid = new Uint8Array(
         cleanedUuid.match(/.{1,2}/g).map(function(byte) {
               return parseInt(byte, 16);
         })
      );

      // Convert binary to Base64
      const base64 = btoa(String.fromCharCode.apply(null, binaryUuid));

      // Convert to Base64 URL-safe (RFC 7515)
      const base64Url = base64
         .replace(/\+/g, '-')
         .replace(/\//g, '_')
         .replace(/=+$/, '');

      return base64Url;
   }

   function tabla_html_planes(arreglo) {
      let html = "";
      
      arreglo.forEach(function (element) {

         let {
            tipo_cuenta,
            nombre_tipo_cuenta,
            tipo_pasarela_pago,
            titular_tarjeta,
            numero_tarjeta,
            codigo_ccv,
            exp_month,
            exp_year,
            estado_id,
            use_credit_card,
            cnon_tarjetas_square,
            estado_nombre,
            use_credit_card_nombre,
            UUID,
            UUID_ENC,
            banco_metodo_pago,
            nombre_beneficiario,
            nombre_banco_metodo_pago,
            id,
            verificado,
            tipo_verificacion_micro_deposito,
         } = element;

         //{
         //    "tipo_cuenta": "3",
         //    "nombre_tipo_cuenta": "Credit Card",
         //    "tipo_pasarela_pago": "Stripe",
         //    "titular_tarjeta": "Rosa Lara",
         //    "numero_tarjeta": "4242424242424242",
         //    "codigo_ccv": "123",
         //    "exp_month": "9",
         //    "exp_year": "2030",
         //    "estado_id": "1",
         //    "use_credit_card": "1",
         //    "cnon_tarjetas_square": null,
         //    "estado_nombre": "Active",
         //    "use_credit_card_nombre": "Predetermined",
         //    "UUID": "739ba3a1-0357-4fc2-ae06-fc77ecd3b134",
         //    "UUID_ENC": "c5ujoQNXT8KuBvx37NOxNA",
         //    "banco_metodo_pago": null,
         //    "nombre_beneficiario": null,
         //    "nombre_banco_metodo_pago": null,
         //    "id": ""
         //}
         
         let ultimos_4_digitos = "";

         if(isEmpty(numero_tarjeta) == false)
         {
            ultimos_4_digitos = numero_tarjeta.slice(-4);
         }
 
         if(isEmpty(banco_metodo_pago) == true)
         {
            banco_metodo_pago =  "";
         }

         if(isEmpty(numero_tarjeta) == true)
         {
            numero_tarjeta =  "";
         }else{
            numero_tarjeta = numero_tarjeta.slice(-4);
         }

         let textoVerificado = ""; 

         if(verificado == 1 || verificado == "1")
         {
            textoVerificado = "<span class='badge bg-succes'>Verified</span>";
         }else{
            textoVerificado = "<span class='badge bg-danger'>Not Verified</span>";
         }

         if(isEmpty(tipo_verificacion_micro_deposito) == true)
         {
            tipo_verificacion_micro_deposito =  "";
         }
 

         /*
         let account_number_personal  = "";

         if(tipo_cuenta == "3")
         {
            //account_number_personal = numero_tarjeta;
            account_number_personal = numero_tarjeta.slice(-4);

         }else{

            if(tipo_pasarela_pago == "Square")
            {
               account_number_personal = numero_tarjeta;
               account_number_personal = numero_tarjeta.slice(-4);
            }else{
               account_number_personal = numero_tarjeta;
               account_number_personal = numero_tarjeta.slice(-4);
            }
         }
         */

         let html_tipo_verificacion = "";

         if(tipo_verificacion_micro_deposito == "descriptor_code" && (verificado == 2 || verificado == "2") )
         {

            html_tipo_verificacion = 
               "<button class='btn btn-sm btn-add-code waves-effect waves-themed' data-id='" + UUID_ENC + "' data-verificacion='" + verificado + "'  >" +
                     "<i class='fas fa-edit tamano-icono' aria-hidden='true'></i>" +
               "</button>"

         }

         let html_can_edit = "";

         if(verificado == 1 || verificado == "1")
         {
            html_can_edit = 
                "<button class='btn btn-sm btn-edit waves-effect waves-themed' data-id='" + UUID_ENC + "'>" +
                     "<i class='fas fa-pencil-square tamano-icono' aria-hidden='true'></i>" +
               "</button>";
         }

         html += 
         "<tr>" +
            "<td class='centrar'>" + nombre_tipo_cuenta + "</td>" +
            "<td class='centrar'>" + titular_tarjeta + "</td>" +
            "<td class='centrar'>" + tipo_pasarela_pago + "</td>" +
            "<td class='centrar'>" + banco_metodo_pago + "</td>" +
            "<td class='centrar'>" + ultimos_4_digitos + "</td>" +
            "<td class='centrar'>" + estado_nombre + "</td>" +
            "<td class='centrar'>" + use_credit_card_nombre + "</td>" +
            "<td class='centrar'>" + tipo_verificacion_micro_deposito + "</td>" +
            "<td class='centrar'>" + textoVerificado + "</td>" +
            "<td class='centrar'>" +
                  "<div class='row'>" +
                     "<div class='col-12 centrar-botones'>" +
                        html_tipo_verificacion +


                        html_can_edit +


                        "<button class='btn btn-sm btn-eliminar waves-effect waves-themed' data-id='" + UUID_ENC + "'>" +
                              "<i class='fas fa-trash tamano-icono' aria-hidden='true'></i>" +
                        "</button>" +
                     "</div>" +
                  "</div>" +
            "</td>" +
         "</tr>";

         /*
         html +=
               "<tr>" +
               "<td class='centrar'>" + nombre_tipo_cuenta + "</td>" +
               "<td class='centrar'>" + titular_tarjeta + "</td>" +
               "<td class='centrar'>" + tipo_pasarela_pago + "</td>" +

               "<td class='centrar'>" + banco_metodo_pago + "</td>" +
               //"<td class='centrar'>" + numero_tarjeta + "</td>" +
               "<td class='centrar'>" + ultimos_4_digitos + "</td>" +

               
               "<td class='centrar'>" + estado_nombre + "</td>" +
               "<td class='centrar'>" + use_credit_card_nombre + "</td>" +
               "<td class='centrar'>" + textoVerificado + "</td>" +
 
     
               "<td class='centrar'>" +
               "<div class='row'>" +
               "<div class='col-12 centrar-botones'>" +

               //
               //"<button class='btn btn-sm btn-usar waves-effect waves-themed' data-id='" + UUID_ENC + "'>" +
               //"<i class='fas fa-check tamano-icono' aria-hidden='true'></i>" +
               //"</button>" +
               //
               "<button class='btn btn-sm btn-edit waves-effect waves-themed' data-id='" + UUID_ENC + "'>" +
               "<i class='fas fa-pencil-square tamano-icono' aria-hidden='true'></i>" +
               "</button>" +
               "<button class='btn btn-sm btn-eliminar waves-effect waves-themed' data-id='" + UUID_ENC + "'>" +
               "<i class='fas fa-trash tamano-icono' aria-hidden='true'></i>" +
               "</button>" +
               "</div>" +
               "</div>" +
               "</td>" +

               "</tr>";
               */
      });

      return html;
   }

   function eventosTablaPlanes()
   {

      $('.btn-edit').off('click');
      $('.btn-eliminar').off('click');
      $('.btn-usar').off('click');
      $('.btn-add-code').off('click');

      $('.btn-edit').on('click', function() {
         var dataId = $(this).data('id');
         console.log('ID de la referencia:', dataId);
        
         let BusquedadInformacion = arreglo_planes.find(function(item) {
            return item.UUID_ENC == dataId;
         });

         if(isEmpty(BusquedadInformacion) == false)
         {
            console.log("BusquedadInformacion");
            console.log(BusquedadInformacion);
 
            let html_data_pasarela_pago_stripe = select_html_stripe(pasarela_pago_stripe);
            $(".tipo_pasarela_pago_general").html(html_data_pasarela_pago_stripe);
 
            $(".id").val(dataId);
 
            $(".tipo_cuenta").val(BusquedadInformacion.tipo_cuenta);

            $(".tipo_pasarela_pago").val(BusquedadInformacion.tipo_pasarela_pago);
            $(".titular_tarjeta").val(BusquedadInformacion.titular_tarjeta);
            $(".numero_tarjeta").val(BusquedadInformacion.numero_tarjeta);
            $(".codigo_ccv").val(BusquedadInformacion.codigo_ccv);
            $(".exp_month").val(BusquedadInformacion.exp_month);
            $(".exp_year").val(BusquedadInformacion.exp_year);
            $(".estado_id").val(BusquedadInformacion.estado_id);
            $(".use_credit_card").val(BusquedadInformacion.use_credit_card);

            $(".banco_metodo_pago").val(BusquedadInformacion.banco_metodo_pago);
            $(".tipo_pasarela_pago_general").val(BusquedadInformacion.configuracion_stripe_id);

            $(".ocultar_tppg").css("display", "");

            $('.tipo_pasarela_pago_general').prop('disabled', true);

            $('.tipo_pasarela_pago').prop('disabled', true);
            $('.tipo_cuenta').prop('disabled', true);

            $('.numero_cuenta_metodo_pago').prop('disabled', true);
            $('.numero_ruta_metodo_pago').prop('disabled', true);
            $('.tipo_titular_metodo_pago').prop('disabled', true);
            
            $('.tipo_pasarela_pago_general').prop('disabled', true);

            $(".cambiar_texto_botones").text("Modify");

            let tipo_cuenta =  BusquedadInformacion.tipo_cuenta;
 
             

            if(tipo_cuenta == "1")
            {  
               $(".MostrarSoloSquare").css("display", "none");
               $(".titulo_metodo_pago_nombre").text("Account Holder");
               mostrarSavingCheking();

               $(".numero_cuenta_metodo_pago").val(BusquedadInformacion.numero_tarjeta);

               $(".numero_ruta_metodo_pago").val(BusquedadInformacion.numero_ruta_metodo_pago);
               $(".tipo_titular_metodo_pago").val(BusquedadInformacion.tipo_titular_metodo_pago);
               $(".email_metodo_pago").val(BusquedadInformacion.email_metodo_pago);
 
            }

            if(tipo_cuenta == "2")
            {
               $(".MostrarSoloSquare").css("display", "none");
               $(".titulo_metodo_pago_nombre").text("Account Holder");
               mostrarSavingCheking();

               $(".numero_cuenta_metodo_pago").val(BusquedadInformacion.numero_tarjeta);

            }
            
            if(tipo_cuenta == "3")
            {
               $(".MostrarSoloStripe").css("display", "");
               $(".MostrarSoloSquare").css("display", "none");

               $(".mostrar_credit_card").css("display", "");
               mostrarStripe();

               $(".titulo_metodo_pago_nombre").text("Card name");
               if(BusquedadInformacion.tipo_pasarela_pago == "Square")
               {
                  $(".MostrarSoloSquare").css("display", "none");
                  $(".MostrarSoloStripe").css("display", "none");
               }else{
                  $(".MostrarSoloSquare").css("display", "none");
                  $(".MostrarSoloStripe").css("display", "");
               }
            }

            $("#addModalPlanes").modal("show");
         }

      });

      $('.btn-eliminar').on('click', function() {
         var dataId = $(this).data('id');
         console.log('ID de la referencia:', dataId);
        
         $(".titulo_modal_confirmar").text("You are sure?");
         $(".mensaje_modal_confirmar").text("Are you sure you want to delete this payment method??");
         $(".mensaje_espera_moda_confirmacion").text("");
         $(".tipo_modal_confirmar").val("eliminar_plan");
         $(".data_id").val(dataId);

         $('#btn_aplicar_ventana_confirmacion').prop('disabled', false);
         $('#btn_close_ventana_confirmacion').prop('disabled', false);
         $('#btn_cerrar_ventana_confirmacion').prop('disabled', false);

         //ventanaRegistroExito("Record deleted", "The record has been successfully deleted");
         //return;
          
         $('#btn_cerrar_ventana_confirmacion').css({
            'background-color': COLOR_FONDO_VENTANA_CERRAR,
            'color': COLOR_TEXT_VENTANA_CERRAR,
            'display': "",
            
         });

         $('#btn_aplicar_ventana_confirmacion').css({
            'background-color': COLOR_FONDO_VENTANA_CONFIRMACION,
            'color': COLOR_TEXT_VENTANA_CONFIRMACION,
            'display': "",
         });
 
         $("#ventana_confirmacion").modal("show");

         //$('#clx_datatable_referencia_personal tbody tr').each(function() {
         //      var rowDataId = $(this).find('.btn-eliminar').data('id');
         //      if (rowDataId == dataId) {
         //         $(this).remove(); // Elimina la fila que coincide con el data-id
         //      }
         //});
    

      });

      $('.btn-add-code').on('click', function() {
         var dataId = $(this).data('id');
         console.log('ID de la referencia:', dataId);
        
         let BusquedadInformacion = arreglo_planes.find(function(item) {
            return item.UUID_ENC == dataId;
         });

         if(isEmpty(BusquedadInformacion) == false)
         {
            console.log("BusquedadInformacion xd");
            console.log(BusquedadInformacion);
 
            if(BusquedadInformacion.verificado == 1 || BusquedadInformacion.verificado == "1")
            {
               toastr.error('The account is verified');
               return;
            }

            $('#cerrar_ventana_modal_codigo_verificacion').prop('disabled', false);
            $('.btn-close').prop('disabled', false);

            $('.description_code').prop('disabled', false);
            $('.btn-close').prop('disabled', false);
            $('.cerrar_ventana_modal_codigo_verificacion').prop('disabled', false);
            $('.btnSendCode').prop('disabled', false);
            $('#cerrar_ventana_modal_codigo_verificacion').prop('disabled', false);
            
            $("#description_code").val("");
            $("#dc_uuid_enc").val(BusquedadInformacion.UUID_ENC);

            $("#modaVerificacionCodigo").modal("show");
            
         }

      });
      
   }

   function html_errores_card(errores_tarjeta = [])
   {

      let errorHtml = '';

      errores_tarjeta.forEach((data) => {
          const { tipo_cuenta, pasarela_pago, mensaje_error } = data;
          errorHtml += generateErrorHtml(data);
      });

      return errorHtml;
   }

    


   function generateErrorHtml(error) {

      let {
         tipo_cuenta_id,
         tipo_cuenta,
         pasarela_pago,
         mensaje_error,
         titular_tarjeta,
         numero_tarjeta,
         exp_month,
         exp_year,
         nombre_banco_metodo_pago,
         tipo_titular_metodo_pago,
         numero_ruta_metodo_pago,
      } = error;

      let informacion = "";

      if(tipo_cuenta_id == 3)
      {

         informacion = `
          <div class="info-row">
                   <span class="label">Cardholder:</span>
                   <span class="value">${titular_tarjeta}</span>
               </div>
               <div class="info-row">
                   <span class="label">Card number:</span>
                   <span class="value">${numero_tarjeta}</span>
               </div>

               <div class="info-row">
                   <span class="label">Expiration month/year:</span>
                   <span class="value">${exp_month} / ${exp_year}</span>
               </div>
       `;
 
      }else{

         informacion = `
             <div class="info-row">
                     <span class="label">Account Holder:</span>
                     <span class="value">${titular_tarjeta}</span>
                  </div>
                  <div class="info-row">
                     <span class="label">Account number:</span>
                     <span class="value">${numero_tarjeta}</span>
                  </div>

                  <div class="info-row">
                     <span class="label">Route number:</span>
                     <span class="value">${numero_ruta_metodo_pago}</span>
                  </div>
         `;

      }

       

       return `
           <div class="alert alert-danger" role="alert" style="margin-bottom: 10px;">
               <div class="info-row">
                   <span class="label">Type account:</span>
                   <span class="value">${error.tipo_cuenta}</span>
               </div>
               <div class="info-row">
                   <span class="label">Payment gateway:</span>
                   <span class="value">${error.pasarela_pago}</span>
               </div>

               ${informacion}

               <div class="info-row">
                   <span class="label">Error detail:</span>
                   <span class="value">${error.mensaje_error}</span>
               </div>
           </div>
       `;
   }



</script>
{/literal}


{/block}