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

   <link href="{$theme}default/css/grupo.css?v={$config['version']}" rel="stylesheet">
   <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.dataTables.min.css" />
 


{/block}

{block name="content"}

<style type="text/css">

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

.swal2-container{
   z-index:9999
}

 .swal2-container {
        z-index: 9999; 
    }

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

<div class="row">

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

       
        <div class="panel">
            <div class="panel-hdr">
                <h2 style="color: #666; font-weight: 600; "><span></span>Message Contact List</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="row contenedor" style="padding: 10px">
                           <br />
                           <div class="col-12 col-sm-12 pt-4">
                              <div class="table-responsive">
                                 <table class="table table-borderless mt-3">
                                    <thead>
                                       <tr>
                                          <th class="centrar">Contact</th>
                                          <th class="centrar">Code error</th>
                                          <th class="centrar">Mesagge error</th>
                                          <th class="centrar">Status</th>
                                          <th class="centrar">Accion</th>
                                       </tr>
                                    </thead>
                                    <tbody class="tbody_envios">
                                       <tr>
                                          <th colspan="5" class="centrar pt-4">
                                             No information
                                          </th>
                                       </tr>
                                    </tbody>
                                 </table>
                              </div>
                           </div>

                        </div>

                       
                    </div>

                  

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

   <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">
                     Template preview
                  </h5>
                  <button
                     type="button"
                     class="btn-close btn_cerrar_confirmacion_modal"
                  ></button>
               </div>
               <div
                  class="modal-body text-center"
                  style="padding: 0; margin: 0"
               >
                  <div
                     class="col-sm-12 plantilla_vista_previa"
                     style="margin: 0"
                  >
                     <div class="plantilla_vista_previa_body">
                        <div class="message-feed media right">
                           <div class="media-body media-body-change-display">
                              <div class="mf-content extender-contenedores">
                                 <div class="palomitas">
                                    <div class="izquierda">
                                       <!-- header -->
                                       <div class="plantilla-header">
                                          <!--TEXTO NORMAL-->
                                          <!-- <p id="texto_header_plantilla_previa">
                                          Hello, World
                                       </p> -->

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

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

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

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

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




{/block}

{block name="script"}

