

{*

<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

*}


<style type="text/css">

.box_shadow{
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}


.qutar_margen {
   margin: 0px;
}

</style>

<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"
/>


 
 
<textarea disabled hidden class="tener_companies_documents" value="{$ArrayCompanyFile}">
    {$ArrayCompanyFile}
</textarea>

{* style="display: none;"*}
<div class="row pantalla_cargada qutar_margen" style="display: none;">
   <div class="col-12 col-lg-12 col-sm-12 col-md-12" style=" padding: 0px; ">
 
      <div class="row htmlCompany">
 

          

      </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_form1">
                        <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">Beneficiary name</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>

{literal}
<script>

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

$(document).ready(function () {

   

   var arregloArchivos = [];

   var tener_companies_documents = $('.tener_companies_documents').text();
   //console.log(tomarContactos);
   try {
      
      if(!isEmpty(tener_companies_documents))
      {
         let parsearContacto = JSON.parse(tener_companies_documents);
         if (Array.isArray(parsearContacto)) {

            arregloArchivos = parsearContacto || [];
            console.log("arregloArchivos");
            console.log(arregloArchivos);
 
            let mySet = new Set();
            let ArrayConsolidation = arregloArchivos.filter((data) => {

               if(mySet.has(data.sys_companies_id))
               {
                  return false;
               }

               mySet.add(data.sys_companies_id);
               return true;

            });


            let htmlFinally = "";
            
            ArrayConsolidation.forEach((data) => {
               
               let filterImg = arregloArchivos.filter((d) => d.sys_companies_id == data.sys_companies_id && !isEmpty(d.ruta_documento) )

               let htmlSon    = "";
                
               if(filterImg.length != 0)
               {
                  filterImg.forEach((htmlImg) => {

                     if( !isEmpty(htmlImg.ruta_documento))
                     {
                        htmlSon += generateCardHtmlURL(htmlImg);
                     }

                  });
               }else{
                  htmlSon = '<h5 style=" text-align: center; " class="card-title">No files to display</h5>';
               }

             htmlFinally += generatePanel(data.company_name, htmlSon);

            });

            $(".htmlCompany").html(htmlFinally);

            $(".cargando_pantalla").css("display", "none");
            $(".pantalla_cargada").css("display", "");
             
            
            //console.log("ArrayConsolidation");
            //console.log(ArrayConsolidation);
 
 
         }
      }

   } catch (error) {
      console.error('Error al parsear datos:', error);
   }

    
 
    var _url = '{$_url}';

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

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

   });

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

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

   });

   function generatePanel(empresa, contenido) {
     
      // Generar el HTML usando template literal
      return `
         <div class="col-md-12">
            <div class="panel box_shadow">
               <div class="panel-hdr">
                     <h2>${empresa}</h2>
               </div>
               <div class="panel-container show" id="ibox_form1">
                     <div class="panel-content">

                        <div class="row">
                           ${contenido}
                        </div>

                     </div>
               </div>
            </div>
         </div>`;
   }

   function generateCardHtmlURL(data) {
      let {
         nombre_original,
         extension,
         UUID,
         UUID_ENC,
         url,
         nombre_img_sistema
      } = data;

      // Sanitize inputs to prevent XSS
      const sanitize = (str) => {
         const div = document.createElement('div');
         div.textContent = str;
         return div.innerHTML;
      };

      const sanitizedId = sanitize(UUID_ENC);
      const sanitizedTipoArchivo = sanitize(extension);
      const sanitizedNameArchivo = sanitize(nombre_original);
      // Construimos la URL completa del documento
      const sanitizedDownloadUrl = sanitize(url + nombre_img_sistema);
      const sanitizedFileName = sanitizedNameArchivo || `document.${sanitizedTipoArchivo.toLowerCase()}`;

      return `
         <div class="col-12 col-sm-4 pt-4 card_eliminar_${sanitizedId}">
               <div class="card" style="width: 100%; max-width: 300px; box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;">
                  <div class="card-body">
                     <h5 class="card-title">File type: <span class="card_tipo_archivo">${sanitizedTipoArchivo}</span></h5>
                     <h5 class="card-title">File name: <span class="card_nombre_archivo">${sanitizedNameArchivo}</span></h5>
                     <div class="row">
                           <div class="col-12">
                               
                              <a class="btn btn-sm btn-descargar waves-effect waves-themed" 
                                 data-id="${sanitizedId}" 
                                 href="${sanitizedDownloadUrl}" 
                                 download="${sanitizedFileName}">
                                 <i class="fas fa-download tamano-icono" aria-hidden="true"></i>
                              </a>
                           </div>
                     </div>
                  </div>
               </div>
         </div>
      `;


      //<button type="button" class="btn btn-sm btn-eliminar waves-effect waves-themed" data-id="${sanitizedId}">
      //   <i class="fas fa-trash tamano-icono" aria-hidden="true"></i>
      //</button>
   }

   function generateCardHtmlEmpty(data) {
       
      return `
         <div class="col-12 col-sm-12 pt-4 ">
               <div class="card" style="width: 100%; max-width: 300px; box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;">
                  <div class="card-body">
                     <h5 class="card-title">No files to display</h5>
                  </div>
               </div>
         </div>
      `;


      //<button type="button" class="btn btn-sm btn-eliminar waves-effect waves-themed" data-id="${sanitizedId}">
      //   <i class="fas fa-trash tamano-icono" aria-hidden="true"></i>
      //</button>
   }
  

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

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

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

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

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

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

               "</tr>";
      });

      return html;
   }

 
   function 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">Beneficiary name:</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}