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


    <link href="{$theme}default/css/grupo.css?v={$config['version']}" rel="stylesheet">


   <link
         href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"
         rel="stylesheet" />

{/block}

{block name="content"}

<style type="text/css">

 

</style>
<div class="row">

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

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

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

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

      <input type="text" value="{$id_template_invoices}" disabled hidden id="id_template_invoices" />
 
    <div class="col-md-12">

        <div class="panel">
            <div class="panel-hdr">
                <h2 style="font-weight: 600;color:black"><span></span> General information about whatsapp</h2>
            </div>
             

            <div class="panel-container show" id="ibox_form">

                <div class="panel-content p-0">

                    <div>
                        <div class="container mi_contenedor_especial">
                           <div class="contenedor_principal">
                              <div class="cargando">
                                 <div class="spinnerv1">
                                    <i class="fa fa-circle-o-notch fa-spin"></i>
                                 </div>
                                 <p style="font-weight: 600">
                                    Please wait while it is loading...
                                 </p>
                              </div>
                           </div>

                           <div class="tile tile-alt" id="messages-main" style="display: none">
                              <!--Sin Mensajes-->

                              <div style="margin: 10px">
                                 <div
                                    class="row contenedor"
                                    style="
                                       padding: 18px;
                                       background-color: white;
                                       border-radius: 5px;
                                       border: 1px solid #d3cac0;
                                       padding: 5px;
                                       padding-bottom: 11px;
                                       margin-bottom: 12px;
                                       padding-left: 0px;
                                       padding-right: 0px;
                                    "
                                 >
                                    <div class="col-12 col-sm-12 reset">
                                       <div class="mt-3 row reset">
                                         <!-- <h1 style="font-size: 18px; margin-bottom: 18px">
                                             General information about whatsapp
                                          </h1> -->

                                          <label for="configuracion" class="col-sm-3"
                                             ><span class="text-black">Whatsapp Settings</span
                                             ><span class="text-danger">*</span></label
                                          >
                                          <div class="col-sm-9">
                                             <select
                                                class="form-control form-control-sm tener_configuracion"
                                                name="configuracion"
                                                id="configuracion"
                                                style="width: 100%"
                                                placeholder="Select a Group"
                                             ></select>
                                          </div>
                                       </div>

                                       <div class="mt-3 row reset">
                                          <label for="configuracion" class="col-sm-3"
                                             ><span class="text-black">Activate Template</span
                                             ><span class="text-danger">*</span></label
                                          >
                                          <div class="col-sm-9">
                                             <select
                                                class="form-control form-control-sm tener_status_whatsapp"
                                                name="configuracion"
                                                id="configuracion"
                                                style="width: 100%"
                                                placeholder="Select a option"
                                             >
                                                <option value="1">Active</option>
                                                <option value="2">Inactive</option>
                                             </select>
                                          </div>

                                          <div class="col-sm-12 mt-3">
                                             <button
                                                type="button"
                                                class="btn btn-default"
                                                id="abrir_plantillas_whatsapp"
                                                style="
                                                   border-color: #d3cac0;
                                                   border: 1px solid #d3cac0;
                                                   float: right;
                                                "
                                             >
                                                Select a template
                                             </button>
                                          </div>
                                       </div>

                                       <!--Plantilla de whatsapp-->
                                       <div class="col-12 col-sm-12 mt-3">
                                          <!-- FIN CONFIGURACION PLANTILLAS -->
                                          <div
                                             class="configuracion_plantilla"
                                             style="display: none; margin: 12px"
                                          >
                                             <div class="row" style="margin: 0px; padding: 0px">
                                                <div
                                                   class="col-sm-9 informacion_general_plantilla"
                                                >
                                                   <!-- descripcion plantilla -->
                                                   <div class="descripcion_general_plantilla">
                                                      <h5
                                                         style="
                                                            font-weight: 600;
                                                            color: black;
                                                            margin: 0px;
                                                            padding: 15px;
                                                            font-size: 17px;
                                                         "
                                                      >
                                                         Template name and language
                                                      </h5>
                                                      <hr
                                                         style="
                                                            border-top: 1px solid #c1bdbd;
                                                            width: 100%;
                                                            margin-top: 0px;
                                                            margin-bottom: 15px;
                                                         "
                                                      />
                                                      <div
                                                         class="row reset"
                                                         style="
                                                            padding-left: 10px;
                                                            padding-right: 10px;
                                                         "
                                                      >
                                                         <div class="col-sm-8 reset separador">
                                                            <label>Template Name</label>
                                                            <input
                                                               value="hello_world"
                                                               id="input_nombre_plantilla"
                                                               type="text"
                                                               disabled
                                                               class="form-control form-control-sm"
                                                            />
                                                         </div>

                                                         <div class="col-sm-4 reset">
                                                            <label>Language</label>
                                                            <input
                                                               value="es_MX"
                                                               id="input_lenguaje_plantilla"
                                                               type="text"
                                                               disabled
                                                               class="form-control form-control-sm"
                                                            />
                                                         </div>
                                                      </div>
                                                   </div>
                                                   <!-- FIN descripcion plantilla -->

                                                   <!-- HEADER plantilla -->
                                                   <div class="descripcion_general_plantilla">
                                                      <h5
                                                         style="
                                                            font-weight: 600;
                                                            color: black;
                                                            margin: 0px;
                                                            padding: 15px;
                                                            font-size: 17px;
                                                         "
                                                      >
                                                         Header
                                                      </h5>
                                                      <hr
                                                         style="
                                                            border-top: 1px solid #c1bdbd;
                                                            width: 100%;
                                                            margin-top: 0px;
                                                            margin-bottom: 15px;
                                                         "
                                                      />
                                                      <div
                                                         class="row reset"
                                                         style="
                                                            padding-left: 10px;
                                                            padding-right: 10px;
                                                         "
                                                      >
                                                         <div class="col-sm-12 reset separador">
                                                            <label>Header type</label>
                                                            <input
                                                               value=""
                                                               id="input_header_plantilla"
                                                               type="text"
                                                               disabled
                                                               class="form-control form-control-sm"
                                                            />

                                                            <div
                                                               class="contenido_principal_header"
                                                            >
                                                               <!--Aqui va el contenido de header y su dinamica-->
                                                            </div>
                                                         </div>
                                                      </div>
                                                   </div>

                                                   <!-- BODY plantilla -->
                                                   <div class="descripcion_general_plantilla">
                                                      <h5
                                                         style="
                                                            font-weight: 600;
                                                            color: black;
                                                            margin: 0px;
                                                            padding: 15px;
                                                            font-size: 17px;
                                                         "
                                                      >
                                                         Body
                                                      </h5>
                                                      <hr
                                                         style="
                                                            border-top: 1px solid #c1bdbd;
                                                            width: 100%;
                                                            margin-top: 0px;
                                                            margin-bottom: 15px;
                                                         "
                                                      />
                                                      <div
                                                         class="row reset"
                                                         style="
                                                            padding-left: 10px;
                                                            padding-right: 10px;
                                                         "
                                                      >
                                                         <div class="col-sm-12 reset separador">
                                                            <div
                                                               class="contenido_principal_body"
                                                            ></div>
                                                         </div>
                                                      </div>
                                                   </div>

                                                   <!-- FOOTER plantilla -->
                                                   <div
                                                      class="descripcion_general_plantilla footer_plantilla"
                                                   >
                                                      <h5
                                                         style="
                                                            font-weight: 600;
                                                            color: black;
                                                            margin: 0px;
                                                            padding: 15px;
                                                            font-size: 17px;
                                                         "
                                                      >
                                                         Footer
                                                      </h5>
                                                      <hr
                                                         style="
                                                            border-top: 1px solid #c1bdbd;
                                                            width: 100%;
                                                            margin-top: 0px;
                                                            margin-bottom: 15px;
                                                         "
                                                      />
                                                      <div
                                                         class="row reset"
                                                         style="
                                                            padding-left: 10px;
                                                            padding-right: 10px;
                                                         "
                                                      >
                                                         <div class="col-sm-12 reset separador">
                                                            <div
                                                               class="contenido_principal_footer"
                                                            >
                                                               <!--Aqui va el contenido de header y su dinamica-->
                                                               <label>Footer content</label>
                                                               <textarea
                                                                  id="texto_textarea_footer"
                                                                  class="form-control form-control-sm"
                                                                  disabled
                                                               >
                                                               </textarea>
                                                            </div>
                                                         </div>
                                                      </div>
                                                   </div>

                                                   <!-- BUTTONS plantilla -->
                                                   <div
                                                      class="descripcion_general_plantilla buttons_plantilla"
                                                   >
                                                      <h5
                                                         style="
                                                            font-weight: 600;
                                                            color: black;
                                                            margin: 0px;
                                                            padding: 15px;
                                                            font-size: 17px;
                                                         "
                                                      >
                                                         Buttons
                                                      </h5>
                                                      <hr
                                                         style="
                                                            border-top: 1px solid #c1bdbd;
                                                            width: 100%;
                                                            margin-top: 0px;
                                                            margin-bottom: 15px;
                                                         "
                                                      />
                                                      <div
                                                         class="row reset"
                                                         style="
                                                            padding-left: 10px;
                                                            padding-right: 10px;
                                                         "
                                                      >
                                                         <div class="col-sm-12 reset separador">
                                                            <div
                                                               class="contenido_principal_buttons"
                                                            >
                                                               <!--Aqui va el contenido de header y su dinamica-->
                                                               <div>
                                                                  <button class="btn btn-primary">
                                                                     Send Message
                                                                  </button>
                                                               </div>
                                                            </div>
                                                         </div>
                                                      </div>
                                                   </div>
                                                </div>

                                                <div class="col-sm-3 plantilla_vista_previa">
                                                   <div class="plantilla_vista_previa_headers">
                                                      <p
                                                         style="
                                                            font-weight: 600;
                                                            font-size: 17px;
                                                            padding: 16px;
                                                            height: 100%;
                                                            padding-bottom: 0px;
                                                            color: black;
                                                         "
                                                      >
                                                         Template preview
                                                      </p>
                                                   </div>
                                                   <div class="plantilla_vista_previa_body">
                                                      <div class="message-feed media right">
                                                         <div
                                                            class="media-body media-body-change-display"
                                                         >
                                                            <div
                                                               class="mf-content extender-contenedores"
                                                            >
                                                               <div class="palomitas">
                                                                  <div class="izquierda">
                                                                     <!-- header -->
                                                                     <div
                                                                        class="plantilla-header"
                                                                     >
                                                                        <!--TEXTO NORMAL-->
                                                                        <!-- <p id="texto_header_plantilla_previa">
                                                                        Hello, World
                                                                     </p> -->

                                                                        <!--IMAGEN-->
                                                                        <!-- <div
                                                                        class="imagen_header_plantilla"
                                                                     ></div> -->

                                                                        <!--VIDEO-->
                                                                        <!-- <div
                                                                        class="video_header_plantilla"
                                                                     ></div> -->

                                                                        <!--DOCUMENTO-->
                                                                        <!-- <div
                                                                        class="documento_header_plantilla"
                                                                     ></div> -->
                                                                     </div>
                                                                     <!-- FIN header -->

                                                                     <!-- body -->
                                                                     <div class="plantilla-body">
                                                                        <p
                                                                           id="texto_body_plantilla_previa"
                                                                        >
                                                                           Welcome and
                                                                           congratulations!! This
                                                                           message demonstrates
                                                                           your ability to send a
                                                                           WhatsApp message
                                                                           notification from the
                                                                           Cloud API, hosted by
                                                                           Meta. Thank you for
                                                                           taking the time to test
                                                                           with us.
                                                                        </p>
                                                                     </div>
                                                                     <!-- FIN body -->

                                                                     <!-- FOOTER -->
                                                                     <div
                                                                        class="plantilla-footer"
                                                                     >
                                                                        <span
                                                                           id="texto_footer_plantilla_previa"
                                                                        >
                                                                           Soy footer a que si
                                                                        </span>
                                                                     </div>
                                                                     <!-- FIN FOOTER -->
                                                                  </div>
                                                               </div>
                                                               <small class="mf-date"
                                                                  ><div>
                                                                     01-08-2024 12:00 pm
                                                                  </div></small
                                                               >
                                                               <div class="mensajes_botones">
                                                                  <div class="div_mensaje_boton">
                                                                     <img
                                                                        src="{$path_img}telefono.png"
                                                                     />
                                                                     <a
                                                                        href=""
                                                                        class="angotar_mensajes_botones"
                                                                     >
                                                                        asass</a
                                                                     >
                                                                  </div>
                                                                  <hr class="class_hr" />
                                                               </div>
                                                            </div>
                                                         </div>
                                                      </div>
                                                   </div>
                                                </div>
                                             </div>
                                          </div>
                                          <!-- FIN CONFIGURACION PLANTILLAS -->
                                       </div>
                                       <!--fin plantilla de whatsapp-->
                                    </div>

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

                              <div style="margin: 10px">
                                 <div
                                    class="row contenedor"
                                    style="
                                       padding: 18px;
                                       background-color: white;
                                       border-radius: 5px;
                                       border: 1px solid #d3cac0;
                                       padding: 5px;
                                       padding-bottom: 11px;
                                       margin-bottom: 12px;
                                       padding-left: 0px;
                                       padding-right: 0px;
                                    "
                                 >
                                    <div
                                       class="col-sm-12 informacion_general_plantilla contenido_guardar_plantilla"
                                       style="padding-right: 0px"
                                    >
                                       <!-- Guardar plantilla -->
                                       <div>
                                          <div
                                             class="row reset"
                                             style="padding-left: 10px; padding-right: 2px"
                                          >
                                             <div class="col-sm-12 reset separador">
                                                <div style="text-align: end; margin-top: 5px">
                                                   <!--Aqui va el contenido de header y su dinamica-->

                                                   <button
                                                      style="
                                                         border-color: #d3cac0;
                                                         border: 1px solid #d3cac0;
                                                      "
                                                      class="btn btn-default btn_enviar_plantilla"
                                                      type="button"
                                                   >
                                                      <i
                                                         class="fa fa-save"
                                                         style="margin-right: 5px"
                                                      ></i>

                                                      Save Template
                                                   </button>
                                                </div>
                                             </div>
                                          </div>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                        
                    </div>
 
                </div>
            </div>
        </div>
    </div>