<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"></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();


 

    var ID_GRUPO = null;
    let listado_usuarios = [];

    if(isEmpty(tener_id_parametro) == false)
    {
         ID_GRUPO = tener_id_parametro;

         

         
            listado_usuarios =
               (await cargar_contactos_de_grupo(ID_GRUPO)) || [];

            if (Array.isArray(listado_usuarios) == true) {
               let tableContent = "";
               listado_usuarios.forEach((element) => {
                  /*  <th class="centrar">Contact</th>
                                       <th class="centrar">Code error</th>
                                       <th class="centrar">Mesagge error</th>
                                       <th class="centrar">Status</th>
                                       <th class="centrar">Accion</th> */
                  let {
                     contact_group_sent_id,
                     contact_group_sent_group_message_sent_id,
                     contact_group_sent_contacto_id,
                     contact_group_sent_envio_estado,
                     contact_group_sent_envio_estado_descripcion,
                     contact_group_sent_template_data,
                     contact_group_sent_codigo_error,
                     contact_group_sent_mensaje_error,
                     group_message_sent_campaign,
                     group_message_sent_channel,
                     group_message_sent_template,
                     group_message_sent_configuration_whatsapp_other_id,
                     group_message_sent_state,
                     account_account,
                  } = element;

                  let codigo_error =
                     contact_group_sent_codigo_error == null ||
                     contact_group_sent_codigo_error == ""
                        ? ""
                        : contact_group_sent_codigo_error;

                  let mensaje_error =
                     contact_group_sent_mensaje_error == null ||
                     contact_group_sent_mensaje_error == ""
                        ? ""
                        : contact_group_sent_mensaje_error;

                  tableContent +=
                     "<tr>" +
                     '<td class="centrar">' +
                     account_account +
                     "</td>" +
                     '<td class="centrar">' +
                     codigo_error +
                     "</td>" +
                     '<td class="centrar">' +
                     mensaje_error +
                     "</td>" +
                     '<td class="centrar">' +
                     contact_group_sent_envio_estado_descripcion +
                     "</td>" +
                     '<td class="centrar">' +
                     '<button class="btn btn-primary abrir_plantilla" data-id="' +
                     contact_group_sent_id +
                     '">View</button>' +
                     "</td>" +
                     "</tr>";
               });

               if (listado_usuarios.length == 0) {
                  $(".tbody_envios").html(
                     '<tr><th colspan="5" class="centrar pt-4"> No information</th></tr>',
                  );
               } else {
                  $(".tbody_envios").html(tableContent);
               }
            }


    }

 
 
 
         $(".abrir_plantilla").click(function () {
            let id = $(this).data("id");
            //console.log(id);

            let informacion_plantilla = listado_usuarios.find(
               (data) => data.contact_group_sent_id == id,
            );

            if (informacion_plantilla) {
               //console.log(informacion_plantilla);

               if (informacion_plantilla.group_message_sent_channel == "sms") {
                  $(".plantilla-header").html("");
                  $(".plantilla-footer").html("");

                  $(".mensajes_botones").remove();
                  $("#texto_body_plantilla_previa").text(
                     informacion_plantilla.contact_group_sent_template_data,
                  );
               }

               if (
                  informacion_plantilla.group_message_sent_channel == "email"
               ) {
                  $(".plantilla-header").html("");
                  $(".plantilla-footer").html("");
                  $(".mensajes_botones").remove();

                  $(".plantilla-body").html(
                     '<div id="div_body_plantilla_previa" style=" margin-bottom: 1px;height: auto;"> </div>',
                  );

                  $("#div_body_plantilla_previa").html("");

                  $("#div_body_plantilla_previa").html(
                     "<p id='texto_body_plantilla_previa' style='margin-bottom: 0px'>" +
                        informacion_plantilla.contact_group_sent_template_data,
                     +"</p>",
                  );
               }

               if (
                  informacion_plantilla.group_message_sent_channel == "whatsapp"
               ) {
                  let group_message_sent_template =
                     informacion_plantilla.group_message_sent_template;
                  let contact_group_sent_template_data =
                     informacion_plantilla.contact_group_sent_template_data;

                  if (
                     group_message_sent_template != null &&
                     contact_group_sent_template_data != null
                  ) {
                     let group_message_sent_template_parseado = JSON.parse(
                        group_message_sent_template,
                     );
                     let contact_group_sent_template_data_parseado = JSON.parse(
                        contact_group_sent_template_data,
                     );

                     /* console.log("plantilla group");
                     console.log(
                        group_message_sent_template_parseado.components,
                     );
                     console.log("plantilla contactos");
                     console.log(
                        contact_group_sent_template_data_parseado.template
                           .components,
                     ); */

                     if (
                        Array.isArray(
                           group_message_sent_template_parseado.components,
                        ) == true
                     ) {
                        if (
                           group_message_sent_template_parseado.components
                              .length != 0
                        ) {
                           let plantilla_contactos_component =
                              contact_group_sent_template_data_parseado.template
                                 .components || [];

                           var mensaje_cabecera = "";
                           var mensaje_body = "";
                           var mensaje_footer = "";
                           var mensaje_botones = "";
                           var exitste_boton = false;

                           var existe_localizacion = false;

                           group_message_sent_template_parseado.components.forEach(
                              (elementos) => {
                                 let { type, text, format, example, buttons } =
                                    elementos;

                                 if (type == "HEADER") {
                                    //existeHeaders = true;

                                    let formato_minuscula =
                                       format.toLowerCase();

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

                                       if (
                                          example != null ||
                                          example != undefined
                                       ) {
                                          let type_minuscula =
                                             type.toLowerCase();
                                          //console.log("temp_templates_data");
                                          //console.log(temp_templates_data);
                                          let contenido =
                                             plantilla_contactos_component.find(
                                                (data) =>
                                                   data.type == type_minuscula,
                                             );

                                          if (contenido) {
                                             let mensaje_cabecera_tempo = text;
 
                                             contenido.parameters.forEach(
                                                (element, index, array) => {
                                                   let {
                                                      type,
                                                      text: texto_obtenido,
                                                   } = element;

                                                   mensaje_cabecera_tempo =
                                                      reemplazarComodinPorText(
                                                         text,
                                                         "{{1}}",
                                                         texto_obtenido,
                                                      );
                                                },
                                             );

                                             mensaje_cabecera =
                                                mensaje_cabecera_tempo;
                                          }
                                       } else {
                                          mensaje_cabecera = text;
                                       }
                                    }

                                    if (formato_minuscula == "image") {
                                       let contenido =
                                          plantilla_contactos_component.find(
                                             (data) => data.type == "header",
                                          );

                                       if (contenido) {
                                          if (
                                             Array.isArray(
                                                contenido.parameters,
                                             ) == true
                                          ) {
                                             let link =
                                                contenido.parameters[0].image
                                                   .link;

                                             mensaje_cabecera =
                                                '<div class="contenedor_header_plantilla">' +
                                                '<img src="' +
                                                link +
                                                '" alt="Selected Image" style="max-width: 100%;   object-fit: contain; border-radius: 5px;">' +
                                                "</div>";

                                             $(".plantilla-header").html(
                                                mensaje_cabecera,
                                             );
                                          }
                                       }
                                    }

                                    if (formato_minuscula == "document") {
                                       let contenido =
                                          plantilla_contactos_component.find(
                                             (data) => data.type == "header",
                                          );

                                       if (contenido) {
                                          if (
                                             Array.isArray(
                                                contenido.parameters,
                                             ) == true
                                          ) {
                                             let link =
                                                contenido.parameters[0].document
                                                   .link;

                                             mensaje_cabecera =
                                                '<div class="contenedor_header_plantilla">' +
                                                '<a href="' +
                                                link +
                                                '" target="_blank" style="float:left">Save</a>' +
                                                '<iframe src="' +
                                                link +
                                                '" style="width: 100%; height: 180px;" frameborder="0"></iframe>' +
                                                "</div>";

                                             $(".plantilla-header").html(
                                                mensaje_cabecera,
                                             );
                                          }
                                       }
                                    }

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

                                       let contenido =
                                          plantilla_contactos_component.find(
                                             (data) => data.type == "header",
                                          );

                                       if (contenido) {
                                          if (
                                             Array.isArray(
                                                contenido.parameters,
                                             ) == true
                                          ) {
                                             let link =
                                                contenido.parameters[0].video
                                                   .link;

                                             mensaje_cabecera =
                                                '<div class="contenedor_header_plantilla" style="min-height: 0px;">' +
                                                '<video controls style="width: 100%; height: auto; border-radius: 5px;">' +
                                                '<source src="' +
                                                link +
                                                '">' +
                                                "Your browser does not support the video tag." +
                                                "</video>" +
                                                "</div>";

                                             $(".plantilla-header").html(
                                                mensaje_cabecera,
                                             );
                                          }
                                       }
                                    }

                                    if (formato_minuscula == "location") {
                                       existe_localizacion = true;

                                       let contenido =
                                          plantilla_contactos_component.find(
                                             (data) => data.type == "header",
                                          );

                                       if (contenido) {
                                          let loc =
                                             contenido.parameters[0].location;

                                          let {
                                             latitude,
                                             longitude,
                                             name,
                                             address,
                                          } = loc;

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

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

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

                                 if (type == "BODY") {
                                    if (
                                       example != null ||
                                       example != undefined
                                    ) {
                                       let type_minuscula = type.toLowerCase();

                                       let contenido =
                                          plantilla_contactos_component.find(
                                             (data) =>
                                                data.type == type_minuscula,
                                          );

                                       if (contenido) {
                                          mensaje_body = text;

                                          let contador_buscar = 1;

                                          contenido.parameters.forEach(
                                             (element, index, array) => {
                                                let {
                                                   type,
                                                   text: texto_obtenido,
                                                } = element;

                                                mensaje_body =
                                                   reemplazarComodinPorText(
                                                      mensaje_body,
                                                      "{{" + contador_buscar + "}}",
                                                      texto_obtenido,
                                                   );

                                                contador_buscar++;
                                             },
                                          );
                                       }
                                    } else {
                                       mensaje_body = text;
                                    }
                                 }

                                 if (type == "FOOTER") {
                                    mensaje_footer = text;
                                 }

                                 if (type == "BUTTONS") {
                                    mensaje_botones =
                                       '<div class="mensajes_botones">';

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

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

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

                                       if (typeButtonValue == "COPY_CODE") {
                                          valueButtonValue = element.example[0];
                                          img =
                                            PATH_IMG + "/copiar_icono_plantilla.png";
                                          style = "style='padding: 1px;'";
                                       }

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

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

                                       // Añade el <hr> solo si no es el último elemento
                                       if (index !== array.length - 1) {
                                          mensaje_botones +=
                                             '<hr class="class_hr" />';
                                       }
                                    });

                                    mensaje_botones += "</div>";

                                    exitste_boton = true;
                                 }
                              },
                           );

                           //HEADER
                           if (existe_localizacion == false) {
                              var textHeader =
                                 isEmpty(mensaje_cabecera) == false
                                    ? "<p class='texto_header_mensaje'>" +
                                      mensaje_cabecera +
                                      "</p>"
                                    : "";

                              $(".plantilla-header").html(textHeader);
                           }

                           //BODY

                           $("#texto_body_plantilla_previa").text(mensaje_body);

                           //FOOTER
                           $("#texto_footer_plantilla_previa").text(
                              mensaje_footer,
                           );

                           //BUTTONS
                           if (exitste_boton == true) {
                              $(".colocar-botones").html(mensaje_botones);
                           } else {
                              $(".mensajes_botones").remove();
                           }
                        }
                     }
                  }
               }

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

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

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

           function reemplazarComodinPorText(text, placeholder, value) {
               let updatedText = text;

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

               const regex = new RegExp(escapedPlaceholder, "g");

               // Reemplazar el placeholder con el valor o mantener el placeholder si el valor está vacío
               updatedText = updatedText.replace(regex, value || placeholder);

               return updatedText;
            }


         
         function isEmpty(variable) {
            if (variable === null || variable === undefined) {
               return true;
            }

            if (typeof variable === "string") {
               return variable.trim() === "";
            }

            if (Array.isArray(variable)) {
               return variable.length === 0;
            }

            if (typeof variable === "object") {
               return Object.keys(variable).length === 0;
            }

            return false;
         }

</script>
{/literal}


{/block}