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


    <link href="{$theme}default/css/invoices.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="{$EDIT_TEMPLATE}"
         disabled
         hidden
         id="EDIT_TEMPLATE"
      />

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

      <input type="text" value="{$canal}" disabled hidden id="CANAL" />

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

        <div class="panel">
            <div class="panel-hdr">
                <h2 style="font-weight: 600;color:black"><span></span> {$nombre_canal} payment notifications</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">
                              <!--Sin Mensajes-->

                              <div class="activar_whatsapp"  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">
                                             WhatsApp payment notifications
                                          </h1> -->

                                          <!-- recibidos -->

                                          <label for="configuracion" class="col-sm-3"
                                             ><span class="text-black"
                                                >Template for payment received</span
                                             ><span class="text-danger">*</span></label
                                          >
                                          <div class="col-sm-6">
                                             <input
                                                type="text"
                                                readonly
                                                class="form-control form-control-sm pago_recibido_ws text-center"
                                                style="color: #767676"
                                             />
                                          </div>

                                          <div class="col-sm-3 text-center">
                                             <a
                                                href=""
                                                class="link_pago_recibido_ws"
                                                style="text-decoration: underline !important"
                                             >
                                             </a>
                                          </div>
                                       </div>

                                       <!-- pendientes -->

                                       <div class="mt-3 row reset">
                                          <label for="configuracion" class="col-sm-3"
                                             ><span class="text-black"
                                                >Template for pending payment</span
                                             ><span class="text-danger">*</span></label
                                          >
                                          <div class="col-sm-6">
                                             <input
                                                type="text"
                                                readonly
                                                class="form-control form-control-sm pago_pendiente_ws text-center"
                                                style="color: #767676"
                                             />
                                          </div>

                                          <div class="col-sm-3 text-center">
                                             <a
                                                href=""
                                                class="link_pago_pendiente_ws"
                                                style="text-decoration: underline !important"
                                             >
                                             </a>
                                          </div>
                                       </div>

                                       <!-- reseñas -->
                                       <div class="mt-3 row reset">
                                          <label for="configuracion" class="col-sm-3"
                                             ><span class="text-black">Template for reviews</span
                                             ><span class="text-danger">*</span></label
                                          >
                                          <div class="col-sm-6">
                                             <input
                                                type="text"
                                                readonly
                                                class="form-control form-control-sm resenas_ws text-center"
                                                style="color: #767676"
                                             />
                                          </div>

                                          <div class="col-sm-3 text-center">
                                             <a
                                                href=""
                                                class="link_resenas_ws"
                                                style="text-decoration: underline !important"
                                             >
                                             </a>
                                          </div>

                                          <hr class="mt-3" />
                                       </div>

                                       <div class="mt-3 row reset">
                                          <div class="col-12 col-sm-6 col-lg-4">
                                             <!--plantillas vista previa-->
                                             <div class="text-center mt-3">
                                                <p
                                                   class="pago_pendiente_status_ws"
                                                   style="font-weight: 600; color:black"
                                                >
                                                   Active
                                                </p>
                                                <div
                                                   class="col-sm-12 plantilla_vista_previa_pago_recibido_ws"
                                                   style="margin: 0; height: auto"
                                                >
                                                   <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"
                                                                     ></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="{$path_img}telefono.png"
                                                                        />
                                                                        <a
                                                                           href=""
                                                                           class="angotar_mensajes_botones"
                                                                        >
                                                                           asass</a
                                                                        >
                                                                     </div>
                                                                     <hr class="class_hr" />
                                                                  </div>
                                                               </div>
                                                            </div>
                                                         </div>
                                                      </div>
                                                   </div>
                                                </div>
                                                <div class="text-center mt-3"></div>
                                             </div>
                                             <!--FIN plantillas vista previa-->
                                          </div>
                                          <div class="col-12 col-sm-6 col-lg-4">
                                             <!--plantillas vista previa-->
                                             <div class="col-sm-12 text-center mt-3">
                                                <p
                                                   class="pago_recibido_status_ws"
                                                   style="font-weight: 600; color:black"
                                                >
                                                   Active
                                                </p>

                                                <div
                                                   class="col-sm-12 plantilla_vista_previa_pago_pendiente_ws"
                                                   style="margin: 0; height: auto"
                                                >
                                                   <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"
                                                                     ></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="{$path_img}telefono.png"
                                                                        />
                                                                        <a
                                                                           href=""
                                                                           class="angotar_mensajes_botones"
                                                                        >
                                                                           asass</a
                                                                        >
                                                                     </div>
                                                                     <hr class="class_hr" />
                                                                  </div>
                                                               </div>
                                                            </div>
                                                         </div>
                                                      </div>
                                                   </div>
                                                </div>
                                                <div class="text-center mt-3"></div>
                                             </div>
                                             <!--FIN plantillas vista previa-->
                                          </div>
                                          <div class="col-12 col-sm-6 col-lg-4">
                                             <!--plantillas vista previa-->
                                             <div class="text-center mt-3">
                                                <!-- <p style="font-weight: 600">Template for reviews</p> -->
                                                <p
                                                   class="resenas_status_ws"
                                                   style="font-weight: 600; color:black"
                                                >
                                                   Active
                                                </p>
                                                <div
                                                   class="col-sm-12 plantilla_vista_previa_resenas_ws"
                                                   style="margin: 0; height: auto;background-color: #e5ddd5;
   height: 100%;
   padding: 0px;
   background-image: url({$path_img_fondo});
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   border: 1px solid #d3cac0;
   border-radius: 5px;
   max-height: 100%;
   min-height: 300px;
   margin-bottom: 15px;"
                                                >
                                                   <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"
                                                                     ></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="{$path_img}telefono.png"
                                                                        />
                                                                        <a
                                                                           href=""
                                                                           class="angotar_mensajes_botones"
                                                                        >
                                                                           asass</a
                                                                        >
                                                                     </div>
                                                                     <hr class="class_hr" />
                                                                  </div>
                                                               </div>
                                                            </div>
                                                         </div>
                                                      </div>
                                                   </div>
                                                </div>
                                                <div class="text-center mt-3"></div>
                                             </div>
                                             <!--FIN plantillas vista previa-->
                                          </div>
                                       </div>

                                       <!-- fin -->
                                    </div>

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

                              <!--Para SMS-->
                              <div style="margin: 10px" class="activar_sms">
                                 <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">
                                       <!-- recibidos -->

                                       <div class="mt-3 row reset">
                                          <!-- <h1 style="font-size: 18px; margin-bottom: 18px">
                                             SMS payment notifications
                                          </h1> -->

                                          <label for="configuracion" class="col-sm-3"
                                             ><span class="text-black"
                                                >Template for payment received</span
                                             ><span class="text-danger">*</span></label
                                          >
                                          <div class="col-sm-6">
                                             <input
                                                type="text"
                                                readonly
                                                class="form-control form-control-sm pago_recibido_sms text-center"
                                                style="color: #767676"
                                             />
                                          </div>

                                          <div class="col-sm-3 text-center">
                                             <a
                                                href=""
                                                class="link_pago_recibido_sms"
                                                style="text-decoration: underline !important"
                                             >
                                             </a>
                                          </div>
                                       </div>

                                       <!-- pendientes -->
                                       <div class="mt-3 row reset">
                                          <label for="configuracion" class="col-sm-3"
                                             ><span class="text-black"
                                                >Template for pending payment</span
                                             ><span class="text-danger">*</span></label
                                          >
                                          <div class="col-sm-6">
                                             <input
                                                type="text"
                                                readonly
                                                class="form-control form-control-sm pago_pendiente_sms text-center"
                                                style="color: #767676"
                                             />
                                          </div>

                                          <div class="col-sm-3 text-center">
                                             <a
                                                href=""
                                                class="link_pago_pendiente_sms"
                                                style="text-decoration: underline !important"
                                             >
                                             </a>
                                          </div>
                                       </div>

                                       <!-- resena -->
                                       <div class="mt-3 row reset">
                                          <label for="configuracion" class="col-sm-3"
                                             ><span class="text-black">Template for reviews</span
                                             ><span class="text-danger">*</span></label
                                          >
                                          <div class="col-sm-6">
                                             <input
                                                type="text"
                                                readonly
                                                class="form-control form-control-sm resena_sms text-center"
                                                style="color: #767676"
                                             />
                                          </div>

                                          <div class="col-sm-3 text-center">
                                             <a
                                                href=""
                                                class="link_resena_sms"
                                                style="text-decoration: underline !important"
                                             >
                                             </a>
                                          </div>

                                          <hr class="mt-3" />
                                       </div>

                                       <div class="mt-3 row reset">
                                          <div class="col-12 col-sm-6 col-lg-4">
                                             <!--FIN plantillas vista previa-->
                                             <div class="text-center mt-3">
                                                <!-- <p style="font-weight: 600">
                                                Template for payment received
                                             </p> -->
                                                <p
                                                   class="pago_pendiente_status_sms"
                                                   style="font-weight: 600; color:black"
                                                >
                                                   Active
                                                </p>
                                                <div
                                                   class="col-sm-12 plantilla_vista_previa_pago_recibido_sms"
                                                   style="margin: 0; height: auto"
                                                >
                                                   <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"
                                                                     ></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="{$path_img}telefono.png"
                                                                        />
                                                                        <a
                                                                           href=""
                                                                           class="angotar_mensajes_botones"
                                                                        >
                                                                           asass</a
                                                                        >
                                                                     </div>
                                                                     <hr class="class_hr" />
                                                                  </div>
                                                               </div>
                                                            </div>
                                                         </div>
                                                      </div>
                                                   </div>
                                                </div>
                                                <div class="text-center mt-3"></div>
                                             </div>
                                             <!--plantillas vista previa-->
                                          </div>
                                          <div class="col-12 col-sm-6 col-lg-4">
                                             <!--plantillas vista previa-->
                                             <div class="text-center mt-3">
                               
                                                <p
                                                   class="pago_recibido_status_sms"
                                                   style="font-weight: 600; color:black"
                                                >
                                                   Active
                                                </p>
                                                <div
                                                   class="col-sm-12 plantilla_vista_previa_pago_pendiente_sms"
                                                   style="margin: 0; height: auto"
                                                >
                                                   <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"
                                                                     ></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="{$path_img}telefono.png"
                                                                        />
                                                                        <a
                                                                           href=""
                                                                           class="angotar_mensajes_botones"
                                                                        >
                                                                           asass</a
                                                                        >
                                                                     </div>
                                                                     <hr class="class_hr" />
                                                                  </div>
                                                               </div>
                                                            </div>
                                                         </div>
                                                      </div>
                                                   </div>
                                                </div>
                                                <div class="text-center mt-3"></div>
                                             </div>
                                             <!--FIN plantillas vista previa-->
                                          </div>
                                          <div class="col-12 col-sm-6 col-lg-4">
                                             <!--plantillas vista previa-->
                                             <div class="text-center mt-3">
                                                <!--  <p style="font-weight: 600">Template for reviews</p> -->
                                                <p
                                                   class="resena_status_sms"
                                                   style="font-weight: 600; color:black"
                                                >
                                                   Active
                                                </p>
                                                <div
                                                   class="col-sm-12 plantilla_vista_previa_resenas_sms"
                                                   style="margin: 0; height: auto;background-color: #e5ddd5;
   height: 100%;
   padding: 0px;
   background-image: url({$path_img_fondo});
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   border: 1px solid #d3cac0;
   border-radius: 5px;
   max-height: 100%;
   min-height: 300px;
   margin-bottom: 15px;"
                                                >
                                                   <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"
                                                                     ></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="{$path_img}telefono.png"
                                                                        />
                                                                        <a
                                                                           href=""
                                                                           class="angotar_mensajes_botones"
                                                                        >
                                                                           asass</a
                                                                        >
                                                                     </div>
                                                                     <hr class="class_hr" />
                                                                  </div>
                                                               </div>
                                                            </div>
                                                         </div>
                                                      </div>
                                                   </div>
                                                </div>
                                                <div class="text-center mt-3">
                                                   <!--  <p
                                                   class="resena_status_sms"
                                                   style="font-weight: 600"
                                                >
                                                   Active
                                                </p> -->
                                                </div>
                                             </div>
                                             <!--FIN plantillas vista previa-->
                                          </div>
                                       </div>

                                       <!-- fin -->
                                    </div>

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

                              <!--Para Email-->
                              <div style="margin: 10px" class="activar_email">
                                 <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">
                                       <!-- recibidos -->
                                       <div class="mt-3 row reset">
                                          <!-- <h1 style="font-size: 18px; margin-bottom: 18px">
                                             Email payment notifications
                                          </h1> -->

                                          <label for="configuracion" class="col-sm-3"
                                             ><span class="text-black"
                                                >Template for payment received</span
                                             ><span class="text-danger">*</span></label
                                          >
                                          <div class="col-sm-6">
                                             <input
                                                type="text"
                                                readonly
                                                class="form-control form-control-sm pago_recibido_email text-center"
                                                style="color: #767676"
                                             />
                                          </div>

                                          <div class="col-sm-3 text-center">
                                             <a
                                                href=""
                                                class="link_pago_recibido_email"
                                                style="text-decoration: underline !important"
                                             >
                                             </a>
                                          </div>
                                       </div>

                                       <!-- pendientes -->
                                       <div class="mt-3 row reset">
                                          <label for="configuracion" class="col-sm-3"
                                             ><span class="text-black"
                                                >Template for pending payment</span
                                             ><span class="text-danger">*</span></label
                                          >
                                          <div class="col-sm-6">
                                             <input
                                                type="text"
                                                readonly
                                                class="form-control form-control-sm pago_pendiente_email text-center"
                                                style="color: #767676"
                                             />
                                          </div>

                                          <div class="col-sm-3 text-center">
                                             <a
                                                href=""
                                                class="link_pago_pendiente_email"
                                                style="text-decoration: underline !important"
                                             >
                                             </a>
                                          </div>
                                       </div>

                                       <!-- recibidos -->
                                       <div class="mt-3 row reset">
                                          <label for="configuracion" class="col-sm-3"
                                             ><span class="text-black">Template for reviews</span
                                             ><span class="text-danger">*</span></label
                                          >
                                          <div class="col-sm-6">
                                             <input
                                                type="text"
                                                readonly
                                                class="form-control form-control-sm resena_email text-center"
                                                style="color: #767676"
                                             />
                                          </div>

                                          <div class="col-sm-3 text-center mb-3">
                                             <a
                                                href=""
                                                class="link_resena_email"
                                                style="text-decoration: underline !important"
                                             >
                                             </a>
                                          </div>

                                          <hr class="mt-3" />
                                       </div>

                                       <!-- vistas previas -->
                                       <div class="mt-3 row reset">
                                          <div class="col-12 col-sm-6 col-lg-4">
                                             <!--plantillas vista previa-->
                                             <div class="text-center mt-3">
                                                <!-- <p style="font-weight: 600">
                                                   Template for payment received
                                                </p> -->

                                                <p
                                                   class="pago_pendiente_status_email"
                                                   style="font-weight: 600; color:black"
                                                >
                                                   Active
                                                </p>

                                                <div
                                                   class="col-sm-12 plantilla_vista_previa_pago_recibido_email"
                                                   style="margin: 0; height: auto"
                                                >
                                                   <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">
                                                                     <!-- body -->
                                                                     <div class="plantilla-body">
                                                                        <div
                                                                           id="div_body_plantilla_previa"
                                                                           style="
                                                                              margin-bottom: 1px;
                                                                              height: auto;
                                                                           "
                                                                        >
                                                                           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.
                                                                        </div>
                                                                     </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="{$path_img}telefono.png"
                                                                        />
                                                                        <a
                                                                           href=""
                                                                           class="angotar_mensajes_botones"
                                                                        >
                                                                           asass</a
                                                                        >
                                                                     </div>
                                                                     <hr class="class_hr" />
                                                                  </div>
                                                               </div>
                                                            </div>
                                                         </div>
                                                      </div>
                                                   </div>
                                                </div>
                                                <div class="text-center mt-3"></div>
                                             </div>

                                             <!--FIN plantillas vista previa-->
                                          </div>
                                          <div class="col-12 col-sm-6 col-lg-4">
                                             <!--plantillas vista previa-->
                                             <div class="text-center mt-3">
                                                <!-- <p style="font-weight: 600">
                                                Template for pending payment
                                                </p> -->
                                                <p
                                                   class="pago_recibido_status_email"
                                                   style="font-weight: 600; color:black"
                                                >
                                                   Active
                                                </p>
                                                <div
                                                   class="col-sm-12 plantilla_vista_previa_pago_pendiente_email"
                                                   style="margin: 0; height: auto"
                                                >
                                                   <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"
                                                                     ></div>
                                                                     <!-- FIN header -->

                                                                     <!-- body -->
                                                                     <div class="plantilla-body">
                                                                        <div
                                                                           id="div_body_plantilla_previa"
                                                                           style="
                                                                              margin-bottom: 1px;
                                                                              height: auto;
                                                                           "
                                                                        >
                                                                           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.
                                                                        </div>
                                                                     </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="{$path_img}telefono.png"
                                                                        />
                                                                        <a
                                                                           href=""
                                                                           class="angotar_mensajes_botones"
                                                                        >
                                                                           asass</a
                                                                        >
                                                                     </div>
                                                                     <hr class="class_hr" />
                                                                  </div>
                                                               </div>
                                                            </div>
                                                         </div>
                                                      </div>
                                                   </div>
                                                </div>
                                                <div class="text-center mt-3"></div>
                                             </div>

                                             <!--FIN plantillas vista previa-->
                                          </div>
                                          <div class="col-12 col-sm-6 col-lg-4">
                                             <!--plantillas vista previa-->
                                             <div class="text-center mt-3">
                                                <!-- <p style="font-weight: 600">
                                                   Template for pending payment
                                                </p> -->
                                                <p
                                                   class="resena_status_email"
                                                   style="font-weight: 600;color:black"
                                                >
                                                   Active
                                                </p>
                                                <div
                                                   class="col-sm-12 plantilla_vista_previa_resena_email"
                                                   style="margin: 0; height: auto;background-color: #e5ddd5;
   height: 100%;
   padding: 0px;
   background-image: url({$path_img_fondo});
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   border: 1px solid #d3cac0;
   border-radius: 5px;
   max-height: 100%;
   min-height: 300px;
   margin-bottom: 15px;"
                                                >
                                                   <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"
                                                                     ></div>
                                                                     <!-- FIN header -->

                                                                     <!-- body -->
                                                                     <div class="plantilla-body">
                                                                        <div
                                                                           id="div_body_plantilla_previa"
                                                                           style="
                                                                              margin-bottom: 1px;
                                                                              height: auto;
                                                                           "
                                                                        >
                                                                           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.
                                                                        </div>
                                                                     </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="{$path_img}telefono.png"
                                                                        />
                                                                        <a
                                                                           href=""
                                                                           class="angotar_mensajes_botones"
                                                                        >
                                                                           asass</a
                                                                        >
                                                                     </div>
                                                                     <hr class="class_hr" />
                                                                  </div>
                                                               </div>
                                                            </div>
                                                         </div>
                                                      </div>
                                                   </div>
                                                </div>
                                                <div class="text-center mt-3"></div>
                                             </div>

                                             <!--FIN plantillas vista previa-->
                                          </div>
                                       </div>
                                    </div>

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

                              <!--fin-->
                           </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>
      <!--modal-->

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

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

                              <button
                                 class="btn btn-primary"
                                 id="filtro_plantillasWhatsapp"
                              >
                                 Filter
                              </button>
                           </div>
                        </div>

                        <hr />

                        <!-- Table -->

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

                  <!-- TABLA PLANTILLAS -->

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

