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

      <input type="text" value="{$plantilla_id}" disabled hidden id="plantilla_id" />
      <input type="text" value="{$configuracion_whatsapp_id}" disabled hidden id="configuracion_whatsapp_id" />
      <input type="text" value="{$plantilla_name}" disabled hidden id="plantilla_name" />
      <input type="text" value="{$plantilla_language}" disabled hidden id="plantilla_language" />

      {*<input type="text" value="{$plantilla_componente}" disabled hidden id="plantilla_componente" />*}

      <textarea disabled hidden id="plantilla_componente" >{$plantilla_componente}</textarea>

      <textarea disabled hidden id="plantilla_contenido_botones_db" >{$plantilla_contenido_botones_db}</textarea>
 
    <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" disabled
                                             ></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" disabled
                                                            />
                                                            
                                                             

                                                         </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" disabled
                                                            ></select>

                                                         </div>

                                                         <div class="col-sm-6 mt-2 reset separador">
                                                            <label style=" width: 100%; max-width: 100%; ">
                                                            
                                                               Status
                                                            </label>
                                                            <input
                                                               value="{$plantilla_status}"
                                                               id="input_status_plantilla"
                                                               type="text"
                                                               class="form-control form-control-sm tamano_input" disabled
                                                            />
 
                                                         </div>

                                                         <div class="col-sm-6 mt-2 reset separador">
                                                            <label style=" width: 100%; max-width: 100%; ">
                                                            
                                                               Category type
                                                            </label>
                                                            <input
                                                               value="{$plantilla_category}"
                                                               id="tipo_categoria"
                                                               type="text"
                                                               class="form-control form-control-sm tamano_input" disabled
                                                            />
 
                                                         </div>

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

                                                   <!-- HEADER plantilla -->
                                                   <div class="descripcion_general_plantilla">
                                                      <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>

                                                            <br/>

                                                            <div class="btn-group" role="group" aria-label="Basic radio toggle button group" style=" border: 1px solid #d3cac0; border-radius: 6px; display:flex; ">
                                                               <input type="radio" class="btn-check evento_cambiar_cabecera" data-text="NONE" name="btnradio" id="btnradio1" autocomplete="off" checked>
                                                               <label class="btn   header_text_none cambiar_fondo_seleccionado" for="btnradio1">None</label>

                                                               <input type="radio" class="btn-check evento_cambiar_cabecera" data-text="TEXT" name="btnradio" id="btnradio2" autocomplete="off">
                                                               <label class="btn btn-default header_text_text" for="btnradio2">Text</label>

                                                               <input type="radio" class="btn-check evento_cambiar_cabecera" data-text="IMAGE" name="btnradio" id="btnradio3" autocomplete="off">
                                                               <label class="btn btn-default header_text_imagen" for="btnradio3">Image</label>

                                                               <input type="radio" class="btn-check evento_cambiar_cabecera" data-text="VIDEO" name="btnradio" id="btnradio4" autocomplete="off">
                                                               <label class="btn btn-default header_text_video" for="btnradio4">Video</label>

                                                               <input type="radio" class="btn-check evento_cambiar_cabecera" data-text="DOCUMENT" name="btnradio" id="btnradio5" autocomplete="off">
                                                               <label class="btn btn-default header_text_document" for="btnradio5">Document</label>

                                                               <input type="radio" class="btn-check evento_cambiar_cabecera" data-text="LOCATION" name="btnradio" id="btnradio6" autocomplete="off">
                                                               <label class="btn btn-default header_text_location" for="btnradio6">Location</label>
                                                            </div>
                                                             

                                                            <select
                                                               class="form-select form-select-sm tener_input_header_plantilla tamano_input"
                                                               name="input_header_plantilla"
                                                               id="input_header_plantilla"
                                                               style="width: 100%; display: none;"
                                                               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 - 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_buttons"
                                                            >

                                                            <div class="row">

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

                                                               <div class="col-2">
                                                                  <button
                                                                     type="button"
                                                                     class="btn btn-default"
                                                                     id="crear_nueva_configuacion_whatsapp"
                                                                     style="
                                                                        border-color: #d3cac0;
                                                                        border: 1px solid #d3cac0;
                                                                        float: right;
                                                                     "
                                                                  >
                                                                     Add buttons
                                                                  </button>
                                                               
                                                               </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 tamano_input"  >
                                                                        
                                                                        <p class="concatenacion_url1_website" style="margin-bottom: 0px;font-size: 12px;"></p>

                                                                     </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"  >
                                                                        <p class="concatenacion_url2_website" style="margin-bottom: 0px;font-size: 12px;"></p>

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

                                                               {*plantilla COPY_CODE*}
                                                    
                                                               <div class="col-12 descripcion_general_plantilla COPY_CODE"  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%; "> 
                                                                           Copy offer code
                                                                        </label>
                                                                     </div>

                                                                     <div class="col-4">
                                                                        <button  data-tipo="COPY_CODE" 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-6 col-lg-6">
                                                                        <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_copy_code_text" type="text" class="form-control form-control-sm color-error tamano_input">

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


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

                                                                        <input value="" id="input_copy_code"  placeholder="Eje. DESCUENTO2025" type="text" class="form-control form-control-sm color-error tamano_input">
                                                                        
                                                                        <p class="contador_example_copy_code" style="text-align: end;margin-bottom: 0px;font-size: 12px;">0/15</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
            },
            {
               value:"COPY_CODE",
               text: "Copy offer code",
               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();
         var PLANTILLA_ID      = $("#plantilla_id").val();
         var CONFIGURACION_WHATSAPP_ID     = $("#configuracion_whatsapp_id").val();
         
         var PLANTILLA_NAME         = $("#plantilla_name").val();
         var PLANTILLA_LENGUAGE     = $("#plantilla_language").val();
         var PLANTILLA_COMPONENTE   = $("#plantilla_componente").text();
         var PLANTILLA_STATUS   = $("#input_status_plantilla").val();

         var PLANTILLA_CONTENIDO_BOTONES_DB   = $("#plantilla_contenido_botones_db").text();


         //plantilla_contenido_botones_db
 
         $(".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 (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: "Inglés (Reino Unido)", codigo: "en_GB" },
            { 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;

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

               $(".tener_configuracion").val(CONFIGURACION_WHATSAPP_ID);

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

               $(".tener_input_lenguaje_plantilla").val(PLANTILLA_LENGUAGE);

               $("#input_nombre_plantilla").val(PLANTILLA_NAME);

               $('.contador_nombre_plantilla').text(PLANTILLA_NAME.length + '/512');

 

               $("#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" 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>   ";
 
            // Inserta el contenido HTML en el div
            $(".contenido_principal_body").html(html_input);

            //footer
            $(".footer_plantilla").show();
            $("#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();

             


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

            eventoSeleccionarOpcionBotonesYOtros();

            cargar_informacion_plantillas(PLANTILLA_COMPONENTE,PLANTILLA_CONTENIDO_BOTONES_DB);
 


            $('#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;
               }
            }); 

            $('.evento_cambiar_cabecera').on('change', function() {
               
               if ($(this).is(':checked')) {

                  const dataText = $(this).data('text');
                  
                  //$(this).removeClass('btn-default');
                  //$(this).addClass('cambiar_fondo_seleccionado ');

                  console.log('Selected data-text:', dataText);

                  INFORMACION_PLANTILLA_HEADER = ""; 
                  INFORMACION_PLANTILLA_HEADER_EXTENSION = ""; 

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

                  $(".header_text_none").addClass('btn-default');
                  $(".header_text_text").addClass('btn-default');
                  $(".header_text_imagen").addClass('btn-default');
                  $(".header_text_video").addClass('btn-default');
                  $(".header_text_document").addClass('btn-default');
                  $(".header_text_location").addClass('btn-default');

                  $('#input_header_plantilla').val(dataText);

                  switch(dataText) {
                     case 'NONE':
                        console.log('Seleccionaste None');

                        $(".plantilla-header").html(
                           ""
                        );
                        
                        $(".header_text_none").addClass('cambiar_fondo_seleccionado');
                        $(".header_text_none").removeClass('btn-default');

                        break;
                     case 'TEXT':

                        $(".header_text_text").addClass('cambiar_fondo_seleccionado');
                        $(".header_text_text").removeClass('btn-default');

                        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':

                        $(".header_text_imagen").addClass('cambiar_fondo_seleccionado');
                        $(".header_text_imagen").removeClass('btn-default');
                        console.log('Seleccionaste Image');
 

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

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

                        break;
                     case 'VIDEO':

                        $(".header_text_video").addClass('cambiar_fondo_seleccionado');
                        $(".header_text_video").removeClass('btn-default');
                        console.log('Seleccionaste Video');

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

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

                        break;
                     case 'DOCUMENT':

                        $(".header_text_document").addClass('cambiar_fondo_seleccionado');
                        $(".header_text_document").removeClass('btn-default');
                        console.log('Seleccionaste Document');

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

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

                        break;
                     case 'LOCATION':

                        $(".header_text_location").addClass('cambiar_fondo_seleccionado');
                        $(".header_text_location").removeClass('btn-default');

                        console.log('Seleccionaste Location');

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

                        break;
                  }
                        
                      
               }
            });

            //CUANDO SE SELECCIONA UNA OPCION EN HEADER NONE, TEXT, IMAGE, VIDEO, DOCUMENT, LOCATION
            $('#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':

                        $(".plantilla-header").html(
                           ""
                        );
                        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 () {

                  return;

                  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

                        resultado = resultado.replace(/=/g, "");

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

               eventos_copiar_code();

               $(".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 (typeButtonValue == "QUICK_REPLY") {
                     img = PATH_IMG_ + "quick_reply.png";
                  }

                   

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

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

                     let concatenacion_pleca = "";

                     if (!currentText.endsWith('/')) {
                        concatenacion_pleca = currentText + '/';
                     }else{
                        concatenacion_pleca = currentText;
                     }

                     $(".concatenacion_url1_website").text(concatenacion_pleca + $("#input_nombre_url1_example_website").val());

                  });

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

                     let concatenacion_pleca = "";

                     if (!newText.endsWith('/')) {
                        concatenacion_pleca = newText + '/';
                     }else{
                        concatenacion_pleca = newText;
                     }

                     $(".concatenacion_url1_website").text(concatenacion_pleca + $("#input_nombre_url1_example_website").val());

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

                     let concatenacion_pleca = "";
                     let texto = $("#input_nombre_url1_website").val();

                     if (!texto.endsWith('/')) {
                        concatenacion_pleca = texto + '/';
                     }else{
                        concatenacion_pleca = texto;
                     }

                     $(".concatenacion_url1_website").text(concatenacion_pleca + $("#input_nombre_url1_example_website").val());

                  });

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

                     let concatenacion_pleca = "";
                     let texto = $("#input_nombre_url1_website").val();

                     if (!texto.endsWith('/')) {
                        concatenacion_pleca = texto + '/';
                     }else{
                        concatenacion_pleca = texto;
                     }

                     $(".concatenacion_url1_website").text(concatenacion_pleca + $("#input_nombre_url1_example_website").val());

                  });
                
               }

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

                     }

                     if(tipo == "COPY_CODE")
                     {
                        $(".COPY_CODE").css("display", "none");

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

                        if(cambiar)
                        {
                           cambiar.edicion = false;

                           $('.tener_select_button_plantillas option[value="' + "COPY_CODE" + '"]').prop('disabled', false);
                        }

                        //BORRAR TODO LOS CAMPOS
                        $("#input_nombre_copy_code_text").val("");

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

                        $(".contador_nombre_copy_code_text").text("0/25");
                        $(".contador_example_copy_code").text("0/15");

                        if (!$("#input_nombre_copy_code_text").hasClass("color-error")) {
                           $("#input_nombre_copy_code_text").addClass("color-error");
                        }

                        if (!$("#input_copy_code").hasClass("color-error")) {
                           $("#input_copy_code").addClass("color-error");
                        }
  
                        buttons_controlador = buttons_controlador.filter((data) => data.type != "COPY_CODE");

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

                     let concatenacion_pleca = "";

                     if (!currentText.endsWith('/')) {
                        concatenacion_pleca = currentText + '/';
                     }else{
                        concatenacion_pleca = currentText;
                     }

                     $(".concatenacion_url2_website").text(concatenacion_pleca + $("#input_nombre_url2_example_website").val());

                  });

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

                     let concatenacion_pleca = "";
                     let template_url_base = $("#input_nombre_url2_website").val()

                     if (!template_url_base.endsWith('/')) {
                        concatenacion_pleca = template_url_base + '/';
                     }else{
                        concatenacion_pleca = template_url_base;
                     }

                     $(".concatenacion_url2_website").text(concatenacion_pleca + $("#input_nombre_url2_example_website").val());

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

                     let concatenacion_pleca = "";
                     let template_url_base = $("#input_nombre_url2_website").val()

                     if (!template_url_base.endsWith('/')) {
                        concatenacion_pleca = template_url_base + '/';
                     }else{
                        concatenacion_pleca = template_url_base;
                     }

                     $(".concatenacion_url2_website").text(concatenacion_pleca + $("#input_nombre_url2_example_website").val());

                  });

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

                     let concatenacion_pleca = "";
                     let template_url_base = $("#input_nombre_url2_website").val()

                     if (!template_url_base.endsWith('/')) {
                        concatenacion_pleca = template_url_base + '/';
                     }else{
                        concatenacion_pleca = template_url_base;
                     }

                     $(".concatenacion_url2_website").text(concatenacion_pleca + $("#input_nombre_url2_example_website").val());

                  });
                
               }


            }

            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 eventos_copiar_code()
            {
 

               const textarea = document.getElementById("input_nombre_copy_code_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_copy_code_text").val()

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

                     if(validIsEmpty(template))
                     {
                        $("#input_nombre_copy_code_text").addClass("color-error");
                     }else{
                        $("#input_nombre_copy_code_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_copy_code_text').text(currentText.length + '/25');

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

                     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_copy_code_text").addClass("color-error");
                     }else{
                        $("#input_nombre_copy_code_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_copy_code_text').text(newText.length + '/25');

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

                     if(cambiar_texto_boton)
                     {
                        cambiar_texto_boton.text = newText;

                        dibujar_botones();
                     }

                  });

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

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

               const textarea_url_website = document.getElementById("input_copy_code");
               
               if(textarea_url_website)
               {
                  const maxLength = 15; // 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_copy_code").val()

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

                     if(validIsEmpty(template))
                     {
                        $("#input_copy_code").addClass("color-error");
                     }else{
                        $("#input_copy_code").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_example_copy_code').text(currentText.length + '/15');
 

                  });

                  // 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_copy_code").addClass("color-error");
                     }else{
                        $("#input_copy_code").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_example_copy_code').text(newText.length + '/15');

            
                     

                  });
                
                  $('.contador_example_copy_code').text('0/15');
               }
 
            }

            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);
 
               if(PLANTILLA_STATUS == "PENDING")
               {
                  Swal.fire({
                     title: "Template",
                     text: "!The template is in pending status, it cannot be edited.¡",
                     icon: "error",
                  });

                  return;
               }
 
               //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;
               }

               let enviar_informacion = {
                     whatsapp_business_account_id: whatsapp_business_account_id,
                     name: nombre_plantilla,  
                     language: language,  
                     category: "MARKETING",  //UTILITY
                     components: [],  
               };

               //modificacion_plantillas_whatsapp
               //PLANTILLA_ID

               let enviar_informacion_bd = {
                     plantilla_id:  PLANTILLA_ID,
                     whatsapp_business_account_id: whatsapp_business_account_id,
                     name: nombre_plantilla,  
                     language: language,  
                     category: "MARKETING",  //MARKETING
 
                     //para_header -------
                     tipo_header: "",
                     texto_header:"",
                     contenido_header: [],

                     base_64_otros_tipos_header: "",
                     extension_otros_tipos_header: "",

                     //para_body -------
                     texto_body:"",
                     contenido_body: [],

                     //para_footer -------
                     texto_footer:"",

                     //para_buttons -------
                     contenido_buttons: [],
               }; 

               var components = [];
               var componente_HEADER = [];
               var componente_Body = [];
               var componente_Buttons = [];
               
               //HEADER--------------------------------------------------
               let HEADER = $(".tener_input_header_plantilla").val() || "";

               enviar_informacion_bd.tipo_header = HEADER;
 

               if(HEADER == "TEXT")
               {
                  

                  let header_text_campo = $("#texto_textarea_header").val();

                   enviar_informacion_bd.texto_header = header_text_campo;

                  if(isEmpty(header_text_campo))
                  {
                     Swal.fire({
                              title: "Header",
                              text: "!The header content is required",
                              icon: "error",
                           });

                     $('html, body').animate({
                           scrollTop: $("#texto_textarea_header").offset().top - 50
                     }, 1000);
                     return;
                  }

                 let miInformacionHeader = {
                     type: "HEADER",
                     format: "TEXT",
                     text:  header_text_campo,
                  };
 
                  let cantidad_parametros = countPlaceholders(header_text_campo);

                  if(cantidad_parametros != 0)
                  {
                     var validarCampoVacioHeader = false;

                     miInformacionHeader.example = [];

                     let miArregloParametrosHeader = [];
                     let miArregloParametrosHeader_DB = [];
                     
                     for (let i = 1; i <= cantidad_parametros; i++) {
                     
                        let contenido_value = "";

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

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

                           //console.log(contenido_value); 

                           if(isEmpty(contenido_value))
                           {
                              Swal.fire({
                                 title: "Header",
                                 text: "!The Header content " + "Field {{ " + i + " }}  is required¡",
                                 icon: "error",
                              });

 
                              $('html, body').animate({
                                 scrollTop: $("#texto_input_plantilla_header_"+i).offset().top - 50
                              }, 1000);

                              validarCampoVacioHeader = true;
                              return;
                           }

                           miArregloParametrosHeader.push(contenido_value); 

                           miArregloParametrosHeader_DB.push({
                              buscador: "{{" + i + "}}",
                              value: contenido_value
                           });                           
                        }
   
                     } 

                     if(validarCampoVacioHeader == true)
                     {
                        return;
                     }

                     //miInformacionHeader.example.push({
                     //   header_text: [...miArregloParametrosHeader]
                     //});

                     miInformacionHeader.example = {
                        header_text: [...miArregloParametrosHeader]
                     };

                     componente_HEADER = miInformacionHeader;

                     components.push(componente_HEADER);

                     //para base de datos
                     enviar_informacion_bd.contenido_header = [...miArregloParametrosHeader_DB];


                  }else{
                     componente_HEADER = miInformacionHeader;

                     components.push(componente_HEADER);

                  }
 
               }

               if(HEADER == "IMAGE" || HEADER == "VIDEO" || HEADER == "DOCUMENT")
               {
                     
                  $(".texto_textarea_header").val("");
                  //INFORMACION_PLANTILLA_HEADER = base64String;
                  //INFORMACION_PLANTILLA_HEADER_EXTENSION = file.type;

                  enviar_informacion_bd.base_64_otros_tipos_header = INFORMACION_PLANTILLA_HEADER;
                  enviar_informacion_bd.extension_otros_tipos_header = INFORMACION_PLANTILLA_HEADER_EXTENSION;
 
                  if(isEmpty(INFORMACION_PLANTILLA_HEADER))
                  {
                     Swal.fire({
                              title: "Header",
                              text: "!The Header occupies a file to create the template¡",
                              icon: "error",
                           });
                     return;
                  }

                  let miInformacionHeader = {
                     type: "HEADER",
                     format: HEADER,
                     example : {
                        header_handle: "",
                     },
                  };

                  components.push(miInformacionHeader);

               }

               if(HEADER == "LOCATION"){

                  
                  components.push({
                     type: "HEADER",
                     format: "LOCATION",
                  });

               }
               //HEADER FIN--------------------------------------------------

               //BODY--------------------------------------------------
               let BODY = $("#texto_textarea_body").val() || "";

               let miInformacionBody = {
                  type: "BODY",
                  text:  BODY,
               };

               if(isEmpty(BODY)){
                  Swal.fire({
                     title: "Header",
                     text: "!The Body Content field is required.¡",
                     icon: "error",
                  });

                  $('html, body').animate({
                     scrollTop: $("#texto_textarea_body").offset().top - 50
                  }, 1000);

                  return;
               }

               enviar_informacion_bd.texto_body = BODY;
 
               let cantidad_parametros_body = countPlaceholders(BODY);

               if(cantidad_parametros_body != 0)
               {
                  var validarCampoVacioBody = false;

                  miInformacionBody.example = [];

                  let miArregloParametrosBody = [];
                  let miArregloParametrosBody_DB = [];
                  
                  for (let i = 1; i <= cantidad_parametros_body; i++) {
                  
                     let contenido_value = "";

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

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

                        //console.log(contenido_value); 

                        if(isEmpty(contenido_value))
                        {
                           Swal.fire({
                              title: "Header",
                              text: "!The Body content " + "Field {{ " + i + " }}  is required¡",
                              icon: "error",
                           });

 
                           $('html, body').animate({
                              scrollTop: $("#texto_input_plantilla_body_"+i).offset().top - 50
                           }, 1000);

                           validarCampoVacioBody = true;
                           return;
                        }

                        miArregloParametrosBody.push(contenido_value); 

                        miArregloParametrosBody_DB.push({
                           buscador: "{{" + i + "}}",
                           value: contenido_value
                        });                           
                     }
   
                  } 

                  if(validarCampoVacioBody == true)
                  {
                     return;
                  }

                  //miInformacionBody.example.push({
                  //   body_text: [...miArregloParametrosBody]
                  //});

                  miInformacionBody.example = {
                     body_text: []  
                  };

                  miInformacionBody.example.body_text.push([...miArregloParametrosBody]);

                  componente_Body = miInformacionBody;

                  components.push(componente_Body);

                  //para base de datos
                  enviar_informacion_bd.contenido_body = [...miArregloParametrosBody_DB];


               }else{
                  components.push(miInformacionBody);
               }

               //BODY FIN--------------------------------------------------

               //FOOTER--------------------------------------------------
               let FOOTER = $("#texto_textarea_footer").val() || "";

               if(isEmpty(FOOTER) == false)
               {
                 
                  let miInformacionBody = {
                     type: "FOOTER",
                     text:  FOOTER,
                  };

                  components.push(miInformacionBody);

                  //para base de datos
                  enviar_informacion_bd.texto_footer = FOOTER;

               }

               //BOTTON FIN--------------------------------------------------
                
               //URL 1
               let existe_btn_url1 = buttons_controlador.find((data) => data.type == "URL1");

               var cabeceraButtons = {
                  type: "BUTTONS",
                  buttons: [],
               };

               var miArregloBotonesDB = [];

               if(isEmpty(existe_btn_url1) == false)
               {
                 
                 let estructura_BTN = {
                    type: "URL",
                    text: "",
                    url: "",
                 };

                 let estructura_BTN_DB = {
                    type: "URL1",
                    text: "",
                    url_type: "",
                    url: "",
                    url_example: "",
                 };
 
                 let input_nombre_url1_text = $("#input_nombre_url1_text").val() || "";

                 if(isEmpty(input_nombre_url1_text))
                 {
                     Swal.fire({
                        title: '"Visit website" button section',
                        text: "!In the buttons section fill in the required fields marked in red¡",
                        icon: "error",
                     });

                     $('html, body').animate({
                           scrollTop: $("#input_nombre_url1_text").offset().top - 50
                     }, 1000);
                     return;
                 }

                 estructura_BTN.text = input_nombre_url1_text;
                 estructura_BTN_DB.text = input_nombre_url1_text;

                 let input_nombre_url1_website = $("#input_nombre_url1_website").val() || "";

                 if(isEmpty(input_nombre_url1_website))
                 {
                     Swal.fire({
                        title: '"Visit website" button section',
                        text: "!In the buttons section fill in the required fields marked in red¡",
                        icon: "error",
                     });

                     $('html, body').animate({
                           scrollTop: $("#input_nombre_url1_website").offset().top - 50
                     }, 1000);
                     return;
                 }

                 if (esUrlValida(input_nombre_url1_website) == false) {
                     //console.log("La URL es válida:", url);

                     Swal.fire({
                        title: "Invalid URL",
                        text: 'In the "Visit website" buttons section, the "Website URL" field is not a valid URL.',
                        icon: "error",
                     });
                     return;
                  }  

                 if (!input_nombre_url1_website.endsWith('/')) {
                    input_nombre_url1_website += '/';
                 }

                 let tener_url1_type = $(".tener_url1_type").val() || "";
                 let input_nombre_url1_example_website = $("#input_nombre_url1_example_website").val() || "";

                 if(tener_url1_type == "dynamic")
                 {

                     if(isEmpty(input_nombre_url1_example_website))
                     {
                        Swal.fire({
                           title: '"Visit website" button section',
                           text: "!In the buttons section fill in the required fields marked in red¡",
                           icon: "error",
                        });

                        $('html, body').animate({
                              scrollTop: $("#input_nombre_url1_example_website").offset().top - 50
                        }, 1000);
                        return;
                     }

                     estructura_BTN.url = input_nombre_url1_website + "{{1}}";

                     estructura_BTN.example = [];
                     estructura_BTN.example.push(input_nombre_url1_example_website);

                 }else{
                    estructura_BTN.url = input_nombre_url1_website;
                 }

                 estructura_BTN_DB.url_type = tener_url1_type;
                 estructura_BTN_DB.url = input_nombre_url1_website;
                 estructura_BTN_DB.url_example = input_nombre_url1_example_website;
 
                 //componente_Buttons.push(estructura_BTN);

                 cabeceraButtons.buttons.push(estructura_BTN);

                 miArregloBotonesDB.push(estructura_BTN_DB);

               }

               //URL 2
               let existe_btn_url2 = buttons_controlador.find((data) => data.type == "URL2");

               if(isEmpty(existe_btn_url2) == false)
               {
                  let estructura_BTN = {
                     type: "URL",
                     text: "",
                     url: "",
                  };

                  let estructura_BTN_DB = {
                     type: "URL2",
                     text: "",
                     url_type: "",
                     url: "",
                     url_example: "",
                  };
   
                  let input_nombre_url2_text = $("#input_nombre_url2_text").val() || "";

                  if(isEmpty(input_nombre_url2_text))
                  {
                        Swal.fire({
                           title: '"Visit website" button section',
                           text: "!In the buttons section fill in the required fields marked in red¡",
                           icon: "error",
                        });

                        $('html, body').animate({
                              scrollTop: $("#input_nombre_url2_text").offset().top - 50
                        }, 1000);
                        return;
                  }


                  estructura_BTN.text = input_nombre_url2_text;
                  estructura_BTN_DB.text = input_nombre_url2_text;

                  let input_nombre_url2_website = $("#input_nombre_url2_website").val() || "";

                  if(isEmpty(input_nombre_url2_website))
                  {
                        Swal.fire({
                           title: '"Visit website" button section',
                           text: "!In the buttons section fill in the required fields marked in red¡",
                           icon: "error",
                        });

                        $('html, body').animate({
                              scrollTop: $("#input_nombre_url2_website").offset().top - 50
                        }, 1000);
                        return;
                  }

                  if (esUrlValida(input_nombre_url2_website) == false) {
                     //console.log("La URL es válida:", url);

                     Swal.fire({
                        title: "Invalid URL",
                        text: 'In the "Visit website" buttons section, the "Website URL" field is not a valid URL.',
                        icon: "error",
                     });
                     return;
                  }  

                  if (!input_nombre_url2_website.endsWith('/')) {
                     input_nombre_url2_website += '/';
                  }

                  let tener_url2_type = $(".tener_url2_type").val() || "";
                  let input_nombre_url2_example_website = $("#input_nombre_url2_example_website").val() || "";

                  if(tener_url2_type == "dynamic")
                  {

                        if(isEmpty(input_nombre_url2_example_website))
                        {
                           Swal.fire({
                              title: '"Visit website" button section',
                              text: "!In the buttons section fill in the required fields marked in red¡",
                              icon: "error",
                           });

                           $('html, body').animate({
                                 scrollTop: $("#input_nombre_url2_example_website").offset().top - 50
                           }, 1000);
                           return;
                        }

                        estructura_BTN.url = input_nombre_url2_website + "{{1}}";

                        estructura_BTN.example = [];
                        estructura_BTN.example.push(input_nombre_url2_example_website);

                  }else{
                     estructura_BTN.url = input_nombre_url2_website;
                  }

                  estructura_BTN_DB.url_type = tener_url2_type;
                  estructura_BTN_DB.url = input_nombre_url2_website;
                  estructura_BTN_DB.url_example = input_nombre_url2_example_website;
   
                  cabeceraButtons.buttons.push(estructura_BTN);

                  miArregloBotonesDB.push(estructura_BTN_DB);


               }

               //PHONE_NUMBER
               let existe_btn_PHONE_NUMBER = buttons_controlador.find((data) => data.type == "PHONE_NUMBER");

               if(isEmpty(existe_btn_PHONE_NUMBER) == false)
               {
                  let estructura_BTN = {
                     type: "PHONE_NUMBER",
                     text: "",
                     phone_number: "",
                  };

                  let estructura_BTN_DB = {
                     type: "PHONE_NUMBER",
                     text: "",
                     phone_number: "",
                     codigo_pais: "",
                      
                  };
   
                  let input_nombre_phone_number_text = $("#input_nombre_phone_number_text").val() || "";

                  if(isEmpty(input_nombre_phone_number_text))
                  {
                        Swal.fire({
                           title: '"Call phone number" button section',
                           text: "!In the buttons section fill in the required fields marked in red¡",
                           icon: "error",
                        });

                        $('html, body').animate({
                              scrollTop: $("#input_nombre_phone_number_text").offset().top - 50
                        }, 1000);
                        return;
                  }

                  estructura_BTN.text = input_nombre_phone_number_text;
                  estructura_BTN_DB.text = input_nombre_phone_number_text;

                  let tener_phone_number_country = $(".tener_phone_number_country").val() || "";

                  if(isEmpty(tener_phone_number_country))
                  {
                        Swal.fire({
                           title: '"Call phone number" button section',
                           text: "!In the buttons section fill in the required fields marked in red¡",
                           icon: "error",
                        });

                        $('html, body').animate({
                              scrollTop: $(".tener_phone_number_country").offset().top - 50
                        }, 1000);
                        return;
                  }

                  estructura_BTN_DB.codigo_pais = tener_phone_number_country;

                  let input_numero_phone_number = $("#input_numero_phone_number").val() || "";

                  if(isEmpty(input_numero_phone_number))
                  {
                        Swal.fire({
                           title: '"Call phone number" button section',
                           text: "!In the buttons section fill in the required fields marked in red¡",
                           icon: "error",
                        });

                        $('html, body').animate({
                              scrollTop: $("#input_numero_phone_number").offset().top - 50
                        }, 1000);
                        return;
                  }

                  estructura_BTN.phone_number = tener_phone_number_country + input_numero_phone_number;
                  estructura_BTN_DB.phone_number = tener_phone_number_country + input_numero_phone_number;

                  cabeceraButtons.buttons.push(estructura_BTN);

                  miArregloBotonesDB.push(estructura_BTN_DB);


               }

               //QUICK_REPLY
               let filtro_existe_quick_reply = buttons_controlador.filter((data) => data.type == "QUICK_REPLY");
 
               if(filtro_existe_quick_reply.length != 0)
               {
                  for(let i = 0; i < filtro_existe_quick_reply.length; i++)
                  {
                   
                     let {
                        type,
                        identificador_html,
                        identificador,
                     } = filtro_existe_quick_reply[i];  
   
                     let input_nombre_quick_reply_text = $("#input_nombre_quick_reply_" + identificador + "_text").val() || "";
 
                     if(isEmpty(input_nombre_quick_reply_text))
                     {
                           Swal.fire({
                              title: '"Quick reply" button section',
                              text: "!In the buttons section fill in the required fields marked in red¡",
                              icon: "error",
                           });
 
                           return;
                     }

                     let estructura_BTN = {
                        type: "QUICK_REPLY",
                        text: input_nombre_quick_reply_text,
                     };

                     let estructura_BTN_DB = {
                        type: "QUICK_REPLY",
                        text: input_nombre_quick_reply_text,
                        identificador_html: identificador_html,
                        identificador: identificador,

                     };

                     cabeceraButtons.buttons.push(estructura_BTN);

                     miArregloBotonesDB.push(estructura_BTN_DB);

                  }
               }

               let tener_tipo_plantilla = $("#tipo_categoria").val() || "";

               if(tener_tipo_plantilla == "MARKETING")
               {
                  //COPY_CODE
                  let existe_btn_COPY_CODE = buttons_controlador.find((data) => data.type == "COPY_CODE");

                  if(isEmpty(existe_btn_COPY_CODE) == false)
                  {
                     let estructura_BTN_DB = {
                        type: "COPY_CODE",
                        //text: "",
                        example: "",
                     };
 

                     let input_copy_code = $("#input_copy_code").val() || "";

                     if(isEmpty(input_copy_code))
                     {
                           Swal.fire({
                              title: '"Copy offer code" button section',
                              text: "!In the buttons section fill in the required fields marked in red¡",
                              icon: "error",
                           });

                           $('html, body').animate({
                                 scrollTop: $("#input_copy_code").offset().top - 50
                           }, 1000);
                           return;
                     }

                     //estructura_BTN_DB.text = input_nombre_copy_code_text;
                     estructura_BTN_DB.example = input_copy_code;

                     cabeceraButtons.buttons.push(estructura_BTN_DB);

                     miArregloBotonesDB.push(estructura_BTN_DB);

                     //console.log("buttons_controlador xd");
                     //console.log(buttons_controlador);

                  }
               }

               //en caso de que exista botones los agregamos a la plantilla
               if(cabeceraButtons.buttons.length != 0)
               {
                  components.push(cabeceraButtons);
                  enviar_informacion_bd.contenido_buttons = miArregloBotonesDB;
               }
                 
               enviar_informacion.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/modificacion_plantillas_whatsapp",
                  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);

                     $(".bloqueo_v1").attr("hidden", true);
                     $(".bloqueo_v2").attr("hidden", true);
                     $(".bloqueo_v3").attr("hidden", true);

                     console.log(response); 
                     // console.log("Respuesta del servidor:", response);
                     // Hacer algo con la respuesta del servidor
                     //$("#myModal").modal("hide");

                     try {
                        let info = JSON.parse(response);
                        if (info.type == "success") {
                           //Swal.fire({
                           //   title: 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);
                     $(".bloqueo_v1").attr("hidden", true);
                     $(".bloqueo_v2").attr("hidden", true);
                     $(".bloqueo_v3").attr("hidden", true);

                  },
               });
            });


            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 = value;
            });

            function cargar_informacion_plantillas(parsear = "", parsearContenidoBotones = "") 
            {

               let components = [];

               let componentsBotones = [];

               try {
                  components = JSON.parse(parsear);

                  console.log("components"); // Imprime el objeto convertido
                  console.log(components); // Imprime el objeto convertido

 
                  if(isEmpty(parsearContenidoBotones) == false)
                  {
                     componentsBotones = JSON.parse(parsearContenidoBotones);

                     console.log("componentsBotones");
                     console.log(componentsBotones);
                  }

                  

               } catch (error) {
                  console.error("Error al parsear JSON:", error);
                  Swal.fire("Error al parsear JSON:", error);
                  return;
               }


               var existeHeaders = false;
               $(".contenido_principal_header").html("");

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

               $(".header_text_none").addClass('btn-default');
               $(".header_text_text").addClass('btn-default');
               $(".header_text_imagen").addClass('btn-default');
               $(".header_text_video").addClass('btn-default');
               $(".header_text_document").addClass('btn-default');
               $(".header_text_location").addClass('btn-default');

               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") {

                        $(".header_text_text").addClass('cambiar_fondo_seleccionado');
                        $(".header_text_text").removeClass('btn-default');

                        //poner tipo de plantilla imagen, texto, documentos o videos
                        $("#input_header_plantilla").val("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' value='" + text +  "' >" +
                           text +
                           "</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'>" +
                              text +
                           "</p>",
                        );

                        clicAddVariable();

                        adjustHeightTexto_TextArea_HeaderWhatsappV1();

                        if (example != null || example != undefined) {
 
                           let cantidad_parametros =
                              countNestedElements(example);
 
                           var html_input = "<div class='row contenido_segundario_header'>";

                           for (let i = 1; i <= cantidad_parametros; i++) {
                                 
                              let informacion_parametro = example.header_text[i - 1];

                              //console.log(informacion_parametro);

                              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=' font-size: 10px;'> </span>" +
                                    "</label>" +
                                    "<input id='texto_input_plantilla_header_" +
                                    i +
                                    "' data-id='" +
                                    i +
                                    "' class='form-control form-control-sm tamano_input' value='" + informacion_parametro + "' />" +
                                    "</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);
         
                              },
                           );

 
                        }

                      
                     }

                      

                     if (formato_minuscula == "image") {

                        $(".header_text_imagen").addClass('cambiar_fondo_seleccionado');
                        $(".header_text_imagen").removeClass('btn-default');

                        existeHeaderDiferenteTexto = true;
                        //poner tipo de plantilla imagen, texto, documentos o videos
                        $("#input_header_plantilla").val("IMAGE");

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

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

                      

                     if (formato_minuscula == "document") {

                        $(".header_text_document").addClass('cambiar_fondo_seleccionado');
                        $(".header_text_document").removeClass('btn-default');

                        existeHeaderDiferenteTexto = true;
                        //poner tipo de plantilla imagen, texto, documentos o videos
                        $("#input_header_plantilla").val("DOCUMENT");

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

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

           
                     if (formato_minuscula == "video") {

                        $(".header_text_video").addClass('cambiar_fondo_seleccionado');
                        $(".header_text_video").removeClass('btn-default');

                        existeHeaderDiferenteTexto = true;
                        //poner tipo de plantilla imagen, texto, documentos o videos
                        $("#input_header_plantilla").val("VIDEO");

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

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

                     if (formato_minuscula == "location") {

                        $(".header_text_location").addClass('cambiar_fondo_seleccionado');
                        $(".header_text_location").removeClass('btn-default');

                        existeHeaderDiferenteTexto = true;
                        $("#input_header_plantilla").val("LOCATION");

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

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

                     }, 100);

 
                     if (example != null || example != undefined) {

                        let cantidad_parametros =
                           countNestedElements(example);

                        //console.log("CANTIDAD DE PARAMETROS BODY:");
                        //console.log(cantidad_parametros);

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

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

                        let parametros_body = example.body_text[0] || [];

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

                           let informacion_parametro = parametros_body[i - 1];

                           //console.log(i + " " + informacion_parametro)

                           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='" + informacion_parametro + "' />" +
                              "</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>";
 
                        $(".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");
                              }
                           },
                        );
 
                        //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);

                  }
 
                  if (type == "BUTTONS") {
                     //$(".mensajes_botones").show();
                     //$(".contenido_principal_buttons").html("");

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

                     let contador_url = 0;

                     buttons.forEach((element, index, array) => {
                        let typeButtonValue = element.type;
                        let textButtonValue = element.text;
                        let textButtonURL = element.url;
                        let textButtonPhoneNumber = element.phone_number;
                        let required = element.example;

                        //console.log("typeButtonValue: " + typeButtonValue);
                        //console.log("textButtonValue: " + textButtonValue);
                        //console.log("textButtonURL: " + textButtonURL);
                        //console.log("textButtonPhoneNumber: " + textButtonPhoneNumber);
                        //console.log("required: " + required);

                        if(typeButtonValue == "URL")
                        {
                           contador_url++;
                           
                           miArregloBotones.push({
                              type: typeButtonValue + contador_url,
                              text: textButtonValue,
                              url: textButtonURL || "",
                              phone_number: textButtonPhoneNumber || "",
                              requerido: Array.isArray(required) == true? (required.length != 0 ? required[0] : ""  ) : "",
                           });


                        }else{
                           miArregloBotones.push({
                              type: typeButtonValue,
                              text: textButtonValue,
                              url: textButtonURL || "",
                              phone_number: textButtonPhoneNumber || "",
                              requerido: Array.isArray(required) == true? (required.length != 0 ? required[0] : ""  ) : "",
                           });
                        }
                        
                       
                        
                     });

                 

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

               });

               let tota_texto = $("#texto_textarea_header").text() || "";
               $('.contador_texto_plantilla_header').text(tota_texto.length + '/60');

               let tota_texto_body = $("#texto_textarea_body").text() || "";
               $('.contador_texto_plantilla_body').text(tota_texto_body.length + '/1024');

               let tota_texto_footer = $("#texto_textarea_footer").text() || "";
               $('.contador_texto_plantilla_footer').text(tota_texto_footer.length + '/60');

                

               console.log("miArregloBotones");
               console.log(miArregloBotones);

               miArregloBotones.forEach((elementos, index) => {
                  
                  let {
                     type = "",
                     text = "",
                     url ="",
                     phone_number = "",
                     requerido,
                  } = elementos;


                  if(type != "QUICK_REPLY" )
                  {
                     let cambiar = OPCIONES_BOTONES.find((data) => data.value == type);

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

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

                           $("#input_nombre_url1_text").val(text);
                           $("#input_nombre_url1_website").val(url.replace("{{1}}", ""));

                           $("#input_nombre_url1_text").removeClass("color-error");
                           $("#input_nombre_url1_website").removeClass("color-error");

                           if(isEmpty(requerido) == false){
                              
                              $(".habilitar_url_dynamic").css("display", "");
                              $(".tener_url1_type").val("dynamic");
                              $("#input_nombre_url1_example_website").val(requerido);
                                 
                              $("#input_nombre_url1_example_website").removeClass("color-error");

                              $(".concatenacion_url1_website").text( url.replace("{{1}}", "") + requerido );
                           }

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

                           $(".contador_nombre_url1_text").text(text.length + "/25");

                           $(".contador_nombre_url1_website").text(url.replace("{{1}}", "").length + "/2000");

                        }

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

                           $("#input_nombre_url2_text").val(text);
                           $("#input_nombre_url2_website").val(url.replace("{{1}}", ""));

                           $("#input_nombre_url2_text").removeClass("color-error");
                           $("#input_nombre_url2_website").removeClass("color-error");

                           if(isEmpty(requerido) == false){
                              
                              $(".habilitar_url2_dynamic").css("display", "");
                              $(".tener_url2_type").val("dynamic");
                              $("#input_nombre_url2_example_website").val(requerido);
                                 
                              $("#input_nombre_url2_example_website").removeClass("color-error");

                              $(".concatenacion_url2_website").text( url.replace("{{1}}", "") + requerido );
                           }

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

                           $(".contador_nombre_url2_text").text(text.length + "/25");

                           $(".contador_nombre_url2_website").text(url.replace("{{1}}", "").length + "/2000");

                        }     

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

                           $("#input_nombre_phone_number_text").val(text);
                           $("#input_nombre_phone_number_text").removeClass("color-error");

                            $(".contador_nombre_phone_number_text").text(text.length + "/25");

                           if(componentsBotones.length != 0)
                           {
                              let tomar_informacion_numero_telefonico = componentsBotones.find((data) => data.type == "PHONE_NUMBER");

                              if(tomar_informacion_numero_telefonico)
                              {

                                 $(".tener_phone_number_country").val(tomar_informacion_numero_telefonico.codigo_pais).trigger("change");

                                 let phone_number_ = tomar_informacion_numero_telefonico.phone_number || "";
                                 let codigo_pais_ = tomar_informacion_numero_telefonico.codigo_pais || "";

                                 phone_number_ = phone_number_.slice(codigo_pais_.length);

                                 $("#input_numero_phone_number").val(phone_number_);

                                 $("#input_numero_phone_number").removeClass("color-error");

                                 $(".contador_nombre_phone_number").text(phone_number_.length + "/25");
                              }

                           }

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

                        if(type == "COPY_CODE")
                        {
                           $(".agregar_html_opcion_botones .COPY_CODE").css("display", "");
 
                           if(isEmpty(requerido) == false)
                           {
                              $("#input_copy_code").val(requerido);
                              $("#input_copy_code").removeClass("color-error");

                              $(".contador_example_copy_code").text(requerido.length + "/15");
                           }
 
                           buttons_controlador.push({
                              "type": "COPY_CODE",
                              "text": text
                           });

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

                           if(cambiar)
                           {
                              cambiar.edicion = true;

                              $(".tener_select_button_plantillas").find("option[value='" + "COPY_CODE" + "']").prop("disabled", true);
                              $(".agregar_html_opcion_botones .COPY_CODE").css("display", "");
 
                           }

                        }                         

                     }
                  }else{

                     //seccion de solo QUICK_REPLY

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

                     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  + index; // Formato hhmmss
                     let resultado = numeroABase64(horaFormato) || ""; // Convertir a Base64

                     resultado = resultado.replace(/=/g, "");

                     //console.log("resultado : " + horaFormato);
                     //console.log(resultado);

                     // 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   id='input_nombre_quick_reply_${resultado}_text' data-mi_quick_reply='${resultado}' type='text' 
                                       class='form-control form-control-sm tamano_input' value='${text}'>
                                    <p class='contador_nombre_${resultado}_text' 
                                       style='text-align: end; margin-bottom: 0px; font-size: 12px;'>${text.length}/25</p>
                                 </div>
                           </div>
                        </div>
                     `;

                     buttons_controlador.push({
                        "type": "QUICK_REPLY",
                        "text": 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();

               console.log("OPCIONES_BOTONES");
               console.log(OPCIONES_BOTONES);

               if(PLANTILLA_STATUS == "PENDING")
               {
                  $('input, textarea, select, button').prop('disabled', true);
               }

               //console.log($('#tipo_categoria').val());

               if($('#tipo_categoria').val() == "UTILITY")
               {
                  $(".tener_select_button_plantillas").find("option[value='" + "COPY_CODE" + "']").prop("disabled", true);
                  $(".agregar_html_opcion_botones .COPY_CODE").css("display", "none");
               }
 
            }
 
            $('#crear_nueva_configuacion_whatsapp').on('click', function() {

               const selectedValue = $(".tener_select_button_plantillas").val();
               
                  //console.log("selectedValue");
                  //console.log(selectedValue);
                   
                  if (selectedValue) {

                     if(selectedValue != "QUICK_REPLY")
                     {  

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

                        if(cambiar)
                        {
                           cambiar.edicion = true;
                           $(".tener_select_button_plantillas").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": ""
                              });
                           }   

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

                              buttons_controlador.push({
                                 "type": "COPY_CODE",
                                 "text": "Copy offer code"
                              });
                           }                         

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

            function esUrlValida(url) {
               // Expresión regular para validar URLs
               const regex = /^(https?:\/\/)?([\w-]+(\.[\w-]+)+)(\/[\w- ./?%&=]*)?$/i;
               return regex.test(url);
            }

         });
     
 
     
 
</script>
{/literal}

{/block}

