{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 SMS</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">
                              <!--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="SMS"
                                             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-12 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>
                                             </div>
                                             <!-- FIN descripcion plantilla -->

                                             <!-- 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>
                                          </div>

                                          <div class="col-sm-3 plantilla_vista_previa">
                                             <div class="plantilla_vista_previa_headers">
                                                <p
                                                   style="
                                                      font-weight: 600;
                                                      font-size: 17px;
                                                      padding: 16px;
                                                      height: 100%;
                                                      padding-bottom: 0px;
                                                      color: black;
                                                   "
                                                >
                                                   Template preview
                                                </p>
                                             </div>
                                             <div class="plantilla_vista_previa_body">
                                                <div class="message-feed media right">
                                                   <div
                                                      class="media-body media-body-change-display"
                                                   >
                                                      <div
                                                         class="mf-content extender-contenedores"
                                                      >
                                                         <div class="palomitas">
                                                            <div class="izquierda">
                                                               <div class="plantilla-body">
                                                                  <p
                                                                     id="texto_body_plantilla_previa"
                                                                     style="margin-bottom: 1px"
                                                                  >
                                                                     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>
                                                            </div>
                                                         </div>
                                                         <small class="mf-date"
                                                            ><div>01-08-2024 12:00 pm</div></small
                                                         >
                                                      </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">
            <div class="modal-content">
               <div class="modal-header">
                  <h4
                     class="modal-title"
                     id="myModalLabel"
                     style="color: black; padding-left: 5px"
                  >
                     SMS templates
                  </h4>
                  <button
                     type="button"
                     class="btn-close cerrar_modal_plantilla"
                  ></button>
               </div>
               <div class="modal-body">
                  <div class="card informacion_tabla">
                     <div
                        class="card-header"
                        style="
                           padding: 10px 15px;
                           font-weight: 600;
                           color: black;
                        "
                     >
                        Featured
                     </div>
                     <div class="card-body">
                        <!-- Default panel contents -->
                        <div
                           class="panel-heading"
                           style="
                              font-weight: 600;
                              font-size: 13px;
                              margin-bottom: 5px;
                           "
                        >
                           Filter
                        </div>
                        <div class="panel-body">
                           <div class="div_filtro_plantillas">
                              <input
                                 type="text"
                                 class="form-control form-control-sm"
                                 placeholder="Template Name"
                                 id="input_filtro_nombre_plantilla"
                                 style="margin-right: 11px"
                              />

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

                        <hr />

                        <!-- Table -->

                        <div class="table-responsive">
                           <table class="table table-borderless mt-3">
                              <thead>
                                 <tr>
                                    <th class="centrar">Identifier</th>
                                    <th class="centrar">Template</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();
   
         var CONTADOR_VARIABLES = 0; // importante
         var TEXTO_PLANTILLA = ""; // importante

         var TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID = null;

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

         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 listado_cabecera_account = (await cargar_cabecera_account()) || [];

         //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()) || [];

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

         listado_configuraciones.forEach((element) => {
            let value = element["id"];
            let text = element["identifier"];

            html_config +=
               '<option value="' + value + '">' + 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');

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

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

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

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

            let info = await cargar_plantillas_sms();

            if (info.type == "error") {
               Swal.fire({
                  icon: "error",
                  title: "Oops...",
                  text: "Error loading templates!",
               });
               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();
            }

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

            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_id != 1) {
                  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,
                  name: info.identificador,
                  contenido: [],
                  plantilla_original: "",
                  users_id: USUARIO_ID,
                  configuracion_whatsapp_sms_id: configuracion_id,
               };

               var contenidoBody = []; //es un arreglo con todo los inputs

               console.log("GUARDAR INFORMACION");
               /* components.forEach((elementos) => {
                  let { type, text, format, example, buttons } = elementos;

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

               $("input[id^='texto_input_plantilla_body_']").each(function () {
                  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,
                  });
               });

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

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

               if (bodyVacio) {
                  Swal.fire({
                     icon: "error",
                     title: "Required fields",
                     text: "The body has one parameter and is empty. It needs to be filled.!",
                  });
                  return;
               }

               var textoPersonalizado = TEXTO_PLANTILLA;

               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;

               enviar_informacion.contenido = contenidoBody;

               info_copia.plantilla_personalizada = textoPersonalizado;
               enviar_informacion.plantilla_personalizada = TEXTO_PLANTILLA; //lo coloco para tener la informacion rapida

               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-sms",
                  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();
                           $(".tener_campaign").val("");
                        } 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() {
            $(".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_id != 1) {
                     alert("This template is not active");
                     return;
                  }
                  CONTADOR_VARIABLES = 0; // importante
                  TEXTO_PLANTILLA = ""; // importante

                  ID_PLANTILLA_SELECCIONADO = dataId;

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

                  const components = info.components || [];

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

                  //VISTA PREVIA

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

                  //botones

                  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_PLANTILLA = info.plantilla;

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

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

                  updateTextBody(TEXTO_PLANTILLA);

                  let matches = TEXTO_PLANTILLA.match(/{{\d+}}/g); // Busca todas las ocurrencias de {{n}} donde n es un número
                  let cantidadDeN = matches ? matches.length : 0;

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

                  for (let i = 1; i <= cantidadDeN; 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>";
                  }

                  //CONTADOR_VARIABLES++;
                  $(".contenido_principal_body").append(html_input_);

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

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

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

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

                                 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(input) == 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
                        }
                     }
                  }); */
               }

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

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

         $(".btn_add_variable").click(async function () {
            CONTADOR_VARIABLES++;

            let matches = TEXTO_PLANTILLA.match(/{{\d+}}/g); // Busca todas las ocurrencias de {{n}} donde n es un número

            let cantidadDeN = matches ? matches.length : 0;

            if (cantidadDeN < CONTADOR_VARIABLES) {
               Swal.fire({
                  icon: "error",
                  title: "Add variables",
                  text: "No more variables can be created for this template!",
               });
               return;
            }

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

            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_" +
               CONTADOR_VARIABLES +
               "' data-id='" +
               CONTADOR_VARIABLES +
               "'>Field {{ " +
               CONTADOR_VARIABLES +
               " }}  <span style='color: red; font-size: 10px;'>* Field is required</span></label>" +
               "<input id='texto_input_plantilla_body_" +
               CONTADOR_VARIABLES +
               "' data-id='" +
               CONTADOR_VARIABLES +
               "' 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 {{ " +
               CONTADOR_VARIABLES +
               " }}</label>" +
               "<select id='select_plantilla_body_" +
               CONTADOR_VARIABLES +
               "' data-id='" +
               CONTADOR_VARIABLES +
               "' class='form-control form-control-sm'>" +
               HTML_SELECT_HEADER_ACCOUNT +
               "</select>" +
               "</div>";

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

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

         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/tener_configuracion_sms/",
                  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: {},
                  });
               });
            });
         }

         function cargar_plantillas_sms() {
            let datos = {
               status: "",
               nombres: "",
            };

            return new Promise((resolve, reject) => {
               // Realizar la solicitud POST
               $.ajax({
                  type: "POST",
                  url: URL_BASE + "social/tener_plantilla_sms",
                  data: JSON.stringify(datos), // Convertir datos a formato JSON
                  contentType: "application/json", // Tipo de contenido JSON
                  success: function (response) {
                     try {
                        let info = JSON.parse(response);

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

                           resolve(info);
                        } else {
                           alert(info.message);
                           resolve({
                              type: "error",
                           });
                        }
                     } catch (error) {
                        alert("Error:" + error);
                        resolve({
                           type: "error",
                        });
                     }
                  },
                  error: function (xhr, status, error) {
                     console.error(
                        "Error en la solicitud: cargar_plantillas_sms ",
                        error,
                     );
                     resolve({
                        type: "error",
                     });
                  },
               });
            });
         }

         function tener_mensajes_de_plantillas(listado_plantillas) {
            var html_tabla_plantilla = "";

            listado_plantillas.forEach((element) => {
               let {
                  id,
                  identificador,
                  plantilla,
                  status,
                  status_id,
                  fecha_post,
                  fecha_update,
               } = element;

               let color = "";
               if (status_id == 1) {
                  color = "badge bg-success";
               }

               if (status_id == 2) {
                  color = "badge bg-danger";
               }

               html_tabla_plantilla +=
                  "<tr>" +
                  "<td class='centrar'>" +
                  identificador +
                  "</td>" +
                  "<td class='centrar'>" +
                  plantilla +
                  "</td>" +
                  "<td class='centrar'><span class='" +
                  color +
                  "'>" +
                  status +
                  "</span></td>" +
                  "<td class='centrar'>" +
                  '<button class="btn btn-default usar_plantilla_seleccionada" data-id="' +
                  id +
                  '" style="border-color: #d3cac0; border: 1px solid #d3cac0;">Apply</button>' +
                  "</td>" +
                  "</tr>";
            });
            return html_tabla_plantilla;
         }

         function select_cabeceras_grupos(arr) {
            if (arr.length == 0) {
               return;
            }

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

            arr.forEach((element) => {
               let value = element;

               html +=
                  '<option value="' +
                  value +
                  '">contact.' +
                  value +
                  "</option>";
            });

            return html;
         }

         function cargar_select_grupos(arr) {
            if (arr.length == 0) {
               return;
            }

            var html = "<option></option>";

            arr.forEach((element) => {
               let value = element["id"];
               let text = element["gname"];
               html += '<option value="' + value + '">' + text + "</option>";
            });

            return html;
         }
    
  

</script>
{/literal}


{/block}