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

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

    .plantilla {
      max-width: 84%;
   }
</style>

<input type="text" class=" tener_url_base" value={$url_base} disabled hidden/>
<input type="text" class=" tener_id_parametro" value={$grupo_id} disabled hidden/>
<input type="text" class=" tener_path_img" value={$path_img} disabled hidden/>
<input type="text" class=" tener_usuario_id" value={$usuario_id} disabled hidden/>

<div class="row">

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

       
        <div class="panel">
            <div class="panel-hdr">
                <h2 style="color: #666; font-weight: 600; "><span></span>Send group messages via WhatsApp</h2>
                <input type="text" class=" tener_url_base" value={$url_base} disabled hidden/>
                <input type="text" class=" tener_id_parametro" value={$grupo_id} disabled hidden/>
               
            </div>
                                                         
            <div class="panel-container show" id="ibox_form">

                <div class="panel-content">

                    <div class="px-2">
                        
                        <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; width:100%; margin:0px; box-shadow:none; -webkit-box-shadow:none">
                              <!--Sin Mensajes-->

                              <div class="row contenedor">
                                 <div class="col-12 col-sm-12 reset">
                                    <div class="mt-3 row reset">
                                       <label for="channel" class="col-sm-3"
                                          ><span class="h6">Channel</span
                                          ><span class="text-danger">*</span></label
                                       >
                                       <div class="col-sm-9">
                                          <input
                                             type="text"
                                             id="channel"
                                             name="channel"
                                             class="form-control form-control-sm tenerchannel"
                                             value="Whatsapp"
                                             disabled
                                          />
                                       </div>
                                    </div>

                                    <div class="mt-3 row reset">
                                       <label for="configuracion" class="col-sm-3"
                                          ><span class="h6">Whatsapp/SMS 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="tener_group" class="col-sm-3"
                                          ><span class="h6">Group</span
                                          ><span class="text-danger">*</span></label
                                       >
                                       <div class="col-sm-9">
                                          <select 
                                             class="form-control form-control-sm tener_group"
                                             name="tener_group"
                                             id="tener_group"
                                             style="width: 100%;"
                                             placeholder="Select a Group"
                                             disabled
                                     
                                          ></select>
                                       </div>
                                    </div>

                                    <div class="mt-3 row reset">
                                       <label for="campaign" class="col-sm-3"
                                          ><span class="h6">Campaign Name</span
                                          ><span class="text-danger">*</span></label
                                       >
                                       <div class="col-sm-9">
                                          <input
                                             type="text"
                                             id="campaign"
                                             name="campaign"
                                             class="form-control form-control-sm tener_campaign"
                                             placeholder="Campaign name"
                                          />
                                       </div>
                                    </div>

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

                                 <br />
                                 <div class="col-12 col-sm-12">
                                    <!-- FIN CONFIGURACION PLANTILLAS -->
                                    <div class="configuracion_plantilla" style="display: none">
                                       <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" style="position:sticky; top: 10px;">
                                             <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="./img/telefono.png" />
                                                               <a
                                                                  href=""
                                                                  class="angotar_mensajes_botones"
                                                               >
                                                                  asass</a
                                                               >
                                                            </div>
                                                            <hr class="class_hr" />
                                                         </div>
                                                      </div>
                                                   </div>
                                                </div>
                                             </div>
                                          </div>

                                          <div
                                             class="col-sm-12 informacion_general_plantilla contenido_guardar_plantilla"
                                             style="padding-right: 0px"
                                          >
                                             <!-- Guardar plantilla -->
                                             <div class="descripcion_general_plantilla">
                                                <div
                                                   class="row reset"
                                                   style="padding-left: 10px; padding-right: 10px"
                                                >
                                                   <div class="col-sm-12 reset separador">
                                                      <div
                                                         class="contenido_principal_guardar"
                                                         style="text-align: end"
                                                      >
                                                         <!--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-paper-plane"
                                                               style="margin-right: 5px"
                                                            ></i>
                                                            Send Message
                                                         </button>
                                                      </div>
                                                   </div>
                                                </div>
                                             </div>
                                          </div>
                                       </div>
                                    </div>
                                    <!-- FIN CONFIGURACION PLANTILLAS -->
                                 </div>
                              </div>
                           </div>
                        </div>

                       
                    </div>

                  

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

