

{*

<a href="{$_url}invoices/add/1/{$cid}/" class="btn btn-primary waves-effect waves-light">{$_L['New Invoice']}</a>
<a href="{$_url}invoices/add/recurring/{$cid}/" class="btn btn-primary waves-effect waves-light">{$_L['New Recurring Invoice']}</a>


  disabled
         hidden

*}

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

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

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

{* style="display: none;"*}
<div class="row pantalla_cargada" style="display: none;">
   <div class="col-12 col-lg-12 col-sm-12 col-md-12" style=" padding: 0px; ">
 
      {*metodo de pago donde de la cuenta de cliente va a pagar las cuotas *}
      <div class="col-md-12">
         <div >
            <div class="panel-hdr">
 
               <h2>Specify the payment method for installments (Automatic debit for payment of installments)</h2>

               <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="10" 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="float: inline-end;padding-right: 18px;">

                     {*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"
                        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>

   <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;
         
         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 information 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>

{literal}
<script>

$(document).ready(function () {

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

   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 CUSTOMER_ID  = $("#CUSTOMER_ID").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 = [
    
   ];

   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 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
        }
        */
   ];

   var habiliarConfiguracionStripe = false;

   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;
      }
   }

   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

   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}';

   $('.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");
   });


    $('.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');

       //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);

             $(".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_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();

       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;
       }

       //--------- ---- -- -- -- -
       /*
       let tipo_cuenta_desembolsar = $(".tipo_cuenta_desembolsar").val();

       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;
       }
       */

       /*
       let banco_desembolsar = $(".banco_desembolsar").val();
       let numero_cuenta_desembolsar = $(".numero_cuenta_desembolsar").val();
       let nombre_beneficiario_desembolsar = $(".nombre_beneficiario_desembolsar").val();
       
       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 --------

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

       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 "Account type" is required.');
          return;
       }

       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();

       //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;
          }


       }

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

       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;
       }

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

       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;
       }

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

       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;
       }

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

       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)
                   {
                      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();

 
                } 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_metodos_pagos').click(function() {

       var informacionEnviar = {
          customer_id:                                    CUSTOMER_ID,
          
          //----------------------
          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 + "contacts/post-payment-method-customer",
          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!")
 
                  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,
         customer_id:              CUSTOMER_ID,
      }; 

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

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

      $.ajax({
          type: "POST",
          url: URL_BASE + "contacts/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);
  
            $('.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_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();

                  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);
  
            $('.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_tppg").css("display", "none");
        

       $(".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);

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

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

         $('.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);
            }

             

         }

    });

   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 = {
         customer_id: CUSTOMER_ID,
      };

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

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

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

                  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);

                  let html_data_tipo_cuenta = select_html_tipo_cuenta(arreglo_data_tipo_cuenta);
                  $(".tipo_cuenta").html(html_data_tipo_cuenta);
 
                  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);
                  
                  $(".cargando_pantalla").css("display", "none");
                  $(".pantalla_cargada").css("display", "");

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

                  $(".guardar_metodos_pagos").css("display", "");
 
               } 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 =  "";
         }

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

         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>";
         }
 

         /*
         let account_number_personal  = "";

         if(tipo_cuenta == "3")
         {
            account_number_personal = numero_tarjeta;
         }else{

            if(tipo_pasarela_pago == "Square")
            {
               account_number_personal = numero_tarjeta;
            }else{
               account_number_personal = numero_tarjeta;
            }
         }
         */

         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'>" + 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'>" +
 
              
 
               "<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").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}