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


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


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

{/block}

{block name="content"}

<style type="text/css">

#emojiContainer {
    max-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 10px;
}

.emoji {
    font-size: 24px;
    cursor: pointer;
    padding: 5px;
}

.emoji:hover {
    background-color: #f0f0f0;
    border-radius: 5px;
}

.tamano_input {
   height: 38px !important;
   min-height: 38px !important;
}



.select2-container--default .select2-selection--single {
            height: 38px !important;
            min-height: 38px !important;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 38px !important; /* Align text vertically */
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 38px !important; /* Align the dropdown arrow */
        }


.btn-check:active+.btn-outline-primary, .btn-check:checked+.btn-outline-primary, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show, .btn-outline-primary:active {
    color: #000;
    background-color: #d3cac0;
    border-color: #d3cac0;
}

.btn-check:active+.btn-outline-primary:focus, .btn-check:checked+.btn-outline-primary:focus, .btn-outline-primary.active:focus, .btn-outline-primary.dropdown-toggle.show:focus, .btn-outline-primary:active:focus {
    box-shadow: 0 0 0 .25rem transparent !important;
    border-color: #d3cac0 !important;
}

.btn-check:active+.btn-outline-primary:focus, .btn-check:checked+.btn-outline-primary:focus, .btn-outline-primary.active:focus, .btn-outline-primary.dropdown-toggle.show:focus, .btn-outline-primary:active:focus{
    box-shadow: 0 0 0 .25rem transparent !important;
    border-color: #d3cac0 !important;
 
}

.cambiar_fondo_seleccionado{
   background-color: white !important;
}


 