</div>

<!--modal-->
   <div
         class="modal fade"
         id="CampañaEnviada"
         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" id="staticBackdropLabel">
                     Group Message
                  </h5>
                  <button
                     type="button"
                     class="btn-close btn_cerrar_confirmacion_modal"
                  ></button>
               </div>
               <div class="modal-body text-center">
                  <p>
                     The group advertising campaign has been sent. For more
                     details, check the status <a href="">here</a>
                  </p>
               </div>
            </div>
         </div>
      </div>

      <div
         class="modal fade"
         id="staticBackdrop"
         data-bs-backdrop="static"
         data-bs-keyboard="false"
         tabindex="-1"
         aria-labelledby="staticBackdropLabel"
         aria-hidden="true"
      >
         <div class="modal-dialog modal-xl" style="max-width:85%;">
            <div class="modal-content">
               <div class="modal-header">
                  <h4
                     class="modal-title"
                     id="myModalLabel"
                     style="color: black; padding-left: 5px"
                  >
                     WhatsApp templates
                  </h4>
                  <button
                     type="button"
                     class="btn-close cerrar_modal_plantilla"
                  ></button>
               </div>
               <div class="modal-body">
                  <!--  <button
                     style="
                        margin-bottom: 12px;
                        border-color: #d3cac0;
                        border: 1px solid #d3cac0;
                        display: none;
                     "
                     class="btn btn-default retroceder_listado_plantilla"
                     type="button"
                  >
                     <i class="fa fa-arrow-left" style="margin-right: 5px"></i
                     >Back
                  </button> -->

                  <div class="card informacion_tabla">
                     <div
                        class="card-header"
                        style="
                           padding: 10px 15px;
                           font-weight: 600;
                           color: black;
                        "
                     >
                        Featured
                     </div>
                     <div class="card-body">
                        <!-- Default panel contents -->
                        <div
                           class="panel-heading"
                           style="
                              font-weight: 600;
                              font-size: 13px;
                              margin-bottom: 5px;
                           "
                        >
                           Filter
                        </div>
                        <div class="panel-body">
                           <div class="div_filtro_plantillas">
                              <input
                                 type="text"
                                 class="form-control form-control-sm"
                                 placeholder="Template Name"
                                 id="input_filtro_nombre_plantilla"
                                 style="margin-right: 11px"
                              />

                              <button
                                 class="btn btn-default"
                                 id="filtro_plantillasWhatsapp"
                                 style=" border-color: #d3cac0; border: 1px solid #d3cac0; "
                              >
                                 Filter
                              </button>
                           </div>
                        </div>

                        <hr />

                        <!-- Table -->

                        <div class="table-responsive">
                           <table class="table table-borderless mt-3">
                              <thead>
                                 <tr>
                                    <th class="centrar">Name</th>
                                    <th class="centrar">Language</th>
                                    <th class="centrar">Status</th>
                                    <th class="centrar">Action</th>
                                 </tr>
                              </thead>
                              <tbody class="tbody_plantillasWhatsapp"></tbody>
                           </table>
                        </div>
                     </div>
                  </div>

                  <!-- TABLA PLANTILLAS -->

                  <!-- FIN TABLA PLANTILLAS -->
               </div>
            </div>
         </div>
      </div>

<!--modal-->


{/block}

{block name="script"}

<script src="{$theme}default/js/whatsapp.js?v={{_raid()}}"></script>

<script src="{$theme}default/js/plantillas.js?v={{_raid()}}"></script>