<!--modal-->


{/block}

{block name="script"}

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

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

{literal}
<script>

         var URL_BASE      = $("#URL_BASE").val();
         var EDIT_TEMPLATE = $("#EDIT_TEMPLATE").val();
         var CANAL         = $("#CANAL").val();
         var PATH_IMG_      = $("#PATH_IMG").val();

 

         $(".activar_whatsapp").hide();
         $(".activar_sms").hide();
         $(".activar_email").hide();

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

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

         var LISTADO_CONFIGURACION_GENERAL;

         tener_configuracion_general().then((data) =>{
            LISTADO_CONFIGURACION_GENERAL = data || [];

            if (LISTADO_CONFIGURACION_GENERAL.length != 0) {
            let whatsapp = LISTADO_CONFIGURACION_GENERAL.filter(
               (data) => data.channel == "whatsapp",
            );

            if (CANAL == "whatsapp") {
               $(".activar_whatsapp").show();

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

               configuracion_whatsapp(whatsapp);
            }

            if (CANAL == "sms") {
               $(".activar_sms").show();
               let sms = LISTADO_CONFIGURACION_GENERAL.filter(
                  (data) => data.channel == "sms",
               );

               configuracion_sms(sms);

               //console.log("sms");
               //console.log(sms);
            }

            if (CANAL == "email") {
               $(".activar_email").show();

               let email = LISTADO_CONFIGURACION_GENERAL.filter(
                  (data) => data.channel == "email",
               );

               configuracion_email(email);

               //console.log("email");
               //console.log(email);
            }
         }
         });

         /* var LISTADO_CONFIGURACION_GENERAL =
            (await tener_configuracion_general()) || []; */

          

         //console.log(LISTADO_CONFIGURACION_GENERAL);

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

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

         function configuracion_whatsapp(whatsapp) {
            if (whatsapp.length != 0) {
               let pagos_recibido = whatsapp[0];
               let pagos_pendientes = whatsapp[1];
               let resenas = whatsapp[2];

               if (isEmpty(pagos_recibido.name_template) == true) {
                  $(".pago_recibido_ws").val("No template selected");
                  let preparar_link =
                     EDIT_TEMPLATE +
                     "/" +
                     pagos_recibido.id;

                  $(".link_pago_recibido_ws")
                     .attr("href", preparar_link)
                     .attr("target", "_blank") // Agrega target="_blank"

                     .text("Select templates");
               } else {
                  $(".pago_recibido_ws").val(pagos_recibido.name_template);

                  let preparar_link =
                     EDIT_TEMPLATE +
                     "/" +
                     pagos_recibido.id;

                  $(".link_pago_recibido_ws")
                     .attr("href", preparar_link)
                     .attr("target", "_blank") // Agrega target="_blank"

                     .text("Setting up templates");
               }

               if (isEmpty(pagos_pendientes.name_template) == true) {
                  $(".pago_pendiente_ws").val("No template selected");

                  let preparar_link =
                     EDIT_TEMPLATE +
                     "/" +
                     pagos_pendientes.id;

                  $(".link_pago_pendiente_ws")
                     .attr("href", preparar_link)
                     .attr("target", "_blank") // Agrega target="_blank"

                     .text("Select templates");
               } else {
                  $(".pago_pendiente_ws").val(pagos_pendientes.name_template);

                  let preparar_link =
                     EDIT_TEMPLATE +
                     "/" +
                     pagos_pendientes.id;

                  $(".link_pago_pendiente_ws")
                     .attr("href", preparar_link)
                     .attr("target", "_blank") // Agrega target="_blank"

                     .text("Setting up templates");
               }

               if (isEmpty(resenas.name_template) == true) {
                  $(".resenas_ws").val("No template selected");

                  let preparar_link =
                     EDIT_TEMPLATE +
                     "/" +
                     resenas.id;

                  $(".link_resenas_ws")
                     .attr("href", preparar_link)
                     .attr("target", "_blank") // Agrega target="_blank"

                     .text("Select templates");
               } else {
                  $(".resenas_ws").val(resenas.name_template);

                  let preparar_link =
                     EDIT_TEMPLATE +
                     "/" +
                     resenas.id;

                  $(".link_resenas_ws")
                     .attr("href", preparar_link)
                     .attr("target", "_blank") // Agrega target="_blank"

                     .text("Setting up templates");
               }


               if (isEmpty(pagos_recibido.template_original) == true) {
                  $(
                     ".plantilla_vista_previa_pago_recibido_ws .mf-content.extender-contenedores",
                  )
                     .html("No template selected")
                     .addClass("text-center");

                  $(".plantilla_vista_previa_pago_recibido_ws").css(
                     "min-height",
                     "auto",
                  );
               } else {
                  // en caso de que tenga informacion pagos recibidos
                  $(".plantilla_vista_previa_pago_recibido_ws").css(
                     "min-height",
                     "auto",
                  );

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

                  pintar_plantilla_vista_previa(
                     pagos_recibido.template_original,
                     pagos_recibido.template_data,
                     ".plantilla_vista_previa_pago_recibido_ws",
                  );
               }

               if (isEmpty(pagos_pendientes.template_original) == true) {
                  $(
                     ".plantilla_vista_previa_pago_pendiente_ws .mf-content.extender-contenedores",
                  )
                     .html("No template selected")
                     .addClass("text-center");

                  $(".plantilla_vista_previa_pago_pendiente_ws").css(
                     "min-height",
                     "auto",
                  );
               } else {
                  // en caso de que tenga informacion pagos pendientes

                  $(".plantilla_vista_previa_pago_pendiente_ws").css(
                     "min-height",
                     "auto",
                  );

                  pintar_plantilla_vista_previa(
                     pagos_pendientes.template_original,
                     pagos_pendientes.template_data,
                     ".plantilla_vista_previa_pago_pendiente_ws",
                  );

                  //console.log(plantilla_original);
               }

               if (isEmpty(resenas.template_original) == true) {
                  $(
                     ".plantilla_vista_previa_resenas_ws .mf-content.extender-contenedores",
                  )
                     .html("No template selected")
                     .addClass("text-center");

                  $(".plantilla_vista_previa_resenas_ws").css(
                     "min-height",
                     "auto",
                  );
               } else {
                  // en caso de que tenga informacion pagos pendientes

                  $(".plantilla_vista_previa_resenas_ws").css(
                     "min-height",
                     "auto",
                  );

                  pintar_plantilla_vista_previa(
                     resenas.template_original,
                     resenas.template_data,
                     ".plantilla_vista_previa_resenas_ws",
                  );

                  //console.log(plantilla_original);
               }

               //otra conf
               if (pagos_recibido.activo_id == 1) {
                  $(".pago_pendiente_status_ws").text(
                     "Template for payment received (Active)",
                  );
               } else {
                  $(".pago_pendiente_status_ws").text(
                     "Template for payment received (Inactive)",
                  );
               }

               if (pagos_pendientes.activo_id == 1) {
                  $(".pago_recibido_status_ws").text(
                     "Template for pending payment (Active) ",
                  );
               } else {
                  $(".pago_recibido_status_ws").text(
                     "Template for pending payment (Inactive) ",
                  );
               }

               if (resenas.activo_id == 1) {
                  $(".resenas_status_ws").text("Template for reviews (Active)");
               } else {
                  $(".resenas_status_ws").text(
                     "Template for reviews (Inactive)",
                  );
               }
            }
         }

         function configuracion_sms(whatsapp) {
            if (whatsapp.length != 0) {
               let pagos_recibido = whatsapp[0];
               let pagos_pendientes = whatsapp[1];
               let resena = whatsapp[2];

               /*  pago_recibido_sms
                        link_pago_recibido_sms

                        pago_pendiente_sms
                        link_pago_pendiente_sms */

               //IF SOLO PAGOS RECIBIDOS
               if (isEmpty(pagos_recibido.name_template) == true) {
                  $(".pago_recibido_sms").val("No template selected");

                  let preparar_link =
                     EDIT_TEMPLATE +
                     "/" +
                     pagos_recibido.id;

                  $(".link_pago_recibido_sms")
                     .attr("href", preparar_link)
                     .attr("target", "_blank") // Agrega target="_blank"

                     .text("Select templates");
               } else {
                  $(".pago_recibido_sms").val(pagos_recibido.name_template);

                  let preparar_link =
                     EDIT_TEMPLATE +
                     "/" +
                     pagos_recibido.id;

                  $(".link_pago_recibido_sms")
                     .attr("href", preparar_link)
                     .attr("target", "_blank") // Agrega target="_blank"

                     .text("Setting up templates");
               }

               //IF SOLO PAGOS PENDIENTES
               if (isEmpty(pagos_pendientes.name_template) == true) {
                  $(".pago_pendiente_sms").val("No template selected");

                  let preparar_link =
                     EDIT_TEMPLATE +
                     "/" +
                     pagos_pendientes.id;

                  $(".link_pago_pendiente_sms")
                     .attr("href", preparar_link)
                     .attr("target", "_blank") // Agrega target="_blank"

                     .text("Select templates");
               } else {
                  $(".pago_pendiente_sms").val(pagos_pendientes.name_template);

                  let preparar_link =
                     EDIT_TEMPLATE +
                     "/" +
                     pagos_pendientes.id;

                  $(".link_pago_pendiente_sms")
                     .attr("href", preparar_link)
                     .attr("target", "_blank") // Agrega target="_blank"

                     .text("Setting up templates");
               }

               //IF SOLO reseñas
               if (isEmpty(resena.name_template) == true) {
                  $(".resena_sms").val("No template selected");

                  let preparar_link =
                     EDIT_TEMPLATE +
                     "/" +
                     resena.id;

                  $(".link_resena_sms")
                     .attr("href", preparar_link)
                     .attr("target", "_blank") // Agrega target="_blank"

                     .text("Select templates");
               } else {
                  $(".resena_sms").val(resena.name_template);

                  let preparar_link =
                     EDIT_TEMPLATE +
                     "/" +
                     resena.id;

                  $(".link_resena_sms")
                     .attr("href", preparar_link)
                     .attr("target", "_blank") // Agrega target="_blank"

                     .text("Setting up templates");
               }

               //SOLO VISTA PREVIA RECIBIDOS
               if (isEmpty(pagos_recibido.template_original) == true) {
                  $(
                     ".plantilla_vista_previa_pago_recibido_sms .mf-content.extender-contenedores",
                  )
                     .html("No template selected")
                     .addClass("text-center");

                  $(".plantilla_vista_previa_pago_recibido_sms").css(
                     "min-height",
                     "auto",
                  );
               } else {
                  // en caso de que tenga informacion pagos recibidos
                  $(".plantilla_vista_previa_pago_recibido_sms").css(
                     "min-height",
                     "auto",
                  );

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

                  pintar_plantilla_vista_previa_sms(
                     pagos_recibido.template_modificado,
                     ".plantilla_vista_previa_pago_recibido_sms",
                  );
               }

               //SOLO VISTA PREVIA RECIBIDOS
               if (isEmpty(pagos_pendientes.template_original) == true) {
                  $(
                     ".plantilla_vista_previa_pago_pendiente_sms .mf-content.extender-contenedores",
                  )
                     .html("No template selected")
                     .addClass("text-center");

                  $(".plantilla_vista_previa_pago_pendiente_sms").css(
                     "min-height",
                     "auto",
                  );
               } else {
                  // en caso de que tenga informacion pagos recibidos
                  $(".plantilla_vista_previa_pago_pendiente_sms").css(
                     "min-height",
                     "auto",
                  );

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

                  pintar_plantilla_vista_previa_sms(
                     pagos_pendientes.template_modificado,
                     ".plantilla_vista_previa_pago_pendiente_sms",
                  );
               }

               //SOLO VISTA PREVIA receña
               if (isEmpty(resena.template_original) == true) {
                  $(
                     ".plantilla_vista_previa_resenas_sms .mf-content.extender-contenedores",
                  )
                     .html("No template selected")
                     .addClass("text-center");

                  $(".plantilla_vista_previa_resenas_sms").css(
                     "min-height",
                     "auto",
                  );
               } else {
                  // en caso de que tenga informacion pagos recibidos
                  $(".plantilla_vista_previa_resenas_sms").css(
                     "min-height",
                     "auto",
                  );

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

                  pintar_plantilla_vista_previa_sms(
                     resena.template_modificado,
                     ".plantilla_vista_previa_resenas_sms",
                  );
               }

               if (pagos_recibido.activo_id == 1) {
                  $(".pago_pendiente_status_sms").text(
                     "Template for payment received (Active)",
                  );
               } else {
                  $(".pago_pendiente_status_sms").text(
                     "Template for payment received (Inactive)",
                  );
               }

               if (pagos_pendientes.activo_id == 1) {
                  $(".pago_recibido_status_sms").text(
                     "Template for pending payment (Active)",
                  );
               } else {
                  $(".pago_recibido_status_sms").text(
                     "Template for pending payment (Inactive)",
                  );
               }

               if (resena.activo_id == 1) {
                  $(".resena_status_sms").text("Template for reviews (Active)");
               } else {
                  $(".resena_status_sms").text(
                     "Template for reviews (Inactive)",
                  );
               }
            }
         }

         function configuracion_email(whatsapp) {
            if (whatsapp.length != 0) {
               let pagos_recibido = whatsapp[0];
               let pagos_pendientes = whatsapp[1];
               let resena = whatsapp[2];

               /*  pago_recibido_sms
                        link_pago_recibido_sms

                        pago_pendiente_sms
                        link_pago_pendiente_sms */

               //IF SOLO PAGOS RECIBIDOS
               if (isEmpty(pagos_recibido.name_template) == true) {
                  $(".pago_recibido_email").val("No template selected");

                  let preparar_link =
                     EDIT_TEMPLATE +
                     "/" +
                     pagos_recibido.id;

                  $(".link_pago_recibido_email")
                     .attr("href", preparar_link)
                     .attr("target", "_blank") // Agrega target="_blank"

                     .text("Select templates");
               } else {
                  $(".pago_recibido_email").val(pagos_recibido.name_template);

                  let preparar_link =
                     EDIT_TEMPLATE +
                     "/" +
                     pagos_recibido.id;

                  $(".link_pago_recibido_email")
                     .attr("href", preparar_link)
                     .attr("target", "_blank") // Agrega target="_blank"
                     .text("Setting up templates");
               }

               //IF SOLO PAGOS PENDIENTES
               if (isEmpty(pagos_pendientes.name_template) == true) {
                  $(".pago_pendiente_email").val("No template selected");

                  let preparar_link =
                     EDIT_TEMPLATE +
                     "/" +
                     pagos_pendientes.id;

                  $(".link_pago_pendiente_email")
                     .attr("href", preparar_link)
                     .attr("target", "_blank") // Agrega target="_blank"

                     .text("Select templates");
               } else {
                  $(".pago_pendiente_email").val(
                     pagos_pendientes.name_template,
                  );

                  let preparar_link =
                     EDIT_TEMPLATE +
                     "/" +
                     pagos_pendientes.id;

                  $(".link_pago_pendiente_email")
                     .attr("href", preparar_link)
                     .attr("target", "_blank") // Agrega target="_blank"

                     .text("Setting up templates");
               }

               //aqui esmaos
               if (isEmpty(resena.name_template) == true) {
                  $(".resena_email").val("No template selected");

                  let preparar_link =
                     EDIT_TEMPLATE +
                     "/" +
                     resena.id;

                  $(".link_resena_email")
                     .attr("href", preparar_link)
                     .attr("target", "_blank") // Agrega target="_blank"

                     .text("Select templates");
               } else {
                  $(".resena_email").val(resena.name_template);

                  let preparar_link =
                     EDIT_TEMPLATE +
                     "/" +
                     resena.id;

                  $(".link_resena_email")
                     .attr("href", preparar_link)
                     .attr("target", "_blank") // Agrega target="_blank"

                     .text("Setting up templates");
               }

               //SOLO VISTA PREVIA RECIBIDOS
               if (isEmpty(pagos_recibido.template_original) == true) {
                  $(
                     ".plantilla_vista_previa_pago_recibido_email .mf-content.extender-contenedores",
                  )
                     .html("No template selected")
                     .addClass("text-center");

                  $(".plantilla_vista_previa_pago_recibido_email").css(
                     "min-height",
                     "auto",
                  );
               } else {
                  // en caso de que tenga informacion pagos recibidos
                  $(".plantilla_vista_previa_pago_recibido_email").css(
                     "min-height",
                     "auto",
                  );

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

                  pintar_plantilla_vista_previa_email(
                     pagos_recibido.template_modificado,
                     ".plantilla_vista_previa_pago_recibido_email",
                  );
               }

               //SOLO VISTA PREVIA RECIBIDOS
               if (isEmpty(pagos_pendientes.template_original) == true) {
                  $(
                     ".plantilla_vista_previa_pago_pendiente_email .mf-content.extender-contenedores",
                  )
                     .html("No template selected")
                     .addClass("text-center");

                  $(".plantilla_vista_previa_pago_pendiente_email").css(
                     "min-height",
                     "auto",
                  );
               } else {
                  // en caso de que tenga informacion pagos recibidos
                  $(".plantilla_vista_previa_pago_pendiente_email").css(
                     "min-height",
                     "auto",
                  );

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

                  pintar_plantilla_vista_previa_email(
                     pagos_pendientes.template_modificado,
                     ".plantilla_vista_previa_pago_pendiente_email",
                  );
               }

               if (isEmpty(resena.template_original) == true) {
                  $(
                     ".plantilla_vista_previa_resena_email .mf-content.extender-contenedores",
                  )
                     .html("No template selected")
                     .addClass("text-center");

                  $(".plantilla_vista_previa_resena_email").css(
                     "min-height",
                     "auto",
                  );
               } else {
                  // en caso de que tenga informacion pagos recibidos
                  $(".plantilla_vista_previa_resena_email").css(
                     "min-height",
                     "auto",
                  );

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

                  pintar_plantilla_vista_previa_email(
                     resena.template_modificado,
                     ".plantilla_vista_previa_resena_email",
                  );
               }

               if (pagos_recibido.activo_id == 1) {
                  $(".pago_pendiente_status_email").text(
                     "Template for payment received (Active)",
                  );
               } else {
                  $(".pago_pendiente_status_email").text(
                     "Template for payment received (Inactive)",
                  );
               }

               if (pagos_pendientes.activo_id == 1) {
                  $(".pago_recibido_status_email").text(
                     "Template for pending payment (Active)",
                  );
               } else {
                  $(".pago_recibido_status_email").text(
                     "Template for pending payment (Inactive)",
                  );
               }

               if (resena.activo_id == 1) {
                  $(".resena_status_email").text(
                     "Template for reviews (Active)",
                  );
               } else {
                  $(".resena_status_email").text(
                     "Template for reviews (Inactive)",
                  );
               }
            }
         }

         function pintar_plantilla_vista_previa(
            template_original,
            template_data_,
            pintar_en,
         ) {
            const plantilla_original = JSON.parse(template_original);
            const template_data = JSON.parse(template_data_);
            //console.log("template_data");
            //console.log(template_data);

            const components = plantilla_original.components || [];

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

            var existeHeaders = false;

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

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

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

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

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

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

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

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

                  let formato_minuscula = format.toLowerCase();

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

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

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

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

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

                     let iniciar_texto = "";

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

                        //console.log(iniciar_texto);
                     }


                     if (iniciar_texto == null || undefined) {
                        iniciar_texto = text;
                     }

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

                  if (formato_minuscula == "image") {
                     $(pintar_en + " .plantilla-header").html(
                        '<div class="imagen_header_plantilla">' + "</div>",
                     );
                  }

                  if (formato_minuscula == "document") {
                     $(pintar_en + " .plantilla-header").html(
                        '<div class="documento_header_plantilla">' + "</div>",
                     );
                  }

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

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

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

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

               if (type == "BODY") {

                   $(pintar_en + " #texto_body_plantilla_previa").text(text);

                  if (example != null || example != undefined) {
                     //console.log(example);

                     let cantidad_parametros = countNestedElements(example);

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

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

                     var contador_placeholder = 1;

                     var updatedText = text;

                     for (let i = 0; i < cantidad_parametros; i++) {
                        if (template_data_body.length > 0) {
                           let { buscar, texto, campoBD } =
                              template_data_body[i];

                           const placeholder =
                              "{{" + contador_placeholder + "}}";

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

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

                           contador_placeholder++;
                        }
                     }

                     //updateTextBodyWhatsapp(text);
                  }

                  $(pintar_en + " #texto_body_plantilla_previa").text(
                     updatedText,
                  );
               }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

         function pintar_plantilla_vista_previa_sms(
            template_modificado,
            pintar_en,
         ) {
            if (isEmpty(template_modificado) == true) {
               return;
            }

            var existeHeaders = false;

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

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

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

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

            $(pintar_en + " #texto_body_plantilla_previa").html(
               template_modificado,
            );

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

            //botones
            $(pintar_en + " .mensajes_botones").hide();
            $(pintar_en + " .mensajes_botones").html("");
         }

         function pintar_plantilla_vista_previa_email(
            template_modificado,
            pintar_en,
         ) {
            if (isEmpty(template_modificado) == true) {
               return;
            }

            var existeHeaders = false;

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

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

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

            //body

            //body
            $(pintar_en + " #div_body_plantilla_previa").html("");

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

            var $divBody = $(pintar_en + " #div_body_plantilla_previa");

            // Recorre todos los elementos <p> hijos del div
            $divBody.find("p").each(function () {
               var $pElement = $(this);

               // Verifica si el <p> no tiene un id
               if (!$pElement.attr("id")) {
                  // Añade el estilo si la condición se cumple
                  $pElement.css("margin-bottom", "0px");
               }
            });

            /* $(pintar_en + " #texto_body_plantilla_previa").text("");

            $(pintar_en + " #texto_body_plantilla_previa").html(
               template_modificado,
            ); */

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

            //botones
            $(pintar_en + " .mensajes_botones").hide();
            $(pintar_en + " .mensajes_botones").html("");
         }

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

            return updatedText;
         }
     
     
 
</script>
{/literal}

{/block}