</style>
<div class="row">

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

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

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

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

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

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

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

                <div class="panel-content p-0">

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

                                          <label for="configuracion" class="col-sm-3"
                                             ><span class="text-black">Whatsapp Settings</span
                                             ><span class="text-danger">*</span></label
                                          >
                                          <div class="col-sm-9">
                                             <select
                                                class="form-select form-select-sm tener_configuracion tamano_input"
                                                name="configuracion"
                                                id="configuracion"
                                                style="width: 100%"
                                                placeholder="Select a Group"
                                             ></select>
                                          </div>
                                       </div>

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

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

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

                                                               <div style=" display: inline; float: inline-end; ">
                                                                  <b style=" font-weight: 600; " class="contador_nombre_plantilla">0/512</b>
                                                               </div>


                                                            </label>
                                                            <input
                                                               value=""
                                                               id="input_nombre_plantilla"
                                                               type="text"
                                                               class="form-control form-control-sm tamano_input"
                                                            />
                                                            
                                                             

                                                         </div>

                                                         <div class="col-sm-4 reset">
                                                            <label>Language</label>
                                                            
                                                            <select
                                                               class="form-select form-select-sm tener_input_lenguaje_plantilla tamano_input"
                                                               name="input_lenguaje_plantilla"
                                                               id="input_lenguaje_plantilla"
                                                               style="width: 100%"
                                                               placeholder="Select a idioma"
                                                            ></select>

                                                         </div>
                                                      </div>
                                                   </div>
                                                   <!-- FIN descripcion plantilla -->

                                                   <!-- HEADER plantilla -->
                                                   <div class="descripcion_general_plantilla" style="display: none">
                                                      <h5
                                                         style="
                                                            font-weight: 600;
                                                            color: black;
                                                            margin: 0px;
                                                            padding: 15px;
                                                            font-size: 17px;
                                                         "
                                                      >
                                                         Header
                                                      </h5>
                                                      <hr
                                                         style="
                                                            border-top: 1px solid #c1bdbd;
                                                            width: 100%;
                                                            margin-top: 0px;
                                                            margin-bottom: 15px;
                                                         "
                                                      />
                                                      <div
                                                         class="row reset"
                                                         style="
                                                            padding-left: 10px;
                                                            padding-right: 10px;
                                                         "
                                                      >
                                                         <div class="col-sm-12 reset separador">
                                                            <label>Header type (Optional)</label>
                                                             

                                                            <select
                                                               class="form-select form-select-sm tener_input_header_plantilla tamano_input"
                                                               name="input_header_plantilla"
                                                               id="input_header_plantilla"
                                                               style="width: 100%"
                                                               placeholder="Select a idioma"
                                                            >

                                                               <option value="NONE">None</option>
                                                               <option value="TEXT">Text</option>
                                                               <option value="IMAGE">Image</option>
                                                               <option value="VIDEO">Video</option>
                                                               <option value="DOCUMENT">Document</option>
                                                               <option value="LOCATION">Location</option>

                                                            </select>

                                                            <div
                                                               class="contenido_principal_header"
                                                            >
                                                               <!--Aqui va el contenido de header y su dinamica-->
                                                            </div>
                                                         </div>
                                                      </div>
                                                   </div>

                                                   <!-- BODY plantilla -->
                                                   <div class="descripcion_general_plantilla"  >
                                                      <h5
                                                         style="
                                                            font-weight: 600;
                                                            color: black;
                                                            margin: 0px;
                                                            padding: 15px;
                                                            font-size: 17px;
                                                         "
                                                      >
                                                         Body
                                                      </h5>
                                                      <hr
                                                         style="
                                                            border-top: 1px solid #c1bdbd;
                                                            width: 100%;
                                                            margin-top: 0px;
                                                            margin-bottom: 15px;
                                                         "
                                                      />
                                                      <div
                                                         class="row reset"
                                                         style="
                                                            padding-left: 10px;
                                                            padding-right: 10px;
                                                         "
                                                      >
                                                         <div class="col-sm-12 reset separador">
                                                            <div
                                                               class="contenido_principal_body"
                                                            ></div>
                                                         </div>
                                                      </div>
                                                   </div>

                                                   <!-- FOOTER plantilla -->
                                                   <div
                                                      class="descripcion_general_plantilla footer_plantilla"   
                                                   >
                                                      <h5
                                                         style="
                                                            font-weight: 600;
                                                            color: black;
                                                            margin: 0px;
                                                            padding: 15px;
                                                            font-size: 17px;
                                                         "
                                                      >
                                                         Footer - Optional
                                                      </h5>
                                                      <hr
                                                         style="
                                                            border-top: 1px solid #c1bdbd;
                                                            width: 100%;
                                                            margin-top: 0px;
                                                            margin-bottom: 15px;
                                                         "
                                                      />
                                                      <div
                                                         class="row reset"
                                                         style="
                                                            padding-left: 10px;
                                                            padding-right: 10px;
                                                         "
                                                      >
                                                         <div class="col-sm-12 reset separador">
                                                            <div
                                                               class="contenido_principal_footer"
                                                            >
                                                               <!--Aqui va el contenido de header y su dinamica-->
                                                               
                                                            <label style=' width: 100%; max-width: 100%; '> 
                                                                  Footer content 
                                                                  <div style=' display: inline; float: inline-end; '> 
                                                                     <b style=' font-weight: 600; ' class='contador_texto_plantilla_footer'>0/60</b> 
                                                                  </div> 
                                                            </label> 

                                                               <textarea
                                                                  id="texto_textarea_footer"
                                                                  class="form-control form-control-sm"
                                                                  
                                                               >
                                                               </textarea>
                                                            </div>
                                                         </div>
                                                      </div>
                                                   </div>

                                                   <!-- BUTTONS plantilla -->
                                                   <div
                                                      class="descripcion_general_plantilla buttons_plantilla"
                                                   >
                                                      <h5
                                                         style="
                                                            font-weight: 600;
                                                            color: black;
                                                            margin: 0px;
                                                            padding: 15px;
                                                            font-size: 17px;
                                                         "
                                                      >
                                                         Buttons
                                                      </h5>
                                                      <hr
                                                         style="
                                                            border-top: 1px solid #c1bdbd;
                                                            width: 100%;
                                                            margin-top: 0px;
                                                            margin-bottom: 15px;
                                                         "
                                                      />
                                                      <div
                                                         class="row reset"
                                                         style="
                                                            padding-left: 10px;
                                                            padding-right: 10px;
                                                         "
                                                      >
                                                         <div class="col-sm-12 reset separador">
                                                            <div
                                                               class="contenido_principal_buttons"
                                                            >

                                                            <select
                                                                  class="form-select form-select-sm tener_select_button_plantillas tamano_input"
                                                                  name="select_button_plantillas"
                                                                  id="select_button_plantillas"
                                                                  style="width: 100%; display:none"
                                                                  placeholder="Select a option"  
                                                               >
                                                            </select>

                                                            <p>
                                                               You can customize the button text for both autofill and copy code. Even when zero-tap is turned on, buttons are still needed for the backup code delivery method.
                                                            </p>

                                                            <div class="row" style=" padding: 0; margin: 0; ">
                                                            
                                                               <div class="col-12 col-sm-12 col-lg-12">
                                                                  <label style=" width: 100%; max-width: 100%; ">
                                                                     Copy code

                                                                     <span style="color: black; font-size: 10px;">* Field is required</span>
                                                                  </label>

                                                                  <input value="" id="nombre_copiar_codigo" type="text" class="form-control form-control-sm color-error tamano_input">

                                                                  <p class="contador_nombre_copiar_codigo" style="text-align: end;margin-bottom: 0px;font-size: 12px;">0/25</p>
                                                                        
                                                               </div>
                                                            
                                                            </div>

                                                            
                                                            
                                                            


                                                            <br>
 
                                                            <div class="row agregar_html_opcion_botones" style=" padding: 0; margin: 0; ">

                                                               {*plantilla url2*}
                                                               <div class="col-12 descripcion_general_plantilla URL1"  style="display:none" >

                                                                  <div class="row" style=" margin: 0; align-items: center; align-content: center; margin-bottom: 5px; ">

                                                                     <div class="col-8">
                                                                        <label style=" width: 100%; max-width: 100%; "> 
                                                                           Visit website
                                                                        </label>
                                                                     </div>

                                                                     <div class="col-4">
                                                                        <button  data-tipo="URL1" type="button" class="btn btn-default btn-sm  mt-1 quitar_opcion_plantilla_boton"  style="border-color: #d3cac0; border: 1px solid #d3cac0; float: right; margin-left:5px; margin-right:5px;"> Quitar </button>
                                                                     </div>

                                                                  </div>

                                                                  <hr style=" margin-top: 0; ">

                                                                  <div class="row" style=" margin: 0;  ">

                                                                     <div class="col-12 col-sm-4 col-lg-4">
                                                                        <label style=" width: 100%; max-width: 100%; ">
                                                                           Button Text

                                                                           <span style="color: black; font-size: 10px;">* Field is required</span>
                                                                        </label>

                                                                        <input value="" id="input_nombre_url1_text" type="text" class="form-control form-control-sm color-error tamano_input">

                                                                        <p class="contador_nombre_url1_text" style="text-align: end;margin-bottom: 0px;font-size: 12px;">0/25</p>
                                                                        
                                                                     </div>

                                                                     <div class="col-12 col-sm-4 col-lg-4">
                                                                        <label style=" width: 100%; max-width: 100%; ">
                                                                           URL TYPE
                                                                        </label>

                                                                        <select
                                                                           class="form-select form-select-sm tener_url1_type tamano_input"
                                                                              name="url1_type"
                                                                              id="url1_type"
                                                                              style="width: 100%"
                                                                              placeholder="Select a option"
                                                                           >

                                                                           <option value="static">Static</option>
                                                                           <option value="dynamic">Dynamic</option>

                                                                        </select>

                                                                     </div>

                                                                     <div class="col-12 col-sm-4 col-lg-4">
                                                                        <label style=" width: 100%; max-width: 100%; ">
                                                                           Website URL
                                                                           <span style="color: black; font-size: 10px;">* Field is required</span>
                                                                        </label>

                                                                        <input value="" id="input_nombre_url1_website"  placeholder="https:www.example.com" type="text" class="form-control form-control-sm color-error tamano_input">
                                                                        
                                                                        <p class="contador_nombre_url1_website" style="text-align: end;margin-bottom: 0px;font-size: 12px;">0/2000</p>

                                                                     </div>

                                                                     {*style="display:none"*}

                                                                     <div class="col-12 col-sm-12 col-lg-12 mt-3 habilitar_url_dynamic" style="display:none" >
                                                                        <label style=" width: 100%; max-width: 100%; ">
                                                                           add sample URL
                                                                           <span style="color: black; font-size: 10px;">* Field is required</span>
                                                                        </label>

                                                                        To help us review your message template, please add an example of the website URL. Do not use real customer information.

                                                                        <input value="" placeholder="https:www.example.com" id="input_nombre_url1_example_website" type="text" class="form-control form-control-sm color-error"  >
                                                                        
                                                                     </div>

                                                                  </div>


                                                                  


                                                               
                                                               </div>

                                                               {*plantilla url2*}
                                                               <div class="col-12 descripcion_general_plantilla URL2"  style="display:none"   >

                                                                  <div class="row" style=" margin: 0; align-items: center; align-content: center; margin-bottom: 5px; ">

                                                                     <div class="col-8">
                                                                        <label style=" width: 100%; max-width: 100%; "> 
                                                                           Visit website 
                                                                        </label>
                                                                     </div>

                                                                     <div class="col-4">
                                                                        <button  data-tipo="URL2" type="button" class="btn btn-default btn-sm  mt-1 quitar_opcion_plantilla_boton"  style="border-color: #d3cac0; border: 1px solid #d3cac0; float: right; margin-left:5px; margin-right:5px;"> Quitar </button>
                                                                     </div>

                                                                  </div>

                                                                  <hr style=" margin-top: 0; ">

                                                                  <div class="row" style=" margin: 0;  ">

                                                                     <div class="col-12 col-sm-4 col-lg-4">
                                                                        <label style=" width: 100%; max-width: 100%; ">
                                                                           Button Text

                                                                           <span style="color: black; font-size: 10px;">* Field is required</span>
                                                                        </label>

                                                                        <input value="" id="input_nombre_url2_text" type="text" class="form-control form-control-sm color-error tamano_input">

                                                                        <p class="contador_nombre_url2_text" style="text-align: end;margin-bottom: 0px;font-size: 12px;">0/25</p>
                                                                        
                                                                     </div>

                                                                     <div class="col-12 col-sm-4 col-lg-4">
                                                                        <label style=" width: 100%; max-width: 100%; ">
                                                                           URL TYPE
                                                                        </label>

                                                                        <select
                                                                           class="form-select form-select-sm tener_url2_type tamano_input"
                                                                              name="url2_type"
                                                                              id="url2_type"
                                                                              style="width: 100%"
                                                                              placeholder="Select a option"
                                                                           >

                                                                           <option value="static">Static</option>
                                                                           <option value="dynamic">Dynamic</option>

                                                                        </select>

                                                                     </div>

                                                                     <div class="col-12 col-sm-4 col-lg-4">
                                                                        <label style=" width: 100%; max-width: 100%; ">
                                                                           Website URL
                                                                           <span style="color: black; font-size: 10px;">* Field is required</span>
                                                                        </label>

                                                                        <input value="" id="input_nombre_url2_website"  placeholder="https:www.example.com" type="text" class="form-control form-control-sm color-error tamano_input">
                                                                        
                                                                        <p class="contador_nombre_url2_website" style="text-align: end;margin-bottom: 0px;font-size: 12px;">0/2000</p>

                                                                     </div>

                                                                     {*style="display:none"*}
                                                                     <div class="col-12 col-sm-12 col-lg-12 mt-3 habilitar_url2_dynamic" style="display:none" >
                                                                        <label style=" width: 100%; max-width: 100%; ">
                                                                           add sample URL
                                                                           <span style="color: black; font-size: 10px;">* Field is required</span>
                                                                        </label>

                                                                        To help us review your message template, please add an example of the website URL. Do not use real customer information.

                                                                        <input value="" placeholder="https:www.example.com" id="input_nombre_url2_example_website" type="text" class="form-control form-control-sm color-error tamano_input"  >
                                                                        
                                                                     </div>

                                                                  </div>


                                                                  


                                                               
                                                               </div>

                                                               {*plantilla PHONE_NUMBER*}
                                                               <div class="col-12 descripcion_general_plantilla PHONE_NUMBER" style="display:none">

                                                                  <div class="row" style=" margin: 0; align-items: center; align-content: center; margin-bottom: 5px; ">

                                                                     <div class="col-8">
                                                                        <label style=" width: 100%; max-width: 100%; "> 
                                                                           Call phone number
                                                                        </label>
                                                                     </div>

                                                                     <div class="col-4">
                                                                        <button  data-tipo="PHONE_NUMBER" type="button" class="btn btn-default btn-sm  mt-1 quitar_opcion_plantilla_boton"  style="border-color: #d3cac0; border: 1px solid #d3cac0; float: right; margin-left:5px; margin-right:5px;"> Quitar </button>
                                                                     </div>

                                                                  </div>

                                                                  <hr style=" margin-top: 0; ">

                                                                  <div class="row" style=" margin: 0;  ">

                                                                     <div class="col-12 col-sm-4 col-lg-4">
                                                                        <label style=" width: 100%; max-width: 100%; ">
                                                                           Button Text

                                                                           <span style="color: black; font-size: 10px;">* Field is required</span>
                                                                        </label>

                                                                        <input value="" id="input_nombre_phone_number_text" type="text" class="form-control form-control-sm color-error tamano_input">

                                                                        <p class="contador_nombre_phone_number_text" style="text-align: end;margin-bottom: 0px;font-size: 12px;">0/25</p>
                                                                        
                                                                     </div>

                                                                     <div class="col-12 col-sm-4 col-lg-4">
                                                                        <label style=" width: 100%; max-width: 100%; ">
                                                                          Country
                                                                        </label>

                                                                        <select
                                                                           class="form-select form-select-sm tener_phone_number_country tamano_input"
                                                                              name="phone_number_country"
                                                                              id="phone_number_country"
                                                                              style="width: 100%"
                                                                              placeholder="Select a option"
                                                                           >

                                                                        </select>

                                                                     </div>

                                                                     <div class="col-12 col-sm-4 col-lg-4">
                                                                        <label style=" width: 100%; max-width: 100%; ">
                                                                         Phone number
                                                                           <span style="color: black; font-size: 10px;">* Field is required</span>
                                                                        </label>

                                                                        <input value="" id="input_numero_phone_number"  placeholder="Eje. 96668345" type="number" class="form-control form-control-sm color-error tamano_input">
                                                                        
                                                                        <p class="contador_nombre_phone_number" style="text-align: end;margin-bottom: 0px;font-size: 12px;">0/20</p>

                                                                     </div>

                                                                  </div>


                                                                  


                                                               
                                                               </div>

                                                             
                                                               

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

                                                <div class="col-sm-3 ">

                                                   <div class="sticky-header">
                                                      <div class="plantilla_vista_previa">

                                                         <div class="plantilla_vista_previa_headers">
                                                            <p
                                                               style="
                                                                  font-weight: 600;
                                                                  font-size: 17px;
                                                                  padding: 16px;
                                                                  height: 100%;
                                                                  padding-bottom: 0px;
                                                                  color: black;
                                                               "
                                                            >
                                                               Template preview
                                                            </p>
                                                         </div>

                                                         <div class="plantilla_vista_previa_body">
                                                            <div class="message-feed media right">
                                                               <div
                                                                  class="media-body media-body-change-display"
                                                               >
                                                                  <div
                                                                     class="mf-content extender-contenedores"
                                                                  >
                                                                     <div class="palomitas">
                                                                        <div class="izquierda">
                                                                           <!-- header -->
                                                                           <div
                                                                              class="plantilla-header"
                                                                           >
                                                                              <!--TEXTO NORMAL-->
                                                                              <!-- <p id="texto_header_plantilla_previa">
                                                                              Hello, World
                                                                           </p> -->

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

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

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

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

                                                                           <!-- FOOTER -->
                                                                           <div
                                                                              class="plantilla-footer"
                                                                           >
                                                                              <span
                                                                                 id="texto_footer_plantilla_previa"
                                                                              >
                                                                                 Soy footer a que si
                                                                              </span>
                                                                           </div>
                                                                           <!-- FIN FOOTER -->
                                                                        </div>
                                                                     </div>
                                                                     <small class="mf-date"
                                                                        ><div>
                                                                           01-08-2024 12:00 pm
                                                                        </div></small
                                                                     >
                                                                     <div class="mensajes_botones">
                                                                        <div class="div_mensaje_boton">
                                                                           <img
                                                                              src="{$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>
                                             </div>
                                          </div>
                                          <!-- FIN CONFIGURACION PLANTILLAS -->
                                       </div>
                                       <!--fin plantilla de whatsapp-->
                                    </div>

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

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

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

                                                      Save Template
                                                   </button>
                                                </div>
                                             </div>
                                          </div>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                        
                    </div>
 
                </div>
               
               {**}
               <div class="block bloqueo_v1" style="display:none" hidden></div>
                <div class="block blockOverlay bloqueo_v2" hidden style="z-index: 21000; border: none; margin: 0px; padding: 0px; width: 100%; height: 100%; top: 0px; left: 0px; background-color: rgb(0, 0, 0); opacity: 0.6; cursor: wait; position: absolute;" ></div>
                <div
                    class="block blockMsg blockElement bloqueo_v3"
                    hidden
                    style="
                        z-index: 201100;
                        position: absolute;
                        padding: 0px;
                        margin: 0px;
                        width: 100%;
                        top: 50%;
                         
                        text-align: center;
                        color: rgb(0, 0, 0);
                        cursor: wait;
                    "
                    >
                     
                    <div class="md-preloader text-center">
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            version="1.1"
                            height="32"
                            width="32"
                            viewBox="0 0 75 75"
                        >
                            <circle cx="37.5" cy="37.5" r="33.5" stroke-width="6"></circle>
                        </svg>
                    </div>

                     <div class="text-center mt-6" style="
                                                                color: white;
                                                                font-weight: 600;
                                                                font-size: 15px;
                                                            ">
                        Please wait while it completes, we will show you a confirmation message.
                    </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">
                     Emoji
                  </h5>
                  <button
                     type="button"
                     class="btn-close btn_cerrar_confirmacion_modal"
                  ></button>
               </div>
               <div class="modal-body text-center">
                     <div id="emojiContainer"></div>

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

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

         let OPCIONES_BOTONES = [
            {
               value:"QUICK_REPLY",
               text: "Quick reply buttons",
               edicion: false
            },
            {
               value:"URL1",
               text: "Visit website",
               edicion: false
            },
            {
               value:"URL2",
               text: "Visit website",
               edicion: false
            },
            {
               value:"PHONE_NUMBER",
               text: "Call phone number",
               edicion: false
            } 
         ];

         //tener_select_button_plantillas

         var URL_BASE = $("#URL_BASE").val();
         var ROLL_USERS = $("#ROLL_USERS").val();
         var PATH_IMG_      = $("#PATH_IMG").val();
         var URL_QUALIFY      = $("#URL_QUALIFY").val();
 

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

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

         var ID_TEMPLATE_INVOICES = $("#id_template_invoices").val();
         var ID_TEMPLATE_PLANTILLA = 0;
         var BTN_PLANTILLA_MODIFICADA = false;
         var ENVIAR_PLANTILLA_ORIGINAL_MODIFICADA = {};
 
         //console.log(ID_TEMPLATE_INVOICES);
  

         const idiomas = [
            { nombre: "Español (Honduras)", codigo: "es_HN" },
            { nombre: "Inglés", codigo: "en" },
            { nombre: "Inglés (Reino Unido)", codigo: "en_GB" },
            { nombre: "Inglés (EE. UU.)", codigo: "en_US" },
            { nombre: "Afrikáans", codigo: "af" },
            { nombre: "Albanés", codigo: "sq" },
            { nombre: "Árabe", codigo: "ar" },
            { nombre: "Azerbaiyano", codigo: "az" },
            { nombre: "Bengalí", codigo: "bn" },
            { nombre: "Búlgaro", codigo: "bg" },
            { nombre: "Catalán", codigo: "ca" },
            { nombre: "Chino (China)", codigo: "zh_CN" },
            { nombre: "Chino (Hong Kong)", codigo: "zh_HK" },
            { nombre: "Chino (Taiwán)", codigo: "zh_TW" },
            { nombre: "Croata", codigo: "hr" },
            { nombre: "Checo", codigo: "cs" },
            { nombre: "Danés", codigo: "da" },
            { nombre: "Neerlandés", codigo: "nl" },
            { nombre: "Estonio", codigo: "et" },
            { nombre: "Filipino", codigo: "fil" },
            { nombre: "Finés", codigo: "fi" },
            { nombre: "Francés", codigo: "fr" },
            { nombre: "Alemán", codigo: "de" },
            { nombre: "Griego", codigo: "el" },
            { nombre: "Guyaratí", codigo: "gu" },
            { nombre: "Hausa", codigo: "ha" },
            { nombre: "Hebreo", codigo: "he" },
            { nombre: "Hindi", codigo: "hi" },
            { nombre: "Húngaro", codigo: "hu" },
            { nombre: "Indonesio", codigo: "id" },
            { nombre: "Irlandés", codigo: "ga" },
            { nombre: "Italiano", codigo: "it" },
            { nombre: "Japonés", codigo: "ja" },
            { nombre: "Canarés", codigo: "kn" },
            { nombre: "Kazajo", codigo: "kk" },
            { nombre: "Coreano", codigo: "ko" },
            { nombre: "Lao", codigo: "lo" },
            { nombre: "Letón", codigo: "lv" },
            { nombre: "Lituano", codigo: "lt" },
            { nombre: "Macedonio", codigo: "mk" },
            { nombre: "Malayo", codigo: "ms" },
            { nombre: "Malayalam", codigo: "ml" },
            { nombre: "Maratí", codigo: "mr" },
            { nombre: "Noruego", codigo: "nb" },
            { nombre: "Persa", codigo: "fa" },
            { nombre: "Polaco", codigo: "pl" },
            { nombre: "Portugués (Brasil)", codigo: "pt_BR" },
            { nombre: "Portugués (Portugal)", codigo: "pt_PT" },
            { nombre: "Punyabí", codigo: "pa" },
            { nombre: "Rumano", codigo: "ro" },
            { nombre: "Ruso", codigo: "ru" },
            { nombre: "Serbio", codigo: "sr" },
            { nombre: "Eslovaco", codigo: "sk" },
            { nombre: "Esloveno", codigo: "sl" },
            { nombre: "Español", codigo: "es" },
            { nombre: "Español (Argentina)", codigo: "es_AR" },
            { nombre: "Español (España)", codigo: "es_ES" },
            { nombre: "Español (México)", codigo: "es_MX" },
            { nombre: "Suajili", codigo: "sw" },
            { nombre: "Sueco", codigo: "sv" },
            { nombre: "Tamil", codigo: "ta" },
            { nombre: "Telugu", codigo: "te" },
            { nombre: "Tailandés", codigo: "th" },
            { nombre: "Turco", codigo: "tr" },
            { nombre: "Ucraniano", codigo: "uk" },
            { nombre: "Urdu", codigo: "ur" },
            { nombre: "Uzbeko", codigo: "uz" },
            { nombre: "Vietnamita", codigo: "vi" },
            { nombre: "Zulu", codigo: "zu" },
         ];

         const paisesWhatsApp = [
            { "pais": "Honduras", "codigo": "+504", "seleccionado": true },
            { "pais": "Estados Unidos", "codigo": "+1", "seleccionado": false },
            { "pais": "Afganistán", "codigo": "+93", "seleccionado": false },
            { "pais": "Albania", "codigo": "+355", "seleccionado": false },
            { "pais": "Alemania", "codigo": "+49", "seleccionado": false },
            { "pais": "Andorra", "codigo": "+376", "seleccionado": false },
            { "pais": "Angola", "codigo": "+244", "seleccionado": false },
            { "pais": "Antigua y Barbuda", "codigo": "+1", "seleccionado": false },
            { "pais": "Arabia Saudita", "codigo": "+966", "seleccionado": false },
            { "pais": "Argelia", "codigo": "+213", "seleccionado": false },
            { "pais": "Argentina", "codigo": "+54", "seleccionado": false },
            { "pais": "Armenia", "codigo": "+374", "seleccionado": false },
            { "pais": "Australia", "codigo": "+61", "seleccionado": false },
            { "pais": "Austria", "codigo": "+43", "seleccionado": false },
            { "pais": "Azerbaiyán", "codigo": "+994", "seleccionado": false },
            { "pais": "Bahamas", "codigo": "+1", "seleccionado": false },
            { "pais": "Bangladés", "codigo": "+880", "seleccionado": false },
            { "pais": "Barbados", "codigo": "+1", "seleccionado": false },
            { "pais": "Baréin", "codigo": "+973", "seleccionado": false },
            { "pais": "Bélgica", "codigo": "+32", "seleccionado": false },
            { "pais": "Belice", "codigo": "+501", "seleccionado": false },
            { "pais": "Benín", "codigo": "+229", "seleccionado": false },
            { "pais": "Bielorrusia", "codigo": "+375", "seleccionado": false },
            { "pais": "Bolivia", "codigo": "+591", "seleccionado": false },
            { "pais": "Bosnia y Herzegovina", "codigo": "+387", "seleccionado": false },
            { "pais": "Botsuana", "codigo": "+267", "seleccionado": false },
            { "pais": "Brasil", "codigo": "+55", "seleccionado": false },
            { "pais": "Brunéi", "codigo": "+673", "seleccionado": false },
            { "pais": "Bulgaria", "codigo": "+359", "seleccionado": false },
            { "pais": "Burkina Faso", "codigo": "+226", "seleccionado": false },
            { "pais": "Burundi", "codigo": "+257", "seleccionado": false },
            { "pais": "Bután", "codigo": "+975", "seleccionado": false },
            { "pais": "Cabo Verde", "codigo": "+238", "seleccionado": false },
            { "pais": "Camboya", "codigo": "+855", "seleccionado": false },
            { "pais": "Camerún", "codigo": "+237", "seleccionado": false },
            { "pais": "Canadá", "codigo": "+1", "seleccionado": false },
            { "pais": "Catar", "codigo": "+974", "seleccionado": false },
            { "pais": "Chad", "codigo": "+235", "seleccionado": false },
            { "pais": "Chile", "codigo": "+56", "seleccionado": false },
            { "pais": "China", "codigo": "+86", "seleccionado": false },
            { "pais": "Chipre", "codigo": "+357", "seleccionado": false },
            { "pais": "Colombia", "codigo": "+57", "seleccionado": false },
            { "pais": "Comoras", "codigo": "+269", "seleccionado": false },
            { "pais": "Congo", "codigo": "+242", "seleccionado": false },
            { "pais": "Corea del Sur", "codigo": "+82", "seleccionado": false },
            { "pais": "Costa de Marfil", "codigo": "+225", "seleccionado": false },
            { "pais": "Costa Rica", "codigo": "+506", "seleccionado": false },
            { "pais": "Croacia", "codigo": "+385", "seleccionado": false },
            { "pais": "Dinamarca", "codigo": "+45", "seleccionado": false },
            { "pais": "Dominica", "codigo": "+1", "seleccionado": false },
            { "pais": "Ecuador", "codigo": "+593", "seleccionado": false },
            { "pais": "Egipto", "codigo": "+20", "seleccionado": false },
            { "pais": "El Salvador", "codigo": "+503", "seleccionado": false },
            { "pais": "Emiratos Árabes Unidos", "codigo": "+971", "seleccionado": false },
            { "pais": "Eritrea", "codigo": "+291", "seleccionado": false },
            { "pais": "Eslovaquia", "codigo": "+421", "seleccionado": false },
            { "pais": "Eslovenia", "codigo": "+386", "seleccionado": false },
            { "pais": "España", "codigo": "+34", "seleccionado": false },
            { "pais": "Estonia", "codigo": "+372", "seleccionado": false },
            { "pais": "Etiopía", "codigo": "+251", "seleccionado": false },
            { "pais": "Filipinas", "codigo": "+63", "seleccionado": false },
            { "pais": "Finlandia", "codigo": "+358", "seleccionado": false },
            { "pais": "Fiyi", "codigo": "+679", "seleccionado": false },
            { "pais": "Francia", "codigo": "+33", "seleccionado": false },
            { "pais": "Gabón", "codigo": "+241", "seleccionado": false },
            { "pais": "Gambia", "codigo": "+220", "seleccionado": false },
            { "pais": "Georgia", "codigo": "+995", "seleccionado": false },
            { "pais": "Ghana", "codigo": "+233", "seleccionado": false },
            //{ "pais": "Granada", "codigo": "+1-473", "seleccionado": false },
            { "pais": "Grecia", "codigo": "+30", "seleccionado": false },
            { "pais": "Guatemala", "codigo": "+502", "seleccionado": false },
            { "pais": "Guinea", "codigo": "+224", "seleccionado": false },
            { "pais": "Guinea Ecuatorial", "codigo": "+240", "seleccionado": false },
            { "pais": "Guinea-Bisáu", "codigo": "+245", "seleccionado": false },
            { "pais": "Guyana", "codigo": "+592", "seleccionado": false },
            { "pais": "Haití", "codigo": "+509", "seleccionado": false },
            { "pais": "Hungría", "codigo": "+36", "seleccionado": false },
            { "pais": "India", "codigo": "+91", "seleccionado": false },
            { "pais": "Indonesia", "codigo": "+62", "seleccionado": false },
            { "pais": "Irak", "codigo": "+964", "seleccionado": false },
            { "pais": "Irlanda", "codigo": "+353", "seleccionado": false },
            { "pais": "Islandia", "codigo": "+354", "seleccionado": false },
            { "pais": "Islas Marshall", "codigo": "+692", "seleccionado": false },
            { "pais": "Islas Salomón", "codigo": "+677", "seleccionado": false },
            { "pais": "Israel", "codigo": "+972", "seleccionado": false },
            { "pais": "Italia", "codigo": "+39", "seleccionado": false },
            { "pais": "Jamaica", "codigo": "+1", "seleccionado": false },
            { "pais": "Japón", "codigo": "+81", "seleccionado": false },
            { "pais": "Jordania", "codigo": "+962", "seleccionado": false },
            { "pais": "Kazajistán", "codigo": "+7", "seleccionado": false },
            { "pais": "Kenia", "codigo": "+254", "seleccionado": false },
            { "pais": "Kirguistán", "codigo": "+996", "seleccionado": false },
            { "pais": "Kiribati", "codigo": "+686", "seleccionado": false },
            { "pais": "Kuwait", "codigo": "+965", "seleccionado": false },
            { "pais": "Laos", "codigo": "+856", "seleccionado": false },
            { "pais": "Lesoto", "codigo": "+266", "seleccionado": false },
            { "pais": "Letonia", "codigo": "+371", "seleccionado": false },
            { "pais": "Líbano", "codigo": "+961", "seleccionado": false },
            { "pais": "Liberia", "codigo": "+231", "seleccionado": false },
            { "pais": "Libia", "codigo": "+218", "seleccionado": false },
            { "pais": "Liechtenstein", "codigo": "+423", "seleccionado": false },
            { "pais": "Lituania", "codigo": "+370", "seleccionado": false },
            { "pais": "Luxemburgo", "codigo": "+352", "seleccionado": false },
            { "pais": "Macedonia del Norte", "codigo": "+389", "seleccionado": false },
            { "pais": "Madagascar", "codigo": "+261", "seleccionado": false },
            { "pais": "Malasia", "codigo": "+60", "seleccionado": false },
            { "pais": "Malaui", "codigo": "+265", "seleccionado": false },
            { "pais": "Maldivas", "codigo": "+960", "seleccionado": false },
            { "pais": "Malí", "codigo": "+223", "seleccionado": false },
            { "pais": "Malta", "codigo": "+356", "seleccionado": false },
            { "pais": "Marruecos", "codigo": "+212", "seleccionado": false },
            { "pais": "Mauricio", "codigo": "+230", "seleccionado": false },
            { "pais": "Mauritania", "codigo": "+222", "seleccionado": false },
            { "pais": "México", "codigo": "+52", "seleccionado": false },
            { "pais": "Micronesia", "codigo": "+691", "seleccionado": false },
            { "pais": "Moldavia", "codigo": "+373", "seleccionado": false },
            { "pais": "Mónaco", "codigo": "+377", "seleccionado": false },
            { "pais": "Mongolia", "codigo": "+976", "seleccionado": false },
            { "pais": "Montenegro", "codigo": "+382", "seleccionado": false },
            { "pais": "Mozambique", "codigo": "+258", "seleccionado": false },
            { "pais": "Namibia", "codigo": "+264", "seleccionado": false },
            { "pais": "Nauru", "codigo": "+674", "seleccionado": false },
            { "pais": "Nepal", "codigo": "+977", "seleccionado": false },
            { "pais": "Nicaragua", "codigo": "+505", "seleccionado": false },
            { "pais": "Níger", "codigo": "+227", "seleccionado": false },
            { "pais": "Nigeria", "codigo": "+234", "seleccionado": false },
            { "pais": "Noruega", "codigo": "+47", "seleccionado": false },
            { "pais": "Nueva Zelanda", "codigo": "+64", "seleccionado": false },
            { "pais": "Omán", "codigo": "+968", "seleccionado": false },
            { "pais": "Países Bajos", "codigo": "+31", "seleccionado": false },
            { "pais": "Pakistán", "codigo": "+92", "seleccionado": false },
            { "pais": "Palaos", "codigo": "+680", "seleccionado": false },
            { "pais": "Panamá", "codigo": "+507", "seleccionado": false },
            { "pais": "Papúa Nueva Guinea", "codigo": "+675", "seleccionado": false },
            { "pais": "Paraguay", "codigo": "+595", "seleccionado": false },
            { "pais": "Perú", "codigo": "+51", "seleccionado": false },
            { "pais": "Polonia", "codigo": "+48", "seleccionado": false },
            { "pais": "Portugal", "codigo": "+351", "seleccionado": false },
            { "pais": "Reino Unido", "codigo": "+44", "seleccionado": false },
            { "pais": "República Centroafricana", "codigo": "+236", "seleccionado": false },
            { "pais": "República Checa", "codigo": "+420", "seleccionado": false },
            { "pais": "República Dominicana", "codigo": "+1", "seleccionado": false },
            { "pais": "Ruanda", "codigo": "+250", "seleccionado": false },
            { "pais": "Rumanía", "codigo": "+40", "seleccionado": false },
            { "pais": "Rusia", "codigo": "+7", "seleccionado": false },
            { "pais": "Samoa", "codigo": "+685", "seleccionado": false },
            //{ "pais": "San Cristóbal y Nieves", "codigo": "+1-869", "seleccionado": false },
            { "pais": "San Marino", "codigo": "+378", "seleccionado": false },
            //{ "pais": "San Vicente y las Granadinas", "codigo": "+1-784", "seleccionado": false },
            //{ "pais": "Santa Lucía", "codigo": "+1-758", "seleccionado": false },
            { "pais": "Santo Tomé y Príncipe", "codigo": "+239", "seleccionado": false },
            { "pais": "Senegal", "codigo": "+221", "seleccionado": false },
            { "pais": "Serbia", "codigo": "+381", "seleccionado": false },
            { "pais": "Seychelles", "codigo": "+248", "seleccionado": false },
            { "pais": "Sierra Leona", "codigo": "+232", "seleccionado": false },
            { "pais": "Singapur", "codigo": "+65", "seleccionado": false },
            { "pais": "Somalia", "codigo": "+252", "seleccionado": false },
            { "pais": "Sri Lanka", "codigo": "+94", "seleccionado": false },
            { "pais": "Sudáfrica", "codigo": "+27", "seleccionado": false },
            { "pais": "Sudán", "codigo": "+249", "seleccionado": false },
            { "pais": "Sudán del Sur", "codigo": "+211", "seleccionado": false },
            { "pais": "Suecia", "codigo": "+46", "seleccionado": false },
            { "pais": "Suiza", "codigo": "+41", "seleccionado": false },
            { "pais": "Surinam", "codigo": "+597", "seleccionado": false },
            { "pais": "Tailandia", "codigo": "+66", "seleccionado": false },
            { "pais": "Tanzania", "codigo": "+255", "seleccionado": false },
            { "pais": "Tayikistán", "codigo": "+992", "seleccionado": false },
            { "pais": "Timor Oriental", "codigo": "+670", "seleccionado": false },
            { "pais": "Togo", "codigo": "+228", "seleccionado": false },
            { "pais": "Tonga", "codigo": "+676", "seleccionado": false },
            { "pais": "Trinidad y Tobago", "codigo": "+1", "seleccionado": false },
            { "pais": "Túnez", "codigo": "+216", "seleccionado": false },
            { "pais": "Turkmenistán", "codigo": "+993", "seleccionado": false },
            { "pais": "Turquía", "codigo": "+90", "seleccionado": false },
            { "pais": "Tuvalu", "codigo": "+688", "seleccionado": false },
            { "pais": "Ucrania", "codigo": "+380", "seleccionado": false },
            { "pais": "Uganda", "codigo": "+256", "seleccionado": false },
            { "pais": "Uruguay", "codigo": "+598", "seleccionado": false },
            { "pais": "Uzbekistán", "codigo": "+998", "seleccionado": false },
            { "pais": "Vanuatu", "codigo": "+678", "seleccionado": false },
            { "pais": "Venezuela", "codigo": "+58", "seleccionado": false },
            { "pais": "Vietnam", "codigo": "+84", "seleccionado": false },
            { "pais": "Yemen", "codigo": "+967", "seleccionado": false },
            { "pais": "Yibuti", "codigo": "+253", "seleccionado": false },
            { "pais": "Zambia", "codigo": "+260", "seleccionado": false },
            { "pais": "Zimbabue", "codigo": "+263", "seleccionado": false }
         ];

         var buttons_controlador = [];

         var ID_PLANTILLA_SELECCIONADO = "";
         var INFORMACION_PLANTILLA_HEADER = ""; //esta variable la cree para tener la base 64 cuando es header y es tipo imagen, documento, video. tomo su base 64
         var INFORMACION_PLANTILLA_HEADER_EXTENSION = ""; //esta variable la cree para tener la base 64 cuando sea header tener el tipo de documento

         var TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID = null;
         var HTML_SELECT_HEADER_ACCOUNT = null;
 

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

         var TEXTO_BODY_VISTA_PREVIA_DEFAULT = "{{1}} is your verification code.";

         cargar_listado_configuracion_tipo_whatsapp_o_sms().then((data) => {
               listado_configuraciones = data;
                
         
               if (listado_configuraciones.length != 0) {
                  LISTADO_CONFIGURACIONES_PREDETERMINADO_ID =
                     listado_configuraciones[0].id;
               }

               //console.log(listado_configuraciones);

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

               listado_configuraciones.forEach((element) => {
                  let value = element["id"];
                  let text = element["identifier"];
                  let token = element["token"];
                  let whatsapp_business_account_identifier =
                     element["whatsapp_business_account_identifier"];
                  let version = element["version"];
                  html_config +=
                     '<option value="' +
                     value +
                     '" data-token="' +
                     token +
                     '" data-whatsapp_business_account_identifier="' +
                     whatsapp_business_account_identifier +
                     '" data-version="' +
                     version +
                     '">' +
                     text +
                     "</option>";
               });
 
               $(".tener_configuracion").html(html_config);

               html_config_idiomas = "";

               idiomas.forEach((element) => {
                  let value = element["codigo"];
                  let text = element["nombre"] + " (" + value + ")";
                 
                  html_config_idiomas +=
                     '<option value="' +
                     value +
                     '">' +
                     text +
                     "</option>";
               });

               $(".tener_input_lenguaje_plantilla").html(html_config_idiomas);  

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

          //tener_input_lenguaje_plantilla
          //plantilla_option_select_combo
 

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

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

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

               $(".tbody_plantillasWhatsapp").html(
                  tener_mensajes_de_plantillas(informacion_filtrada),
               );
               plantilla_seleccionadaWhatsapp();
            }
         });

          

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

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

               if (info) {
                  if (info.status != "APPROVED") {
                     Swal.fire("This template is not active");

                     return;
                  }

                  ID_PLANTILLA_SELECCIONADO = dataId;

                  $(".btn_enviar_plantilla").attr(
                     "data-namcespaces",
                     namcespaces,
                  );

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

                  let pais = idiomas.find(
                     (data) => data.codigo == info.language,
                  );

                  $("#input_lenguaje_plantilla").val(pais.nombre);

                  const components = info.components || [];

                  var existeHeaders = false;

                  //HEADER INFORMACION
                  //header
                  $("#input_header_plantilla").val("None");
                  $(".contenido_principal_header").html("");

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

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

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

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

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

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

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

                  var existeHeaderDiferenteTexto = false;

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

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

                        let formato_minuscula = format.toLowerCase();

                        if (formato_minuscula == "text") {
                           //poner tipo de plantilla imagen, texto, documentos o videos
                           $("#input_header_plantilla").val(tempo_formt);

                           const htmlContent =
                              "<label>Header content</label>" +
                              '<textarea id="texto_textarea_header" class="form-control form-control-sm" disabled>' +
                              text +
                              "</textarea>";

                           $(".contenido_principal_header").html(htmlContent);

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

                           adjustHeightTexto_TextArea_HeaderWhatsapp();

                           if (example != null || example != undefined) {
                              //console.log("CANTIDAD DE PARAMETROS:");
                              //console.log(countNestedElements(example));
                              let cantidad_parametros =
                                 countNestedElements(example);

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

                              for (let i = 1; i <= cantidad_parametros; i++) {
                                 //html_input += "<div class='col-12 col-sm-6 col-md-6 col-lg-6' >";

                                 html_input +=
                                    "<div class='col-12 col-sm-6 col-md-8 col-lg-8 mb-3'>" +
                                    "<label style='margin-top:12px;' id='texto_label_plantilla_header_" +
                                    i +
                                    "' data-id='" +
                                    i +
                                    "'>" +
                                    "Field {{ " +
                                    i +
                                    " }} <span style='color: red; font-size: 10px;'>* Field is required</span>" +
                                    "</label>" +
                                    "<input id='texto_input_plantilla_header_" +
                                    i +
                                    "' data-id='" +
                                    i +
                                    "' class='form-control form-control-sm color-error tamano_input' />" +
                                    "</div>" +
                                    //este es todo el select
                                    "<div class='col-12 col-sm-6 col-md-4 col-lg-4 mb-3'>" +
                                    "<label style='margin-top:12px;'>Variable {{ " +
                                    i +
                                    " }}</label>" +
                                    "<select id='select_plantilla_header_" +
                                    i +
                                    "' data-id='" +
                                    i +
                                    "' class='form-control form-control-sm tamano_input'>" +
                                    HTML_SELECT_HEADER_ACCOUNT +
                                    "</select>" +
                                    "</div>";
                              }

                              html_input += "</div>";

                              $(".contenido_principal_header").append(
                                 html_input,
                              );

                              //let prueba = "Hola como  {{1}} mi nombre";
                              //text = text + " cesar {{2}} jaj";

                              updateTextWhatsapp(text, 0);

                              $(".contenido_principal_header").on(
                                 "input",
                                 "input[id^='texto_input_plantilla_header_']",
                                 function () {
                                    const value = $(this).val();
                                    const dataId = $(this).data("id");
                                    //console.log(`Value for input with data-id ${dataId}: ${value}`,);

                                    let selectDB = $(
                                       "#select_plantilla_header_" + dataId,
                                    ).val();

                                    updateTextWhatsapp(text, selectDB);

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

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

                                    //console.log(updatedText);

                                    /*
                                             let prueba = "Hola como {{1}} mi nombre";
                                             let placeholder = "{{1}}";
                                             // Escapar caracteres especiales en el placeholder
                                             let escapedPlaceholder = placeholder.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
                                             // Crear un nuevo RegExp usando el placeholder escapado
                                             let regex = new RegExp(escapedPlaceholder, 'g');
                                             // Realizar el reemplazo
                                             let updatedText = prueba.replace(regex, "cesar");
                                             console.log("Updated string:", updatedText);

                                             */
                                 },
                              );

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

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

                                    let input = $(
                                       "#texto_input_plantilla_header_" +
                                          dataId,
                                    );

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

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

                                       updateTextWhatsapp(text, "0");
                                    } else {
                                       // Si el campo tiene valor, mostrar solo el texto del label
                                       label.html("Field {{ " + dataId + " }}");
                                       input.removeClass("color-error");
                                       updateTextWhatsapp(text, selectedValue);
                                    }
                                 },
                              );
                           }
                        }

                        if (formato_minuscula == "image") {
                           existeHeaderDiferenteTexto = true;
                           //poner tipo de plantilla imagen, texto, documentos o videos
                           $("#input_header_plantilla").val(tempo_formt);

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

                           seleccionar_archivo_plantilla_headersWhatsapp(
                              formato_minuscula,
                              "image/jpeg, image/png",
                           );
                        }

                        if (formato_minuscula == "document") {
                           existeHeaderDiferenteTexto = true;
                           //poner tipo de plantilla imagen, texto, documentos o videos
                           $("#input_header_plantilla").val(tempo_formt);

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

                           seleccionar_archivo_plantilla_headersWhatsapp(
                              formato_minuscula,
                              ".pdf",
                           );
                        }

                        if (formato_minuscula == "video") {
                           existeHeaderDiferenteTexto = true;
                           //poner tipo de plantilla imagen, texto, documentos o videos
                           $("#input_header_plantilla").val(tempo_formt);

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

                           seleccionar_archivo_plantilla_headersWhatsapp(
                              formato_minuscula,
                              "video/mp4, video/3gpp",
                           );
                        }

                        if (formato_minuscula == "location") {
                           existeHeaderDiferenteTexto = true;
                           $("#input_header_plantilla").val(tempo_formt);

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

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

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

                           let arr = [
                              "Latitude",
                              "Longitud",
                              "Addresses",
                              "Name",
                           ];

                           let htmlContent = "";

                           for (let i = 0; i < arr.length; i++) {
                              let elemento = arr[i];

                              let estilo = "";
                              if (i != 0) {
                                 estilo = "style='margin-top:12px;'";
                              }

                              htmlContent +=
                                 "<label id='texto_label_plantilla_header_location_" +
                                 i +
                                 "' " +
                                 estilo +
                                 ">" +
                                 elemento +
                                 " <span style='color: red; font-size: 10px;'>* Field is required</span></label>" +
                                 '<input id="texto_input_location_header_' +
                                 i +
                                 '" data-name="' +
                                 elemento +
                                 '" data-id="' +
                                 i +
                                 '" class="form-control form-control-sm color-error tamano_input">';
                           }

                           $(".contenido_principal_header").html(htmlContent);

                           $(".contenido_principal_header").on(
                              "input",
                              "input[id^='texto_input_location_header_']",
                              function () {
                                 const value = $(this).val();
                                 const dataName = $(this).data("name");
                                 const dataId = $(this).data("id");

                                 if (dataName == "Name") {
                                    $(".p_headers_name_location").text(value);
                                 }

                                 if (dataName == "Addresses") {
                                    $(".p_headers_address_location").text(
                                       value,
                                    );
                                 }

                                 var label = $(
                                    "#texto_label_plantilla_header_location_" +
                                       dataId,
                                 );

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

                     if (type == "BODY") {
                        $("#texto_body_plantilla_previa").text(text);

                        $(".contenido_principal_body").html("");
                        var html_input =
                           "<label>Body content</label>" +
                           '<textarea id="texto_textarea_body" class="form-control form-control-sm" disabled></textarea>';

                        // Inserta el contenido HTML en el div
                        $(".contenido_principal_body").html(html_input);

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

                        setTimeout(function () {
                           var textArea = $("#texto_textarea_body");
                           textArea.css("height", "auto");

                           // Obtiene el scrollHeight
                           var scrollHeight = textArea[0].scrollHeight;

                           textArea.css("height", scrollHeight + "px");
                           //adjustHeightTexto_TextArea_BodyWhatsapp(text);
                        }, 100);

                        if (example != null || example != undefined) {
                           //console.log("CANTIDAD DE PARAMETROS BODY:");
                           //console.log(countNestedElements(example));
                           let cantidad_parametros =
                              countNestedElements(example);

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


                           //QUE ONDA LOCO
                           for (let i = 1; i <= cantidad_parametros; i++) {
                              html_input +=
                                 "<div class='col-12 col-sm-6 col-md-8 col-lg-8 mb-3'>" +
                                 "<label style='margin-top:12px;' id='texto_label_plantilla_body_" +
                                 i +
                                 "' data-id='" +
                                 i +
                                 "'>Field {{ " +
                                 i +
                                 " }}  <span style='color: red; font-size: 10px;'>* Field is required</span></label>" +
                                 "<input id='texto_input_plantilla_body_" +
                                 i +
                                 "' data-id='" +
                                 i +
                                 "' class='form-control form-control-sm color-error tamano_input'>" +
                                 "</input>" +
                                 "</div>" +
                                 "<div class='col-12 col-sm-6 col-md-4 col-lg-4 mb-3'>" +
                                 "<label style='margin-top:12px;'>Variable {{ " +
                                 i +
                                 " }}</label>" +
                                 "<select id='select_plantilla_body_" +
                                 i +
                                 "' data-id='" +
                                 i +
                                 "' class='form-control form-control-sm tamano_input'>" +
                                 HTML_SELECT_HEADER_ACCOUNT +
                                 "</select>" +
                                 "</div>";
                           }

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

                           updateTextBodyWhatsapp(text);

                           $(".contenido_principal_body").on(
                              "input",
                              "input[id^='texto_input_plantilla_body_']",
                              function () {
                                 const value = $(this).val();
                                 const dataId = $(this).data("id");
                                 //console.log( `Value for input with data-id ${dataId}: ${value}`,);

                                 updateTextBodyWhatsapp(text);

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

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

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

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

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

                                 let input = $(
                                    "#texto_input_plantilla_body_" + dataId,
                                 );

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

                                 let value = input.val();

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

                                    updateTextSelectBodyWhatsapp(text);
                                 } else {
                                    // Si el campo tiene valor, mostrar solo el texto del label
                                    label.html("Field {{ " + dataId + " }}");
                                    input.removeClass("color-error");
                                    updateTextSelectBodyWhatsapp(text);
                                 }
                              },
                           );
                           //FIN BODY
                        }
                     }

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

                        $("#texto_textarea_footer").val(text);
                        $("#texto_textarea_footer").text(text);

                        setTimeout(function () {
                           var textArea = $("#texto_textarea_footer");
                           textArea.css("height", "auto");

                           // Obtiene el scrollHeight
                           var scrollHeight = textArea[0].scrollHeight;

                           textArea.css("height", scrollHeight + "px");
                        }, 100);

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

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

                        $(".contenido_principal_buttons").html("");

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

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

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

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

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

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

                           // Genera el HTML para los inputs
                           html_input_buttons +=
                              '<label style="margin-top: 10px">Type Buttons</label>' +
                              '<input type="text" class="form-control form-control-sm tamano_input" value="' +
                              typeButtonValue +
                              '" disabled />' +
                              '<label style="margin-top: 10px">Text Buttons</label>' +
                              '<input type="text" class="form-control form-control-sm tamano_input" value="' +
                              textButtonValue +
                              '" disabled />' +
                              '<label style="margin-top: 10px">Value Buttons</label>' +
                              '<input type="text" class="form-control form-control-sm tamano_input" 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 tamano_input" id="input_buttons_plantilla_' +
                                 index +
                                 '" data-id="' +
                                 index +
                                 '"/>';
                           }

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

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

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

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

                        $(".contenido_principal_buttons").on(
                           "input",
                           "input[id^='input_buttons_plantilla_']",
                           function () {
                              const value = $(this).val();
                              const dataId = $(this).data("id");
                              /* console.log(
                                          `Value for input with data-id ${dataId}: ${value}`,
                                       ); */

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

                              if (
                                 value == "" ||
                                 value == null ||
                                 value == undefined
                              ) {
                                 // Si el campo está vacío, mostrar el placeholder en el label
                                 ///label.css("color", "red");
                                 label.html(
                                    'Field <span style="color: red; font-size: 10px;">* Required</span>',
                                 );

                                 $(this).addClass("color-error");
                              } else {
                                 // Si el campo tiene valor, mostrar solo el texto del label
                                 //label.html("Field Required");
                                 //label.css("color", "none");
                                 label.html(
                                    'Field <span style="font-size: 10px;">* Required</span>',
                                 );

                                 $(this).removeClass("color-error");
                              }
                           },
                        );

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

                  if (existeHeaderDiferenteTexto == true) {
                     Swal.fire(
                        "This template contains a header that is different from the text",
                     );
                     return;
                  }
                  
                  BTN_PLANTILLA_MODIFICADA = true;

                  //input_header_plantilla
               }

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

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

         function cargar_plantilla(
            namcespaces,
            dataId,
            template_original,
            template_data,
         ) {
            //console.log("template_data");
            //console.log(template_data);

            ID_PLANTILLA_SELECCIONADO = dataId;

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

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

               ID_PLANTILLA_SELECCIONADO = dataId;

               $(".btn_enviar_plantilla").attr("data-namcespaces", namcespaces);

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

               let pais = idiomas.find((data) => data.codigo == info.language);

               $("#input_lenguaje_plantilla").val(pais.nombre);

               const components = template_original.components || [];

               var existeHeaders = false;

               //HEADER INFORMACION
               //header
               $("#input_header_plantilla").val("None");
               $(".contenido_principal_header").html("");

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

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

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

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

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

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

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

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

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

                     let formato_minuscula = format.toLowerCase();

                     if (formato_minuscula == "text") {
                        //poner tipo de plantilla imagen, texto, documentos o videos
                        $("#input_header_plantilla").val(tempo_formt);

                        const htmlContent =
                           "<label>Header content</label>" +
                           '<textarea id="texto_textarea_header" class="form-control form-control-sm" disabled>' +
                           text +
                           "</textarea>";

                        $(".contenido_principal_header").html(htmlContent);

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

                        adjustHeightTexto_TextArea_HeaderWhatsapp();

                        if (example != null || example != undefined) {
                           //console.log("CANTIDAD DE PARAMETROS:");
                           //console.log(countNestedElements(example));
                           let cantidad_parametros =
                              countNestedElements(example);

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

                           let index_auto = 1;
                           let {
                              type,
                              contenido,
                              campoBD = "0",
                              format,
                              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,
                                 extension,
                                 lati,
                                 lon,
                                 address,
                                 name,
                              } = template_data_header);

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

                           let iniciar_texto = "";

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

                              //console.log(iniciar_texto);
                           }

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

                           for (let i = 0; i < cantidad_parametros; i++) {
                              //html_input += "<div class='col-12 col-sm-6 col-md-6 col-lg-6' >";

                              html_input +=
                                 "<div class='col-12 col-sm-6 col-md-8 col-lg-8 mb-3'>" +
                                 "<label style='margin-top:12px;' id='texto_label_plantilla_header_" +
                                 index_auto +
                                 "' data-id='" +
                                 index_auto +
                                 "'>" +
                                 "Field {{ " +
                                 index_auto +
                                 " }} " +
                                 //"<span style='color: red; font-size: 10px;'>* Field is required</span>" +
                                 "</label>" +
                                 "<input id='texto_input_plantilla_header_" +
                                 index_auto +
                                 "' data-id='" +
                                 index_auto +
                                 "' class='form-control form-control-sm tamano_input ' value='" +
                                 iniciar_texto +
                                 "' />" +
                                 "</div>" +
                                 //este es todo el select
                                 "<div class='col-12 col-sm-6 col-md-4 col-lg-4 mb-3'>" +
                                 "<label style='margin-top:12px;'>Variable {{ " +
                                 index_auto +
                                 " }}</label>" +
                                 "<select id='select_plantilla_header_" +
                                 index_auto +
                                 "' data-id='" +
                                 index_auto +
                                 "' class='form-control form-control-sm tamano_input'>" +
                                 select_cabeceras_grupos_campo_activo(
                                    listado_cabecera_account,
                                    campoBD,
                                 ) +
                                 "</select>" +
                                 "</div>";

                              index_auto++;
                           }

                           html_input += "</div>";

                           $(".contenido_principal_header").append(html_input);

                           //let prueba = "Hola como  {{1}} mi nombre";
                           //text = text + " cesar {{2}} jaj";

                           updateTextWhatsapp(text, campoBD);

                           $(".contenido_principal_header").on(
                              "input",
                              "input[id^='texto_input_plantilla_header_']",
                              function () {
                                 const value = $(this).val();
                                 const dataId = $(this).data("id");
                                 //console.log(`Value for input with data-id ${dataId}: ${value}`,);

                                 let selectDB = $(
                                    "#select_plantilla_header_" + dataId,
                                 ).val();

                                 updateTextWhatsapp(text, selectDB);

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

                                 let select = $(
                                    "#select_plantilla_header_" + dataId,
                                 ).val();

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

                                 //console.log(updatedText);

                                 /*
                                             let prueba = "Hola como {{1}} mi nombre";
                                             let placeholder = "{{1}}";
                                             // Escapar caracteres especiales en el placeholder
                                             let escapedPlaceholder = placeholder.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
                                             // Crear un nuevo RegExp usando el placeholder escapado
                                             let regex = new RegExp(escapedPlaceholder, 'g');
                                             // Realizar el reemplazo
                                             let updatedText = prueba.replace(regex, "cesar");
                                             console.log("Updated string:", updatedText);

                                             */
                              },
                           );

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

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

                                 let input = $(
                                    "#texto_input_plantilla_header_" + dataId,
                                 );

                                 //console.log(URL_QUALIFY);
                                 //console.log(selectedValue);

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

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

                                    updateTextWhatsapp(text, "0");
                                 } else {
                                    // Si el campo tiene valor, mostrar solo el texto del label
                                    label.html("Field {{ " + dataId + " }}");
                                    input.removeClass("color-error");
                                    updateTextWhatsapp(text, selectedValue);
                                 }
                              },
                           );
                        }
                     }

                     if (formato_minuscula == "image") {
                        //poner tipo de plantilla imagen, texto, documentos o videos
                        $("#input_header_plantilla").val(tempo_formt);

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

                        seleccionar_archivo_plantilla_headersWhatsapp(
                           formato_minuscula,
                           "image/jpeg, image/png",
                        );
                     }

                     if (formato_minuscula == "document") {
                        //poner tipo de plantilla imagen, texto, documentos o videos
                        $("#input_header_plantilla").val(tempo_formt);

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

                        seleccionar_archivo_plantilla_headersWhatsapp(
                           formato_minuscula,
                           ".pdf",
                        );
                     }

                     if (formato_minuscula == "video") {
                        //poner tipo de plantilla imagen, texto, documentos o videos
                        $("#input_header_plantilla").val(tempo_formt);

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

                        seleccionar_archivo_plantilla_headersWhatsapp(
                           formato_minuscula,
                           "video/mp4, video/3gpp",
                        );
                     }

                     if (formato_minuscula == "location") {
                        $("#input_header_plantilla").val(tempo_formt);

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

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

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

                        let arr = ["Latitude", "Longitud", "Addresses", "Name"];

                        let htmlContent = "";

                        for (let i = 0; i < arr.length; i++) {
                           let elemento = arr[i];

                           let estilo = "";
                           if (i != 0) {
                              estilo = "style='margin-top:12px;'";
                           }

                           htmlContent +=
                              "<label id='texto_label_plantilla_header_location_" +
                              i +
                              "' " +
                              estilo +
                              ">" +
                              elemento +
                              " <span style='color: red; font-size: 10px;'>* Field is required</span></label>" +
                              '<input id="texto_input_location_header_' +
                              i +
                              '" data-name="' +
                              elemento +
                              '" data-id="' +
                              i +
                              '" class="form-control form-control-sm color-error tamano_input">';
                        }

                        $(".contenido_principal_header").html(htmlContent);

                        $(".contenido_principal_header").on(
                           "input",
                           "input[id^='texto_input_location_header_']",
                           function () {
                              const value = $(this).val();
                              const dataName = $(this).data("name");
                              const dataId = $(this).data("id");

                              if (dataName == "Name") {
                                 $(".p_headers_name_location").text(value);
                              }

                              if (dataName == "Addresses") {
                                 $(".p_headers_address_location").text(value);
                              }

                              var label = $(
                                 "#texto_label_plantilla_header_location_" +
                                    dataId,
                              );

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

                  if (type == "BODY") {
                     $("#texto_body_plantilla_previa").text(text);

                     $(".contenido_principal_body").html("");
                     var html_input =
                        "<label>Body content</label>" +
                        '<textarea id="texto_textarea_body" class="form-control form-control-sm" disabled></textarea>';

                     // Inserta el contenido HTML en el div
                     $(".contenido_principal_body").html(html_input);

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

                     setTimeout(function () {
                        var textArea = $("#texto_textarea_body");
                        textArea.css("height", "auto");

                        // Obtiene el scrollHeight
                        var scrollHeight = textArea[0].scrollHeight;

                        textArea.css("height", scrollHeight + "px");
                        //adjustHeightTexto_TextArea_BodyWhatsapp(text);
                     }, 100);

                     if (example != null || example != undefined) {
                        //console.log("CANTIDAD DE PARAMETROS BODY:");
                        //console.log(countNestedElements(example));
                        let cantidad_parametros = countNestedElements(example);

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

                        let index_auto = 1;

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

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

                        let { buscar = "0", texto, campoBD } = {};

                        for (let i = 0; i < cantidad_parametros; i++) {
                           //console.log({ buscar, texto, campoBD });

                           let iniciar_texto = "";

                           if (template_data_body.length > 0) {
                              ({ buscar, texto, campoBD } =
                                 template_data_body[i]);

                              if (campoBD == "0" || campoBD == 0) {
                                 iniciar_texto = texto;
                              } else {
                                 iniciar_texto =
                                    reemplazarComodinPorTextSinConcatenar(
                                       texto,
                                       buscar,
                                       "",
                                    );

                                 //console.log(iniciar_texto);
                              }
                           }

                           html_input +=
                              "<div class='col-12 col-sm-6 col-md-8 col-lg-8 mb-3'>" +
                              "<label style='margin-top:12px;' id='texto_label_plantilla_body_" +
                              index_auto +
                              "' data-id='" +
                              index_auto +
                              "'>Field {{ " +
                              index_auto +
                              " }}" +
                              //  " <span style='color: red; font-size: 10px;'>* Field is required</span>" +
                              "</label>" +
                              "<input id='texto_input_plantilla_body_" +
                              index_auto +
                              "' data-id='" +
                              index_auto +
                              "' class='form-control form-control-sm tamano_input' value='" +
                              iniciar_texto +
                              "' >" +
                              "</input>" +
                              "</div>" +
                              "<div class='col-12 col-sm-6 col-md-4 col-lg-4 mb-3'>" +
                              "<label style='margin-top:12px;'>Variable {{ " +
                              index_auto +
                              " }}</label>" +
                              "<select id='select_plantilla_body_" +
                              index_auto +
                              "' data-id='" +
                              index_auto +
                              "' class='form-control form-control-sm tamano_input'>" +
                              select_cabeceras_grupos_campo_activo(
                                 listado_cabecera_account,
                                 campoBD == undefined || campoBD == null
                                    ? "0"
                                    : campoBD,
                              ) +
                              "</select>" +
                              "</div>";

                           index_auto++;
                        }

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

                        updateTextBodyWhatsapp(text);

                        $(".contenido_principal_body").on(
                           "input",
                           "input[id^='texto_input_plantilla_body_']",
                           function () {
                              const value = $(this).val();
                              const dataId = $(this).data("id");
                              //console.log( `Value for input with data-id ${dataId}: ${value}`,);

                              updateTextBodyWhatsapp(text);

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

                              let select = $(
                                 "#select_plantilla_body_" + dataId,
                              ).val();

                              //console.log(select);

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

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

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

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

                              let input = $(
                                 "#texto_input_plantilla_body_" + dataId,
                              );

                              //console.log(URL_QUALIFY);
                              //console.log(selectedValue);

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


                              let value = input.val();

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

                                 updateTextSelectBodyWhatsapp(text);
                              } else {
                                 // Si el campo tiene valor, mostrar solo el texto del label
                                 label.html("Field {{ " + dataId + " }}");
                                 input.removeClass("color-error");
                                 updateTextSelectBodyWhatsapp(text);
                              }
                           },
                        );
                        //FIN BODY
                     }
                  }

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

                     $("#texto_textarea_footer").val(text);
                     $("#texto_textarea_footer").text(text);

                     setTimeout(function () {
                        var textArea = $("#texto_textarea_footer");
                        textArea.css("height", "auto");

                        // Obtiene el scrollHeight
                        var scrollHeight = textArea[0].scrollHeight;

                        textArea.css("height", scrollHeight + "px");
                     }, 100);

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

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

                     $(".contenido_principal_buttons").html("");

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

                     let template_data_buttons = template_data.filter(
                        (data) => data.type == "BUTTONS",
                     );

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

                        //console.log(
                        //   "template_data_buttons.botones_con_parametros",
                        //);
                        //console.log(
                        //   template_data_buttons.botones_con_parametros,
                        //);
                     }

                     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 tamano_input" value="' +
                           typeButtonValue +
                           '" disabled />' +
                           '<label style="margin-top: 10px">Text Buttons</label>' +
                           '<input type="text" class="form-control form-control-sm tamano_input" value="' +
                           textButtonValue +
                           '" disabled />' +
                           '<label style="margin-top: 10px">Value Buttons</label>' +
                           '<input type="text" class="form-control form-control-sm tamano_input" value="' +
                           valueButtonValue +
                           '" disabled />';
                        //juana
                        if (required != null || required != undefined) {
                           let value_button = "";

                           if (
                              template_data_buttons.botones_con_parametros
                                 .length > 0
                           ) {
                              let existe_value =
                                 template_data_buttons.botones_con_parametros.find(
                                    (data) => data.index == index,
                                 );

                              if (existe_value) {
                                 value_button = existe_value.texto;
                              }
                           }

                           //console.log(required);
                           html_input_buttons +=
                              '<label  id="label_buttons_plantilla_' +
                              index +
                              '" style="margin-top: 10px;">Field </label></label>' +
                              '<input type="text" class="form-control form-control-sm  tamano_input" value="' +
                              value_button +
                              '" id="input_buttons_plantilla_' +
                              index +
                              '" data-id="' +
                              index +
                              '"/>';
                        }

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

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

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

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

                     $(".contenido_principal_buttons").on(
                        "input",
                        "input[id^='input_buttons_plantilla_']",
                        function () {
                           const value = $(this).val();
                           const dataId = $(this).data("id");
                           /* console.log(
                                          `Value for input with data-id ${dataId}: ${value}`,
                                       ); */

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

                           if (
                              value == "" ||
                              value == null ||
                              value == undefined
                           ) {
                              // Si el campo está vacío, mostrar el placeholder en el label
                              ///label.css("color", "red");
                              label.html(
                                 'Field <span style="color: red; font-size: 10px;">* Required</span>',
                              );

                              $(this).addClass("color-error");
                           } else {
                              // Si el campo tiene valor, mostrar solo el texto del label
                              //label.html("Field Required");
                              //label.css("color", "none");
                              label.html(
                                 'Field <span style="font-size: 10px;">* Required</span>',
                              );

                              $(this).removeClass("color-error");
                           }
                        },
                     );

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

               $(".configuracion_plantilla").show();
               //input_header_plantilla
            } else {
               Swal.fire("Error the template is no longer available");
               $(".configuracion_plantilla").hide();
            }

            //$(".informacion_tabla").hide();

            //$(".retroceder_listado_plantilla").show();

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

         function updateTextWhatsapp(prueba, isNone = "") {
            let updatedText = prueba;

            $("input[id^='texto_input_plantilla_header_']").each(function () {
               const value = $(this).val();
               const dataId = $(this).data("id");
               const placeholder = "{{" + dataId + "}}";

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

               // Reemplazar el placeholder con el valor o mantener el placeholder si el valor está vacío
               /*  updatedText = updatedText.replace(
                           regex,
                           isNone == "0" || isNone == 0
                              ? value
                              : value + placeholder || placeholder,
                        ); */
               if (isNone == "0" || isNone == 0) {
                  updatedText = updatedText.replace(
                     regex,
                     value || placeholder,
                  );
               } else {
                  updatedText = updatedText.replace(
                     regex,
                     value + placeholder || placeholder,
                  );
               }
            });

            $("#texto_header_plantilla_previa").text(updatedText);
         }

         function updateTextBodyWhatsapp(miTexto) {
            let updatedText = miTexto;

            $("input[id^='texto_input_plantilla_body_']").each(function () {
               const value = $(this).val();
               const dataId = $(this).data("id");
               const placeholder = "{{" + dataId + "}}";

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

               let isNoneSelect = $("#select_plantilla_body_" + dataId).val();

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

            $("#texto_body_plantilla_previa").text(updatedText);
         }

         function updateTextSelectBodyWhatsapp(miTexto) {
            let updatedText = miTexto;

            $("input[id^='texto_input_plantilla_body_']").each(function () {
               const value = $(this).val();
               const dataId = $(this).data("id");
               const placeholder = "{{" + dataId + "}}";

               let isNoneSelect = $("#select_plantilla_body_" + dataId).val();

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

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

            $("#texto_body_plantilla_previa").text(updatedText);
         }

         function adjustHeightTexto_TextArea_HeaderWhatsapp() {
            const textarea = document.getElementById("texto_textarea_header");

            textarea.addEventListener("input", () => {
               // Reset the height to auto to shrink the textarea if necessary
               textarea.style.height = "auto";
               // Set the height to scrollHeight to expand to fit the content
               textarea.style.height = textarea.scrollHeight + "px";

               const currentText = textarea.value;
               //console.log("Current text:", currentText);
               
               $(".plantilla-header").html(
                  '<p id="texto_header_plantilla_previa">' +
                     currentText +
                     "</p>",
               );


            });

            // Initialize height on page load
            textarea.style.height = "auto";
            textarea.style.height = textarea.scrollHeight + "px";
         }

         function adjustHeightTexto_TextArea_BodyWhatsapp(text) {
            const textarea = document.getElementById("texto_textarea_body");

            // Define a function to adjust the height
            const adjustHeight = () => {
               textarea.value = text; // Asigna el texto al textarea

               textarea.style.height = "auto";
               textarea.style.height = textarea.scrollHeight + "px";

               textarea.value = text; // Asigna el texto al textarea
            };

            // Adjust height on input
            textarea.addEventListener("input", adjustHeight);

            // Initialize height on page load
            adjustHeight();
         }

         function seleccionar_archivo_plantilla_headersWhatsapp(
            tipo_documento,
            tipo_archivo,
         ) {
            const htmlContent =
               "<label>Open file " + tipo_archivo + " </label>" +
               '<input type="file" class="form-control form-control-sm tamano_input" placeholder="Select a file" id="archivo_plantilla_header" />';

            $(".contenido_principal_header").html(htmlContent);

            const inputFile = document.getElementById(
               "archivo_plantilla_header",
            );
            inputFile.accept = tipo_archivo;

            // Agregar un listener para manejar el archivo seleccionado
            inputFile.addEventListener("change", function () {
               const file = inputFile.files[0];
               if (file) {
                  const reader = new FileReader();
                  reader.onload = function (event) {
                     //const base64String = event.target.result.split(",")[1]; // Eliminar el prefijo de datos
                     //const base64Url = `data:${file.type};base64,${base64String}`;

                     let outputHtml = "";

                     const base64String = reader.result
                        .replace("data:", "")
                        .replace(/^.+,/, "");

                     let htmlToInsert = "";

                     //console.log(base64String);

                     INFORMACION_PLANTILLA_HEADER = base64String;

                     INFORMACION_PLANTILLA_HEADER_EXTENSION = file.type;

                     if (file.type.startsWith("image/")) {
                        htmlToInsert =
                           '<div class="contenedor_header_plantilla">' +
                           '<img src="data:' +
                           file.type +
                           ";base64," +
                           base64String +
                           '" alt="Selected Image" style="max-width: 100%; height: 180px; object-fit: contain; border-radius: 5px;">' +
                           "</div>";
                     } else if (file.type === "application/pdf") {
                        htmlToInsert =
                           '<div class="contenedor_header_plantilla">' +
                           '<iframe src="data:' +
                           file.type +
                           ";base64," +
                           base64String +
                           '" style="width: 100%; height: 180px;" frameborder="0"></iframe>' +
                           "</div>";
                     } else if (file.type.startsWith("video/")) {
                        htmlToInsert =
                           '<div class="contenedor_header_plantilla" style="min-height: 0px;">' +
                           '<video controls style="width: 100%; height: auto; border-radius: 5px;">' +
                           '<source src="data:' +
                           file.type +
                           ";base64," +
                           base64String +
                           '" type="' +
                           file.type +
                           '">' +
                           "Your browser does not support the video tag." +
                           "</video>" +
                           "</div>";
                     }
                     $(".plantilla-header").html(htmlToInsert);
                  };

                  reader.readAsDataURL(file);
               }
            });
         }

      
         async function cargar_listado_configuracion_tipo_whatsapp_o_sms() {
            return new Promise((resolve, reject) => {
               $.get(
                  URL_BASE + "social/lista-configuracion-whatsapp-activo/",
                  function (data) {
                     try {
                        let info = JSON.parse(data);
                        resolve(info.data);
                     } catch (error) {
                        console.log(
                           "Error al parsear la respuesta cargar_listado_configuracion_tipo_whatsapp_o_sms: " +
                              error.message,
                        );
                        reject({
                           type: "error",
                           data: {},
                        });
                     }
                  },
               ).fail(function (jqXHR, textStatus, errorThrown) {
                  console.log(
                     "Error en la solicitud cargar_listado_configuracion_tipo_whatsapp_o_sms: " +
                        textStatus +
                        " - " +
                        errorThrown,
                  );
                  reject({
                     type: "error",
                     data: {},
                  });
               });
            });
         }

      
         async function generar_plantilla_whatsapp(info, namcespaces) {
            let configuracion_id = $(".tener_configuracion").val();

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

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

               TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID = configuracion_id;

               var enviar_informacion = {
                  tipo_usuario: ROLL_USERS,
                  configuracion_id: configuracion_id,
                  namespaces: namcespaces,
                  name: info.name,
                  language: info.language,
                  components: [],
                  plantilla_original: "",
                  plantilla_original_full: info,
                  users_id: 1,
                  configuracion_whatsapp_sms_id: configuracion_id,
                  template_invoice_id: ID_TEMPLATE_INVOICES,
                  activo_id: activo,
               };

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

               const components = info.components || [];

               var existeHeader = false;
               var existeHeaderDiferenteTexto = false;
               var isSelectNoneHeader = false;
               var contenidoRealHeader = "";
               var formatoHeader = ""; // text, image, document, video, ubicacion
               var contenidoHeader = ""; //puede ser base64 o texto
               var contenidoIdSelectHeader = ""; //puede ser base64 o texto
               var arrHeader = {};
               var coordenadas = [];
               var copiaOriginalTextoHeader = "";

               var existeBody = false;
               var contenidoBody = []; //es un arreglo con todo los inputs
               var arrBody = {};

               var botones = [];
               var botones_con_parametros = [];
               var existeButtons = false;

               //console.log("GUARDAR INFORMACION");
               components.forEach((elementos) => {
                  let { type, text, format, example, buttons } = elementos;
                  //console.log("Text: ", text);
                  //console.log("Type: ", type);
                  //console.log("Formato: ", format);
                  //console.log("Example: ", example);
                  //console.log("Botones: ", buttons);

                  if (type == "HEADER") {
                     let formato_minuscula = format.toLowerCase();

                     formatoHeader = formato_minuscula;

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

                        if (example != null || example != undefined) {
                           existeHeader = true;

                           copiaOriginalTextoHeader = text;

                           $("input[id^='texto_input_plantilla_header_']").each(
                              function () {
                                 const value = $(this).val();
                                 const dataId = $(this).data("id");
                                 const placeholder = "{{" + dataId + "}}";

                                 let selectCampoBD = $(
                                    "#select_plantilla_header_" + dataId,
                                 ).val();
                                 if (selectCampoBD == "0") {
                                    contenidoHeader = value;
                                 } else {
                                    contenidoHeader = value + placeholder;
                                 }
                                 contenidoRealHeader = value;
                              },
                           );

                           $("select[id^='select_plantilla_header_']").each(
                              function () {
                                 const value = $(this).val();
                                 const dataId = $(this).data("id");
                                 const placeholder = "{{" + dataId + "}}";

                                 contenidoIdSelectHeader = value;

                                 if (value == "0" || value == 0) {
                                    isSelectNoneHeader = true;
                                 } else {
                                    isSelectNoneHeader = false;
                                 }
                              },
                           );
                        }
                     }

                     if (
                        formato_minuscula == "image" ||
                        formato_minuscula == "document" ||
                        formato_minuscula == "video"
                     ) {
                        //poner tipo de plantilla imagen, texto, documentos o videos
                        existeHeader = true;
                        existeHeaderDiferenteTexto = true;
                     }

                     if (formato_minuscula == "location") {
                        existeHeaderDiferenteTexto = true;
                        $("input[id^='texto_input_location_header_']").each(
                           function () {
                              existeHeader = true;

                              const value = $(this).val();
                              const dataName = $(this).data("name");
                              const dataId = $(this).data("id");

                              coordenadas.push({
                                 nombre: dataName,
                                 texto: value || "",
                              });
                           },
                        );
                     }
                  }

                  if (type == "BODY") {
                     $("input[id^='texto_input_plantilla_body_']").each(
                        function () {
                           existeBody = true;

                           const value = $(this).val();
                           const dataId = $(this).data("id");
                           const placeholder = "{{" + dataId + "}}";

                           let campoDB = $(
                              "#select_plantilla_body_" + dataId,
                           ).val();
                           let miTexto =
                              campoDB == "0" || campoDB == 0
                                 ? value
                                 : value + "{{" + dataId + "}}";

                           contenidoBody.push({
                              buscar: "{{" + dataId + "}}",
                              texto: miTexto,
                              campoDB: campoDB || "",
                              dataReal: value || "",
                              isSelecNone:
                                 campoDB == 0 || campoDB == "0" ? true : false,
                           });
                        },
                     );
                  }

                  if (type == "BUTTONS") {
                     if (buttons != null || buttons != undefined) {
                        existeButtons = true;
                        botones = buttons;

                        $("input[id^='input_buttons_plantilla_']").each(
                           function () {
                              existeButtons = true;

                              const value = $(this).val();
                              const dataId = $(this).data("id");

                              //console.log(value);

                              botones_con_parametros.push({
                                 index: dataId,
                                 texto: value || "",
                              });
                           },
                        );
                     }
                  }
               });

               if (existeHeaderDiferenteTexto == true) {
                  Swal.fire(
                     "This template contains a header that is different from the text",
                  );

                  return "no_usar";
               }

               if (existeHeader == true) {
                  //console.log("existe header");
                  //console.log(contenidoHeader);
                  if (formatoHeader == "text") {
                     if (isSelectNoneHeader == true) {
                        if (isEmpty(contenidoRealHeader) == true) {
                           Swal.fire(
                              "The Header has one parameter and is empty",
                           );

                           return;
                        }
                     }
                  } else {
                     if (formatoHeader == "location") {
                        let localtionVacio = coordenadas.find(
                           (data) => data.texto.trim() === "",
                        );

                        if (localtionVacio) {
                           Swal.fire(
                              "The Headers has one parameter and is empty",
                           );

                           return;
                        }
                     } else {
                        if (isEmpty(INFORMACION_PLANTILLA_HEADER) == true) {
                           Swal.fire(
                              "The Header has one parameter and is empty",
                           );

                           return;
                        }
                     }
                  }

                  let lati = null;
                  let lon = null;
                  let address = null;
                  let name = null;

                  if (coordenadas.length != 0) {
                     lati = coordenadas[0].texto;
                     lon = coordenadas[1].texto;
                     address = coordenadas[2].texto;
                     name = coordenadas[3].texto;
                  }

                  let cambiarText = info_copia.components.find(
                     (data) => data.type == "HEADER" && data.format == "TEXT",
                  );

                  //contenidoIdSelectHeader es campoDB
                  if (isSelectNoneHeader == true) {
                     let tenerText = info.components.find(
                        (data) =>
                           data.type == "HEADER" && data.format == "TEXT",
                     );

                     if (cambiarText) {
                        cambiarText.text = tenerText.text;
                     }
                  } else {
                     //en caso de que el select del campo database sea un campo real
                     if (cambiarText) {
                        cambiarText.text = $(
                           "#texto_header_plantilla_previa",
                        ).text();
                     }
                  }
                  //console.log("copiaOriginalTextoHeader");
                  //console.log(copiaOriginalTextoHeader);

                  if (formatoHeader == "location") {
                     INFORMACION_PLANTILLA_HEADER = ""; //esto es para tener base64 cuando es archivo
                     INFORMACION_PLANTILLA_HEADER_EXTENSION = ""; //esto es para tener base64 cuando es archivo
                  }

                  arrHeader = {
                     type: "HEADER",
                     format: formatoHeader,
                     extension: INFORMACION_PLANTILLA_HEADER_EXTENSION,
                     campoBD: contenidoIdSelectHeader,
                     contenido:
                        isEmpty(contenidoHeader) == true
                           ? INFORMACION_PLANTILLA_HEADER
                           : contenidoHeader,

                     lati: lati,
                     lon: lon,
                     address: address,
                     name: name,
                  };

                  enviar_informacion.components.push(arrHeader);

                  //INFORMACION_PLANTILLA_HEADER = ""; //esto es para tener base64 cuando es archivo
                  //INFORMACION_PLANTILLA_HEADER_EXTENSION = ""; //esto es para tener base64 cuando es archivo
               }

               if (existeBody == true) {
                  //console.log("existe body");

                  if (contenidoBody.length == 0) {
                     return;
                  }

                  //console.log(contenidoBody);

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

                  if (bodyVacio) {
                     Swal.fire("The Body has one parameter and is empty");

                     return;
                  }

                  let cambiarText = info_copia.components.find(
                     (data) => data.type == "BODY",
                  );

                  if (cambiarText) {
                     /* cambiarText.text = $(
                                 "#texto_body_plantilla_previa",
                              ).text(); */
                     let tenerText = info.components.find(
                        (data) => data.type == "BODY",
                     );

                     var textoPersonalizado = tenerText.text;

                     contenidoBody.forEach((element) => {
                        let {
                           buscar: placeholder,
                           texto: value,
                           campoDB,
                           dataReal,
                           isSelecNone,
                        } = element;

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

                        if (isSelecNone == true) {
                           /* textoPersonalizado = textoPersonalizado.replace(
                                       regex,
                                       value || placeholder,
                                    ); */
                        } else {
                           textoPersonalizado = textoPersonalizado.replace(
                              regex,
                              value || placeholder,
                           );
                        }
                     });

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

                     cambiarText.text = textoPersonalizado;
                  }

                  arrBody = {
                     type: "BODY",
                     contenido: contenidoBody,
                  };

                  enviar_informacion.components.push(arrBody);
               }

               if (existeButtons == true) {
                  let buttonsnVacio = botones_con_parametros.find(
                     (data) => data.texto.trim() == "",
                  );

                  if (buttonsnVacio) {
                     Swal.fire("The Button has one parameter and is empty");

                     return;
                  }

                  let arrBotones = {
                     type: "BUTTONS",
                     botones_con_parametros: botones_con_parametros,
                     botones: botones,
                  };

                  enviar_informacion.components.push(arrBotones);
               }

               enviar_informacion.plantilla_original = info_copia;

               return enviar_informacion;
            }

            return "";
         }

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

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

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

             

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

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

            return html;
         }

         function plantilla_option_select_combo(value, text, select) {
            if (select == true) {
               return (
                  '<option value="' + value + '" selected>' + text + "</option>"
               );
            } else {
               return '<option value="' + value + '" >' + text + "</option>";
            }
         }
      
         //DESDE AQUI EMPIEZA LA PROGRAMACION AHI COSAS DE ARRIBA QUE DEBEMOS DE QUITAR

         $(document).ready(function() {

            function validIsEmpty(value) {
               // Verificar si es nulo o indefinido
               if (value === null || value === undefined) return true;

               // Verificar si es una cadena
               if (typeof value === 'string') {
                  return value.trim().length === 0;
               }

               // Verificar si es un arreglo
               if (Array.isArray(value)) {
                  return value.length === 0;
               }

               // Verificar si es un objeto
               if (typeof value === 'object') {
                  return Object.keys(value).length === 0;
               }

               // Para otros tipos (número, booleano, función), ajusta según tus necesidades
               return false;
            }

            //HEADER INFORMACION
            //header
            $("#input_header_plantilla").val("NONE");
            $(".contenido_principal_header").html("");

            //body
            //$(".contenido_principal_body").html("");
 
            /*
            var html_input =
                  "<label style=' width: 100%; max-width: 100%; '> Body content <div style=' display: inline; float: inline-end; '> <b style=' font-weight: 600; ' class='contador_texto_plantilla_body'>0/60</b> </div> </label>" +
                  "<textarea id='texto_textarea_body' class='form-control form-control-sm'></textarea>" +

                  "<div class='row col-12' style=' padding: 0; margin: 0; '>" +
                     "<div style='padding: 0;'> "+

                         "<button type='button' class='btn btn-default btn-sm  mt-1' id='add_variable_body' style='border-color: #d3cac0; border: 1px solid #d3cac0; float: right;'> Add Variable </button>" +
                        
                         "<button type='button' class='btn btn-default btn-sm  mt-1' id='add_emoji_body' style='border-color: #d3cac0; border: 1px solid #d3cac0; float: right; margin-left:5px; margin-right:5px;'> Add Emoji </button>" 
                     
                     + "</div>" +
                  "</div>   ";

            */

            let opciones = '';

            // Bucle for del 1 al 90
            for (let i = 1; i <= 90; i++) {
               const selected = i === 10 ? ' selected' : '';
               opciones += `<option value="${i}"${selected}>${i} Minuto${i !== 1 ? 's' : ''}</option>`;
            }

            var html_input__ = `
                           <div class='col-12 descripcion_general_plantilla div_add_expiration_add_code mt-3'  >
                              <div class='row' style='margin: 0; align-items: center; align-content: center; margin-bottom: 5px;'>
                                    <div class='col-12'>
                                       <label style='width: 100%; max-width: 100%;'>Expires in (Minutes)</label>
                                    </div>
                              </div>

                              <hr style='margin-top: 0;'>

                              <div class='row' style='margin: 0;'>
                                    <div class='col-12 col-sm-12 col-lg-12'>

                                       <label style='width: 100%; max-width: 100%;'>
                                          Select a option 
                                          <span style='color: black; font-size: 10px;'>* Field is required</span>
                                       </label>

                                       <select
                                                class="form-select form-select-sm tener_add_expiration_code_input_select tamano_input"
                                                name="add_expiration_code_input_select"
                                                id="add_expiration_code_input_select"
                                                style="width: 100%"
                                                placeholder="Select a option"
                                             >
                                                
                                                ${opciones}
                                       </select>
 
                                        
                                    </div>
                              </div>
                           </div>
                        `;

            var html_input =
                  "<p style=' width: 100%; max-width: 100%; '> Content for authentication message templates can't be edited. You can add additional content from the options below. <div style=' display: inline; float: inline-end; '> <b style=' font-weight: 600; ' class='contador_texto_plantilla_body'></b> </div> </p>" +
                 
                  //"<textarea id='texto_textarea_body' class='form-control form-control-sm'></textarea>" +

                  "<div class='form-check mt-2'><input class='form-check-input tener_add_security_recommendation' id='add_security_recommendation' type='checkbox' value /><label class='form-check-label' for='add_security_recommendation'>Add security recommendation</label></div>" +
                  "<div class='form-check mt-2'><input class='form-check-input tener_add_expiration_time_code' id='add_expiration_time_code' type='checkbox' checked disabled /><label class='form-check-label' for='add_expiration_time_code'>Add expiration time for the code</label></div>"
                  + html_input__;
 
            // Inserta el contenido HTML en el div
            $(".contenido_principal_body").html(html_input);

            //footer
            //$(".footer_plantilla").show();
            $(".footer_plantilla").hide();
            $("#texto_textarea_footer").val("");
            $("#texto_textarea_footer").text("");

            $(".buttons_plantilla").show();

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

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

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

            //botones
            $(".mensajes_botones").show();
            $(".mensajes_botones").html("");

            
            //BODY INFORMACION
            adjustHeightTexto_TextArea_BODYWhatsappV1();

            clicAddVariableBody();

            clickAddEmojiBody();

            //FOOTER INFORMACION
            adjustHeightTexto_TextArea_FOOTERWhatsappV1();

            $(".plantilla-body").html(
                  '<p id="texto_body_plantilla_previa">' +
                     TEXTO_BODY_VISTA_PREVIA_DEFAULT +
                  "</p>"
            );


            let html_input_o = "";

            html_input_o +=
                  '<option value="' +
                  "" +
                  '" ' + 'disabled' + ' selected>' +
                  "Select a option" +
                  "</option>";

            OPCIONES_BOTONES.forEach((element) => {
               let value = element["value"];
               let text = element["text"];
               let edicion = element["edicion"];

               // Si edicion es true, deshabilitamos la opción
               let disabled = edicion ? 'disabled' : ''; // Si edicion es true, la opción estará deshabilitada

               html_input_o +=
                  '<option value="' +
                  value +
                  '" ' + disabled + '>' +
                  text +
                  "</option>";
            });

            //$(".tener_select_button_plantillas").html(html_input_o);

            let html_input_country = "";

            // Opción por defecto
            html_input_country +=
               '<option value="" disabled selected>' +
               "Select a option" +
               "</option>";

            // Iterar sobre las opciones de países
            paisesWhatsApp.forEach((element) => {
               let value = element["codigo"];
               let text = element["pais"] + " " + value;
               let seleccionado = element["seleccionado"];

               // Si seleccionado es true, agregamos el atributo selected
               let selectedAttr = seleccionado ? 'selected' : '';

               html_input_country +=
                     '<option value="' +
                     value +
                     '" ' + selectedAttr + '>' +
                     text +
                     "</option>";
            });

            $(".tener_phone_number_country").html(html_input_country);
            //tener_phone_number_country

            $country = $(".tener_phone_number_country");
            $country.select2();

            $lenguaje_select2 = $(".tener_input_lenguaje_plantilla");
            $lenguaje_select2.select2();

            let tiempo = $(".tener_add_expiration_code_input_select").val();

            $("#texto_footer_plantilla_previa").text("This code expires in " + tiempo + " minutes.");
 

            eventoSeleccionarOpcionBotonesYOtros();

            $('.tener_add_security_recommendation').on('change', function() {
               // Verificar si el checkbox está marcado

               if ($(this).is(':checked')) {
                     //console.log('Add security recommendation está seleccionado (true)');
                     // Aquí puedes agregar tu lógica cuando está seleccionado
                     
                    $(".plantilla-body").html(
                           '<p id="texto_body_plantilla_previa">' +
                              TEXTO_BODY_VISTA_PREVIA_DEFAULT + " For your security, do not share this code." +
                           "</p>"
                     );

               } else {
                     //console.log('Add security recommendation no está seleccionado (false)');
                     // Aquí puedes agregar tu lógica cuando no está seleccionado

                     $(".plantilla-body").html(
                        '<p id="texto_body_plantilla_previa">' +
                           TEXTO_BODY_VISTA_PREVIA_DEFAULT +
                        "</p>"
                      );
               }
            });

            $('.tener_add_expiration_time_code').on('change', function() {
               // Verificar si el checkbox está marcado
 
               if ($(this).is(':checked')) {
                     //console.log('Add security recommendation está seleccionado (true)');
                     // Aquí puedes agregar tu lógica cuando está seleccionado
 
                     $(".div_add_expiration_add_code").css("display", "");

                     let tiempo = $(".tener_add_expiration_code_input_select").val();

                     $("#texto_footer_plantilla_previa").text("This code expires in " + tiempo + " minutes.");

               } else {
                     //console.log('Add security recommendation no está seleccionado (false)');
                     // Aquí puedes agregar tu lógica cuando no está seleccionado
 
                     $(".div_add_expiration_add_code").css("display", "none");

                     $("#texto_footer_plantilla_previa").text("");
               }
            });

            $('.tener_add_expiration_code_input_select').on('change', function() {
               
               let tiempo = $(this).val();

               $("#texto_footer_plantilla_previa").text("This code expires in " + tiempo + " minutes.");
             
            });


            const textarea = document.getElementById("nombre_copiar_codigo");
               
            if(textarea)
            {
               const maxLength = 25; // Límite máximo de caracteres

               textarea.addEventListener("input", () => {
                  // Verificar si excede el límite y cortar el texto si es necesario

                  let template = $("#nombre_copiar_codigo").val()

                  //$(this).addClass("color-error");  label.removeClass("color-error");

                  if(validIsEmpty(template))
                  {
                     $("#nombre_copiar_codigo").addClass("color-error");
                  }else{
                     $("#nombre_copiar_codigo").removeClass("color-error");
                  }

                  let currentText = template || "";
                  //let currentText = textarea.value;

                  if (currentText.length > maxLength) {
                        currentText = currentText.substring(0, maxLength);
                        textarea.value = currentText; // Actualizar el valor del textarea
                  }

                  // Actualizar la vista previa y el contador con el texto limitado
                  $('.contador_nombre_copiar_codigo').text(currentText.length + '/25');

                  var html_input_buttons_vista_previa = "";

                  img = PATH_IMG_ + "copiar_icono_plantilla.png";

                  html_input_buttons_vista_previa +=
                              '<div class="div_mensaje_boton">' +
                              '<img src="' +
                              img +
                              '" class="icono_plantilla"> <a class="angotar_mensajes_botones">' +
                              currentText +
                              "</a>" +
                              "</div>";

                  $(".mensajes_botones").html(
                     html_input_buttons_vista_previa,
                  );
 
               });

               // Manejar el pegado de texto
               textarea.addEventListener("paste", (e) => {
                  // Obtener el texto del portapapeles
                  const pastedText = (e.clipboardData || window.clipboardData).getData('text');
                 
                  // Combinar con el texto existente
                  let template = textarea.value + pastedText;

                  if(validIsEmpty(template))
                  {
                     $("#nombre_copiar_codigo").addClass("color-error");
                  }else{
                     $("#nombre_copiar_codigo").removeClass("color-error");
                  }

                  // Limitar a 60 caracteres después de la limpieza
                  const newText = template.substring(0, maxLength);

                  // Prevenir el pegado por defecto
                  e.preventDefault();

                  // Establecer el nuevo valor
                  textarea.value = newText;

                  $('.contador_nombre_copiar_codigo').text(newText.length + '/25');

                  var html_input_buttons_vista_previa = "";

                  img = PATH_IMG_ + "copiar_icono_plantilla.png";

                  html_input_buttons_vista_previa +=
                              '<div class="div_mensaje_boton">' +
                              '<img src="' +
                              img +
                              '" class="icono_plantilla"> <a class="angotar_mensajes_botones">' +
                              newText +
                              "</a>" +
                              "</div>";

                  $(".mensajes_botones").html(
                     html_input_buttons_vista_previa,
                  );
 

               });

             
               $('.contador_nombre_copiar_codigo').text('0/25');
            }

            var html_input_buttons_vista_previa = "";

            img = PATH_IMG_ + "copiar_icono_plantilla.png";

             html_input_buttons_vista_previa +=
                        '<div class="div_mensaje_boton">' +
                        '<img src="' +
                        img +
                        '" class="icono_plantilla"> <a class="angotar_mensajes_botones">' +
                        "" +
                        "</a>" +
                        "</div>";

            $(".mensajes_botones").html(
               html_input_buttons_vista_previa,
            );
 
            //DESDE AQUI PARA ARRIBA LO DEJE PARA AUTNENTICACION
 


            $('#input_nombre_plantilla').on({
             
               input: function() {
                     let texto = $(this).val();
                     if (texto.length > 512) {
                        $(this).val(texto.substring(0, 512));
                        texto = $(this).val();
                     }
                     $('.contador_nombre_plantilla').text(texto.length + '/512');
               },
               // Evento para pegado
               paste: function(e) {
                     var $this = $(this);
                     setTimeout(function() {
                        let texto = $this.val();
                        if (texto.length > 512) {
                           $this.val(texto.substring(0, 512));
                           texto = $this.val();
                        }
                        $('.contador_nombre_plantilla').text(texto.length + '/512');
                     }, 0);

                     return true;
               }
            }); 

            $('#input_header_plantilla').on('change', function() {
               const valorSeleccionado = $(this).val();
               
               console.log('Opción seleccionada:', valorSeleccionado);

               $(".contenido_principal_header").html("");

               INFORMACION_PLANTILLA_HEADER = ""; 
               INFORMACION_PLANTILLA_HEADER_EXTENSION = ""; 
               
               switch(valorSeleccionado) {
                     case 'NONE':
                        console.log('Seleccionaste None');
                        break;
                     case 'TEXT':
                        console.log('Seleccionaste Text');

                           const htmlContent =
                              "<label style=' width: 100%; max-width: 100%; '> Header content <div style=' display: inline; float: inline-end; '> <b style=' font-weight: 600; ' class='contador_texto_plantilla_header'>0/60</b> </div> </label>" +
                              "<textarea id='texto_textarea_header' class='form-control form-control-sm' >" +
                              "" +
                              "</textarea>" +

                              "<div class='row col-12' style=' padding: 0; margin: 0; '>" +
                                 "<div style=' padding: 0; '><button type='button' class='btn btn-default btn-sm  mt-1' id='add_variable' style='border-color: #d3cac0; border: 1px solid #d3cac0; float: right;'> Add Variable </button> </div>" +
                              "</div>   ";
                  
            

                           $(".contenido_principal_header").html(htmlContent);

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

                           clicAddVariable();

                           adjustHeightTexto_TextArea_HeaderWhatsappV1();

                        break;
                     case 'IMAGE':
                        console.log('Seleccionaste Image');
 

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

                           seleccionar_archivo_plantilla_headersWhatsapp(
                              "",
                              "image/jpeg, image/png",
                           );

                        break;
                     case 'VIDEO':
                        console.log('Seleccionaste Video');

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

                        seleccionar_archivo_plantilla_headersWhatsapp(
                           "",
                           "video/mp4, video/3gpp",
                        );

                        break;
                     case 'DOCUMENT':
                        console.log('Seleccionaste Document');

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

                        seleccionar_archivo_plantilla_headersWhatsapp(
                           "",
                           ".pdf",
                        );

                        break;
                     case 'LOCATION':
                        console.log('Seleccionaste Location');

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

                        break;
               }
            });

            function adjustHeightTexto_TextArea_HeaderWhatsappV1() {
               const textarea = document.getElementById("texto_textarea_header");
               const maxLength = 60; // Límite máximo de caracteres

               textarea.addEventListener("input", () => {
                  // Verificar si excede el límite y cortar el texto si es necesario

                  let template = $("#texto_textarea_header").val()
                  let reorderedTemplate = cleanAndKeepOnlyFirstTemplate(template);

                  $("#texto_textarea_header").val(reorderedTemplate);
                  $("#texto_textarea_header").text(reorderedTemplate);

                  let currentText = reorderedTemplate;
                  //let currentText = textarea.value;

                  if (currentText.length > maxLength) {
                        currentText = currentText.substring(0, maxLength);
                        textarea.value = currentText; // Actualizar el valor del textarea
                  }

                  // Reset the height to auto to shrink the textarea if necessary
                  textarea.style.height = "auto";
                  // Set the height to scrollHeight to expand to fit the content
                  textarea.style.height = textarea.scrollHeight + "px";

                  // Actualizar la vista previa y el contador con el texto limitado
                  $(".plantilla-header").html(
                        '<p id="texto_header_plantilla_previa">' +
                           currentText +
                        "</p>"
                  );
                  $('.contador_texto_plantilla_header').text(currentText.length + '/60');

                  crearInputsDinamicos(currentText);
                  

               });

               // Manejar el pegado de texto
               textarea.addEventListener("paste", (e) => {
                  // Obtener el texto del portapapeles
                  const pastedText = (e.clipboardData || window.clipboardData).getData('text');
                  // Combinar con el texto existente
                  let template = textarea.value + pastedText;

                  // Aplicar la limpieza para mantener solo el primer {{1}}
                  let reorderedTemplate = cleanAndKeepOnlyFirstTemplate(template);

                  // Limitar a 60 caracteres después de la limpieza
                  const newText = reorderedTemplate.substring(0, maxLength);

                  // Prevenir el pegado por defecto
                  e.preventDefault();
                  // Establecer el nuevo valor
                  textarea.value = newText;

                  // Actualizar altura, vista previa y contador
                  textarea.style.height = "auto";
                  textarea.style.height = textarea.scrollHeight + "px";
                  $(".plantilla-header").html(
                     '<p id="texto_header_plantilla_previa">' + newText + "</p>"
                  );
                  $('.contador_texto_plantilla_header').text(newText.length + '/60');

                  crearInputsDinamicos(newText);
               });

               // Initialize height on page load
               textarea.style.height = "auto";
               textarea.style.height = textarea.scrollHeight + "px";
               // Inicializar el contador en 0/60
               $('.contador_texto_plantilla_header').text('0/60');

                
 

            }


            function clicAddVariable()
            {
               $("#add_variable").click(async function () {

                  let edicion = $(this).prop('disabled');

                  //console.log(edicion);

                  if (edicion == true)
                  {
                     return;
                  }

                  let template = $("#texto_textarea_header").val() + "{{1}}";
                  let reorderedTemplate = cleanAndKeepOnlyFirstTemplate(template);

                  $("#texto_textarea_header").val(reorderedTemplate);
                  $("#texto_textarea_header").text(reorderedTemplate);

                  //console.log(texto);

                  const textarea = document.getElementById("texto_textarea_header");
                  const maxLength = 60; // Límite máximo de caracteres

                  let currentText = textarea.value || "";

                  if(currentText)
                  {
                     if (currentText.length > maxLength) {
                           currentText = currentText.substring(0, maxLength);
                           textarea.value = currentText; // Actualizar el valor del textarea
                     }

                     $('.contador_texto_plantilla_header').text(currentText.length + '/60');

                     $(".plantilla-header").html(
                        "<p id='texto_header_plantilla_previa'>" +
                           currentText +
                        "</p>"
                     );

                     crearInputsDinamicos(currentText);

                  }
 
               });
            }

            // Función para mantener solo el primer marcador como {{1}} y eliminar los demás
            function cleanAndKeepOnlyFirstTemplate(template) {
               // Buscar todos los marcadores {{cualquiercosa}}
               const regex = /{{([^}]+)}}/g;
               let match;
               const placeholders = [];
               let firstOneIndex = -1;

               // Guardar todos los marcadores en orden de aparición
               while ((match = regex.exec(template)) !== null) {
                  placeholders.push({
                        text: match[0], // El marcador completo, ej. {{1}}
                        index: match.index,
                        value: match[1] // El contenido dentro, ej. 1
                  });
                  if (match[1] === "1" && firstOneIndex === -1) {
                        firstOneIndex = placeholders.length - 1; // Guardar el índice del primer {{1}}
                  }
               }

               // Si no hay marcadores, devolver el texto sin cambios
               if (placeholders.length === 0) {
                  return template;
               }

               // Si hay al menos un {{1}}, mantener solo el primero y eliminar todos los demás marcadores
               if (firstOneIndex !== -1) {
                  let result = template;
                  placeholders.forEach((placeholder, index) => {
                        if (index !== firstOneIndex) {
                           result = result.replace(placeholder.text, "");
                        }
                  });
                  return result.replace(/\s+/g, " "); // Limpiar espacios extras
               }

               // Si no hay {{1}}, convertir el primer marcador en {{1}} y eliminar los demás
               let result = template;
               for (let i = 0; i < placeholders.length; i++) {
                  if (i === 0) {
                        result = result.replace(placeholders[i].text, "{{1}}");
                  } else {
                        result = result.replace(placeholders[i].text, "");
                  }
               }

               return result.replace(/\s+/g, " "); // Limpiar espacios extras
            }

            function reorderAndRenumberTemplate(template) {
              // Si está vacío, añadir {{1}}
               if (!template) {
                  return "{{1}}";
               }

               // Encontrar todos los marcadores {{n}} o {{text}}
               const regex = /{{(\d+|text)}}/g;
               let match;
               const placeholders = [];
               
               // Guardar todos los marcadores existentes en orden
               while ((match = regex.exec(template)) !== null) {
                  placeholders.push(match[0]);
               }

               // Añadir un nuevo marcador si no está vacío
               placeholders.push("{{temp_placeholder}}");

               // Reemplazar {{text}} con un marcador temporal
               template = template.replace(/{{\s*text\s*}}/g, "{{temp_placeholder}}");

               // Reconstruir el texto con los marcadores reordenados
               let result = template;
               let index = 1;

               // Reemplazar cada marcador con un número secuencial
               for (let i = 0; i < placeholders.length; i++) {
                  const placeholder = placeholders[i];
                  if (result.includes(placeholder)) {
                        result = result.replace(placeholder, `{{${index++}}}`);
                  } else {
                        // Si es el nuevo marcador, añadirlo al final
                        result += ` {{${index++}}}`;
                  }
               }

               // Limpiar marcadores temporales sobrantes (por si acaso)
               result = result.replace(/{{temp_placeholder}}/g, "");

               return result.trim();
            }

            function cleanAndReorderTemplate(template) {
            
               // Reemplazar {{text}} con un marcador de posición único temporal
               template = template.replace(
                  /{{\s*text\s*}}/g,
                  "{{text_placeholder}}",
               );

               // Eliminar espacios adicionales y mantener la secuencia de números y el marcador de posición temporal
               template = template.replace(
                  /{{\s*(\d+|text_placeholder)\s*}}/g,
                  function (match, number) {
                     return "{{" + number + "}}";
                  },
               );

               // Crear un objeto para reemplazar números secuenciales y text_placeholder
               let index = 1;
               const replacements = {};

               // Primero, reemplazar los números secuenciales
               template = template.replace(/{{(\d+)}}/g, function (match, number) {
                  if (!replacements[number]) {
                     let tempo = index++;
                     replacements[number] ="{{" + tempo + "}}";
                  }
                  return replacements[number];
               });

               // Luego, reemplazar el marcador de posición temporal con números secuenciales
               template = template.replace(/{{text_placeholder}}/g, function () {
                  let tempo = index++;
                  return "{{" + tempo + "}}";
               });

               return template;
            }

            function ReorderTemplate(template) {
               template = template.replace(
                  /{{\s*(\d+)\s*}}/g,
                  function (match, number) {
                     return `{{${number}}}`;
                  },
               );

               // Luego, realizar el reordenamiento si es necesario
               let match;
               let index = 1;
               const regex = /{{(\d+)}}/g;
               const replacements = {};

               while ((match = regex.exec(template)) !== null) {
                  const placeholder = match[0];
                  const number = parseInt(match[1], 10);

                  if (!replacements[number]) {
                     replacements[number] = placeholder;
                  }
               }

               return template.replace(regex, function (match, number) {
                  return `{{${index++}}}`;
               });
            }

            function countPlaceholders(template) {
               const regex = /{{([^}]+)}}/g;
               const matches = template.match(regex) || [];
               return matches.length; // Retorna la cantidad de marcadores encontrados
            }

            function crearInputsDinamicos(currentText){
               let cantidad_parametros = countPlaceholders(currentText);

               console.log("cantidad_parametros");
               console.log(cantidad_parametros);

               
               if(cantidad_parametros == 0)
               {
                  $('#add_variable').prop('disabled', false);

                  if ($(".contenido_segundario_header").length) {
                     $(".contenido_segundario_header").remove();
                  }

                  //si no hay nada borrar

               }else{   

                  $('#add_variable').prop('disabled', true);

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

                  for (let i = 1; i <= cantidad_parametros; i++) {
                     
                     let existe = $("#boton_plantilla_header_"+i).length;

                     if (existe == 0) {
                         
                        //html_input += "<div class='col-12 col-sm-6 col-md-6 col-lg-6' >";

                        html_input +=
                           "<div class='col-12 col-sm-7 col-md-9 col-lg-9'>" +
                           "<label style='margin-top:12px;' id='texto_label_plantilla_header_" +
                           i +
                           "' data-id='" +
                           i +
                           "'>" +
                           "Field {{ " +
                           i +
                           " }} <span style='color: red; font-size: 10px;'>* Field is required</span>" +
                           "</label>" +
                           "<input id='texto_input_plantilla_header_" +
                           i +
                           "' data-id='" +
                           i +
                           "' class='form-control form-control-sm color-error tamano_input' />" +
                           "</div>" +
                           //este es todo el select
                           "<div class='col-12 col-sm-5 col-md-3 col-lg-3 mb-3'>" +

                           "<label style='margin-top:12px; color:transparent; user-select: none; display:block'>Variable {{ " +
                           i +
                           " }}</label>" +

                           "<button type='button' id='boton_plantilla_header_" +
                           i +
                           "' data-id='" +
                           i +
                           "' class='btn btn-default btn-sm' style='border-color: #d3cac0; border: 1px solid #d3cac0; float: inline-end; display:block;' >" +
                           "Quitar"+
                           "</button>" +

                           "</div>";

                     } 

                      
                  }

                  html_input += "</div>";

                  $(".contenido_principal_header").append(
                     html_input,
                  );

                  //EVENTO PARA QUITAR INPUT
                  $(".contenido_segundario_header").on(
                     "click",
                     "button[id^='boton_plantilla_header_']",
                     function () {
                        const dataId = $(this).data("id");
                        console.log(`Data-id del botón: ${dataId}`);

                        let markerToRemove = "{{" + dataId + "}}";

                        const textarea = document.getElementById("texto_textarea_header");

                        let cleanedTemplate = removeExactMarker(textarea.value || "", markerToRemove); // Eliminar {{1}}
 
                        const maxLength = 60; // Límite máximo de caracteres

                        let currentText = cleanedTemplate || "";

                        if (currentText.length > maxLength) {
                           currentText = currentText.substring(0, maxLength);
                        }

                        $("#texto_textarea_header").val(currentText);
                        $("#texto_textarea_header").text(currentText);

                        $('.contador_texto_plantilla_header').text(currentText.length + '/60');

                        $(".plantilla-header").html(
                           "<p id='texto_header_plantilla_previa'>" +
                              currentText +
                           "</p>"
                        );

                        crearInputsDinamicos(currentText);

                     }
                  );

                  //EVENTO PARA ACTUALIZAR VISTA PREVIA
                  updateTextWhatsapp($("#texto_textarea_header").val(), 0);

                  $(".contenido_segundario_header").on(
                     "input",
                     "input[id^='texto_input_plantilla_header_']",
                     function () {
                        const value = $(this).val();
                        const dataId = $(this).data("id");
                        //console.log(`Value for input with data-id ${dataId}: ${value}`,);

                        //let selectDB = $(
                        //   "#select_plantilla_header_" + dataId,
                        //).val();

                        updateTextWhatsapp($("#texto_textarea_header").val(), "0");

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

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

                           // Si el campo tiene valor, mostrar solo el texto del label
                           label.html("Field {{ " + dataId + " }}");
                           $(this).removeClass("color-error");
                        }

                        //console.log(updatedText);
 
                     },
                  );


               }

            }

            function removeExactMarker(template, marker) {
               // Usar una expresión regular para coincidencias exactas de la variable
               const regex = new RegExp(marker.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&'), 'g');
               return template.replace(regex, '').replace(/\s+/g, ' '); // Eliminar el marcador y normalizar espacios
            }

            //PARA BODY
            function adjustHeightTexto_TextArea_BODYWhatsappV1() {
               const textarea = document.getElementById("texto_textarea_body");
               
               if(textarea)
               {
                  const maxLength = 1024; // Límite máximo de caracteres

                  textarea.addEventListener("input", () => {
                     // Verificar si excede el límite y cortar el texto si es necesario

                     let template = $("#texto_textarea_body").val()
                     let reorderedTemplate = renumberPlaceholders(template);

                     $("#texto_textarea_body").val(reorderedTemplate);
                     $("#texto_textarea_body").text(reorderedTemplate);

                     let currentText = reorderedTemplate;
                     //let currentText = textarea.value;

                     if (currentText.length > maxLength) {
                           currentText = currentText.substring(0, maxLength);
                           textarea.value = currentText; // Actualizar el valor del textarea
                     }

                     // Reset the height to auto to shrink the textarea if necessary
                     textarea.style.height = "auto";
                     // Set the height to scrollHeight to expand to fit the content
                     textarea.style.height = textarea.scrollHeight + "px";

                     // Actualizar la vista previa y el contador con el texto limitado
                     $(".plantilla-body").html(
                           '<p id="texto_body_plantilla_previa">' +
                              currentText +
                           "</p>"
                     );
                     $('.contador_texto_plantilla_body').text(currentText.length + '/1024');

                     crearInputsDinamicosBody(currentText);
                     

                  });

                  // Manejar el pegado de texto
                  textarea.addEventListener("paste", (e) => {
                     // Obtener el texto del portapapeles
                     const pastedText = (e.clipboardData || window.clipboardData).getData('text');
                     // Combinar con el texto existente
                     let template = textarea.value + pastedText;

                     // Aplicar la limpieza para mantener solo el primer {{1}}
                     let reorderedTemplate = renumberPlaceholders(template);

                     // Limitar a 60 caracteres después de la limpieza
                     const newText = template.substring(0, maxLength);
                     //const newText = reorderedTemplate.substring(0, maxLength);

                     // Prevenir el pegado por defecto
                     e.preventDefault();
                     // Establecer el nuevo valor
                     textarea.value = newText;

                     // Actualizar altura, vista previa y contador
                     textarea.style.height = "auto";
                     textarea.style.height = textarea.scrollHeight + "px";
                     $(".plantilla-body").html(
                        '<p id="texto_body_plantilla_previa">' + newText + "</p>"
                     );

                     $('.contador_texto_plantilla_body').text(newText.length + '/1024');

                     crearInputsDinamicosBody(newText);
                  });

                  // Initialize height on page load
                  textarea.style.height = "auto";
                  textarea.style.height = textarea.scrollHeight + "px";
                
                  $('.contador_texto_plantilla_body').text('0/1024');
               }

 
            }

            function clicAddVariableBody()
            {
               $("#add_variable_body").click(async function () {

 
                  let template = $("#texto_textarea_body").val() + "{{cualquier_texto}}";
                  let reorderedTemplate = renumberPlaceholders(template);

                  $("#texto_textarea_body").val(reorderedTemplate);
                  $("#texto_textarea_body").text(reorderedTemplate);

                  //console.log(texto);

                  const textarea = document.getElementById("texto_textarea_body");
                  const maxLength = 1024; // Límite máximo de caracteres

                  let currentText = textarea.value || "";

                  if(currentText)
                  {
                     if (currentText.length > maxLength) {
                        currentText = currentText.substring(0, maxLength);
                        textarea.value = currentText; // Actualizar el valor del textarea
                     }

                     $('.contador_texto_plantilla_body').text(currentText.length + '/1024');

                     $(".plantilla-body").html(
                        "<p id='texto_body_plantilla_previa'>" +
                           currentText +
                        "</p>"
                     );

                     crearInputsDinamicosBody(currentText);

                  }
 
               });
            }


            function clickAddEmojiBody()
            {
               
               /*
                const emojiRanges = [
                     [0x1F600, 0x1F64F], // Caras y emociones
                     [0x1F300, 0x1F5FF], // Símbolos, naturaleza
                     [0x1F680, 0x1F6FF], // Transporte
                     [0x1F700, 0x1F77F], // Diversos
                     [0x1F780, 0x1F7FF], // Formas geométricas
                     [0x1F800, 0x1F8FF], // Flechas y símbolos extra
                     [0x1F900, 0x1F9FF], // Personas, gestos, ropa
                     [0x1FA00, 0x1FA6F], // Objetos, herramientas
                     [0x1FA70, 0x1FAFF]  // Más símbolos y emojis modernos
               ];
               */

              const emojiRanges = [
                  [0x1F600, 0x1F64F], // Caras y emociones
                  [0x1F300, 0x1F3FF], // Símbolos, naturaleza (excluding some symbols)
                  [0x1F400, 0x1F4FF], // Animales, comida, objetos
                  [0x1F500, 0x1F5FF], // Más símbolos
                  [0x1F680, 0x1F6FF], // Transporte
                  [0x1F900, 0x1F9FF], // Personas, gestos, ropa
                  [0x1FA70, 0x1FA9F]  // Más símbolos modernos (trimmed to avoid unsupported ones)
               ];
              
                
               $("#add_emoji_body").click(async function () {

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

                  const emojiContainer = document.getElementById("emojiContainer");

                  if(emojiContainer)
                  {

                     emojiContainer.innerHTML = '';

                     // Generar todos los emojis disponibles
                     emojiRanges.forEach(range => {
                           for (let i = range[0]; i <= range[1]; i++) {
                              let emoji = String.fromCodePoint(i);
                              let span = document.createElement("span");
                              span.classList.add("emoji");
                              span.textContent = emoji;
                              span.onclick = function () {
                                 insertEmoji(emoji);

                                 $("#CampañaEnviada").modal("hide");
                              };
                              emojiContainer.appendChild(span);
                           }
                     });
                  }

                   

                   
 
               });
            }

            function renumberPlaceholders(template) {
              const regex = /{{(.*?)}}/g;
               let seen = new Map();
               let counter = 1;

               // Reemplazar en una sola pasada asignando un número nuevo a cada aparición
               return template.replace(regex, (match, key) => {
                  seen.set(match, `{{${counter++}}}`);
                  return seen.get(match);
               });
            }

            function crearInputsDinamicosBody(currentText){

               //return;

               let cantidad_parametros = countPlaceholders(currentText);

               console.log("cantidad_parametros");
               console.log(cantidad_parametros);

               if(cantidad_parametros == 0)
               {

                  if ($(".contenido_segundario_body").length) {
                     $(".contenido_segundario_body").remove();
                  }

                  //si no hay nada borrar

               }else{   

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

                  for (let i = 1; i <= cantidad_parametros; i++) {
                     
                     let contenido_value = "";

                     let existe = $("#texto_input_plantilla_body_"+i) ;

                     if (existe.length != 0) 
                     {
                        contenido_value = existe.val();
                     }

                     //console.log("Mira la data que tiene el input _ " + i);
                     //console.log(contenido_value);

                     if(isEmpty(contenido_value))
                     {
                        html_input +=
                           "<div class='col-12 col-sm-7 col-md-9 col-lg-9' id='contenedor_cuerpo_parametros_"+i+"' >" +
                           "<label style='margin-top:12px;' id='texto_label_plantilla_body_" +
                           i +
                           "' data-id='" +
                           i +
                           "'>" +
                           "Field {{ " +
                           i +
                           " }} <span style='color: red; font-size: 10px;'>* Field is required</span>" +
                           "</label>" +

                           "<input id='texto_input_plantilla_body_" +
                           i +
                           "' data-id='" +
                           i +
                           "' class='form-control form-control-sm color-error tamano_input' value='" + contenido_value + "' />" +
                           "</div>" +
                           
                           "<div class='col-12 col-sm-5 col-md-3 col-lg-3 mb-3'>" +

                           "<label style='margin-top:12px; color:transparent; user-select: none; display:block'>Variable {{ " +
                           i +
                           " }}</label>" +

                           "<button type='button' id='boton_plantilla_body_" +
                           i +
                           "' data-id='" +
                           i +
                           "' class='btn btn-default btn-sm' style='border-color: #d3cac0; border: 1px solid #d3cac0; float: inline-end; display:block;' >" +
                           "Quitar"+
                           "</button>" +

                           "</div>";
                     }else{

                        html_input +=
                           "<div class='col-12 col-sm-7 col-md-9 col-lg-9' id='contenedor_cuerpo_parametros_"+i+"' >" +
                           "<label style='margin-top:12px;' id='texto_label_plantilla_body_" +
                           i +
                           "' data-id='" +
                           i +
                           "'>" +
                           "Field {{ " +
                           i +
                           " }} <span style='  font-size: 10px;'></span>" +
                           "</label>" +

                           "<input id='texto_input_plantilla_body_" +
                           i +
                           "' data-id='" +
                           i +
                           "' class='form-control form-control-sm tamano_input' value='" + contenido_value + "' />" +
                           "</div>" +
                           
                           "<div class='col-12 col-sm-5 col-md-3 col-lg-3 mb-3'>" +

                           "<label style='margin-top:12px; color:transparent; user-select: none; display:block'>Variable {{ " +
                           i +
                           " }}</label>" +

                           "<button type='button' id='boton_plantilla_body_" +
                           i +
                           "' data-id='" +
                           i +
                           "' class='btn btn-default btn-sm' style='border-color: #d3cac0; border: 1px solid #d3cac0; float: inline-end; display:block;' >" +
                           "Quitar"+
                           "</button>" +

                           "</div>";
                     }

                      

                  
                        
 
                  }

                  html_input += "</div>";
 
                  if ($(".contenido_segundario_body").length) {
                     $(".contenido_segundario_body").remove();
                  }

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

                  //EVENTO PARA QUITAR INPUT
                  $(".contenido_segundario_body").on(
                     "click",
                     "button[id^='boton_plantilla_body_']",
                     function () {
                        const dataId = $(this).data("id");
                        //console.log(`Data-id del botón: ${dataId}`);

                        let markerToRemove = "{{" + dataId + "}}";
 
                        const textarea = document.getElementById("texto_textarea_body");

                        let cleanedTemplate = OrdendandoCadena(removeExactMarker(textarea.value || "", markerToRemove)); 
      
                        const maxLength = 1024; // Límite máximo de caracteres

                        let currentText = cleanedTemplate || "";

                        if (currentText.length > maxLength) {
                           currentText = currentText.substring(0, maxLength);
                        }

                        $("#texto_textarea_body").val(currentText);
                        $("#texto_textarea_body").text(currentText);
 
                        $('.contador_texto_plantilla_body').text(currentText.length + '/1024');

                        $(".plantilla-body").html(
                           "<p id='texto_body_plantilla_previa'>" +
                              currentText +
                           "</p>"
                        );

                        crearInputsDinamicosBody(currentText);

                     }
                  );
                   

                  //EVENTO PARA ACTUALIZAR VISTA PREVIA
     
                  updateTextBodyWhatsappV1($("#texto_textarea_body").val());

                  $(".contenido_segundario_body").on(
                     "input",
                     "input[id^='texto_input_plantilla_body_']",
                     function () {
                        const value = $(this).val();
                        const dataId = $(this).data("id");
                        //console.log( `Value for input with data-id ${dataId}: ${value}`,);

                        updateTextBodyWhatsappV1($("#texto_textarea_body").val());

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

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


               }

            }

            function OrdendandoCadena(template) {
               const regex = /{{(.*?)}}/g;
               let seen = new Map();
               let counter = 1;

               // Reemplazar en una sola pasada asignando un número nuevo a cada aparición
               return template.replace(regex, (match, key) => {
                  seen.set(match, `{{${counter++}}}`);
                  return seen.get(match);
               });
            }

            function updateTextBodyWhatsappV1(miTexto) {
               let updatedText = miTexto;

               $("input[id^='texto_input_plantilla_body_']").each(function () {
                  const value = $(this).val();
                  const dataId = $(this).data("id");
                  const placeholder = "{{" + dataId + "}}";

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

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

                  updatedText = updatedText.replace(
                     regex,
                     value || placeholder,
                  );
               });

               $("#texto_body_plantilla_previa").text(updatedText);
            }

            function insertEmoji(emoji) {
               let textarea = document.getElementById("texto_textarea_body");

               if(textarea)
               {

                  let maxLength = 1024;

                  let start = textarea.selectionStart;
                  let end = textarea.selectionEnd;
                  let text = textarea.value;

                  // Insertar emoji en la posición del cursor
                  textarea.value = text.substring(0, start) + emoji + text.substring(end);

                  // Mover el cursor después del emoji insertado
                  textarea.selectionStart = textarea.selectionEnd = start + emoji.length;

                  // Enfocar el textarea nuevamente
                  textarea.focus();

                  let currentText = textarea.value || "";

                  if (currentText.length > maxLength) {
                     currentText = currentText.substring(0, maxLength);
                     textarea.value = currentText; // Actualizar el valor del textarea
                  }

                  $('.contador_texto_plantilla_body').text(currentText.length + '/1024');

                  $(".plantilla-body").html(
                     "<p id='texto_body_plantilla_previa'>" +
                        textarea.value +
                     "</p>"
                  );
               }

                
            }

            //PROGRAMACION SOLO PARA EL FOOTER -----------------------------------

            function adjustHeightTexto_TextArea_FOOTERWhatsappV1() {
               const textarea = document.getElementById("texto_textarea_footer");
               const maxLength = 60; // Límite máximo de caracteres

               textarea.addEventListener("input", () => {
                  // Verificar si excede el límite y cortar el texto si es necesario

                  let template = $("#texto_textarea_footer").val()
                  let reorderedTemplate = template;

                  $("#texto_textarea_footer").val(reorderedTemplate);
                  $("#texto_textarea_footer").text(reorderedTemplate);

                  let currentText = reorderedTemplate;
                  //let currentText = textarea.value;

                  if (currentText.length > maxLength) {
                        currentText = currentText.substring(0, maxLength);
                        textarea.value = currentText; // Actualizar el valor del textarea
                  }

                  // Reset the height to auto to shrink the textarea if necessary
                  textarea.style.height = "auto";
                  // Set the height to scrollHeight to expand to fit the content
                  textarea.style.height = textarea.scrollHeight + "px";

                  
                  $('.contador_texto_plantilla_footer').text(currentText.length + '/60');

                  $("#texto_footer_plantilla_previa").text(currentText);

                   

               });

               // Manejar el pegado de texto
               textarea.addEventListener("paste", (e) => {
                  // Obtener el texto del portapapeles
                  const pastedText = (e.clipboardData || window.clipboardData).getData('text');
                  // Combinar con el texto existente
                  let template = textarea.value + pastedText;

                  // Aplicar la limpieza para mantener solo el primer {{1}}
                  let reorderedTemplate = cleanAndKeepOnlyFirstTemplate(template);

                  // Limitar a 60 caracteres después de la limpieza
                  const newText = reorderedTemplate.substring(0, maxLength);

                  // Prevenir el pegado por defecto
                  e.preventDefault();
                  // Establecer el nuevo valor
                  textarea.value = newText;

                  // Actualizar altura, vista previa y contador
                  textarea.style.height = "auto";
                  textarea.style.height = textarea.scrollHeight + "px";
                  
                  $('.contador_texto_plantilla_footer').text(newText.length + '/60');

                  $("#texto_footer_plantilla_previa").text(newText);

                });

               // Initialize height on page load
               textarea.style.height = "auto";
               textarea.style.height = textarea.scrollHeight + "px";
               // Inicializar el contador en 0/60
               $('.contador_texto_plantilla_footer').text('0/60');

                
 

            }

            //PROGRAMACION SOLO PARA EL BUTTONS -----------------------------------

            function eventoSeleccionarOpcionBotonesYOtros()
            {
               $(".tener_select_button_plantillas").on("change", function () {

                  const selectedValue = $(this).val();

                  const selectedText = $(this).find("option:selected").text();

                  console.log("Valor seleccionado:", selectedValue);
                  console.log("Texto seleccionado:", selectedText);

                  console.log(OPCIONES_BOTONES);
                   
                  if (selectedValue) {

                     if(selectedValue != "QUICK_REPLY")
                     {  

                        let cambiar = OPCIONES_BOTONES.find((data) => data.value == selectedValue);

                        if(cambiar)
                        {
                           cambiar.edicion = true;
                           $(this).find("option[value='"+selectedValue+"']").prop("disabled", true);

                           if(selectedValue == "URL1")
                           {
                              $(".agregar_html_opcion_botones .URL1").css("display", "");

                              buttons_controlador.push({
                                 "type": "URL1",
                                 "text": ""
                              });
                           }

                           if(selectedValue == "URL2")
                           {
                              $(".agregar_html_opcion_botones .URL2").css("display", "");

                              buttons_controlador.push({
                                 "type": "URL2",
                                 "text": ""
                              });
                           }     

                           if(selectedValue == "PHONE_NUMBER")
                           {
                              $(".agregar_html_opcion_botones .PHONE_NUMBER").css("display", "");

                              buttons_controlador.push({
                                 "type": "PHONE_NUMBER",
                                 "text": ""
                              });
                           }                           

                        }
                        
                     }else{
 

                        let ahora = new Date();
                        let horas = ahora.getHours().toString().padStart(2, "0");
                        let minutos = ahora.getMinutes().toString().padStart(2, "0");
                        let segundos = ahora.getSeconds().toString().padStart(2, "0");

                        let horaFormato = horas + minutos + segundos; // Formato hhmmss
                        let resultado = numeroABase64(horaFormato); // Convertir a Base64

                        // Generar HTML usando template literals (``)
                        var html_input = `
                           <div class='col-12 descripcion_general_plantilla QUICK_REPLY QUICK_REPLY_${resultado}'>
                              <div class='row' style='margin: 0; align-items: center; align-content: center; margin-bottom: 5px;'>
                                    <div class='col-8'>
                                       <label style='width: 100%; max-width: 100%;'>Quick Reply</label>
                                    </div>
                                    <div class='col-4'>
                                       <button data-tipo='QUICK_REPLY' data-tipo_quick_reply='${resultado}' type='button' 
                                          class='btn btn-default btn-sm mt-1 ' id='quitar_opcion_plantilla_boton_${resultado}'
                                          style='border-color: #d3cac0; border: 1px solid #d3cac0; float: right; margin-left:5px; margin-right:5px;'>
                                          Quitar
                                       </button>
                                    </div>
                              </div>
                              <hr style='margin-top: 0;'>
                              <div class='row' style='margin: 0;'>
                                    <div class='col-12 col-sm-12 col-lg-12'>
                                       <label style='width: 100%; max-width: 100%;'>
                                          Button Text 
                                          <span style='color: black; font-size: 10px;'>* Field is required</span>
                                       </label>
                                       <input value='' id='input_nombre_quick_reply_${resultado}_text' data-mi_quick_reply='${resultado}' type='text' 
                                          class='form-control form-control-sm color-error tamano_input'>
                                       <p class='contador_nombre_${resultado}_text' 
                                          style='text-align: end; margin-bottom: 0px; font-size: 12px;'>0/25</p>
                                    </div>
                              </div>
                           </div>
                        `;

                        buttons_controlador.push({
                           "type": "QUICK_REPLY",
                           "text": "",
                           "identificador_html": "QUICK_REPLY_"+resultado,
                           "identificador": resultado
                        });

                        // Agregar el HTML generado al contenedor
                        $(".agregar_html_opcion_botones").append(html_input);

                        $(".agregar_html_opcion_botones").on(
                        "input paste",
                        "input[id^='input_nombre_quick_reply_']",
                        function (event) {
                           const $input = $(this);
                           let value = $input.val() || "";

                           const mi_quick_reply = $input.data("mi_quick_reply");

                           // Si el evento es "paste", obtenemos el texto que se va a pegar
                           if (event.type === "paste") {
                                 // Obtener el texto del portapapeles
                                 const clipboardData = event.originalEvent.clipboardData || window.clipboardData;
                                 const pastedText = clipboardData.getData("text");

                                 // Combinar el texto actual con el texto pegado
                                 const cursorPosition = $input[0].selectionStart;
                                 const textBefore = value.substring(0, cursorPosition);
                                 const textAfter = value.substring($input[0].selectionEnd, value.length);
                                 value = textBefore + pastedText + textAfter;

                                 $(".contador_nombre_" + mi_quick_reply + "_text").text("" + value.length + "/25");
                           }

                           // Limitar el texto a 25 caracteres
                           if (value.length > 25) {
                                 value = value.substring(0, 25);
                                 $input.val(value); // Actualizar el valor del input
                           }

                           //console.log(`Value for input: ${value}`);
                           
                           $(".contador_nombre_" + mi_quick_reply + "_text").text("" + value.length + "/25");

                           // Buscar el elemento correspondiente en buttons_controlador
                           let cambiar = buttons_controlador.find((data) => data.identificador_html == "QUICK_REPLY_" + mi_quick_reply);

                           // Actualizar el texto en el controlador si existe
                           if (cambiar) {
                                 cambiar.text = value;
                                 dibujar_botones();
                           }

                           // Validar si el campo está vacío para agregar/quitar la clase color-error
                           if (value === "" || value === null || value === undefined) {
                                 $input.addClass("color-error");
                           } else {
                                 $input.removeClass("color-error");
                           }
                        }
                     );

                        //EVENTO PARA QUITAR INPUT
                        $(".agregar_html_opcion_botones").on(
                           "click",
                           "button[id^='quitar_opcion_plantilla_boton_']",
                           function () {
                              const dataId = $(this).data("tipo_quick_reply");
                              console.log(`Data-id del botón: ${dataId}`);

                              buttons_controlador = buttons_controlador.filter((data) => data.identificador_html != "QUICK_REPLY_"+dataId);
                              dibujar_botones();
 
                              $(".QUICK_REPLY_"+dataId).remove();
 
                               

                           }
                        );

                     } 

                     dibujar_botones();

                     $(".tener_select_button_plantillas").val("");
 
 
                  }
               });

               eventos_url1();
               eventos_url2();

               eventos_phone_number();

               $(".tener_select_button_plantillas").val("");
            }    

            function dibujar_botones()
            {

               var html_input_buttons_vista_previa = "";

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

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

                  if (typeButtonValue == "URL1" || typeButtonValue == "URL2") {
                     img = PATH_IMG_ + "url_icono_plantilla.png";
                  }

                  if (typeButtonValue == "COPY_CODE") {
                     img = PATH_IMG_ + "copiar_icono_plantilla.png";
                  }

                   

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

                  if( typeButtonValue == "QUICK_REPLY" )
                  {
                      // Genera el HTML para la vista previa
                     html_input_buttons_vista_previa +=
                        '<div class="div_mensaje_boton">' +
                         '<a class="angotar_mensajes_botones">' +
                        textButtonValue +
                        "</a>" +
                        "</div>";
                  }else{
                      // Genera el HTML para la vista previa
                     html_input_buttons_vista_previa +=
                        '<div class="div_mensaje_boton">' +
                        '<img src="' +
                        img +
                        '" class="icono_plantilla"> <a class="angotar_mensajes_botones">' +
                        textButtonValue +
                        "</a>" +
                        "</div>";
                  }

                  

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

               $(".div_mensaje_boton").remove();


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

            function eventos_url1()
            {
               $(".tener_url1_type").on("change", function () {
                 
                  const selectedValue = $(this).val();

                  $("#input_nombre_url1_example_website").val("");

                  if (selectedValue) {

                     if(selectedValue == "dynamic")
                     {
                        $(".habilitar_url_dynamic").css("display", "");
                        $("#input_nombre_url1_example_website").addClass("color-error");
                     }else{
                        $(".habilitar_url_dynamic").css("display", "none");
                        $("#input_nombre_url1_example_website").removeClass("color-error");
                     }

                  }
               });
 
               //OTRA OPCION ---------------------

               const textarea = document.getElementById("input_nombre_url1_text");
               
               if(textarea)
               {
                  const maxLength = 25; // Límite máximo de caracteres

                  textarea.addEventListener("input", () => {
                     // Verificar si excede el límite y cortar el texto si es necesario

                     let template = $("#input_nombre_url1_text").val()

                     //$(this).addClass("color-error");  label.removeClass("color-error");

                     if(validIsEmpty(template))
                     {
                        $("#input_nombre_url1_text").addClass("color-error");
                     }else{
                        $("#input_nombre_url1_text").removeClass("color-error");
                     }

                     let currentText = template || "";
                     //let currentText = textarea.value;

                     if (currentText.length > maxLength) {
                           currentText = currentText.substring(0, maxLength);
                           textarea.value = currentText; // Actualizar el valor del textarea
                     }

                     // Actualizar la vista previa y el contador con el texto limitado
                     $('.contador_nombre_url1_text').text(currentText.length + '/25');

                     let cambiar_texto_boton = buttons_controlador.find((data) => data.type == "URL1");

                     if(cambiar_texto_boton)
                     {
                        cambiar_texto_boton.text = currentText;

                        dibujar_botones();
                     }

                    
                      

                  });

                  // Manejar el pegado de texto
                  textarea.addEventListener("paste", (e) => {
                     // Obtener el texto del portapapeles
                     const pastedText = (e.clipboardData || window.clipboardData).getData('text');
                    
                     // Combinar con el texto existente
                     let template = textarea.value + pastedText;

                     if(validIsEmpty(template))
                     {
                        $("#input_nombre_url1_text").addClass("color-error");
                     }else{
                        $("#input_nombre_url1_text").removeClass("color-error");
                     }

                     // Limitar a 60 caracteres después de la limpieza
                     const newText = template.substring(0, maxLength);

                     // Prevenir el pegado por defecto
                     e.preventDefault();

                     // Establecer el nuevo valor
                     textarea.value = newText;

                     $('.contador_nombre_url1_text').text(newText.length + '/25');

                     let cambiar_texto_boton = buttons_controlador.find((data) => data.type == "URL1");

                     if(cambiar_texto_boton)
                     {
                        cambiar_texto_boton.text = newText;

                        dibujar_botones();
                     }

                  });

                  
                
                  $('.contador_nombre_url1_text').text('0/25');
               }

               //OTRA OPCION-------------------------

               const textarea_url_website = document.getElementById("input_nombre_url1_website");
               
               if(textarea_url_website)
               {
                  const maxLength = 2000; // Límite máximo de caracteres

                  textarea_url_website.addEventListener("input", () => {
                     // Verificar si excede el límite y cortar el texto si es necesario

                     let template = $("#input_nombre_url1_website").val()

                     //$(this).addClass("color-error");  label.removeClass("color-error");

                     if(validIsEmpty(template))
                     {
                        $("#input_nombre_url1_website").addClass("color-error");
                     }else{
                        $("#input_nombre_url1_website").removeClass("color-error");
                     }

                     let currentText = template || "";
                     //let currentText = textarea_url_website.value;

                     if (currentText.length > maxLength) {
                           currentText = currentText.substring(0, maxLength);
                           textarea_url_website.value = currentText; // Actualizar el valor del textarea
                     }

                     // Actualizar la vista previa y el contador con el texto limitado
                     $('.contador_nombre_url1_website').text(currentText.length + '/2000');

                  });

                  // Manejar el pegado de texto
                  textarea_url_website.addEventListener("paste", (e) => {
                     // Obtener el texto del portapapeles
                     const pastedText = (e.clipboardData || window.clipboardData).getData('text');
                    
                     // Combinar con el texto existente
                     let template = textarea_url_website.value + pastedText;

                     if(validIsEmpty(template))
                     {
                        $("#input_nombre_url1_website").addClass("color-error");
                     }else{
                        $("#input_nombre_url1_website").removeClass("color-error");
                     }

                     // Limitar a 60 caracteres después de la limpieza
                     const newText = template.substring(0, maxLength);

                     // Prevenir el pegado por defecto
                     e.preventDefault();

                     // Establecer el nuevo valor
                     textarea_url_website.value = newText;

                     $('.contador_nombre_url1_website').text(newText.length + '/2000');

                  });
                
                  $('.contador_nombre_url1_website').text('0/2000');
               }

               //OTRA OPCION-------------------------

               const textarea_url_example_website = document.getElementById("input_nombre_url1_example_website");
               
               if(textarea_url_example_website)
               {

                  textarea_url_example_website.addEventListener("input", () => {
                     // Verificar si excede el límite y cortar el texto si es necesario

                     let template = $("#input_nombre_url1_example_website").val()

                     if(validIsEmpty(template))
                     {
                        $("#input_nombre_url1_example_website").addClass("color-error");
                     }else{
                        $("#input_nombre_url1_example_website").removeClass("color-error");
                     }

                     let currentText = template || "";

                  });

                  // Manejar el pegado de texto
                  textarea_url_example_website.addEventListener("paste", (e) => {
                     // Obtener el texto del portapapeles
                     const pastedText = (e.clipboardData || window.clipboardData).getData('text');
                    
                     // Combinar con el texto existente
                     let template = textarea_url_example_website.value + pastedText;

                     if(validIsEmpty(template))
                     {
                        $("#input_nombre_url1_example_website").addClass("color-error");
                     }else{
                        $("#input_nombre_url1_example_website").removeClass("color-error");
                     }

                     // Prevenir el pegado por defecto
                     e.preventDefault();

                     // Establecer el nuevo valor
                     textarea_url_example_website.value = template;

                  });
                
               }

               //OTRA OPCION-------------------------
               $('.quitar_opcion_plantilla_boton').on('click', function() {
                     var tipo = $(this).data('tipo');
                     console.log(tipo); // "URL1"

                     if(tipo == "URL1")
                     {
                        $(".URL1").css("display", "none");

                        let cambiar = OPCIONES_BOTONES.find((data) => data.value == "URL1");

                        if(cambiar)
                        {
                           cambiar.edicion = false;

                           $('.tener_select_button_plantillas option[value="' + "URL1" + '"]').prop('disabled', false);
                        }

                        //BORRAR TODO LOS CAMPOS
                        $("#input_nombre_url1_text").val("");
                        $("#url1_type").val("static");
                        $("#input_nombre_url1_website").val("");
                        $("#input_nombre_url1_example_website").val("");

                        $(".contador_nombre_url1_text").text("0/25");
                        $(".contador_nombre_url1_website").text("0/2000");

                        $(".habilitar_url_dynamic").css("display", "none");

                        if (!$("#input_nombre_url1_text").hasClass("color-error")) {
                           $("#input_nombre_url1_text").addClass("color-error");
                        }

                        if (!$("#input_nombre_url1_website").hasClass("color-error")) {
                           $("#input_nombre_url1_website").addClass("color-error");
                        }

                        if (!$("#input_nombre_url1_example_website").hasClass("color-error")) {
                           $("#input_nombre_url1_example_website").addClass("color-error");
                        }

                        buttons_controlador = buttons_controlador.filter((data) => data.type != "URL1");

                        dibujar_botones();

                        /*
                        let OPCIONES_BOTONES = [
                           {
                              value:"QUICK_REPLY",
                              text: "Quick reply buttons",
                              edicion: false
                           },
                           {
                              value:"URL1",
                              text: "Visit website",
                              edicion: false
                           },
                           {
                              value:"URL2",
                              text: "Visit website",
                              edicion: false
                           },
                           {
                              value:"PHONE_NUMBER",
                              text: "Call phone number",
                              edicion: false
                           } 
                        ];
                        */

                     }

                     if(tipo == "URL2")
                     {
                        $(".URL2").css("display", "none");

                        let cambiar = OPCIONES_BOTONES.find((data) => data.value == "URL2");

                        if(cambiar)
                        {
                           cambiar.edicion = false;

                           $('.tener_select_button_plantillas option[value="' + "URL2" + '"]').prop('disabled', false);
                        }

                        //BORRAR TODO LOS CAMPOS
                        $("#input_nombre_url2_text").val("");
                        $("#url2_type").val("static");

                        $("#input_nombre_url2_website").val("");
                        $("#input_nombre_url2_example_website").val("");

                        $(".contador_nombre_url2_text").text("0/25");
                        $(".contador_nombre_url2_website").text("0/2000");

                        $(".habilitar_url2_dynamic").css("display", "none");

                        if (!$("#input_nombre_url2_text").hasClass("color-error")) {
                           $("#input_nombre_url2_text").addClass("color-error");
                        }

                        if (!$("#input_nombre_url2_website").hasClass("color-error")) {
                           $("#input_nombre_url2_website").addClass("color-error");
                        }

                        if (!$("#input_nombre_url2_example_website").hasClass("color-error")) {
                           $("#input_nombre_url2_example_website").addClass("color-error");
                        }

                        buttons_controlador = buttons_controlador.filter((data) => data.type != "URL2");

                        dibujar_botones();

                     }

                     if(tipo == "PHONE_NUMBER")
                     {
                        $(".PHONE_NUMBER").css("display", "none");

                        let cambiar = OPCIONES_BOTONES.find((data) => data.value == "PHONE_NUMBER");

                        if(cambiar)
                        {
                           cambiar.edicion = false;

                           $('.tener_select_button_plantillas option[value="' + "PHONE_NUMBER" + '"]').prop('disabled', false);
                        }

                        //BORRAR TODO LOS CAMPOS
                        $("#input_nombre_phone_number_text").val("");

                        $("#input_numero_phone_number").val("");

                        $(".contador_nombre_phone_number_text").text("0/25");
                        $(".contador_nombre_phone_number").text("0/20");
 
                        if (!$("#input_nombre_phone_number_text").hasClass("color-error")) {
                           $("#input_nombre_phone_number_text").addClass("color-error");
                        }

                        if (!$("#input_numero_phone_number").hasClass("color-error")) {
                           $("#input_numero_phone_number").addClass("color-error");
                        }

                        buttons_controlador = buttons_controlador.filter((data) => data.type != "PHONE_NUMBER");

                        dibujar_botones();
 

                     }


                     $(".tener_select_button_plantillas").val("");


                     // Tu código aquí usando el valor 'tipo'
               });
 
            }

            function eventos_url2()
            {

               $(".tener_url2_type").on("change", function () {
                 
                  const selectedValue = $(this).val();

                  $("#input_nombre_url2_example_website").val("");

                  if (selectedValue) {

                     if(selectedValue == "dynamic")
                     {
                        $(".habilitar_url2_dynamic").css("display", "");
                        $("#input_nombre_url2_example_website").addClass("color-error");
                     }else{
                        $(".habilitar_url2_dynamic").css("display", "none");
                        $("#input_nombre_url2_example_website").removeClass("color-error");
                     }

                  }
               });

               //OTRA OPCION ---------------------

               const textarea = document.getElementById("input_nombre_url2_text");
               
               if(textarea)
               {
                  const maxLength = 25; // Límite máximo de caracteres

                  textarea.addEventListener("input", () => {
                     // Verificar si excede el límite y cortar el texto si es necesario

                     let template = $("#input_nombre_url2_text").val()

                     //$(this).addClass("color-error");  label.removeClass("color-error");

                     if(validIsEmpty(template))
                     {
                        $("#input_nombre_url2_text").addClass("color-error");
                     }else{
                        $("#input_nombre_url2_text").removeClass("color-error");
                     }

                     let currentText = template || "";
                     //let currentText = textarea.value;

                     if (currentText.length > maxLength) {
                           currentText = currentText.substring(0, maxLength);
                           textarea.value = currentText; // Actualizar el valor del textarea
                     }

                     // Actualizar la vista previa y el contador con el texto limitado
                     $('.contador_nombre_url2_text').text(currentText.length + '/25');

                     let cambiar_texto_boton = buttons_controlador.find((data) => data.type == "URL2");

                     if(cambiar_texto_boton)
                     {
                        cambiar_texto_boton.text = currentText;

                        dibujar_botones();
                     }

                  });

                  // Manejar el pegado de texto
                  textarea.addEventListener("paste", (e) => {
                     // Obtener el texto del portapapeles
                     const pastedText = (e.clipboardData || window.clipboardData).getData('text');
                    
                     // Combinar con el texto existente
                     let template = textarea.value + pastedText;

                     if(validIsEmpty(template))
                     {
                        $("#input_nombre_url2_text").addClass("color-error");
                     }else{
                        $("#input_nombre_url2_text").removeClass("color-error");
                     }

                     // Limitar a 60 caracteres después de la limpieza
                     const newText = template.substring(0, maxLength);

                     // Prevenir el pegado por defecto
                     e.preventDefault();

                     // Establecer el nuevo valor
                     textarea.value = newText;

                     $('.contador_nombre_url2_text').text(newText.length + '/25');

                     let cambiar_texto_boton = buttons_controlador.find((data) => data.type == "URL2");

                     if(cambiar_texto_boton)
                     {
                        cambiar_texto_boton.text = newText;

                        dibujar_botones();
                     }

                  });

                
                  $('.contador_nombre_url2_text').text('0/25');
               }

               //OTRA OPCION-------------------------

               const textarea_url_website = document.getElementById("input_nombre_url2_website");
               
               if(textarea_url_website)
               {
                  const maxLength = 2000; // Límite máximo de caracteres

                  textarea_url_website.addEventListener("input", () => {
                     // Verificar si excede el límite y cortar el texto si es necesario

                     let template = $("#input_nombre_url2_website").val()

                     //$(this).addClass("color-error");  label.removeClass("color-error");

                     if(validIsEmpty(template))
                     {
                        $("#input_nombre_url2_website").addClass("color-error");
                     }else{
                        $("#input_nombre_url2_website").removeClass("color-error");
                     }

                     let currentText = template || "";
                     //let currentText = textarea_url_website.value;

                     if (currentText.length > maxLength) {
                           currentText = currentText.substring(0, maxLength);
                           textarea_url_website.value = currentText; // Actualizar el valor del textarea
                     }

                     // Actualizar la vista previa y el contador con el texto limitado
                     $('.contador_nombre_url2_website').text(currentText.length + '/2000');

                  });

                  // Manejar el pegado de texto
                  textarea_url_website.addEventListener("paste", (e) => {
                     // Obtener el texto del portapapeles
                     const pastedText = (e.clipboardData || window.clipboardData).getData('text');
                    
                     // Combinar con el texto existente
                     let template = textarea_url_website.value + pastedText;

                     if(validIsEmpty(template))
                     {
                        $("#input_nombre_url2_website").addClass("color-error");
                     }else{
                        $("#input_nombre_url2_website").removeClass("color-error");
                     }

                     // Limitar a 60 caracteres después de la limpieza
                     const newText = template.substring(0, maxLength);

                     // Prevenir el pegado por defecto
                     e.preventDefault();

                     // Establecer el nuevo valor
                     textarea_url_website.value = newText;

                     $('.contador_nombre_url2_website').text(newText.length + '/2000');

                  });
                
                  $('.contador_nombre_url2_website').text('0/2000');
               }

               //OTRA OPCION-------------------------

               const textarea_url_example_website = document.getElementById("input_nombre_url2_example_website");
               
               if(textarea_url_example_website)
               {

                  textarea_url_example_website.addEventListener("input", () => {
                     // Verificar si excede el límite y cortar el texto si es necesario

                     let template = $("#input_nombre_url2_example_website").val()

                     if(validIsEmpty(template))
                     {
                        $("#input_nombre_url2_example_website").addClass("color-error");
                     }else{
                        $("#input_nombre_url2_example_website").removeClass("color-error");
                     }

                     let currentText = template || "";

                  });

                  // Manejar el pegado de texto
                  textarea_url_example_website.addEventListener("paste", (e) => {
                     // Obtener el texto del portapapeles
                     const pastedText = (e.clipboardData || window.clipboardData).getData('text');
                    
                     // Combinar con el texto existente
                     let template = textarea_url_example_website.value + pastedText;

                     if(validIsEmpty(template))
                     {
                        $("#input_nombre_url2_example_website").addClass("color-error");
                     }else{
                        $("#input_nombre_url2_example_website").removeClass("color-error");
                     }

                     // Prevenir el pegado por defecto
                     e.preventDefault();

                     // Establecer el nuevo valor
                     textarea_url_example_website.value = template;

                  });
                
               }


            }

            function eventos_phone_number()
            {
               //OTRA OPCION ---------------------

               const textarea = document.getElementById("input_nombre_phone_number_text");
               
               if(textarea)
               {
                  const maxLength = 25; // Límite máximo de caracteres

                  textarea.addEventListener("input", () => {
                     // Verificar si excede el límite y cortar el texto si es necesario

                     let template = $("#input_nombre_phone_number_text").val()

                     //$(this).addClass("color-error");  label.removeClass("color-error");

                     if(validIsEmpty(template))
                     {
                        $("#input_nombre_phone_number_text").addClass("color-error");
                     }else{
                        $("#input_nombre_phone_number_text").removeClass("color-error");
                     }

                     let currentText = template || "";
                     //let currentText = textarea.value;

                     if (currentText.length > maxLength) {
                           currentText = currentText.substring(0, maxLength);
                           textarea.value = currentText; // Actualizar el valor del textarea
                     }

                     // Actualizar la vista previa y el contador con el texto limitado
                     $('.contador_nombre_phone_number_text').text(currentText.length + '/25');

                     let cambiar_texto_boton = buttons_controlador.find((data) => data.type == "PHONE_NUMBER");

                     if(cambiar_texto_boton)
                     {
                        cambiar_texto_boton.text = currentText;

                        dibujar_botones();
                     }

                  });

                  // Manejar el pegado de texto
                  textarea.addEventListener("paste", (e) => {
                     // Obtener el texto del portapapeles
                     const pastedText = (e.clipboardData || window.clipboardData).getData('text');
                    
                     // Combinar con el texto existente
                     let template = textarea.value + pastedText;

                     if(validIsEmpty(template))
                     {
                        $("#input_nombre_phone_number_text").addClass("color-error");
                     }else{
                        $("#input_nombre_phone_number_text").removeClass("color-error");
                     }

                     // Limitar a 60 caracteres después de la limpieza
                     const newText = template.substring(0, maxLength);

                     // Prevenir el pegado por defecto
                     e.preventDefault();

                     // Establecer el nuevo valor
                     textarea.value = newText;

                     $('.contador_nombre_phone_number_text').text(newText.length + '/25');


                     let cambiar_texto_boton = buttons_controlador.find((data) => data.type == "PHONE_NUMBER");

                     if(cambiar_texto_boton)
                     {
                        cambiar_texto_boton.text = newText;

                        dibujar_botones();
                     }

                  });

                
                  $('.contador_nombre_phone_number_text').text('0/25');
               }

               //OTRA OPCION-------------------------
 

               const textarea_url_website = document.getElementById("input_numero_phone_number");
               
               if(textarea_url_website)
               {
                  const maxLength = 20; // Límite máximo de caracteres

                  textarea_url_website.addEventListener("input", () => {
                     // Verificar si excede el límite y cortar el texto si es necesario

                     let template = $("#input_numero_phone_number").val()

                     //$(this).addClass("color-error");  label.removeClass("color-error");

                     if(validIsEmpty(template))
                     {
                        $("#input_numero_phone_number").addClass("color-error");
                     }else{
                        $("#input_numero_phone_number").removeClass("color-error");
                     }

                     let currentText = template || "";
                     //let currentText = textarea_url_website.value;

                     if (currentText.length > maxLength) {
                           currentText = currentText.substring(0, maxLength);
                           textarea_url_website.value = currentText; // Actualizar el valor del textarea
                     }

                     // Actualizar la vista previa y el contador con el texto limitado
                     $('.contador_nombre_phone_number').text(currentText.length + '/20');


                  });

                  // Manejar el pegado de texto
                  textarea_url_website.addEventListener("paste", (e) => {
                     // Obtener el texto del portapapeles
                     const pastedText = (e.clipboardData || window.clipboardData).getData('text');
                    
                     // Combinar con el texto existente
                     let template = textarea_url_website.value + pastedText;

                     if(validIsEmpty(template))
                     {
                        $("#input_numero_phone_number").addClass("color-error");
                     }else{
                        $("#input_numero_phone_number").removeClass("color-error");
                     }

                     // Limitar a 60 caracteres después de la limpieza
                     const newText = template.substring(0, maxLength);

                     // Prevenir el pegado por defecto
                     e.preventDefault();

                     // Establecer el nuevo valor
                     textarea_url_website.value = newText;

                     $('.contador_nombre_phone_number').text(newText.length + '/20');

                    

                  });
                
                  $('.contador_nombre_phone_number').text('0/20');
               }
            }

            function numeroABase64(numero) {
               let strNumero = numero.toString(); // Convertir número a cadena
               let base64 = btoa(strNumero); // Codificar en Base64
               return base64;
            }

            $(".btn_enviar_plantilla").click(async function () {

 

               console.log("buttons_controlador");
               console.log(buttons_controlador);

               //generar_plantilla_whatsapp

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

               if(isEmpty(whatsapp_business_account_id))
               {
                  Swal.fire({
                              title: "Template",
                              text: "!The whatsapp settings field is required¡",
                              icon: "error",
                           });
                  return;
               }

               let nombre_plantilla = $("#input_nombre_plantilla").val();

               if(isEmpty(nombre_plantilla))
               {
                  Swal.fire({
                              title: "Template name and language",
                              text: "!The template name field is required¡",
                              icon: "error",
                           });

                  $('html, body').animate({
                           scrollTop: $("#input_nombre_plantilla").offset().top - 50
                     }, 1000);
                  return;
               }

               let language = $(".tener_input_lenguaje_plantilla").val();

               if(isEmpty(language))
               {
                  Swal.fire({
                              title: "Template name and language",
                              text: "!The language field is required¡",
                              icon: "error",
                           });
                  return;
               }

               const add_security_recommendation = $('.tener_add_security_recommendation').is(':checked');
               const add_expiration_time_code    = $('.tener_add_expiration_time_code').is(':checked');

               let add_expiration_code_input_select = $(".tener_add_expiration_code_input_select").val();

               let total_minutos = 10;

               if(add_expiration_time_code == true)
               {
                  total_minutos = add_expiration_code_input_select;
               }

               let enviar_informacion = {
                     whatsapp_business_account_id: whatsapp_business_account_id,
                     name: nombre_plantilla,  
                     language: language,  
                     category: "AUTHENTICATION",  //UTILITY
                     code_expiration_minutes: total_minutos,
                     components: [],  
               };

               let enviar_informacion_bd = {
                     whatsapp_business_account_id: whatsapp_business_account_id,
                     name: nombre_plantilla,  
                     language: language,  
                     category: "AUTHENTICATION",  //MARKETING
                     code_expiration_minutes: total_minutos,
                     contenido_body: [],  
                     contenido_buttons: [],  
 
               }; 
 
               var components = [];
 
               let estructura_body = {
                  type: "BODY",
                  example: {
                     body_text: [
                        ["1234"],
                     ],
                  },

                  add_security_recommendation: add_security_recommendation,

               };

               components.push(estructura_body);

               enviar_informacion_bd.contenido_body.push(estructura_body);
          

               //COPIA--------------------------------------------------
               let copiar_codigo = $("#nombre_copiar_codigo").val() || "";

               if(isEmpty(copiar_codigo) == false)
               {
              
                 
                  let miInformacionBody = {
                     type: "BUTTONS",
                     buttons:  [
                        {
                           type: "OTP",
                           otp_type: "COPY_CODE", // Especificamos que el botón OTP debe permitir copiar el código
                           text: copiar_codigo, //NOTAS: SOLO ACEPTA 25 CARACTERES
                           example: "1234" // Ejemplo del código que el usuario copiará
                        }
                     ],
                  };

                  components.push(miInformacionBody);

                  enviar_informacion_bd.contenido_buttons.push(miInformacionBody);
 
               }

               //BOTTON FIN--------------------------------------------------
                 
                 
               enviar_informacion.components = components;
               //enviar_informacion_bd.components = components;


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

               let informacion_principal = {
                  informacion_plantilla: enviar_informacion,
                  informacion_plantilla_bd: enviar_informacion_bd,
               };

               console.log("Informacion principal JSON");
               console.log(JSON.stringify(informacion_principal));
               
               console.log("Informacion principal");
               console.log(informacion_principal);

               console.log("Informacion para enviar plantilla");
               console.log(enviar_informacion);

               console.log("Informacion para base de datos");
               console.log(enviar_informacion_bd);
               //return;

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

               $(".bloqueo_v1").removeAttr("hidden");
               $(".bloqueo_v2").removeAttr("hidden");
               $(".bloqueo_v3").removeAttr("hidden");

               $.ajax({
                  type: "POST",
                  url: URL_BASE + "template/creacion_plantillas_whatsapp_autentificacion",
                  data: JSON.stringify(informacion_principal), // Convertir datos a formato JSON
                  contentType: "application/json", // Tipo de contenido JSON
                  success: function (response) {
                     $(".btn_enviar_plantilla").prop("disabled", false);
                     // console.log("Respuesta del servidor:", response);
                     // Hacer algo con la respuesta del servidor
                     //$("#myModal").modal("hide");

                     $(".bloqueo_v1").attr("hidden", true);
                     $(".bloqueo_v2").attr("hidden", true);
                     $(".bloqueo_v3").attr("hidden", true);

                     try {
                        let info = JSON.parse(response);
                        if (info.type == "success") {
                           //Swal.fire({
                           //   title: info.titulo,
                           //   text: info.message,
                           //   icon: "success",
                           //});

                           Swal.fire({
                           title: info.titulo,
                           text: info.message,
                           icon: "success",
                           backdrop: true,           // Muestra el fondo oscuro
                           allowOutsideClick: false, // Evita que se cierre al hacer clic fuera
                           allowEscapeKey: false,    // Opcional: Evita que se cierre con la tecla Escape
                        }).then((result) => {
                           if (result.isConfirmed) {

                              window.location = info.redirect;
                              
                              console.log("El usuario hizo clic en OK");
                              
                           }
                        });

                           //$(".configuracion_plantilla").hide();
                        } else {
                           //Swal.fire("Error sending group messages");
                          
                           Swal.fire({
                              title: info.titulo,
                              text: info.message,
                              icon: "error",
                           });
                        }
                     } catch (error) {
                        Swal.fire("Error:" + error);
                     }
                  },
                  error: function (xhr, status, error) {
                     $(".btn_enviar_plantilla").prop("disabled", false);

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


            document.getElementById("input_nombre_plantilla").addEventListener("input", function (event) {
               let input = event.target;
               let value = input.value || "";

               // Reemplazar espacios por guiones bajos
               value = value.replace(/\s/g, "_");

               // Permitir solo letras (a-z, A-Z), números (0-9) y guiones bajos (_)
               // Eliminar cualquier otro carácter
               value = value.replace(/[^a-zA-Z0-9_]/g, "");

               // Actualizar el valor del input con las correcciones
               input.value = String(value).toLowerCase(); 
            });





         });
     
 
     
 
</script>
{/literal}

{/block}

