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


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


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

{/block}

{block name="content"}

<style type="text/css">

 

</style>

 
<div class="row">

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

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

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

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

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

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

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

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

                                       <label for="configuracion" class="col-sm-3"
                                          ><span class="text-black">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 Config"
                                          ></select>
                                       </div>
                                    </div>

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

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

                                    <!-- FIN CONFIGURACION PLANTILLAS -->
                                    <div
                                       class="configuracion_plantilla mt-3"
                                       style="display: none; margin: 12px"
                                    >
                                       <div class="row" style="margin: 0px; padding: 0px">
                                          <div class="col-sm-9 informacion_general_plantilla">
                                             <!-- descripcion plantilla -->
                                             <div class="descripcion_general_plantilla">
                                                <h5
                                                   style="
                                                      font-weight: 600;
                                                      color: black;
                                                      margin: 0px;
                                                      padding: 15px;
                                                      font-size: 17px;
                                                   "
                                                >
                                                   Template name and language
                                                </h5>
                                                <hr
                                                   style="
                                                      border-top: 1px solid #c1bdbd;
                                                      width: 100%;
                                                      margin-top: 0px;
                                                      margin-bottom: 15px;
                                                   "
                                                />
                                                <div
                                                   class="row reset"
                                                   style="
                                                      padding-left: 10px;
                                                      padding-right: 10px;
                                                   "
                                                >
                                                   <div class="col-sm-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>
                                    </div>
                                    <!-- FIN CONFIGURACION PLANTILLAS -->
                                 </div>

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

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

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

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

<!--modal-->


      <div
         class="modal fade"
         id="CampañaEnviada"
         data-bs-backdrop="static"
         data-bs-keyboard="false"
         tabindex="-1"
         aria-labelledby="staticBackdropLabel"
         aria-hidden="true"
      >
         <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
               <div class="modal-header">
                  <h5 class="modal-title" id="staticBackdropLabel">
                     Group Message
                  </h5>
                  <button
                     type="button"
                     class="btn-close btn_cerrar_confirmacion_modal"
                  ></button>
               </div>
               <div class="modal-body text-center">
                  <p>
                     The group advertising campaign has been sent. For more
                     details, check the status <a href="">here</a>
                  </p>
               </div>
            </div>
         </div>
      </div>

      <div
         class="modal fade"
         id="staticBackdrop"
         data-bs-backdrop="static"
         data-bs-keyboard="false"
         tabindex="-1"
         aria-labelledby="staticBackdropLabel"
         aria-hidden="true"
      >
         <div class="modal-dialog modal-xl" style="max-width: 90%">
            <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" style="border-color: #d3cac0;border: 1px solid #d3cac0;width: 100px;"
                                 id="filtro_plantillas"
                              >
                                 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>

<!--modal--> 


{/block}

{block name="script"}

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

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

 