{literal}
<script>

         var URL_BASE = $("#URL_BASE").val();
         var ROLL_USERS = $("#ROLL_USERS").val();
         var PATH_IMG_      = $("#PATH_IMG").val();
         var URL_QUALIFY      = $("#URL_QUALIFY").val();
 

         $(".cerrar_modal_plantilla").click(function () {
            $("#staticBackdrop").modal("hide");
         });

         $(".btn_cerrar_confirmacion_modal").click(function () {
            $("#CampañaEnviada").modal("hide");
         });

         var ID_TEMPLATE_INVOICES = $("#id_template_invoices").val();
         var ID_TEMPLATE_PLANTILLA = 0;
         var BTN_PLANTILLA_MODIFICADA = false;
         var ENVIAR_PLANTILLA_ORIGINAL_MODIFICADA = {};

          

         //console.log(ID_TEMPLATE_INVOICES);

         if (isEmpty(ID_TEMPLATE_INVOICES) == true) {
            Swal.fire("ID_TEMPLATE_INVOICES is required");
         }

         /*  if (isEmpty(ID_TEMPLATE_PLANTILLA) == true) {
                     Swal.fire("ID_TEMPLATE_PLANTILLA is required");

                  } */

         const idiomas = [
            { nombre: "Afrikáans", codigo: "af" },
            { nombre: "Albanés", codigo: "sq" },
            { nombre: "Árabe", codigo: "ar" },
            { nombre: "Azerbaiyano", codigo: "az" },
            { nombre: "Bengalí", codigo: "bn" },
            { nombre: "Búlgaro", codigo: "bg" },
            { nombre: "Catalán", codigo: "ca" },
            { nombre: "Chino (China)", codigo: "zh_CN" },
            { nombre: "Chino (Hong Kong)", codigo: "zh_HK" },
            { nombre: "Chino (Taiwán)", codigo: "zh_TW" },
            { nombre: "Croata", codigo: "hr" },
            { nombre: "Checo", codigo: "cs" },
            { nombre: "Danés", codigo: "da" },
            { nombre: "Neerlandés", codigo: "nl" },
            { nombre: "Inglés", codigo: "en" },
            { nombre: "Inglés (Reino Unido)", codigo: "en_GB" },
            { nombre: "Inglés (EE. UU.)", codigo: "en_US" },
            { nombre: "Estonio", codigo: "et" },
            { nombre: "Filipino", codigo: "fil" },
            { nombre: "Finés", codigo: "fi" },
            { nombre: "Francés", codigo: "fr" },
            { nombre: "Alemán", codigo: "de" },
            { nombre: "Griego", codigo: "el" },
            { nombre: "Guyaratí", codigo: "gu" },
            { nombre: "Hausa", codigo: "ha" },
            { nombre: "Hebreo", codigo: "he" },
            { nombre: "Hindi", codigo: "hi" },
            { nombre: "Húngaro", codigo: "hu" },
            { nombre: "Indonesio", codigo: "id" },
            { nombre: "Irlandés", codigo: "ga" },
            { nombre: "Italiano", codigo: "it" },
            { nombre: "Japonés", codigo: "ja" },
            { nombre: "Canarés", codigo: "kn" },
            { nombre: "Kazajo", codigo: "kk" },
            { nombre: "Coreano", codigo: "ko" },
            { nombre: "Lao", codigo: "lo" },
            { nombre: "Letón", codigo: "lv" },
            { nombre: "Lituano", codigo: "lt" },
            { nombre: "Macedonio", codigo: "mk" },
            { nombre: "Malayo", codigo: "ms" },
            { nombre: "Malayalam", codigo: "ml" },
            { nombre: "Maratí", codigo: "mr" },
            { nombre: "Noruego", codigo: "nb" },
            { nombre: "Persa", codigo: "fa" },
            { nombre: "Polaco", codigo: "pl" },
            { nombre: "Portugués (Brasil)", codigo: "pt_BR" },
            { nombre: "Portugués (Portugal)", codigo: "pt_PT" },
            { nombre: "Punyabí", codigo: "pa" },
            { nombre: "Rumano", codigo: "ro" },
            { nombre: "Ruso", codigo: "ru" },
            { nombre: "Serbio", codigo: "sr" },
            { nombre: "Eslovaco", codigo: "sk" },
            { nombre: "Esloveno", codigo: "sl" },
            { nombre: "Español", codigo: "es" },
            { nombre: "Español (Argentina)", codigo: "es_AR" },
            { nombre: "Español (España)", codigo: "es_ES" },
            { nombre: "Español (México)", codigo: "es_MX" },
            { nombre: "Suajili", codigo: "sw" },
            { nombre: "Sueco", codigo: "sv" },
            { nombre: "Tamil", codigo: "ta" },
            { nombre: "Telugu", codigo: "te" },
            { nombre: "Tailandés", codigo: "th" },
            { nombre: "Turco", codigo: "tr" },
            { nombre: "Ucraniano", codigo: "uk" },
            { nombre: "Urdu", codigo: "ur" },
            { nombre: "Uzbeko", codigo: "uz" },
            { nombre: "Vietnamita", codigo: "vi" },
            { nombre: "Zulu", codigo: "zu" },
            { nombre: "Español (Honduras)", codigo: "es_HN" },
         ];

      
         var ID_PLANTILLA_SELECCIONADO = "";
         var INFORMACION_PLANTILLA_HEADER = ""; //esta variable la cree para tener la base 64 cuando es header y es tipo imagen, documento, video. tomo su base 64
         var INFORMACION_PLANTILLA_HEADER_EXTENSION = ""; //esta variable la cree para tener la base 64 cuando sea header tener el tipo de documento

         var TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID = null;
         var HTML_SELECT_HEADER_ACCOUNT = null;

         var listado_cabecera_account =   [];
         /* cargar_cabecera_account().then((data) => {
            listado_cabecera_account = data;
            HTML_SELECT_HEADER_ACCOUNT =
            select_cabeceras_grupos_campo_activo(listado_cabecera_account, "0");
         }); */

         listado_cabecera_account = ["account", "cn", "amount_last_paid", "date_last_paid", "userId"];

         console.log(listado_cabecera_account);

         HTML_SELECT_HEADER_ACCOUNT =
            select_cabeceras_grupos_campo_activo(listado_cabecera_account, "0");

         //listado configuracion. trae configuracion whatsapp y sms
         var listado_configuraciones = []
         var LISTADO_CONFIGURACIONES_PREDETERMINADO_ID = null;

         cargar_listado_configuracion_tipo_whatsapp_o_sms().then((data) => {
               listado_configuraciones = data;
                
         
               if (listado_configuraciones.length != 0) {
                  LISTADO_CONFIGURACIONES_PREDETERMINADO_ID =
                     listado_configuraciones[0].id;
               }

               //console.log(listado_configuraciones);

               //let html_config = '<option value="all">All</option>';
               let html_config = "";

               listado_configuraciones.forEach((element) => {
                  let value = element["id"];
                  let text = element["identifier"];
                  let token = element["token"];
                  let whatsapp_business_account_identifier =
                     element["whatsapp_business_account_identifier"];
                  let version = element["version"];
                  html_config +=
                     '<option value="' +
                     value +
                     '" data-token="' +
                     token +
                     '" data-whatsapp_business_account_identifier="' +
                     whatsapp_business_account_identifier +
                     '" data-version="' +
                     version +
                     '">' +
                     text +
                     "</option>";
               });
 
               $(".tener_configuracion").html(html_config);
         });

          
         tener_template_invoices_by_id(
            ID_TEMPLATE_INVOICES,
         ).then((data) => {

            let respuesta_plantillas = data;
            
            if (respuesta_plantillas.type == "success") {
            //console.log(respuesta_plantillas.data);
               if (respuesta_plantillas.data.length != 0) {
                  let {
                     template_modificado,
                     template_original,
                     template_data,
                     whatsapp_business_account_identifier,
                     version,
                     token,
                     config_whatsapp_other_id,
                     activo_id,
                  } = respuesta_plantillas.data[0];

                  //console.log(respuesta_plantillas.data[0]);

                  if (
                     //activo_id != 2 &&
                     template_original != null &&
                     template_modificado != null &&
                     template_data != null
                  ) {
                     $(".tener_configuracion").val(config_whatsapp_other_id);
                     $(".tener_status_whatsapp").val(activo_id);

                     template_original = JSON.parse(template_original);
                     ENVIAR_PLANTILLA_ORIGINAL_MODIFICADA = template_original;
                     ID_PLANTILLA_SELECCIONADO = template_original.id;

                     template_modificado = JSON.parse(template_modificado);

                     template_data = JSON.parse(template_data);

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

                     $(".btn_enviar_plantilla").data(
                        "namcespaces",
                        template_modificado.template.namespace,
                     );

                     cargar_plantillas_whatsapp_by_name(
                        URL_BASE,
                        whatsapp_business_account_identifier,
                        99,
                        version,
                        token,
                        template_original.name,
                     ).then((data) => {
                         var info = data;

                         if (info.type == "success") {
                           //console.log("plantilla");
                           //console.log(info);

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

                           listado_plantillasWhatsapp = info.data || [];

                           cargar_plantilla(
                              template_modificado.template.namespace,
                              ID_PLANTILLA_SELECCIONADO,
                              template_original,
                              template_data,
                           );

                           $(".contenedor_principal").hide();
                           $("#messages-main").show();
                        }
                     });

                      
                  }else{
                     $(".contenedor_principal").hide();
                     $("#messages-main").show();
                  }

                  //console.log("template_modificado");
                  //console.log(template_modificado);
                  //console.log("template_original");
                  //console.log(template_original);
               }else{
                  $(".contenedor_principal").hide();
                  $("#messages-main").show();
               }

                
            }

         });
          

          

         $("#abrir_plantillas_whatsapp").click(async function () {
            let selectedOption = $("#configuracion option:selected");

            // Retrieve the data attributes
            let token = selectedOption.data("token");
            let whatsappBusinessAccountIdentifier = selectedOption.data(
               "whatsapp_business_account_identifier",
            );
            let version = selectedOption.data("version");

            $(".informacion_tabla").show();
            $(".configuracion_plantilla").hide();

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

            let info = await cargar_plantillas_whatsapp(
               URL_BASE,
               whatsappBusinessAccountIdentifier,
               10,
               version,
               token,
            );

            if (info.type == "error") {
               return;
            }

            listado_plantillasWhatsapp = info.data || [];

            var html_tabla_plantilla = "";

            if (listado_plantillasWhatsapp.length != 0) {
               $(".tbody_plantillasWhatsapp").html(
                  tener_mensajes_de_plantillas(listado_plantillasWhatsapp),
               );

               plantilla_seleccionadaWhatsapp(info.namcespaces);
            }

            //$("#myModal").modal("show");
            $("#staticBackdrop").modal("show");

            //console.log(listado_plantillasWhatsapp);
         });

         $("#filtro_plantillasWhatsapp").click(async function () {
            let filtro = $("#input_filtro_nombre_plantilla").val();

            if (filtro == "" || filtro == undefined || filtro == null) {
               $(".tbody_plantillasWhatsapp").html(
                  tener_mensajes_de_plantillas(listado_plantillasWhatsapp),
               );
               plantilla_seleccionadaWhatsapp();
            } else {
               // Convertir el filtro a minúsculas
               filtro = filtro.toLowerCase();

               // Filtrar la lista asegurando coincidencias parciales
               let informacion_filtrada = listado_plantillasWhatsapp.filter(
                  (data) => data.name.toLowerCase().includes(filtro),
               );

               $(".tbody_plantillasWhatsapp").html(
                  tener_mensajes_de_plantillas(informacion_filtrada),
               );
               plantilla_seleccionadaWhatsapp();
            }
         });

         $(".btn_enviar_plantilla").click(async function () {
            if (isEmpty(ID_PLANTILLA_SELECCIONADO) == true) {
               Swal.fire("You must select a template");
               return;
            }

            //var dataId = $(this).data("id");
            var namcespaces = $(this).data("namcespaces");

            let configuracion_id = $(".tener_configuracion").val();
            let tener_identifier = $(".tener_identifier").val();

            let activo = $(".tener_status_whatsapp").val();

            if (isEmpty(activo) == true) {
               Swal.fire("Active Template is required");
               return;
            }

            if (isEmpty(configuracion_id) == true) {
               Swal.fire("Select a Whatsapp/SMS Setting");
               return;
            }

            //console.log(ID_PLANTILLA_SELECCIONADO);
            //console.log("namcespaces");
            //console.log(namcespaces);

             

            var informacion_plantilla_generado;

            if (BTN_PLANTILLA_MODIFICADA == false) {
               informacion_plantilla_generado =
                  await generar_plantilla_whatsapp(
                     ENVIAR_PLANTILLA_ORIGINAL_MODIFICADA,
                     namcespaces,
                  );

               console.log("Bienvenido");
            } else {
               let info = listado_plantillasWhatsapp.find(
                  (data) => data.id == ID_PLANTILLA_SELECCIONADO,
               );

               informacion_plantilla_generado =
                  await generar_plantilla_whatsapp(info, namcespaces);
            }

            if (informacion_plantilla_generado == "no_usar") {
               return;
            }

            if (isEmpty(informacion_plantilla_generado) == true) {
               Swal.fire(
                  "Check that the template has all the fields filled out",
               );
               return;
            }

            let data_plantillas_general = informacion_plantilla_generado;

            //$("#CampañaEnviada").modal("show");

            //console.log(enviar_informacion);
            //console.log(JSON.stringify(data_plantillas_general));
            //console.log("aqui hay un return abajo");
            //return;

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

            $.ajax({
               type: "POST",
               url: URL_BASE + "template/agregar_plantilla_whatsapp_invoices",
               data: JSON.stringify(informacion_plantilla_generado), // Convertir datos a formato JSON
               contentType: "application/json", // Tipo de contenido JSON
               success: function (response) {
                  $(".btn_enviar_plantilla").prop("disabled", false);
                  // console.log("Respuesta del servidor:", response);
                  // Hacer algo con la respuesta del servidor
                  //$("#myModal").modal("hide");

                  try {
                     let info = JSON.parse(response);
                     if (info.type == "success") {
                        Swal.fire({
                           title: "Template",
                           text: "Template saved successfully!",
                           icon: "success",
                        });

                        //$(".configuracion_plantilla").hide();
                     } else {
                        Swal.fire("Error sending group messages");
                     }
                  } catch (error) {
                     Swal.fire("Error:" + error);
                  }
               },
               error: function (xhr, status, error) {
                  $(".btn_enviar_plantilla").prop("disabled", false);

                  console.error("Error en la solicitud:", error);
               },
            });
         });

         function plantilla_seleccionadaWhatsapp(namcespaces) {
            $(".usar_plantilla_seleccionada").click(async function () {
               var dataId = $(this).data("id");
               //console.log("Data ID:", dataId);

               let info = listado_plantillasWhatsapp.find(
                  (data) => data.id == dataId,
               );

               if (info) {
                  if (info.status != "APPROVED") {
                     Swal.fire("This template is not active");

                     return;
                  }

                  ID_PLANTILLA_SELECCIONADO = dataId;

                  $(".btn_enviar_plantilla").attr(
                     "data-namcespaces",
                     namcespaces,
                  );

                  $("#input_nombre_plantilla").val(info.name);

                  let pais = idiomas.find(
                     (data) => data.codigo == info.language,
                  );
                  
                  if(pais)
                  {
                     $("#input_lenguaje_plantilla").val(pais.nombre);
                  }else{
                     $("#input_lenguaje_plantilla").val("Unknown Language");
                  }


                  const components = info.components || [];

                  var existeHeaders = false;

                  //HEADER INFORMACION
                  //header
                  $("#input_header_plantilla").val("None");
                  $(".contenido_principal_header").html("");

                  //body
                  $(".contenido_principal_body").html("");

                  //footer
                  $(".footer_plantilla").hide();

                  $(".buttons_plantilla").hide();

                  //VISTA PREVIA
                  //$("#texto_header_plantilla_previa").text("");
                  //header
                  $(".plantilla-header").html("");

                  //body
                  $("#texto_body_plantilla_previa").text("");

                  //footer
                  $("#texto_footer_plantilla_previa").text("");

                  //botones
                  $(".mensajes_botones").hide();
                  $(".mensajes_botones").html("");

                  var existeHeaderDiferenteTexto = false;

                  components.forEach((elementos) => {
                     //tipo type: HEADER, BODY Y FOOTER
                     //text puede ser: Hola, mundo / Hola, {{ 1 }}
                     //format: IMAGEN, DOCUMENT, VIDEO
                     let { type, text, format, example, buttons } = elementos;
                     /* console.log("Text: ", text);
                              console.log("Type: ", type);
                              console.log("Formato: ", format);
                              console.log("Example: ", example);
                              console.log("Botones: ", buttons); */

                     if (type == "HEADER") {
                        //existeHeaders = true;
                        let tempo_formt =
                           format.charAt(0).toUpperCase() +
                           format.slice(1).toLowerCase();

                        let formato_minuscula = format.toLowerCase();

                        if (formato_minuscula == "text") {
                           //poner tipo de plantilla imagen, texto, documentos o videos
                           $("#input_header_plantilla").val(tempo_formt);

                           const htmlContent =
                              "<label>Header content</label>" +
                              '<textarea id="texto_textarea_header" class="form-control form-control-sm" disabled>' +
                              text +
                              "</textarea>";

                           $(".contenido_principal_header").html(htmlContent);

                           $(".plantilla-header").html(
                              '<p id="texto_header_plantilla_previa">' +
                                 text +
                                 "</p>",
                           );

                           adjustHeightTexto_TextArea_HeaderWhatsapp();

                           if (example != null || example != undefined) {
                              //console.log("CANTIDAD DE PARAMETROS:");
                              //console.log(countNestedElements(example));
                              let cantidad_parametros =
                                 countNestedElements(example);

                              var html_input = "<div class='row'>";

                              for (let i = 1; i <= cantidad_parametros; i++) {
                                 //html_input += "<div class='col-12 col-sm-6 col-md-6 col-lg-6' >";

                                 html_input +=
                                    "<div class='col-12 col-sm-6 col-md-8 col-lg-8 mb-3'>" +
                                    "<label style='margin-top:12px;' id='texto_label_plantilla_header_" +
                                    i +
                                    "' data-id='" +
                                    i +
                                    "'>" +
                                    "Field {{ " +
                                    i +
                                    " }} <span style='color: red; font-size: 10px;'>* Field is required</span>" +
                                    "</label>" +
                                    "<input id='texto_input_plantilla_header_" +
                                    i +
                                    "' data-id='" +
                                    i +
                                    "' class='form-control form-control-sm color-error' />" +
                                    "</div>" +
                                    //este es todo el select
                                    "<div class='col-12 col-sm-6 col-md-4 col-lg-4 mb-3'>" +
                                    "<label style='margin-top:12px;'>Variable {{ " +
                                    i +
                                    " }}</label>" +
                                    "<select id='select_plantilla_header_" +
                                    i +
                                    "' data-id='" +
                                    i +
                                    "' class='form-control form-control-sm'>" +
                                    HTML_SELECT_HEADER_ACCOUNT +
                                    "</select>" +
                                    "</div>";
                              }

                              html_input += "</div>";

                              $(".contenido_principal_header").append(
                                 html_input,
                              );

                              //let prueba = "Hola como  {{1}} mi nombre";
                              //text = text + " cesar {{2}} jaj";

                              updateTextWhatsapp(text, 0);

                              $(".contenido_principal_header").on(
                                 "input",
                                 "input[id^='texto_input_plantilla_header_']",
                                 function () {
                                    const value = $(this).val();
                                    const dataId = $(this).data("id");
                                    //console.log(`Value for input with data-id ${dataId}: ${value}`,);

                                    let selectDB = $(
                                       "#select_plantilla_header_" + dataId,
                                    ).val();

                                    updateTextWhatsapp(text, selectDB);

                                    let label = $(
                                       "#texto_label_plantilla_header_" +
                                          dataId,
                                    );

                                    if (
                                       value == "" ||
                                       value == null ||
                                       value == undefined
                                    ) {
                                       // Si el campo está vacío, mostrar el placeholder en el label
                                       label.html(
                                          "Field {{ " +
                                             dataId +
                                             " }} <span style='color: red; font-size: 10px;'>* Field is required</span>",
                                       );
                                       $(this).addClass("color-error");
                                    } else {
                                       // Si el campo tiene valor, mostrar solo el texto del label
                                       label.html("Field {{ " + dataId + " }}");
                                       $(this).removeClass("color-error");
                                    }

                                    //console.log(updatedText);

                                    /*
                                             let prueba = "Hola como {{1}} mi nombre";
                                             let placeholder = "{{1}}";
                                             // Escapar caracteres especiales en el placeholder
                                             let escapedPlaceholder = placeholder.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
                                             // Crear un nuevo RegExp usando el placeholder escapado
                                             let regex = new RegExp(escapedPlaceholder, 'g');
                                             // Realizar el reemplazo
                                             let updatedText = prueba.replace(regex, "cesar");
                                             console.log("Updated string:", updatedText);

                                             */
                                 },
                              );

                              $(".contenido_principal_header").on(
                                 "change",
                                 "select[id^='select_plantilla_header_']",
                                 function () {
                                    // Obtener el data-id del select seleccionado
                                    var dataId = $(this).data("id");
                                    // Obtener el valor seleccionado
                                    var selectedValue = $(this).val();

                                    let label = $(
                                       "#texto_label_plantilla_header_" +
                                          dataId,
                                    );

                                    let input = $(
                                       "#texto_input_plantilla_header_" +
                                          dataId,
                                    );

                                    if(selectedValue == "url_rate_review")
                                    {
                                       input.val(URL_QUALIFY);
                                    }

                                    if (
                                       selectedValue == 0 ||
                                       selectedValue == "0"
                                    ) {
                                       if (isEmpty(input) == true) {
                                          label.html(
                                             "Field {{ " +
                                                dataId +
                                                " }} <span style='color: red; font-size: 10px;'>* Field is required</span>",
                                          );
                                          input.addClass("color-error");
                                       }

                                       updateTextWhatsapp(text, "0");
                                    } else {
                                       // Si el campo tiene valor, mostrar solo el texto del label
                                       label.html("Field {{ " + dataId + " }}");
                                       input.removeClass("color-error");
                                       updateTextWhatsapp(text, selectedValue);
                                    }
                                 },
                              );
                           }
                        }

                        if (formato_minuscula == "image") {
                           existeHeaderDiferenteTexto = true;
                           //poner tipo de plantilla imagen, texto, documentos o videos
                           $("#input_header_plantilla").val(tempo_formt);

                           $(".plantilla-header").html(
                              '<div class="imagen_header_plantilla">' +
                                 "</div>",
                           );

                           seleccionar_archivo_plantilla_headersWhatsapp(
                              formato_minuscula,
                              "image/jpeg, image/png",
                           );
                        }

                        if (formato_minuscula == "document") {
                           existeHeaderDiferenteTexto = true;
                           //poner tipo de plantilla imagen, texto, documentos o videos
                           $("#input_header_plantilla").val(tempo_formt);

                           $(".plantilla-header").html(
                              '<div class="documento_header_plantilla">' +
                                 "</div>",
                           );

                           seleccionar_archivo_plantilla_headersWhatsapp(
                              formato_minuscula,
                              ".pdf",
                           );
                        }

                        if (formato_minuscula == "video") {
                           existeHeaderDiferenteTexto = true;
                           //poner tipo de plantilla imagen, texto, documentos o videos
                           $("#input_header_plantilla").val(tempo_formt);

                           $(".plantilla-header").html(
                              '<div class="video_header_plantilla">' + "</div>",
                           );

                           seleccionar_archivo_plantilla_headersWhatsapp(
                              formato_minuscula,
                              "video/mp4, video/3gpp",
                           );
                        }

                        if (formato_minuscula == "location") {
                           existeHeaderDiferenteTexto = true;
                           $("#input_header_plantilla").val(tempo_formt);

                           $(".plantilla-header").html(
                              '<div class="imagen_header_plantilla_location">' +
                                 "</div>",
                           );

                           $(".plantilla-header").append(
                              '<p style="margin-bottom:0px;font-size: 11px; color: black;" class="p_headers_name_location">{{Location name}}' +
                                 "</p>",
                           );

                           $(".plantilla-header").append(
                              '<p style="font-size: 11px; color: black;" class="p_headers_address_location">{{Address}}' +
                                 "</p>",
                           );

                           let arr = [
                              "Latitude",
                              "Longitud",
                              "Addresses",
                              "Name",
                           ];

                           let htmlContent = "";

                           for (let i = 0; i < arr.length; i++) {
                              let elemento = arr[i];

                              let estilo = "";
                              if (i != 0) {
                                 estilo = "style='margin-top:12px;'";
                              }

                              htmlContent +=
                                 "<label id='texto_label_plantilla_header_location_" +
                                 i +
                                 "' " +
                                 estilo +
                                 ">" +
                                 elemento +
                                 " <span style='color: red; font-size: 10px;'>* Field is required</span></label>" +
                                 '<input id="texto_input_location_header_' +
                                 i +
                                 '" data-name="' +
                                 elemento +
                                 '" data-id="' +
                                 i +
                                 '" class="form-control form-control-sm color-error">';
                           }

                           $(".contenido_principal_header").html(htmlContent);

                           $(".contenido_principal_header").on(
                              "input",
                              "input[id^='texto_input_location_header_']",
                              function () {
                                 const value = $(this).val();
                                 const dataName = $(this).data("name");
                                 const dataId = $(this).data("id");

                                 if (dataName == "Name") {
                                    $(".p_headers_name_location").text(value);
                                 }

                                 if (dataName == "Addresses") {
                                    $(".p_headers_address_location").text(
                                       value,
                                    );
                                 }

                                 var label = $(
                                    "#texto_label_plantilla_header_location_" +
                                       dataId,
                                 );

                                 if (
                                    value == "" ||
                                    value == null ||
                                    value == undefined
                                 ) {
                                    // Si el campo está vacío, mostrar el placeholder en el label
                                    label.html(
                                       dataName +
                                          " <span style='color: red; font-size: 10px;'>* Field is required</span>",
                                    );
                                    $(this).addClass("color-error");
                                 } else {
                                    // Si el campo tiene valor, mostrar solo el texto del label
                                    label.html(dataName);
                                    $(this).removeClass("color-error");
                                 }
                              },
                           );
                        }
                     }

                     if (type == "BODY") {
                        $("#texto_body_plantilla_previa").text(text);

                        $(".contenido_principal_body").html("");
                        var html_input =
                           "<label>Body content</label>" +
                           '<textarea id="texto_textarea_body" class="form-control form-control-sm" disabled></textarea>';

                        // Inserta el contenido HTML en el div
                        $(".contenido_principal_body").html(html_input);

                        $("#texto_textarea_body").val(text);
                        $("#texto_textarea_body").text(text);

                        setTimeout(function () {
                           var textArea = $("#texto_textarea_body");
                           textArea.css("height", "auto");

                           // Obtiene el scrollHeight
                           var scrollHeight = textArea[0].scrollHeight;

                           textArea.css("height", scrollHeight + "px");
                           //adjustHeightTexto_TextArea_BodyWhatsapp(text);
                        }, 100);

                        if (example != null || example != undefined) {
                           //console.log("CANTIDAD DE PARAMETROS BODY:");
                           //console.log(countNestedElements(example));
                           let cantidad_parametros =
                              countNestedElements(example);

                           var html_input = "<div class='row'>";

                           for (let i = 1; i <= cantidad_parametros; i++) {
                              html_input +=
                                 "<div class='col-12 col-sm-6 col-md-8 col-lg-8 mb-3'>" +
                                 "<label style='margin-top:12px;' id='texto_label_plantilla_body_" +
                                 i +
                                 "' data-id='" +
                                 i +
                                 "'>Field {{ " +
                                 i +
                                 " }}  <span style='color: red; font-size: 10px;'>* Field is required</span></label>" +
                                 "<input id='texto_input_plantilla_body_" +
                                 i +
                                 "' data-id='" +
                                 i +
                                 "' class='form-control form-control-sm color-error'>" +
                                 "</input>" +
                                 "</div>" +
                                 "<div class='col-12 col-sm-6 col-md-4 col-lg-4 mb-3'>" +
                                 "<label style='margin-top:12px;'>Variable {{ " +
                                 i +
                                 " }}</label>" +
                                 "<select id='select_plantilla_body_" +
                                 i +
                                 "' data-id='" +
                                 i +
                                 "' class='form-control form-control-sm'>" +
                                 HTML_SELECT_HEADER_ACCOUNT +
                                 "</select>" +
                                 "</div>";
                           }

                           $(".contenido_principal_body").append(html_input);

                           updateTextBodyWhatsapp(text);

                           $(".contenido_principal_body").on(
                              "input",
                              "input[id^='texto_input_plantilla_body_']",
                              function () {
                                 const value = $(this).val();
                                 const dataId = $(this).data("id");
                                 //console.log( `Value for input with data-id ${dataId}: ${value}`,);

                                 updateTextBodyWhatsapp(text);

                                 let label = $(
                                    "#texto_label_plantilla_body_" + dataId,
                                 );

                                 if (
                                    value == "" ||
                                    value == null ||
                                    value == undefined
                                 ) {
                                    // Si el campo está vacío, mostrar el placeholder en el label
                                    label.html(
                                       "Field {{ " +
                                          dataId +
                                          " }} <span style='color: red; font-size: 10px;'>* Field is required</span>",
                                    );
                                    $(this).addClass("color-error");
                                 } else {
                                    // Si el campo tiene valor, mostrar solo el texto del label
                                    label.html("Field {{ " + dataId + " }}");
                                    $(this).removeClass("color-error");
                                 }
                              },
                           );

                           $(".contenido_principal_body").on(
                              "change",
                              "select[id^='select_plantilla_body_']",
                              function () {
                                 // Obtener el data-id del select seleccionado
                                 var dataId = $(this).data("id");
                                 // Obtener el valor seleccionado
                                 var selectedValue = $(this).val();

                                 //console.log("selectedValue: ", selectedValue);
                                 //console.log("dataId:", dataId);

                                 let label = $(
                                    "#texto_label_plantilla_body_" + dataId,
                                 );

                                 let input = $(
                                    "#texto_input_plantilla_body_" + dataId,
                                 );

                                 if(selectedValue == "url_rate_review")
                                 {
                                    input.val(URL_QUALIFY);
                                 }

                                 let value = input.val();

                                 if (
                                    selectedValue == 0 ||
                                    selectedValue == "0"
                                 ) {
                                    if (isEmpty(input) == true) {
                                       label.html(
                                          "Field {{ " +
                                             dataId +
                                             " }} <span style='color: red; font-size: 10px;'>* Field is required</span>",
                                       );
                                       input.addClass("color-error");
                                    }

                                    updateTextSelectBodyWhatsapp(text);
                                 } else {
                                    // Si el campo tiene valor, mostrar solo el texto del label
                                    label.html("Field {{ " + dataId + " }}");
                                    input.removeClass("color-error");
                                    updateTextSelectBodyWhatsapp(text);
                                 }
                              },
                           );
                           //FIN BODY
                        }
                     }

                     if (type == "FOOTER") {
                        $("#texto_footer_plantilla_previa").text(text);

                        $("#texto_textarea_footer").val(text);
                        $("#texto_textarea_footer").text(text);

                        setTimeout(function () {
                           var textArea = $("#texto_textarea_footer");
                           textArea.css("height", "auto");

                           // Obtiene el scrollHeight
                           var scrollHeight = textArea[0].scrollHeight;

                           textArea.css("height", scrollHeight + "px");
                        }, 100);

                        $(".footer_plantilla").show();
                     }

                     if (type == "BUTTONS") {
                        $(".mensajes_botones").show();

                        $(".contenido_principal_buttons").html("");

                        var html_input_buttons = "";
                        var html_input_buttons_vista_previa = "";

                        buttons.forEach((element, index, array) => {
                           let typeButtonValue = element.type;
                           let textButtonValue = element.text;
                           let required = element.example;
                           var valueButtonValue = "";

                           let img = "";
                           if (typeButtonValue == "PHONE_NUMBER") {
                              img = PATH_IMG_ + "telefono.png";
                              valueButtonValue = element.phone_number;
                           }

                           if (typeButtonValue == "URL") {
                              img = PATH_IMG_ +"url_icono_plantilla.png";
                              valueButtonValue = element.url;
                           }

                           if (typeButtonValue == "COPY_CODE") {
                              valueButtonValue = element.example[0];
                              img =PATH_IMG_ +  "copiar_icono_plantilla.png";
                           }

                           if (img == "") {
                              img = PATH_IMG_ + "trasparente_plantilla.png";
                           }

                           // Genera el HTML para los inputs
                           html_input_buttons +=
                              '<label style="margin-top: 10px">Type Buttons</label>' +
                              '<input type="text" class="form-control form-control-sm" value="' +
                              typeButtonValue +
                              '" disabled />' +
                              '<label style="margin-top: 10px">Text Buttons</label>' +
                              '<input type="text" class="form-control form-control-sm" value="' +
                              textButtonValue +
                              '" disabled />' +
                              '<label style="margin-top: 10px">Value Buttons</label>' +
                              '<input type="text" class="form-control form-control-sm" value="' +
                              valueButtonValue +
                              '" disabled />';

                           if (required != null || required != undefined) {
                              html_input_buttons +=
                                 '<label  id="label_buttons_plantilla_' +
                                 index +
                                 '" style="margin-top: 10px;">Field <span style="color: red; font-size: 10px;">* Required</span></label></label>' +
                                 '<input type="text" class="form-control form-control-sm color-error" id="input_buttons_plantilla_' +
                                 index +
                                 '" data-id="' +
                                 index +
                                 '"/>';
                           }

                           // Genera el HTML para la vista previa
                           html_input_buttons_vista_previa +=
                              '<div class="div_mensaje_boton">' +
                              '<img src="' +
                              img +
                              '" class="icono_plantilla"> <a href="" class="angotar_mensajes_botones">' +
                              textButtonValue +
                              "</a>" +
                              "</div>";

                           // Añade el <hr> solo si no es el último elemento
                           if (index !== array.length - 1) {
                              html_input_buttons +=
                                 '<hr style="border-top: 1px solid #c1bdbd; width: 100%; margin-top: 10px; margin-bottom: 15px;" />';

                              html_input_buttons_vista_previa +=
                                 '<hr class="class_hr" />';
                           }
                        });

                        // Inserta el contenido HTML en los divs correspondientes
                        $(".mensajes_botones").html(
                           html_input_buttons_vista_previa,
                        );
                        $(".contenido_principal_buttons").html(
                           html_input_buttons,
                        );

                        $(".contenido_principal_buttons").on(
                           "input",
                           "input[id^='input_buttons_plantilla_']",
                           function () {
                              const value = $(this).val();
                              const dataId = $(this).data("id");
                              /* console.log(
                                          `Value for input with data-id ${dataId}: ${value}`,
                                       ); */

                              let label = $(
                                 "#label_buttons_plantilla_" + dataId,
                              );

                              if (
                                 value == "" ||
                                 value == null ||
                                 value == undefined
                              ) {
                                 // Si el campo está vacío, mostrar el placeholder en el label
                                 ///label.css("color", "red");
                                 label.html(
                                    'Field <span style="color: red; font-size: 10px;">* Required</span>',
                                 );

                                 $(this).addClass("color-error");
                              } else {
                                 // Si el campo tiene valor, mostrar solo el texto del label
                                 //label.html("Field Required");
                                 //label.css("color", "none");
                                 label.html(
                                    'Field <span style="font-size: 10px;">* Required</span>',
                                 );

                                 $(this).removeClass("color-error");
                              }
                           },
                        );

                        $(".buttons_plantilla").show();
                     }
                  });

                  if (existeHeaderDiferenteTexto == true) {
                     Swal.fire(
                        "This template contains a header that is different from the text",
                     );
                     return;
                  }
                  
                  BTN_PLANTILLA_MODIFICADA = true;

                  //input_header_plantilla
               }

               $(".informacion_tabla").hide();
               $(".configuracion_plantilla").show();
               //$(".retroceder_listado_plantilla").show();

               $("#staticBackdrop").modal("hide");
            });
         }

         function cargar_plantilla(
            namcespaces,
            dataId,
            template_original,
            template_data,
         ) {
            //console.log("template_data");
            //console.log(template_data);

            ID_PLANTILLA_SELECCIONADO = dataId;

            let info = listado_plantillasWhatsapp.find(
               (data) => data.id == dataId,
            );

            if (info) {
               if (info.status != "APPROVED") {
                  Swal.fire("This template is not active");
                  return;
               }

               ID_PLANTILLA_SELECCIONADO = dataId;

               $(".btn_enviar_plantilla").attr("data-namcespaces", namcespaces);

               $("#input_nombre_plantilla").val(info.name);

               let pais = idiomas.find((data) => data.codigo == info.language);

               $("#input_lenguaje_plantilla").val(pais.nombre);

               const components = template_original.components || [];

               var existeHeaders = false;

               //HEADER INFORMACION
               //header
               $("#input_header_plantilla").val("None");
               $(".contenido_principal_header").html("");

               //body
               $(".contenido_principal_body").html("");

               //footer
               $(".footer_plantilla").hide();

               $(".buttons_plantilla").hide();

               //VISTA PREVIA
               //$("#texto_header_plantilla_previa").text("");
               //header
               $(".plantilla-header").html("");

               //body
               $("#texto_body_plantilla_previa").text("");

               //footer
               $("#texto_footer_plantilla_previa").text("");

               //botones
               $(".mensajes_botones").hide();
               $(".mensajes_botones").html("");

               components.forEach((elementos) => {
                  //tipo type: HEADER, BODY Y FOOTER
                  //text puede ser: Hola, mundo / Hola, {{ 1 }}
                  //format: IMAGEN, DOCUMENT, VIDEO
                  let { type, text, format, example, buttons } = elementos;
                  /* console.log("Text: ", text);
                              console.log("Type: ", type);
                              console.log("Formato: ", format);
                              console.log("Example: ", example);
                              console.log("Botones: ", buttons); */

                  if (type == "HEADER") {
                     //existeHeaders = true;
                     let tempo_formt =
                        format.charAt(0).toUpperCase() +
                        format.slice(1).toLowerCase();

                     let formato_minuscula = format.toLowerCase();

                     if (formato_minuscula == "text") {
                        //poner tipo de plantilla imagen, texto, documentos o videos
                        $("#input_header_plantilla").val(tempo_formt);

                        const htmlContent =
                           "<label>Header content</label>" +
                           '<textarea id="texto_textarea_header" class="form-control form-control-sm" disabled>' +
                           text +
                           "</textarea>";

                        $(".contenido_principal_header").html(htmlContent);

                        $(".plantilla-header").html(
                           '<p id="texto_header_plantilla_previa">' +
                              text +
                              "</p>",
                        );

                        adjustHeightTexto_TextArea_HeaderWhatsapp();

                        if (example != null || example != undefined) {
                           //console.log("CANTIDAD DE PARAMETROS:");
                           //console.log(countNestedElements(example));
                           let cantidad_parametros =
                              countNestedElements(example);

                           var html_input = "<div class='row'>";

                           let index_auto = 1;
                           let {
                              type,
                              contenido,
                              campoBD = "0",
                              format,
                              extension,
                              lati,
                              lon,
                              address,
                              name,
                           } = {};

                           let template_data_header = template_data.filter(
                              (data) => data.type == "HEADER",
                           );

                           // Verificar si se encontró algún contenido del tipo "BODY"
                           if (template_data_header.length > 0) {
                              // Obtener el contenido del primer objeto del array filtrado
                              template_data_header = template_data_header[0];
                              ({
                                 type,
                                 contenido,
                                 campoBD = "0",
                                 format,
                                 extension,
                                 lati,
                                 lon,
                                 address,
                                 name,
                              } = template_data_header);

                              //console.log({
                              //   type,
                              //   contenido,
                              //   campoBD,
                              //   format,
                              //   extension,
                              //   lati,
                              //   lon,
                              //   address,
                              //   name,
                              //});
                           }

                           let iniciar_texto = "";

                           if (campoBD == "0" || campoBD == 0) {
                              iniciar_texto = contenido;
                           } else {
                              if (campoBD != null || campoBD != undefined) {
                                 iniciar_texto =
                                    reemplazarComodinPorTextSinConcatenar(
                                       contenido,
                                       "{{1}}",
                                       "",
                                    );
                              }

                              //console.log(iniciar_texto);
                           }

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

                           for (let i = 0; i < cantidad_parametros; i++) {
                              //html_input += "<div class='col-12 col-sm-6 col-md-6 col-lg-6' >";

                              html_input +=
                                 "<div class='col-12 col-sm-6 col-md-8 col-lg-8 mb-3'>" +
                                 "<label style='margin-top:12px;' id='texto_label_plantilla_header_" +
                                 index_auto +
                                 "' data-id='" +
                                 index_auto +
                                 "'>" +
                                 "Field {{ " +
                                 index_auto +
                                 " }} " +
                                 //"<span style='color: red; font-size: 10px;'>* Field is required</span>" +
                                 "</label>" +
                                 "<input id='texto_input_plantilla_header_" +
                                 index_auto +
                                 "' data-id='" +
                                 index_auto +
                                 "' class='form-control form-control-sm  ' value='" +
                                 iniciar_texto +
                                 "' />" +
                                 "</div>" +
                                 //este es todo el select
                                 "<div class='col-12 col-sm-6 col-md-4 col-lg-4 mb-3'>" +
                                 "<label style='margin-top:12px;'>Variable {{ " +
                                 index_auto +
                                 " }}</label>" +
                                 "<select id='select_plantilla_header_" +
                                 index_auto +
                                 "' data-id='" +
                                 index_auto +
                                 "' class='form-control form-control-sm'>" +
                                 select_cabeceras_grupos_campo_activo(
                                    listado_cabecera_account,
                                    campoBD,
                                 ) +
                                 "</select>" +
                                 "</div>";

                              index_auto++;
                           }

                           html_input += "</div>";

                           $(".contenido_principal_header").append(html_input);

                           //let prueba = "Hola como  {{1}} mi nombre";
                           //text = text + " cesar {{2}} jaj";

                           updateTextWhatsapp(text, campoBD);

                           $(".contenido_principal_header").on(
                              "input",
                              "input[id^='texto_input_plantilla_header_']",
                              function () {
                                 const value = $(this).val();
                                 const dataId = $(this).data("id");
                                 //console.log(`Value for input with data-id ${dataId}: ${value}`,);

                                 let selectDB = $(
                                    "#select_plantilla_header_" + dataId,
                                 ).val();

                                 updateTextWhatsapp(text, selectDB);

                                 let label = $(
                                    "#texto_label_plantilla_header_" + dataId,
                                 );

                                 let select = $(
                                    "#select_plantilla_header_" + dataId,
                                 ).val();

                                 if (select == "0" || select == 0) {
                                    if (
                                       value == "" ||
                                       value == null ||
                                       value == undefined
                                    ) {
                                       // Si el campo está vacío, mostrar el placeholder en el label
                                       label.html(
                                          "Field {{ " +
                                             dataId +
                                             " }} <span style='color: red; font-size: 10px;'>* Field is required</span>",
                                       );
                                       $(this).addClass("color-error");
                                    } else {
                                       // Si el campo tiene valor, mostrar solo el texto del label
                                       label.html("Field {{ " + dataId + " }}");
                                       $(this).removeClass("color-error");
                                    }
                                 }

                                 //console.log(updatedText);

                                 /*
                                             let prueba = "Hola como {{1}} mi nombre";
                                             let placeholder = "{{1}}";
                                             // Escapar caracteres especiales en el placeholder
                                             let escapedPlaceholder = placeholder.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
                                             // Crear un nuevo RegExp usando el placeholder escapado
                                             let regex = new RegExp(escapedPlaceholder, 'g');
                                             // Realizar el reemplazo
                                             let updatedText = prueba.replace(regex, "cesar");
                                             console.log("Updated string:", updatedText);

                                             */
                              },
                           );

                           $(".contenido_principal_header").on(
                              "change",
                              "select[id^='select_plantilla_header_']",
                              function () {
                                 // Obtener el data-id del select seleccionado
                                 var dataId = $(this).data("id");
                                 // Obtener el valor seleccionado
                                 var selectedValue = $(this).val();

                                 let label = $(
                                    "#texto_label_plantilla_header_" + dataId,
                                 );

                                 let input = $(
                                    "#texto_input_plantilla_header_" + dataId,
                                 );

                                 //console.log(URL_QUALIFY);
                                 //console.log(selectedValue);

                                 if(selectedValue == "url_rate_review")
                                 {
                                    input.val(URL_QUALIFY);
                                 }

                                 if (
                                    selectedValue == 0 ||
                                    selectedValue == "0"
                                 ) {
                                    if (isEmpty(input) == true) {
                                       label.html(
                                          "Field {{ " +
                                             dataId +
                                             " }} <span style='color: red; font-size: 10px;'>* Field is required</span>",
                                       );
                                       input.addClass("color-error");
                                    }

                                    updateTextWhatsapp(text, "0");
                                 } else {
                                    // Si el campo tiene valor, mostrar solo el texto del label
                                    label.html("Field {{ " + dataId + " }}");
                                    input.removeClass("color-error");
                                    updateTextWhatsapp(text, selectedValue);
                                 }
                              },
                           );
                        }
                     }

                     if (formato_minuscula == "image") {
                        //poner tipo de plantilla imagen, texto, documentos o videos
                        $("#input_header_plantilla").val(tempo_formt);

                        $(".plantilla-header").html(
                           '<div class="imagen_header_plantilla">' + "</div>",
                        );

                        seleccionar_archivo_plantilla_headersWhatsapp(
                           formato_minuscula,
                           "image/jpeg, image/png",
                        );
                     }

                     if (formato_minuscula == "document") {
                        //poner tipo de plantilla imagen, texto, documentos o videos
                        $("#input_header_plantilla").val(tempo_formt);

                        $(".plantilla-header").html(
                           '<div class="documento_header_plantilla">' +
                              "</div>",
                        );

                        seleccionar_archivo_plantilla_headersWhatsapp(
                           formato_minuscula,
                           ".pdf",
                        );
                     }

                     if (formato_minuscula == "video") {
                        //poner tipo de plantilla imagen, texto, documentos o videos
                        $("#input_header_plantilla").val(tempo_formt);

                        $(".plantilla-header").html(
                           '<div class="video_header_plantilla">' + "</div>",
                        );

                        seleccionar_archivo_plantilla_headersWhatsapp(
                           formato_minuscula,
                           "video/mp4, video/3gpp",
                        );
                     }

                     if (formato_minuscula == "location") {
                        $("#input_header_plantilla").val(tempo_formt);

                        $(".plantilla-header").html(
                           '<div class="imagen_header_plantilla_location">' +
                              "</div>",
                        );

                        $(".plantilla-header").append(
                           '<p style="margin-bottom:0px;font-size: 11px; color: black;" class="p_headers_name_location">{{Location name}}' +
                              "</p>",
                        );

                        $(".plantilla-header").append(
                           '<p style="font-size: 11px; color: black;" class="p_headers_address_location">{{Address}}' +
                              "</p>",
                        );

                        let arr = ["Latitude", "Longitud", "Addresses", "Name"];

                        let htmlContent = "";

                        for (let i = 0; i < arr.length; i++) {
                           let elemento = arr[i];

                           let estilo = "";
                           if (i != 0) {
                              estilo = "style='margin-top:12px;'";
                           }

                           htmlContent +=
                              "<label id='texto_label_plantilla_header_location_" +
                              i +
                              "' " +
                              estilo +
                              ">" +
                              elemento +
                              " <span style='color: red; font-size: 10px;'>* Field is required</span></label>" +
                              '<input id="texto_input_location_header_' +
                              i +
                              '" data-name="' +
                              elemento +
                              '" data-id="' +
                              i +
                              '" class="form-control form-control-sm color-error">';
                        }

                        $(".contenido_principal_header").html(htmlContent);

                        $(".contenido_principal_header").on(
                           "input",
                           "input[id^='texto_input_location_header_']",
                           function () {
                              const value = $(this).val();
                              const dataName = $(this).data("name");
                              const dataId = $(this).data("id");

                              if (dataName == "Name") {
                                 $(".p_headers_name_location").text(value);
                              }

                              if (dataName == "Addresses") {
                                 $(".p_headers_address_location").text(value);
                              }

                              var label = $(
                                 "#texto_label_plantilla_header_location_" +
                                    dataId,
                              );

                              if (
                                 value == "" ||
                                 value == null ||
                                 value == undefined
                              ) {
                                 // Si el campo está vacío, mostrar el placeholder en el label
                                 label.html(
                                    dataName +
                                       " <span style='color: red; font-size: 10px;'>* Field is required</span>",
                                 );
                                 $(this).addClass("color-error");
                              } else {
                                 // Si el campo tiene valor, mostrar solo el texto del label
                                 label.html(dataName);
                                 $(this).removeClass("color-error");
                              }
                           },
                        );
                     }
                  }

                  if (type == "BODY") {
                     $("#texto_body_plantilla_previa").text(text);

                     $(".contenido_principal_body").html("");
                     var html_input =
                        "<label>Body content</label>" +
                        '<textarea id="texto_textarea_body" class="form-control form-control-sm" disabled></textarea>';

                     // Inserta el contenido HTML en el div
                     $(".contenido_principal_body").html(html_input);

                     $("#texto_textarea_body").val(text);
                     $("#texto_textarea_body").text(text);

                     setTimeout(function () {
                        var textArea = $("#texto_textarea_body");
                        textArea.css("height", "auto");

                        // Obtiene el scrollHeight
                        var scrollHeight = textArea[0].scrollHeight;

                        textArea.css("height", scrollHeight + "px");
                        //adjustHeightTexto_TextArea_BodyWhatsapp(text);
                     }, 100);

                     if (example != null || example != undefined) {
                        //console.log("CANTIDAD DE PARAMETROS BODY:");
                        //console.log(countNestedElements(example));
                        let cantidad_parametros = countNestedElements(example);

                        var html_input = "<div class='row'>";

                        let index_auto = 1;

                        let template_data_body = template_data.filter(
                           (data) => data.type === "BODY",
                        );

                        // Verificar si se encontró algún contenido del tipo "BODY"
                        if (template_data_body.length > 0) {
                           // Obtener el contenido del primer objeto del array filtrado
                           template_data_body = template_data_body[0].contenido;
                           //console.log(body_content);
                        }

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

                        let { buscar = "0", texto, campoBD } = {};

                        for (let i = 0; i < cantidad_parametros; i++) {
                           //console.log({ buscar, texto, campoBD });

                           let iniciar_texto = "";

                           if (template_data_body.length > 0) {
                              ({ buscar, texto, campoBD } =
                                 template_data_body[i]);

                              if (campoBD == "0" || campoBD == 0) {
                                 iniciar_texto = texto;
                              } else {
                                 iniciar_texto =
                                    reemplazarComodinPorTextSinConcatenar(
                                       texto,
                                       buscar,
                                       "",
                                    );

                                 //console.log(iniciar_texto);
                              }
                           }

                           html_input +=
                              "<div class='col-12 col-sm-6 col-md-8 col-lg-8 mb-3'>" +
                              "<label style='margin-top:12px;' id='texto_label_plantilla_body_" +
                              index_auto +
                              "' data-id='" +
                              index_auto +
                              "'>Field {{ " +
                              index_auto +
                              " }}" +
                              //  " <span style='color: red; font-size: 10px;'>* Field is required</span>" +
                              "</label>" +
                              "<input id='texto_input_plantilla_body_" +
                              index_auto +
                              "' data-id='" +
                              index_auto +
                              "' class='form-control form-control-sm ' value='" +
                              iniciar_texto +
                              "' >" +
                              "</input>" +
                              "</div>" +
                              "<div class='col-12 col-sm-6 col-md-4 col-lg-4 mb-3'>" +
                              "<label style='margin-top:12px;'>Variable {{ " +
                              index_auto +
                              " }}</label>" +
                              "<select id='select_plantilla_body_" +
                              index_auto +
                              "' data-id='" +
                              index_auto +
                              "' class='form-control form-control-sm'>" +
                              select_cabeceras_grupos_campo_activo(
                                 listado_cabecera_account,
                                 campoBD == undefined || campoBD == null
                                    ? "0"
                                    : campoBD,
                              ) +
                              "</select>" +
                              "</div>";

                           index_auto++;
                        }

                        $(".contenido_principal_body").append(html_input);

                        updateTextBodyWhatsapp(text);

                        $(".contenido_principal_body").on(
                           "input",
                           "input[id^='texto_input_plantilla_body_']",
                           function () {
                              const value = $(this).val();
                              const dataId = $(this).data("id");
                              //console.log( `Value for input with data-id ${dataId}: ${value}`,);

                              updateTextBodyWhatsapp(text);

                              let label = $(
                                 "#texto_label_plantilla_body_" + dataId,
                              );

                              let select = $(
                                 "#select_plantilla_body_" + dataId,
                              ).val();

                              //console.log(select);

                              if (select == 0 || select == "0") {
                                 if (
                                    value == "" ||
                                    value == null ||
                                    value == undefined
                                 ) {
                                    // Si el campo está vacío, mostrar el placeholder en el label
                                    label.html(
                                       "Field {{ " +
                                          dataId +
                                          " }} <span style='color: red; font-size: 10px;'>* Field is required</span>",
                                    );
                                    $(this).addClass("color-error");
                                 } else {
                                    // Si el campo tiene valor, mostrar solo el texto del label
                                    label.html("Field {{ " + dataId + " }}");
                                    $(this).removeClass("color-error");
                                 }
                              } /*  else {
                                          label.html("Field {{ " + dataId + " }}");
                                          label.removeClass("color-error");
                                          $(this).removeClass("color-error");
                                       } */
                           },
                        );

                        $(".contenido_principal_body").on(
                           "change",
                           "select[id^='select_plantilla_body_']",
                           function () {
                              // Obtener el data-id del select seleccionado
                              var dataId = $(this).data("id");
                              // Obtener el valor seleccionado
                              var selectedValue = $(this).val();

                              //console.log("selectedValue: ", selectedValue);
                              //console.log("dataId:", dataId);

                              let label = $(
                                 "#texto_label_plantilla_body_" + dataId,
                              );

                              let input = $(
                                 "#texto_input_plantilla_body_" + dataId,
                              );

                              //console.log(URL_QUALIFY);
                              //console.log(selectedValue);

                              if(selectedValue == "url_rate_review")
                              {
                                 input.val(URL_QUALIFY);
                              }


                              let value = input.val();

                              if (selectedValue == 0 || selectedValue == "0") {
                                 if (isEmpty(input) == true) {
                                    label.html(
                                       "Field {{ " +
                                          dataId +
                                          " }} <span style='color: red; font-size: 10px;'>* Field is required</span>",
                                    );
                                    input.addClass("color-error");
                                 }

                                 updateTextSelectBodyWhatsapp(text);
                              } else {
                                 // Si el campo tiene valor, mostrar solo el texto del label
                                 label.html("Field {{ " + dataId + " }}");
                                 input.removeClass("color-error");
                                 updateTextSelectBodyWhatsapp(text);
                              }
                           },
                        );
                        //FIN BODY
                     }
                  }

                  if (type == "FOOTER") {
                     $("#texto_footer_plantilla_previa").text(text);

                     $("#texto_textarea_footer").val(text);
                     $("#texto_textarea_footer").text(text);

                     setTimeout(function () {
                        var textArea = $("#texto_textarea_footer");
                        textArea.css("height", "auto");

                        // Obtiene el scrollHeight
                        var scrollHeight = textArea[0].scrollHeight;

                        textArea.css("height", scrollHeight + "px");
                     }, 100);

                     $(".footer_plantilla").show();
                  }

                  if (type == "BUTTONS") {
                     $(".mensajes_botones").show();

                     $(".contenido_principal_buttons").html("");

                     var html_input_buttons = "";
                     var html_input_buttons_vista_previa = "";

                     let template_data_buttons = template_data.filter(
                        (data) => data.type == "BUTTONS",
                     );

                     // Verificar si se encontró algún contenido del tipo "BODY"
                     if (template_data_buttons.length > 0) {
                        // Obtener el contenido del primer objeto del array filtrado
                        template_data_buttons = template_data_buttons[0];

                        //console.log(
                        //   "template_data_buttons.botones_con_parametros",
                        //);
                        //console.log(
                        //   template_data_buttons.botones_con_parametros,
                        //);
                     }

                     buttons.forEach((element, index, array) => {
                        let typeButtonValue = element.type;
                        let textButtonValue = element.text;
                        let required = element.example;
                        var valueButtonValue = "";

                        let img = "";
                        if (typeButtonValue == "PHONE_NUMBER") {
                           img =PATH_IMG_ + "telefono.png";
                           valueButtonValue = element.phone_number;
                        }

                        if (typeButtonValue == "URL") {
                           img =PATH_IMG_ + "url_icono_plantilla.png";
                           valueButtonValue = element.url;
                        }

                        if (typeButtonValue == "COPY_CODE") {
                           valueButtonValue = element.example[0];
                           img =PATH_IMG_ + "copiar_icono_plantilla.png";
                        }

                        if (img == "") {
                           img =PATH_IMG_ + "trasparente_plantilla.png";
                        }

                        // Genera el HTML para los inputs
                        html_input_buttons +=
                           '<label style="margin-top: 10px">Type Buttons</label>' +
                           '<input type="text" class="form-control form-control-sm" value="' +
                           typeButtonValue +
                           '" disabled />' +
                           '<label style="margin-top: 10px">Text Buttons</label>' +
                           '<input type="text" class="form-control form-control-sm" value="' +
                           textButtonValue +
                           '" disabled />' +
                           '<label style="margin-top: 10px">Value Buttons</label>' +
                           '<input type="text" class="form-control form-control-sm" value="' +
                           valueButtonValue +
                           '" disabled />';
                        //juana
                        if (required != null || required != undefined) {
                           let value_button = "";

                           if (
                              template_data_buttons.botones_con_parametros
                                 .length > 0
                           ) {
                              let existe_value =
                                 template_data_buttons.botones_con_parametros.find(
                                    (data) => data.index == index,
                                 );

                              if (existe_value) {
                                 value_button = existe_value.texto;
                              }
                           }

                           //console.log(required);
                           html_input_buttons +=
                              '<label  id="label_buttons_plantilla_' +
                              index +
                              '" style="margin-top: 10px;">Field </label></label>' +
                              '<input type="text" class="form-control form-control-sm  " value="' +
                              value_button +
                              '" id="input_buttons_plantilla_' +
                              index +
                              '" data-id="' +
                              index +
                              '"/>';
                        }

                        // Genera el HTML para la vista previa
                        html_input_buttons_vista_previa +=
                           '<div class="div_mensaje_boton">' +
                           '<img src="' +
                           img +
                           '" class="icono_plantilla"> <a href="" class="angotar_mensajes_botones">' +
                           textButtonValue +
                           "</a>" +
                           "</div>";

                        // Añade el <hr> solo si no es el último elemento
                        if (index !== array.length - 1) {
                           html_input_buttons +=
                              '<hr style="border-top: 1px solid #c1bdbd; width: 100%; margin-top: 10px; margin-bottom: 15px;" />';

                           html_input_buttons_vista_previa +=
                              '<hr class="class_hr" />';
                        }
                     });

                     // Inserta el contenido HTML en los divs correspondientes
                     $(".mensajes_botones").html(
                        html_input_buttons_vista_previa,
                     );
                     $(".contenido_principal_buttons").html(html_input_buttons);

                     $(".contenido_principal_buttons").on(
                        "input",
                        "input[id^='input_buttons_plantilla_']",
                        function () {
                           const value = $(this).val();
                           const dataId = $(this).data("id");
                           /* console.log(
                                          `Value for input with data-id ${dataId}: ${value}`,
                                       ); */

                           let label = $("#label_buttons_plantilla_" + dataId);

                           if (
                              value == "" ||
                              value == null ||
                              value == undefined
                           ) {
                              // Si el campo está vacío, mostrar el placeholder en el label
                              ///label.css("color", "red");
                              label.html(
                                 'Field <span style="color: red; font-size: 10px;">* Required</span>',
                              );

                              $(this).addClass("color-error");
                           } else {
                              // Si el campo tiene valor, mostrar solo el texto del label
                              //label.html("Field Required");
                              //label.css("color", "none");
                              label.html(
                                 'Field <span style="font-size: 10px;">* Required</span>',
                              );

                              $(this).removeClass("color-error");
                           }
                        },
                     );

                     $(".buttons_plantilla").show();
                  }
               });

               $(".configuracion_plantilla").show();
               //input_header_plantilla
            } else {
               Swal.fire("Error the template is no longer available");
               $(".configuracion_plantilla").hide();
            }

            //$(".informacion_tabla").hide();

            //$(".retroceder_listado_plantilla").show();

            //$("#staticBackdrop").modal("hide");
         }

         function updateTextWhatsapp(prueba, isNone = "") {
            let updatedText = prueba;

            $("input[id^='texto_input_plantilla_header_']").each(function () {
               const value = $(this).val();
               const dataId = $(this).data("id");
               const placeholder = "{{" + dataId + "}}";

               // Escapar el placeholder para usarlo en una expresión regular
               const escapedPlaceholder = placeholder.replace(
                  /[.*+?^${}()|[\]\\]/g,
                  "\\$&",
               );
               const regex = new RegExp(escapedPlaceholder, "g");

               // Reemplazar el placeholder con el valor o mantener el placeholder si el valor está vacío
               /*  updatedText = updatedText.replace(
                           regex,
                           isNone == "0" || isNone == 0
                              ? value
                              : value + placeholder || placeholder,
                        ); */
               if (isNone == "0" || isNone == 0) {
                  updatedText = updatedText.replace(
                     regex,
                     value || placeholder,
                  );
               } else {
                  updatedText = updatedText.replace(
                     regex,
                     value + placeholder || placeholder,
                  );
               }
            });

            $("#texto_header_plantilla_previa").text(updatedText);
         }

         function updateTextBodyWhatsapp(miTexto) {
            let updatedText = miTexto;

            $("input[id^='texto_input_plantilla_body_']").each(function () {
               const value = $(this).val();
               const dataId = $(this).data("id");
               const placeholder = "{{" + dataId + "}}";

               // Escapar el placeholder para usarlo en una expresión regular
               const escapedPlaceholder = placeholder.replace(
                  /[.*+?^${}()|[\]\\]/g,
                  "\\$&",
               );
               const regex = new RegExp(escapedPlaceholder, "g");

               let isNoneSelect = $("#select_plantilla_body_" + dataId).val();

               if (isNoneSelect == "0" || isNoneSelect == 0) {
                  updatedText = updatedText.replace(
                     regex,
                     value || placeholder,
                  );
               } else {
                  // Reemplazar el placeholder con el valor o mantener el placeholder si el valor está vacío
                  updatedText = updatedText.replace(
                     regex,
                     value + placeholder || placeholder,
                  );
               }
            });

            $("#texto_body_plantilla_previa").text(updatedText);
         }

         function updateTextSelectBodyWhatsapp(miTexto) {
            let updatedText = miTexto;

            $("input[id^='texto_input_plantilla_body_']").each(function () {
               const value = $(this).val();
               const dataId = $(this).data("id");
               const placeholder = "{{" + dataId + "}}";

               let isNoneSelect = $("#select_plantilla_body_" + dataId).val();

               // Escapar el placeholder para usarlo en una expresión regular
               const escapedPlaceholder = placeholder.replace(
                  /[.*+?^${}()|[\]\\]/g,
                  "\\$&",
               );
               const regex = new RegExp(escapedPlaceholder, "g");

               if (isNoneSelect == "0" || isNoneSelect == 0) {
                  updatedText = updatedText.replace(
                     regex,
                     value || placeholder,
                  );
               } else {
                  // Reemplazar el placeholder con el valor o mantener el placeholder si el valor está vacío
                  updatedText = updatedText.replace(
                     regex,
                     value + placeholder || placeholder,
                  );
               }
            });

            $("#texto_body_plantilla_previa").text(updatedText);
         }

         function adjustHeightTexto_TextArea_HeaderWhatsapp() {
            const textarea = document.getElementById("texto_textarea_header");

            textarea.addEventListener("input", () => {
               // Reset the height to auto to shrink the textarea if necessary
               textarea.style.height = "auto";
               // Set the height to scrollHeight to expand to fit the content
               textarea.style.height = textarea.scrollHeight + "px";

               //const currentText = textarea.value;
               //console.log("Current text:", currentText);
            });

            // Initialize height on page load
            textarea.style.height = "auto";
            textarea.style.height = textarea.scrollHeight + "px";
         }

         function adjustHeightTexto_TextArea_BodyWhatsapp(text) {
            const textarea = document.getElementById("texto_textarea_body");

            // Define a function to adjust the height
            const adjustHeight = () => {
               textarea.value = text; // Asigna el texto al textarea

               textarea.style.height = "auto";
               textarea.style.height = textarea.scrollHeight + "px";

               textarea.value = text; // Asigna el texto al textarea
            };

            // Adjust height on input
            textarea.addEventListener("input", adjustHeight);

            // Initialize height on page load
            adjustHeight();
         }

         function seleccionar_archivo_plantilla_headersWhatsapp(
            tipo_documento,
            tipo_archivo,
         ) {
            const htmlContent =
               "<label>Open file</label>" +
               '<input type="file" class="form-control form-control-sm" placeholder="Select a file" id="archivo_plantilla_header" />';

            $(".contenido_principal_header").html(htmlContent);

            const inputFile = document.getElementById(
               "archivo_plantilla_header",
            );
            inputFile.accept = tipo_archivo;

            // Agregar un listener para manejar el archivo seleccionado
            inputFile.addEventListener("change", function () {
               const file = inputFile.files[0];
               if (file) {
                  const reader = new FileReader();
                  reader.onload = function (event) {
                     //const base64String = event.target.result.split(",")[1]; // Eliminar el prefijo de datos
                     //const base64Url = `data:${file.type};base64,${base64String}`;

                     let outputHtml = "";

                     const base64String = reader.result
                        .replace("data:", "")
                        .replace(/^.+,/, "");

                     let htmlToInsert = "";

                     //console.log(base64String);

                     INFORMACION_PLANTILLA_HEADER = base64String;

                     INFORMACION_PLANTILLA_HEADER_EXTENSION = file.type;

                     if (file.type.startsWith("image/")) {
                        htmlToInsert =
                           '<div class="contenedor_header_plantilla">' +
                           '<img src="data:' +
                           file.type +
                           ";base64," +
                           base64String +
                           '" alt="Selected Image" style="max-width: 100%; height: 180px; object-fit: contain; border-radius: 5px;">' +
                           "</div>";
                     } else if (file.type === "application/pdf") {
                        htmlToInsert =
                           '<div class="contenedor_header_plantilla">' +
                           '<iframe src="data:' +
                           file.type +
                           ";base64," +
                           base64String +
                           '" style="width: 100%; height: 180px;" frameborder="0"></iframe>' +
                           "</div>";
                     } else if (file.type.startsWith("video/")) {
                        htmlToInsert =
                           '<div class="contenedor_header_plantilla" style="min-height: 0px;">' +
                           '<video controls style="width: 100%; height: auto; border-radius: 5px;">' +
                           '<source src="data:' +
                           file.type +
                           ";base64," +
                           base64String +
                           '" type="' +
                           file.type +
                           '">' +
                           "Your browser does not support the video tag." +
                           "</video>" +
                           "</div>";
                     }
                     $(".plantilla-header").html(htmlToInsert);
                  };

                  reader.readAsDataURL(file);
               }
            });
         }

         async function cargar_cabecera_account() {
            return new Promise((resolve, reject) => {
               $.get(
                  URL_BASE + "group/get-groups-account-headers-invoices/",
                  function (data) {
                     try {
                        let info = JSON.parse(data);
                        resolve(info.data);
                     } catch (error) {
                        console.log(
                           "Error al parsear la respuesta cargar_cabecera_account: " +
                              error.message,
                        );
                        reject({
                           type: "error",
                           data: {},
                        });
                     }
                  },
               ).fail(function (jqXHR, textStatus, errorThrown) {
                  console.log(
                     "Error en la solicitud cargar_cabecera_account: " +
                        textStatus +
                        " - " +
                        errorThrown,
                  );
                  reject({
                     type: "error",
                     data: {},
                  });
               });
            });
         }

         async function cargar_listado_configuracion_tipo_whatsapp_o_sms() {
            return new Promise((resolve, reject) => {
               $.get(
                  URL_BASE + "social/lista-configuracion-whatsapp-activo/",
                  function (data) {
                     try {
                        let info = JSON.parse(data);
                        resolve(info.data);
                     } catch (error) {
                        console.log(
                           "Error al parsear la respuesta cargar_listado_configuracion_tipo_whatsapp_o_sms: " +
                              error.message,
                        );
                        reject({
                           type: "error",
                           data: {},
                        });
                     }
                  },
               ).fail(function (jqXHR, textStatus, errorThrown) {
                  console.log(
                     "Error en la solicitud cargar_listado_configuracion_tipo_whatsapp_o_sms: " +
                        textStatus +
                        " - " +
                        errorThrown,
                  );
                  reject({
                     type: "error",
                     data: {},
                  });
               });
            });
         }

         async function tener_template_invoices_by_id(id) {
            return new Promise((resolve, reject) => {
               $.get(
                  URL_BASE + "template/tener-plantilla-invoices-by-id/" + id,
                  function (data) {
                     try {
                        let info = JSON.parse(data);
                        resolve(info);
                     } catch (error) {
                        console.log(
                           "Error al parsear la respuesta tener_template_invoices_by_id: " +
                              error.message,
                        );
                        reject({
                           type: "error",
                           data: [],
                        });
                     }
                  },
               ).fail(function (jqXHR, textStatus, errorThrown) {
                  console.log(
                     "Error en la solicitud tener_template_invoices_by_id: " +
                        textStatus +
                        " - " +
                        errorThrown,
                  );
                  reject({
                     type: "error",
                     data: [],
                  });
               });
            });
         }

         async function generar_plantilla_whatsapp(info, namcespaces) {
            let configuracion_id = $(".tener_configuracion").val();

            let activo = $(".tener_status_whatsapp").val();

            if (info) {
               let info_copia = structuredClone(info);
               if (info.status != "APPROVED") {
                  Swal.fire("This template is not active");
                  return;
               }

               TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID = configuracion_id;

               var enviar_informacion = {
                  tipo_usuario: ROLL_USERS,
                  configuracion_id: configuracion_id,
                  namespaces: namcespaces,
                  name: info.name,
                  language: info.language,
                  components: [],
                  plantilla_original: "",
                  plantilla_original_full: info,
                  users_id: 1,
                  configuracion_whatsapp_sms_id: configuracion_id,
                  template_invoice_id: ID_TEMPLATE_INVOICES,
                  activo_id: activo,
               };

               //console.log(enviar_informacion);
               //return;

               const components = info.components || [];

               var existeHeader = false;
               var existeHeaderDiferenteTexto = false;
               var isSelectNoneHeader = false;
               var contenidoRealHeader = "";
               var formatoHeader = ""; // text, image, document, video, ubicacion
               var contenidoHeader = ""; //puede ser base64 o texto
               var contenidoIdSelectHeader = ""; //puede ser base64 o texto
               var arrHeader = {};
               var coordenadas = [];
               var copiaOriginalTextoHeader = "";

               var existeBody = false;
               var contenidoBody = []; //es un arreglo con todo los inputs
               var arrBody = {};

               var botones = [];
               var botones_con_parametros = [];
               var existeButtons = false;

               //console.log("GUARDAR INFORMACION");
               components.forEach((elementos) => {
                  let { type, text, format, example, buttons } = elementos;
                  //console.log("Text: ", text);
                  //console.log("Type: ", type);
                  //console.log("Formato: ", format);
                  //console.log("Example: ", example);
                  //console.log("Botones: ", buttons);

                  if (type == "HEADER") {
                     let formato_minuscula = format.toLowerCase();

                     formatoHeader = formato_minuscula;

                     if (formato_minuscula == "text") {
                        //poner tipo de plantilla imagen, texto, documentos o videos

                        if (example != null || example != undefined) {
                           existeHeader = true;

                           copiaOriginalTextoHeader = text;

                           $("input[id^='texto_input_plantilla_header_']").each(
                              function () {
                                 const value = $(this).val();
                                 const dataId = $(this).data("id");
                                 const placeholder = "{{" + dataId + "}}";

                                 let selectCampoBD = $(
                                    "#select_plantilla_header_" + dataId,
                                 ).val();
                                 if (selectCampoBD == "0") {
                                    contenidoHeader = value;
                                 } else {
                                    contenidoHeader = value + placeholder;
                                 }
                                 contenidoRealHeader = value;
                              },
                           );

                           $("select[id^='select_plantilla_header_']").each(
                              function () {
                                 const value = $(this).val();
                                 const dataId = $(this).data("id");
                                 const placeholder = "{{" + dataId + "}}";

                                 contenidoIdSelectHeader = value;

                                 if (value == "0" || value == 0) {
                                    isSelectNoneHeader = true;
                                 } else {
                                    isSelectNoneHeader = false;
                                 }
                              },
                           );
                        }
                     }

                     if (
                        formato_minuscula == "image" ||
                        formato_minuscula == "document" ||
                        formato_minuscula == "video"
                     ) {
                        //poner tipo de plantilla imagen, texto, documentos o videos
                        existeHeader = true;
                        existeHeaderDiferenteTexto = true;
                     }

                     if (formato_minuscula == "location") {
                        existeHeaderDiferenteTexto = true;
                        $("input[id^='texto_input_location_header_']").each(
                           function () {
                              existeHeader = true;

                              const value = $(this).val();
                              const dataName = $(this).data("name");
                              const dataId = $(this).data("id");

                              coordenadas.push({
                                 nombre: dataName,
                                 texto: value || "",
                              });
                           },
                        );
                     }
                  }

                  if (type == "BODY") {
                     $("input[id^='texto_input_plantilla_body_']").each(
                        function () {
                           existeBody = true;

                           const value = $(this).val();
                           const dataId = $(this).data("id");
                           const placeholder = "{{" + dataId + "}}";

                           let campoDB = $(
                              "#select_plantilla_body_" + dataId,
                           ).val();
                           let miTexto =
                              campoDB == "0" || campoDB == 0
                                 ? value
                                 : value + "{{" + dataId + "}}";

                           contenidoBody.push({
                              buscar: "{{" + dataId + "}}",
                              texto: miTexto,
                              campoDB: campoDB || "",
                              dataReal: value || "",
                              isSelecNone:
                                 campoDB == 0 || campoDB == "0" ? true : false,
                           });
                        },
                     );
                  }

                  if (type == "BUTTONS") {
                     if (buttons != null || buttons != undefined) {
                        existeButtons = true;
                        botones = buttons;

                        $("input[id^='input_buttons_plantilla_']").each(
                           function () {
                              existeButtons = true;

                              const value = $(this).val();
                              const dataId = $(this).data("id");

                              //console.log(value);

                              botones_con_parametros.push({
                                 index: dataId,
                                 texto: value || "",
                              });
                           },
                        );
                     }
                  }
               });

               if (existeHeaderDiferenteTexto == true) {
                  Swal.fire(
                     "This template contains a header that is different from the text",
                  );

                  return "no_usar";
               }

               if (existeHeader == true) {
                  //console.log("existe header");
                  //console.log(contenidoHeader);
                  if (formatoHeader == "text") {
                     if (isSelectNoneHeader == true) {
                        if (isEmpty(contenidoRealHeader) == true) {
                           Swal.fire(
                              "The Header has one parameter and is empty",
                           );

                           return;
                        }
                     }
                  } else {
                     if (formatoHeader == "location") {
                        let localtionVacio = coordenadas.find(
                           (data) => data.texto.trim() === "",
                        );

                        if (localtionVacio) {
                           Swal.fire(
                              "The Headers has one parameter and is empty",
                           );

                           return;
                        }
                     } else {
                        if (isEmpty(INFORMACION_PLANTILLA_HEADER) == true) {
                           Swal.fire(
                              "The Header has one parameter and is empty",
                           );

                           return;
                        }
                     }
                  }

                  let lati = null;
                  let lon = null;
                  let address = null;
                  let name = null;

                  if (coordenadas.length != 0) {
                     lati = coordenadas[0].texto;
                     lon = coordenadas[1].texto;
                     address = coordenadas[2].texto;
                     name = coordenadas[3].texto;
                  }

                  let cambiarText = info_copia.components.find(
                     (data) => data.type == "HEADER" && data.format == "TEXT",
                  );

                  //contenidoIdSelectHeader es campoDB
                  if (isSelectNoneHeader == true) {
                     let tenerText = info.components.find(
                        (data) =>
                           data.type == "HEADER" && data.format == "TEXT",
                     );

                     if (cambiarText) {
                        cambiarText.text = tenerText.text;
                     }
                  } else {
                     //en caso de que el select del campo database sea un campo real
                     if (cambiarText) {
                        cambiarText.text = $(
                           "#texto_header_plantilla_previa",
                        ).text();
                     }
                  }
                  //console.log("copiaOriginalTextoHeader");
                  //console.log(copiaOriginalTextoHeader);

                  if (formatoHeader == "location") {
                     INFORMACION_PLANTILLA_HEADER = ""; //esto es para tener base64 cuando es archivo
                     INFORMACION_PLANTILLA_HEADER_EXTENSION = ""; //esto es para tener base64 cuando es archivo
                  }

                  arrHeader = {
                     type: "HEADER",
                     format: formatoHeader,
                     extension: INFORMACION_PLANTILLA_HEADER_EXTENSION,
                     campoBD: contenidoIdSelectHeader,
                     contenido:
                        isEmpty(contenidoHeader) == true
                           ? INFORMACION_PLANTILLA_HEADER
                           : contenidoHeader,

                     lati: lati,
                     lon: lon,
                     address: address,
                     name: name,
                  };

                  enviar_informacion.components.push(arrHeader);

                  //INFORMACION_PLANTILLA_HEADER = ""; //esto es para tener base64 cuando es archivo
                  //INFORMACION_PLANTILLA_HEADER_EXTENSION = ""; //esto es para tener base64 cuando es archivo
               }

               if (existeBody == true) {
                  //console.log("existe body");

                  if (contenidoBody.length == 0) {
                     return;
                  }

                  //console.log(contenidoBody);

                  let bodyVacio = contenidoBody.find(
                     (data) =>
                        data.dataReal.trim() === "" && data.isSelecNone == true,
                  );

                  if (bodyVacio) {
                     Swal.fire("The Body has one parameter and is empty");

                     return;
                  }

                  let cambiarText = info_copia.components.find(
                     (data) => data.type == "BODY",
                  );

                  if (cambiarText) {
                     /* cambiarText.text = $(
                                 "#texto_body_plantilla_previa",
                              ).text(); */
                     let tenerText = info.components.find(
                        (data) => data.type == "BODY",
                     );

                     var textoPersonalizado = tenerText.text;

                     contenidoBody.forEach((element) => {
                        let {
                           buscar: placeholder,
                           texto: value,
                           campoDB,
                           dataReal,
                           isSelecNone,
                        } = element;

                        // Escapar el placeholder para usarlo en una expresión regular
                        const escapedPlaceholder = placeholder.replace(
                           /[.*+?^${}()|[\]\\]/g,
                           "\\$&",
                        );
                        const regex = new RegExp(escapedPlaceholder, "g");

                        if (isSelecNone == true) {
                           /* textoPersonalizado = textoPersonalizado.replace(
                                       regex,
                                       value || placeholder,
                                    ); */
                        } else {
                           textoPersonalizado = textoPersonalizado.replace(
                              regex,
                              value || placeholder,
                           );
                        }
                     });

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

                     cambiarText.text = textoPersonalizado;
                  }

                  arrBody = {
                     type: "BODY",
                     contenido: contenidoBody,
                  };

                  enviar_informacion.components.push(arrBody);
               }

               if (existeButtons == true) {
                  let buttonsnVacio = botones_con_parametros.find(
                     (data) => data.texto.trim() == "",
                  );

                  if (buttonsnVacio) {
                     Swal.fire("The Button has one parameter and is empty");

                     return;
                  }

                  let arrBotones = {
                     type: "BUTTONS",
                     botones_con_parametros: botones_con_parametros,
                     botones: botones,
                  };

                  enviar_informacion.components.push(arrBotones);
               }

               enviar_informacion.plantilla_original = info_copia;

               return enviar_informacion;
            }

            return "";
         }

         function select_cabeceras_grupos_campo_activo(arr, campoDB) {
            if (arr.length == 0) {
               return;
            }

            var html = '<option value="0">' + "None" + "</option>";

            if(campoDB == "url_rate_review")
            {
               html += '<option value="url_rate_review" selected>' + "URL Review" + "</option>";
            }else{
               html += '<option value="url_rate_review">' + "URL Review" + "</option>";
            }

             

            arr.forEach((element) => {
               let value = element;
               /* let value = element["id"];
                     let text = element["gname"]; */
               let isSelect = false;
               if (campoDB == value) {
                  isSelect = true;
               }

               html += plantilla_option_select_combo(
                  value,
                  "invoices." + value,
                  isSelect,
               );
            });

            return html;
         }

         function plantilla_option_select_combo(value, text, select) {
            if (select == true) {
               return (
                  '<option value="' + value + '" selected>' + text + "</option>"
               );
            } else {
               return '<option value="' + value + '" >' + text + "</option>";
            }
         }
     
     
     
 
</script>
{/literal}

{/block}