{*modals*}

      <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="{$url_listado_plantillas}">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 plantilla">
            <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; width:90%"
                              />

                              <button
                                 class="btn btn-default"
                                 id="filtro_plantillas"
                                 style="border-color: #d3cac0; border: 1px solid #d3cac0; width:80px "
                              >
                                 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_plantillas"></tbody>
                           </table>
                        </div>
                     </div>
                  </div>

                  <!-- TABLA PLANTILLAS -->

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

{*fin modals*}


{/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 type="module">

   const URL_BASE = $(".tener_url_base").val();
   const tener_id_parametro = $(".tener_id_parametro").val();
   const PATH_IMG = $(".tener_path_img").val();
   const USUARIO_ID = $(".tener_usuario_id").val();
   
   
 
         $(".tener_group").select2({
            placeholder: "Select an option",
            allowClear: true,
         });

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

            $(".tener_group").select2({
               placeholder: "Select an option",
               allowClear: true,
            });
         });

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

            $(".tener_group").select2({
               placeholder: "Select an option",
               allowClear: true,
            });
         });

         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: "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 listado_cabecera_account = (await cargar_cabecera_account()) || [];
         //var listado_cabecera_account =  [];
         var listado_cabecera_account = ["account","company","phone", "email", "address", "city", "state", "zip", "country"];

         console.log("listado_cabecera_account");
         console.log(listado_cabecera_account);
         //usaremos esta variable para moterla en los cambos que necesiten paremetrizacion
         const HTML_SELECT_HEADER_ACCOUNT = select_cabeceras_grupos(
            listado_cabecera_account,
         );

         //listado configuracion. trae configuracion whatsapp y sms
         var listado_configuraciones =
            (await cargar_listado_configuracion_tipo_whatsapp_o_sms()) || [];

         var LISTADO_CONFIGURACIONES_PREDETERMINADO_ID = null;

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

         //listado de plantilla tenidas de facebook
         var listado_plantillas = [];

         //listado grupos
         var listado_grupos = (await cargar_grupos()) || [];

         $(".tener_group").html(cargar_select_grupos(listado_grupos));

         $('.tener_group').val(tener_id_parametro).trigger('change');

          


         var LISTADO_GRUPOS_PREDETERMINADO_ID = null;


         if (listado_grupos.length != 0) {
            LISTADO_GRUPOS_PREDETERMINADO_ID = listado_grupos[0].id;
         }

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

         $("#abrir_plantillas").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_plantillas = info.data || [];

            var html_tabla_plantilla = "";

            if (listado_plantillas.length != 0) {
               $(".tbody_plantillas").html(
                  tener_mensajes_de_plantillas(listado_plantillas),
               );

               plantilla_seleccionada(info.namcespaces);
            }

            //$(".tener_group").select2("destroy");
            $(".tener_group").each(function () {
               if ($(this).hasClass("select2-hidden-accessible")) {
                  $(this).select2("destroy");
               }
            });

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

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

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

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

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

               $(".tbody_plantillas").html(
                  tener_mensajes_de_plantillas(informacion_filtrada),
               );
               plantilla_seleccionada();
            }
         });

         $(".btn_enviar_plantilla").click(async function () {
            //var dataId = $(this).data("id");
            var namcespaces = $(this).data("namcespaces");

            let configuracion_id = $(".tener_configuracion").val();
            let campaign = $(".tener_campaign").val();
            let group = $(".tener_group").val();

            if (isEmpty(group) == true) {
               alert("Group is required");
               return;
            }

            if (isEmpty(campaign) == true) {
               alert("Campaign Name is required");
               return;
            }

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

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

            let info = listado_plantillas.find(
               (data) => data.id == ID_PLANTILLA_SELECCIONADO,
            );

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

               TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID = configuracion_id;

               var enviar_informacion = {
                  tipo_usuario: "admin",
                  configuracion_id: configuracion_id,
                  campaign: campaign,
                  group: group,
                  namespaces: namcespaces,
                  name: info.name,
                  language: info.language,
                  components: [],
                  plantilla_original: "",
                  users_id: USUARIO_ID,
                  configuracion_whatsapp_sms_id: configuracion_id,
               };

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

               const components = info.components || [];

               var existeHeader = 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;
                     }

                     if (formato_minuscula == "location") {
                        $("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 (existeHeader == true) {
                  //console.log("existe header");
                  //console.log(contenidoHeader);
                  if (formatoHeader == "text") {
                     if (isSelectNoneHeader == true) {
                        if (isEmpty(contenidoRealHeader) == true) {
                           alert("The Header has one parameter and is empty");
                           return;
                        }
                     }
                  } else {
                     if (formatoHeader == "location") {
                        let localtionVacio = coordenadas.find(
                           (data) => data.texto.trim() === "",
                        );

                        if (localtionVacio) {
                           alert("The Headers has one parameter and is empty");
                           return;
                        }
                     } else {
                        if (isEmpty(INFORMACION_PLANTILLA_HEADER) == true) {
                           alert("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) {
                     alert("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) {
                     alert("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;

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

               $(".tener_group").each(function () {
                  if ($(this).hasClass("select2-hidden-accessible")) {
                     $(this).select2("destroy");
                  }
               });

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

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

               $.ajax({
                  type: "POST",
                  url: URL_BASE + "social/enviar-mensaje-plantillas-grupal",
                  data: JSON.stringify(enviar_informacion), // 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: "Group message",
                              text: "Group message sent successfully!",
                              icon: "success",
                           });

                           $(".configuracion_plantilla").hide();
                           
                           if (
                              LISTADO_CONFIGURACIONES_PREDETERMINADO_ID !=
                                 null ||
                              LISTADO_CONFIGURACIONES_PREDETERMINADO_ID != 0
                           ) {
                              $(".tener_configuracion").val(
                                 LISTADO_CONFIGURACIONES_PREDETERMINADO_ID,
                              );
                           }
                           $(".tener_campaign").val("");
                           /* if (
                              LISTADO_GRUPOS_PREDETERMINADO_ID != null ||
                              LISTADO_GRUPOS_PREDETERMINADO_ID != 0
                           ) {
                           } */
                        } else {
                           alert("Error sending group messages");
                        }
                     } catch (error) {
                        alert("Error:" + error);
                     }
                  },
                  error: function (xhr, status, error) {
                     $(".btn_enviar_plantilla").prop("disabled", false);

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

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

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

               if (info) {
                  if (info.status != "APPROVED") {
                     alert("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);
                  }


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

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

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

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

                                    updateText(text, selectDB);

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

                                    if (selectDB == 0 || selectDB == "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);

                                   
                                 },
                              );

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

                                    let value = input.val();

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

                                       updateText(text, "0");
                                    } else {
                                       // Si el campo tiene valor, mostrar solo el texto del label
                                       label.html("Field {{ " + dataId + " }}");
                                       input.removeClass("color-error");
                                       updateText(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_headers(
                              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_headers(
                              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_headers(
                              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_Body(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);

                           updateTextBody(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}`,);

                                 updateTextBody(text);

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

                                 let select = $(
                                    "#select_plantilla_body_" + 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");
                                    }
                                 }

                                  
                              },
                           );

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

                                 let value = input.val();

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

                                    updateTextSelectBody(text);
                                 } else {
                                    // Si el campo tiene valor, mostrar solo el texto del label
                                    label.html("Field {{ " + dataId + " }}");
                                    input.removeClass("color-error");
                                    updateTextSelectBody(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();
                     }
                  });

                  //input_header_plantilla
               }

               /* pantalla_modal //pantalla_modal
                                  informacion_tabla // tabla de plantillas
                                  configuracion_plantilla //configurar plantilla */

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

               $(".tener_group").select2({
                  placeholder: "Select an option",
                  allowClear: true,
               });
               $("#staticBackdrop").modal("hide");
            });
         }

         function updateText(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 updateTextBody(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 updateTextSelectBody(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_Header() {
            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_Body(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_headers(
            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/",
                  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_grupos() {
            return new Promise((resolve, reject) => {
               $.get(URL_BASE + "group/get-groups/", function (data) {
                  try {
                     let info = JSON.parse(data);
                     resolve(info.data);
                  } catch (error) {
                     console.log(
                        "Error al parsear la respuesta cargar_grupos: " +
                           error.message,
                     );
                     reject({
                        type: "error",
                        data: {},
                     });
                  }
               }).fail(function (jqXHR, textStatus, errorThrown) {
                  console.log(
                     "Error en la solicitud cargar_grupos: " +
                        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: {},
                  });
               });
            });
         }
      

  

</script>
{/literal}


{/block}