{literal}
<script>
   
   var URL_BASE = $("#URL_BASE").val();
   var ROLL_USERS = $("#ROLL_USERS").val();
   var PATH_IMG_      = $("#PATH_IMG").val();
   var URL_QUALIFY      = $("#URL_QUALIFY").val();
          
         var CONTADOR_VARIABLES = 0; // importante
         var TEXTO_PLANTILLA = ""; // importante

         var ID_TEMPLATE_INVOICES = $("#id_template_invoices").val();
         var ID_TEMPLATE_PLANTILLA = 0;

         var TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID = null;
         var BTN_PLANTILLA_MODIFICADA = false;
         var ENVIAR_PLANTILLA_ORIGINAL_MODIFICADA = {};

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

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

         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 = []; 
         var HTML_SELECT_HEADER_ACCOUNT = ""


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

            //console.log(listado_cabecera_account);

         HTML_SELECT_HEADER_ACCOUNT =
               select_cabeceras_grupos_campo_activo(listado_cabecera_account, "0");

         /* cargar_cabecera_account().then((data) => {

            listado_cabecera_account = data;

            console.log(listado_cabecera_account);

            HTML_SELECT_HEADER_ACCOUNT =
               select_cabeceras_grupos_campo_activo(listado_cabecera_account, "0");

         });       */    

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

         cargar_listado_configuracion_tipo_whatsapp_o_sms().then((data) => {
            listado_configuraciones = data;

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

         cargar_plantillas_sms().then((data) => 
         {
            let info = data;

            if (info.type == "error") {
               Swal.fire({
                  icon: "error",
                  title: "Oops...",
                  text: "Error loading templates!",
               });
            }

            listado_plantillas = info.data || [];
         });

         console.log(ID_TEMPLATE_INVOICES);

         if (isEmpty(ID_TEMPLATE_INVOICES) == true) {
            Swal.fire("ID_TEMPLATE_INVOICES is required");
         } else {
              tener_template_invoices_by_id(
               ID_TEMPLATE_INVOICES,
            ).then((data) => {
               let respuesta_plantillas = data;

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

                     if (
                        //activo_id != 2 &&
                        template_original != null &&
                        template_modificado != null &&
                        template_data != null
                     ) {
                        template_original = JSON.parse(template_original);
                        template_data = JSON.parse(template_data);

                        ENVIAR_PLANTILLA_ORIGINAL_MODIFICADA = template_original;


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

                        ID_PLANTILLA_SELECCIONADO = template_original.id;
                        TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID =
                           config_whatsapp_other_id;

                        cargar_plantilla(template_original, template_data);

                        //juana
                        //console.log("template_original.id");
                        //console.log(template_original.id);

                        //ID_PLANTILLA_SELECCIONADO = template_original.id;
                        $(".tener_configuracion").val(config_whatsapp_other_id);
                        $(".tener_status_whatsapp").val(activo_id);

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

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

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

               }
            });

             
         }

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

            //$("#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 activo = $(".tener_status_whatsapp").val();

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

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

            if (isEmpty(configuracion_id) == true) {
               Swal.fire("Select a 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 informacion_plantilla_generado = await generar_plantilla_sms(
                  info,
               ); */

               let informacion_plantilla_generado = {};

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

                  //console.log("Bienvenido");
               } else {
                  informacion_plantilla_generado = await generar_plantilla_sms(
                     info,
                  );
               }

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

               let data_plantillas_general = informacion_plantilla_generado;

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

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

               $.ajax({
                  type: "POST",
                  url: URL_BASE + "template/agregar_plantilla_sms_invoices",
                  data: JSON.stringify(data_plantillas_general), // 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",
                           });
                        } else {
                           Swal.fire(info.message);
                        }
                     } catch (error) {
                        Swal.fire("Error:" + error);
                     }
                  },
                  error: function (xhr, status, error) {
                     $(".btn_enviar_plantilla").prop("disabled", false);

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

         function plantilla_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) {
                     Swal.fire("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);

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

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

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

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

                        let input = $("#texto_input_plantilla_body_" + dataId);
                        
                        if(selectedValue == "url_rate_review")
                        {
                           input.val(URL_QUALIFY);
                        }

                        let value = input.val();

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

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

                  BTN_PLANTILLA_MODIFICADA = true;

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

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

                  //FIN BODY
               }else{
                  Swal.fire("Template not found");
               }

                
            });
         }

         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-invoices/",
                  function (data) {
                     try {
                        let info = JSON.parse(data);
                        resolve(info.data);
                     } catch (error) {
                        console.log(
                           "Error al parsear la respuesta cargar_cabecera_account: " +
                              error.message,
                        );
                        reject({
                           type: "error",
                           data: {},
                        });
                     }
                  },
               ).fail(function (jqXHR, textStatus, errorThrown) {
                  console.log(
                     "Error en la solicitud cargar_cabecera_account: " +
                        textStatus +
                        " - " +
                        errorThrown,
                  );
                  reject({
                     type: "error",
                     data: {},
                  });
               });
            });
         }

         async function cargar_listado_configuracion_tipo_whatsapp_o_sms() {
            return new Promise((resolve, reject) => {
               $.get(
                  URL_BASE + "social/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: {},
                  });
               });
            });
         }

         async 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") {
                           resolve(info);
                        } else {
                           Swal.fire(info.message);

                           resolve({
                              type: "error",
                           });
                        }
                     } catch (error) {
                        Swal.fire("Error:" + error);

                        resolve({
                           type: "error",
                        });
                     }
                  },
                  error: function (xhr, status, error) {
                     console.error(
                        "Error en la solicitud: cargar_plantillas_sms ",
                        error,
                     );
                     resolve({
                        type: "error",
                     });
                  },
               });
            });
         }

         async function generar_plantilla_sms(info) {
            let configuracion_id = $(".tener_configuracion").val();

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

            let info_copia = structuredClone(info);

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

            TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID = configuracion_id;

            var enviar_informacion = {
               tipo_usuario: ROLL_USERS,
               configuracion_id: configuracion_id,
               name: info.identificador,
               contenido: [],
               plantilla_original: "",
               configuracion_whatsapp_sms_id: configuracion_id,
               plantilla_original_full: info,
               template_invoice_id: ID_TEMPLATE_INVOICES,
               activo_id: activo,
            };

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

            //console.log("GUARDAR INFORMACION");

            $("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");
            return enviar_informacion;
         }

         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 cargar_plantilla(template_original, template_data) {
            CONTADOR_VARIABLES = 0; // importante
            TEXTO_PLANTILLA = ""; // importante

            $("#input_nombre_plantilla").val(template_original.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 = template_original.plantilla;

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

            setTimeout(function () {
               var textArea = $("#texto_textarea_body");
               if(textArea)
               {
                  textArea.css("height", "auto");
                  
                  if(textArea[0])
                  {
                     // Obtiene el scrollHeight
                     var scrollHeight = textArea[0].scrollHeight;
                     textArea.css("height", scrollHeight + "px");
                     //adjustHeightTexto_TextArea_Body(text);
                  }    
               }
                
            }, 100);

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

            var contador_tmp = 1;

            //estela

            for (let i = 0; i < cantidadDeN; i++) {
               let { buscar, texto, campoDB, dataReal, isSelecNone } =
                  template_data[i];

               let value_inicial = dataReal;

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

               contador_tmp++;
            }

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

            updateTextBody(TEXTO_PLANTILLA);

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

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

                  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

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

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

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

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

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

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

            return html;
         }

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

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

{/block}