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

   <link href="{$theme}default/css/whatsapp.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">
 .page-content {
    /* padding: 1rem 2em; */
    padding-left: 7px;
    padding-right: 7px;
    background-color:white;
}

</style>

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

      <input
         type="text"
         value="{$id_user}"
         disabled
         hidden
         id="ID_USER"
      />

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

      <input
         type="text"
         value="{$imagen_perfil}"
         disabled
         hidden
         id="IMAGEN_PERFIL"
      />


      <input type="text" class=" tener_path_img" value={$path_img} hidden disabled/>



   <!-- modal plantillas -->
       
      <div class="modal fade" id="modal_elejir_contacto" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
         <div class="modal-dialog modal-dialog-centered  modal-xl">
            <div class="modal-content">
               <div class="modal-header">
               <h5 class="modal-title" id="staticBackdropLabel"> Add Contact to <span id="identificador_contacto"></span></h5>
               
               <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
               </div>
               <div class="modal-body pantalla_modal">
                  <div style="display: flex">
                     <input
                        type="text"
                        placeholder="search"
                        class="form-control form-control-sm buscador_custumers"
                        style="margin-right: 10px"
                     />
                     <button
                        class="btn"
                        id="filtro_buscador_customer"
                        type="button"
                        style="border-color: #d3cac0;border: 1px solid #d3cac0;background-color: white;"
                     >
                        Search
                     </button>
                  </div>

                  <br />

                  <div class="row">
                     <div class="col-sm-12">
                        <div class="table-responsive" style="height: 401px">
                           <!-- Agregado -->
                           <table class="table">
                              <thead>
                                 <tr>
                                    <th class="centrar">Account</th>
                                    <th class="centrar">Email</th>
                                    <th class="centrar">Phone</th>
                                    <th class="centrar">Address</th>
                                    <th class="centrar">Action</th>
                                 </tr>
                              </thead>
                              <tbody class="tbody_custumers">
                                 <tr>
                                    <td class="centrar">Juan</td>
                                    <td class="centrar">Juan@live.com</td>
                                    <td class="centrar">+3412321</td>
                                    <td class="centrar">Satelite</td>
                                    <td class="centrar">
                                       <button
                                          class="btn btn-primary"
                                          type="button"
                                       >
                                          Add
                                       </button>
                                    </td>
                                 </tr>
                              </tbody>
                           </table>
                        </div>
                        <!-- Cierre del div table-responsive -->
                     </div>
                  </div>

                  <!-- <select
                     class="tener_select_contact"
                     name="select_contact"
                     id="select_contact"
                     style="width: 100%"
                  ></select> -->
               </div>
               
            </div>
         </div>
      </div>

      <!-- Modal Structure -->
      <div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
         <div class="modal-dialog modal-lg" style="width: 97%; max-width:97%; ">
            <div class="modal-content"  >
               <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel" style="color:black">WhatsApp Templates</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
               </div>

               <div class="modal-body">

                  <button
                           style="
                              margin-bottom: 12px;
                              border-color: #d3cac0;
                              border: 1px solid #d3cac0;
                              display: none;
                           "
                           class="btn btn-default retroceder_listado_plantilla"
                           type="button"
                        >
                           <i class="fa fa-arrow-left" style="margin-right: 5px"></i
                           >Back
                  </button>

                  <!-- TABLA PLANTILLAS -->
                  <div class="panel panel-default informacion_tabla" style="padding: 12px;">
                           <!-- Default panel contents -->
                           <div
                              class="panel-heading"
                              style="font-weight: 600; font-size: 16px"
                           >
                              Filter
                           </div>
                           <div class="panel-body">
                              <div class="div_filtro_plantillas">
                                 <input
                                    type="text"
                                    class="form-control form-control-sm"
                                    placeholder="Template Name"
                                    id="input_filtro_nombre_plantilla"
                                    style="margin-right: 11px"
                                 />

                                 <button
                                    class="btn"
                                    id="filtro_plantillas"
                                    style="
                                       border-color: #d3cac0;
                                       border: 1px solid #d3cac0;
                                       width: 99px;
                                    "
                                 >
                                    Filter
                                 </button>
                              </div>
                           </div>

                           <!-- Table -->
                           <div class="table-responsive">
                              <table class="table mt-3">
                                 <thead>
                                    <tr>
                                       <th class="centrar">Name</th>
                                       <th class="centrar">Language</th>
                                       <th class="centrar">Status</th>
                                       <th class="centrar">Action</th>
                                    </tr>
                                 </thead>
                                 <tbody class="tbody_plantillas"></tbody>
                              </table>
                           </div>
                           
                  </div>
                  <!-- FIN TABLA PLANTILLAS -->

                  <div class="configuracion_plantilla">
                  {*configuracion_plantilla*}
                     <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>Template Name</label>
                                             <input
                                                value="hello_world"
                                                id="input_nombre_plantilla"
                                                type="text"
                                                disabled
                                                class="form-control form-control-sm"
                                             />
                                          </div>

                                          <div class="col-sm-4 reset">
                                             <label>Language</label>
                                             <input
                                                value="es_MX"
                                                id="input_lenguaje_plantilla"
                                                type="text"
                                                disabled
                                                class="form-control form-control-sm"
                                             />
                                          </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</label>
                                             <input
                                                value=""
                                                id="input_header_plantilla"
                                                type="text"
                                                disabled
                                                class="form-control form-control-sm"
                                             />

                                             <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
                                       </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>Footer content</label>
                                                <textarea
                                                   id="texto_textarea_footer"
                                                   class="form-control form-control-sm"
                                                   disabled
                                                >
                                                </textarea>
                                             </div>
                                          </div>
                                       </div>
                           </div>

                           <!-- BUTTONS plantilla -->
                           <div
                                       class="descripcion_general_plantilla buttons_plantilla"
                           >
                                       <h5
                                          style="
                                             font-weight: 600;
                                             color: black;
                                             margin: 0px;
                                             padding: 15px;
                                             font-size: 17px;
                                          "
                                       >
                                          Buttons
                                       </h5>
                                       <hr
                                          style="
                                             border-top: 1px solid #c1bdbd;
                                             width: 100%;
                                             margin-top: 0px;
                                             margin-bottom: 15px;
                                          "
                                       />
                                       <div
                                          class="row reset"
                                          style="padding-left: 10px; padding-right: 10px"
                                       >
                                          <div class="col-sm-12 reset separador">
                                             <div class="contenido_principal_buttons">
                                                <!--Aqui va el contenido de header y su dinamica-->
                                                <div>
                                                   <button class="btn btn-primary">
                                                      Send Message
                                                   </button>
                                                </div>
                                             </div>
                                          </div>
                                       </div>
                           </div>
 
                        </div>

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

                              {*pantalla vista previa*}
                              <div class="plantilla_vista_previa">
                                       
                                 {*cabecera*}
                                 <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>
                                 {*fin cabecera*}

                                 {*cuerpo*}
                                 <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>     
                                 {*fin cuerpo*}                

                              </div>
                              {*fin pantalla vista previa*}

                           </div>
                        </div>

                        <div
                           class="col-sm-12 informacion_general_plantilla contenido_guardar_plantilla"
                           style="padding-right: 0px"
                        >
                           <!-- Guardar plantilla -->
                           <div class="descripcion_general_plantilla">
                              <div
                                 class="row reset"
                                 style="padding-left: 10px; padding-right: 10px"
                              >
                                 <div class="col-sm-12 reset separador">
                                    <div
                                       class="contenido_principal_guardar"
                                       style="text-align: end"
                                    >
                                       <!--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-paper-plane"
                                             style="margin-right: 5px"
                                          ></i>
                                          Send Message
                                       </button>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                

                     </div>
                  {*configuracion_plantilla*}
                  </div>
      
               </div>
            </div>
         </div>
      </div>

      <div class="modal fade" id="addContacto" tabindex="-1" aria-labelledby="exampleModalLabel_" aria-hidden="true"  >
         <div class="modal-dialog modal-lg" style="width: 97%; max-width:97%;">
            <div class="modal-content" style="background-color:white">
               <div class="modal-header">
               <h5 class="modal-title" id="exampleModalLabel_">Add Contact</h5>
               <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
               </div>
               <div class="modal-body" style="background-color:white;border-radius:10px">
                
                  <div class="row">
                     <div class="col-md-12">

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

                                 <div class="panel-content">

                                    <div class="px-2">
                                          <div class="alert alert-danger" id="emsg" style="display: none;">
                                             <span id="emsgbody"></span>
                                          </div>

                                          <form id="rform">

                                             <div class="row">
                                                <div class="col-md-6 col-sm-12">

                                                      <div class="mb-3 row">
                                                         <label for="account" class="col-sm-3"><span class="h6">{$_L['Full Name']}</span><span class="text-danger">*</span></label>
                                                         <div class="col-sm-9">
                                                            <input type="text" id="account" name="account" class="form-control" autofocus>
                                                         </div>
                                                      </div>


                                                      <div class="mb-3 row">
                                                         <label for="display_name" class="col-sm-3"><span class="h6">{$config['contact_extra_field']}</span><span class="text-danger">*</span> </label>
                                                         <div class="col-sm-9">
                                                            <input type="text" id="display_name" name="display_name" class="form-control">
                                                         </div>
                                                      </div>

                                                      <div class="mb-3 row">
                                                         <label for="cid" class="col-sm-3"><span class="h6">{$_L['Company']}</span><span class="text-danger">*</span> </label>
                                                         <div class="col-sm-9">
                                                            <select id="cid" name="cid" class="form-control">
                                                                  <option value="0">{$_L['None']}</option>
                                                                  {foreach $companies as $company}
                                                                  <option value="{$company['id']}" {if $c_selected_id eq ($company['id'])}selected{/if}>
                                                                     {$company['company_name']}
                                                                  </option>
                                                                  {/foreach}
                                                            </select>
                                                         </div>
                                                      </div>

 

                                                      <div class="mb-3 row">
                                                         <label for="country" class="col-sm-3"><span class="h6">{$_L['Country']}</span><span class="text-danger">*</span> </label>
                                                         <div class="col-sm-9">

                                                            <select name="country" id="country" class="form-control">
                                                                  <option value=""><span></span>{$_L['Select Country']}</option>
                                                                  {$countries}
                                                            </select>
                                                         </div>
                                                      </div>


                                                      <div class="mb-3 row">
                                                         <label for="address" class="col-sm-3"><span class="h6">{$_L['Address']}</span><span class="text-danger">*</span> </label>
                                                         <div class="col-sm-9">

                                                            <input type="text" autocomplete="off"  id="address" name="address" class="form-control">
                                                            <ol class="list-group " id="browsers">
                                                            </ol>
                                                         </div>
                                                      </div>

                                                      <div class="mb-3 row">
                                                         <label for="city" class="col-sm-3"><span class="h6">{$_L['City']}</span><span class="text-danger">*</span> </label>
                                                         <div class="col-sm-9">

                                                            <input type="text" id="city" name="city" class="form-control">


                                                         </div>
                                                      </div>
 

                                                </div>
                                                <div class="col-md-6 col-sm-12">


                                                      <div class="mb-3 row">
                                                         <label for="email" class="col-sm-3"><span class="h6">{$_L['Email']}</span><span class="text-danger">*</span> </label>
                                                         <div class="col-sm-9">

                                                            <input type="text" id="email" name="email" class="form-control">

                                                         </div>
                                                      </div>
                                               
                                                      <div class="mb-3 row">
                                                         <label for="phone" class="col-sm-3"><span class="h6">{$_L['Phone']}</span><span class="text-danger">*</span> </label>
                                                         <div class="col-sm-9">

                                                            <input type="text" id="phone" name="phone" class="form-control" disabled readonly>

                                                         </div>
                                                      </div>
   

                                                      <div class="mb-3 row">
                                                         <label for="currency" class="col-sm-3"><span class="h6">{$_L['Currency']}</span><span class="text-danger">*</span> </label>
                                                         <div class="col-sm-9">

                                                            <select id="currency" name="currency" class="form-control">

                                                                  {foreach $currencies as $currency}
                                                                  <option value="{$currency['id']}"
                                                                  {if $config['home_currency'] eq ($currency['cname'])}selected="selected" {/if}>{$currency['cname']}</option>
                                                                  {foreachelse}
                                                                  <option value="0">{$config['home_currency']}</option>
                                                                  {/foreach}

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

                                                      <div class="mb-3 row">
                                                         <label for="owner_id" class="col-sm-3"><span class="h6">{$_L['Owner']}</span><span class="text-danger">*</span> </label>
                                                         <div class="col-sm-9">

                                                            <select class="form-select" name="owner_id" id="owner_id">
                                                                  {foreach $owners as $owner}
                                                                  <option value="{$owner->id}" {if $owner->id == $user->id}selected{/if} >{$owner->fullname}</option>
                                                                  {/foreach}
                                                            </select>
                                                         </div>
                                                      </div>


                                                      {if $config['customer_custom_username']}

                                                      <div class="mb-3 row">
                                                         <label for="zip" class="col-sm-3"><span class="h6">{$_L['Username']} </span><span class="text-danger">*</span></label>
                                                         <div class="col-sm-9">

                                                            <input type="text" id="username" name="username" class="form-control">
                                                         </div>
                                                      </div>

                                                      {/if}

                                                      <div class="mb-3 row">
                                                         <label for="state" class="col-sm-3"><span class="h6">{$_L['State Region']}</span><span class="text-danger">*</span> </label>
                                                         <div class="col-sm-9">

                                                            <input type="text" id="state" name="state" class="form-control">


                                                         </div>
                                                      </div>


                                                      <div class="mb-3 row">
                                                         <label for="zip" class="col-sm-3"><span class="h6">{$_L['ZIP Postal Code']}</span><span class="text-danger">*</span> </label>
                                                         <div class="col-sm-9">

                                                            <input type="text" id="zip" name="zip" class="form-control">
                                                         </div>
                                                      </div>

                                          
                                                </div>
                                             </div>


                                             <div class="row">
                                                <div class="col-md-12">
                                                      <div class="mb-3">
                                                         <button class="btn btn-primary mt-3 me-3" type="button" id="submit_addNewContact">{$_L['Save']}</button>
                                                      </div>
                                                </div>
                                             </div>


                                          </form>
                                    </div>

                                 </div>



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

      <div class="modal fade" id="addPhone" tabindex="-1" aria-labelledby="exampleModalLabel_" aria-hidden="true"  >
         <div class="modal-dialog modal-lg modal-dialog-centered" style="width: 97%; max-width:97%;">
            <div class="modal-content" style="background-color:white">
               <div class="modal-header">
               <h5 class="modal-title" id="exampleModalLabel_">Add Phone</h5>
               <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
               </div>
               <div class="modal-body" style="background-color:white;border-radius:10px">
                
                  <div class="row">
                     <div class="col-md-12">

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

                                 <div class="panel-content">

                                    <div class="px-2">
                                          <div class="alert alert-danger" id="emsg" style="display: none;">
                                             <span id="emsgbody"></span>
                                          </div>

                                          <form id="rform">

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

                                                      <div class="mb-3 row">
                                                         <label for="numero_telefono" class="col-sm-3"><span class="h6">Phone</span><span class="text-danger">*</span></label>
                                                         <div class="col-sm-9">
                                                            <input type="text" id="numero_telefono" name="numero_telefono" class="form-control" autofocus placeholder="Eje: 18569364356">
                                                         </div>
                                                      </div>
 
                                                </div>
                                           
                                             </div>


                                             <div class="row">
                                                <div class="col-md-12">
                                                      <div class="mb-3">
                                                         <button class="btn btn-primary mt-3 me-3" type="button" id="submit_addPhone">{$_L['Save']}</button>
                                                      </div>
                                                </div>
                                             </div>


                                          </form>
                                    </div>

                                 </div>



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

     <h3 class="tipo_config_whatsapp_identifier" style="text-align: center">
         
      </h3>

   <div  class="mi_contenedor_especial_fixed"> 
      <div class="container bootstrap snippets bootdey 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="dropdown dropdown_config"
            style="display: none; margin-bottom: 4px"
         >

            <div class="dropdown">
               <a href="" 
                  class="btn dropdown-toggle borde-boton" 
                  type="button" 
                  id="cambiar_titulo_config" 
                  data-bs-toggle="dropdown" 
                  aria-expanded="false" 
                  style="border-color: #d3cac0 !important; border: 1px solid #d3cac0 !important; width:100%; background-color:white; color:black">
                  Whatsapp/SMS
               </a>
               <ul class="text-center dropdown-menu item_dropdown_config" aria-labelledby="cambiar_titulo_config"  style="min-width: 100%; border-radius:4px; border:1px solid rgba(0,0,0,.15); box-shadow:0 6px 12px rgba(0, 0, 0, .175); cursor:pointer">
                   
               </ul>
               
            </div>
            
         </div>

         <div class="tile tile-alt" id="messages-main" style="display: none">
            <div class="ms-menu">
               <div class="ms-user clearfix">
                  <img
                     src="{$imagen_perfil}"
                     alt=""
                     class="img-avatar pull-left"
                  />
                  <div>
                     {$fullname} <br />
                     {$username}
                  </div>
               </div>

               <div class="p-15">
                  <button
                     type="button"
                     class="btn borde-boton btn-block"
                     id="btn_elejir_contacto"
                     style="margin-bottom: 4px; display: none; border-color: #d3cac0 !important; border: 1px solid #d3cac0 !important; width: 100%; background-color: white; color: black;"
                  >
                     Choose a user to chat
                  </button>

                  <button
                     type="button"
                     class="btn borde-boton btn-block"
                     id="btn_new_contacto"
                     style="margin-bottom: 4px;   border-color: #d3cac0 !important; border: 1px solid #d3cac0 !important; width: 100%; background-color: white; color: black;"
                  >
                     Add new contact
                  </button>
   

                  <div class="dropdown">
      
                     <a
                        class="btn borde-boton btn-block dropdown-toggle"
                        href=""
                        id="cambiar_titulo_plataforma"
                        data-toggle="dropdown"
                        data-bs-toggle="dropdown" aria-expanded="false"
                        style="border-color: #d3cac0 !important; border: 1px solid #d3cac0 !important; width:100%; background-color:white; color:black"
                        >Whatsapp/SMS <i class="caret m-l-5"></i
                     ></a>

                     <ul class="text-center dropdown-menu" aria-labelledby="cambiar_titulo_plataforma" style="min-width: 100%; border-radius:4px; border:1px solid rgba(0,0,0,.15); box-shadow:0 6px 12px rgba(0, 0, 0, .175)">
                         <li>
                           <a
                              class="canal_mensajeria"
                              data-canal-mensajeria="whatsapp-sms"
                           >
                              Whatsapp/SMS</a
                           >
                        </li>
                        <li>
                           <a
                              class="canal_mensajeria"
                              data-canal-mensajeria="whatsapp"
                           >
                              Whatsapp</a
                           >
                        </li>
                        <li>
                           <a
                              class="canal_mensajeria"
                              data-canal-mensajeria="sms"
                              >SMS</a
                           >
                        </li>
                     </ul>
                  </div>

                
               </div>

               <div
                  class="list-group lg-alt mi-bandeja-mensajes-contactos" style="border-radius:0px"
               ></div>
            </div>

            <div class="ms-body">
               <div class="action-header clearfix cabecera_perfil_contacto">
                  <div class="visible-xs-mi-clase" id="ms-menu-trigger">
                     <i class="fa fa-bars"></i>
                  </div>

                  <div class="pull-left hidden-xs cabecera_informacion">
                     <img
                        src="{$path_img}perfil.jpg"
                        alt=""
                        class="img-avatar m-r-10"
                     />
                     <div class="lv-avatar pull-left"></div>
                     <span class="active-word-wrap">
                        <a href="#" class="text-color-dark">Cesar Pineda</a>
                     </span>
                  </div>

                  <ul class="ah-actions actions">
                     <li>
                        <a href="">
                           <i class="fa fa-check"></i>
                        </a>
                     </li>
                     <li>
                        <a href="">
                           <i class="fa fa-clock-o"></i>
                        </a>
                     </li>
                     <li class="dropdown">
                        <a href="" data-toggle="dropdown" aria-expanded="true">
                           <i class="fa fa-sort"></i>
                        </a>

                        <ul class="dropdown-menu dropdown-menu-right">
                           <li>
                              <a href="">Latest</a>
                           </li>
                           <li>
                              <a href="">Oldest</a>
                           </li>
                        </ul>
                     </li>
                     <li class="dropdown">
                        <a
                           href="#"
                           style="cursor:pointer"
                           data-toggle="dropdown"
                           aria-expanded="true"
                           id="setting-offcanvas"
                        >
                           <i class="fa fa-bars"></i>
                        </a>
                     </li>
                  </ul>
               </div>

               <!--Sin Mensajes-->
               <div class="sin_mensaje cuerpo_sin_mensajes">
                  <div class="pintar_card">
                     <div class="pintar_body_card container">
                        <h4>Let's start a conversation!</h4>
                        <br />
                        <img
                           src="https://xhde365.com/app_dev/storage/system/logo_0141306626.png"
                           alt=""
                           style="max-width: 100%; width: 213px"
                        />
                     </div>
                  </div>
               </div>

               <!--CARGANDO CHAT-->
               <div
                  class="sin_mensaje cuerpo_cargando_mensajes"
                  style="display: none"
               >
                  <div class="pintar_card">
                     <div class="pintar_body_card container">
                        <div class="spinner">
                           <i class="fa fa-circle-o-notch fa-spin"></i>
                        </div>
                        <br />
                        <h4>Loading conversations...</h4>
                     </div>
                  </div>
               </div>

               <!--mensajes chat-->
               <div class="cuerpo_mensaje" style="display: none">
                  <!-- FIN  plantillas templates -->

                  <!-- plantilla para audios -->
                  <div
                     class="message-feed media"
                     data-wam-id="wamid.HBgLNTA0OTc3NDc0NDYVAgARGBIyNDI3QjRGM0MyODBFOEFBQ0MA"
                  >
                     <div class="pull-left">
                        <!--  <img
                           src="https://bootdey.com/img/Content/avatar/avatar1.png"
                           alt=""
                           class="img-avatar"
                        /> -->
                        <div class="image-container-perfil">
                           <img
                              src="https://bootdey.com/img/Content/avatar/avatar1.png"
                              alt=""
                              class="img-avatar"
                           />
                           <img
                              src="{$path_img}whatsapp.png"
                              alt=""
                              class="img-avatar-small"
                           />
                        </div>
                     </div>

                     <div class="media-body media-body-change-display">
                        <div class="mf-content mf-content-documentos">
                           <div class="palomitas">
                              <audio controls class="audio-general">
                                 <source
                                    src="https://xhde365.com/app_dev/storage/whatsapp/ogg/2024-07-25-17-09-51_74600_enviado.ogg"
                                    type="audio/mpeg"
                                 />
                                 Your browser does not support the audio
                                 element.
                              </audio>
                           </div>
                           <div class="caption_mensaje">
                              <span class="texto">Texto o caption</span>
                           </div>
                           <small class="mf-date fecha_y_palomitas">
                              2024-07-17 18:10:14
                              <img
                                 class="palomita_texto"
                                 src="{$path_img}sent.png"
                                 alt=""
                                 width="20px"
                              />
                           </small>
                        </div>
                     </div>
                  </div>
                  <!--FIN plantilla para audios -->

                  <!-- plantilla para archivos -->
                  <div
                     class="message-feed media"
                     data-wam-id="wamid.HBgLNTA0OTc3NDc0NDYVAgARGBIyNDI3QjRGM0MyODBFOEFBQ0MA"
                  >
                     <div class="pull-left">
                        <!--  <img
                           src="https://bootdey.com/img/Content/avatar/avatar1.png"
                           alt=""
                           class="img-avatar"
                        /> -->
                        <div class="image-container-perfil">
                           <img
                              src="https://bootdey.com/img/Content/avatar/avatar1.png"
                              alt=""
                              class="img-avatar"
                           />
                           <img
                              src="{$path_img}whatsapp.png"
                              alt=""
                              class="img-avatar-small"
                           />
                        </div>
                     </div>

                     <div class="media-body media-body-change-display">
                        <div class="mf-content mf-content-documentos">
                           <div class="palomitas">
                              <div class="contenedor_archivos">
                                 <div class="contenedor_contenido_archivos">
                                    <a
                                       href="{$path_img}prueba.jpg"
                                       target="_blank"
                                       style="
                                          width: 100%;
                                          text-decoration: none;
                                          color: black;
                                       "
                                    >
                                       <div class="nombre_archivo">
                                          <div class="logo_archivo">
                                             <img
                                                src="{$path_img}imagen_pdf.png"
                                                alt=""
                                                class="imagen"
                                                title="PDF"
                                             />
                                          </div>
                                          <div
                                             class="texto_archivo"
                                             title="File.pdf"
                                          >
                                             <p class="formatear_margin_0">
                                                File.pdf
                                             </p>
                                          </div>
                                       </div>
                                    </a>
                                 </div>
                              </div>
                           </div>
                           <div class="caption_mensaje">
                              <span class="texto">Texto o caption</span>
                           </div>
                           <small class="mf-date fecha_y_palomitas">
                              2024-07-17 18:10:14
                              <img
                                 class="palomita_texto"
                                 src="{$path_img}sent.png"
                                 alt=""
                                 width="20px"
                              />
                           </small>
                        </div>
                     </div>
                  </div>
                  <!--FIN plantilla para archivos -->

                  <!-- --------------------   para clientes --------------------------- -->

                  <!-- plantilla para video -->
                  <div
                     class="message-feed media right"
                     data-wam-id="wamid.HBgLNTA0OTc3NDc0NDYVAgARGBIyNDI3QjRGM0MyODBFOEFBQ0MA"
                  >
                     <div class="pull-right">
                        <!--  <img
                        src="https://bootdey.com/img/Content/avatar/avatar1.png"
                        alt=""
                        class="img-avatar"
                     /> -->
                        <div class="image-container-perfil">
                           <img
                              src="{$path_img}perfil.jpg"
                              alt=""
                              class="img-avatar"
                           />
                           <img
                              src="{$path_img}whatsapp.png"
                              alt=""
                              class="img-avatar-small"
                           />
                        </div>
                     </div>

                     <div class="media-body media-body-change-display">
                        <div class="mf-content mf-content-documentos">
                           <div class="palomitas">
                              <video controls class="video-general">
                                 <source
                                    src="https://xhde365.com/app_dev/storage/whatsapp/mp4/2024-08-02-10-24-19_411093_recibido.mp4"
                                 />

                                 Your browser does not support the video tag.
                              </video>
                           </div>
                           <div class="caption_mensaje">
                              <span class="texto">Texto o caption</span>
                           </div>
                           <small class="mf-date"> 2024-07-17 18:10:14 </small>
                        </div>
                     </div>
                  </div>
                  <!--FIN plantilla para video -->

                  <!-- plantilla para audios -->
                  <div
                     class="message-feed media right"
                     data-wam-id="wamid.HBgLNTA0OTc3NDc0NDYVAgARGBIyNDI3QjRGM0MyODBFOEFBQ0MA"
                  >
                     <div class="pull-right">
                        <!--  <img
                        src="https://bootdey.com/img/Content/avatar/avatar1.png"
                        alt=""
                        class="img-avatar"
                     /> -->
                        <div class="image-container-perfil">
                           <img
                              src="{$path_img}perfil.jpg"
                              alt=""
                              class="img-avatar"
                           />
                           <img
                              src="{$path_img}whatsapp.png"
                              alt=""
                              class="img-avatar-small"
                           />
                        </div>
                     </div>

                     <div class="media-body media-body-change-display">
                        <div class="mf-content mf-content-documentos">
                           <div class="palomitas">
                              <audio controls class="audio-general">
                                 <source
                                    src="https://xhde365.com/app_dev/storage/whatsapp/ogg/2024-07-25-17-09-51_74600_enviado.ogg"
                                 />
                                 Your browser does not support the audio
                                 element.
                              </audio>
                           </div>
                           <div class="caption_mensaje">
                              <span class="texto">Texto o caption</span>
                           </div>
                           <small class="mf-date"> 2024-07-17 18:10:14 </small>
                        </div>
                     </div>
                  </div>
                  <!--FIN plantilla para audios -->

                  <!-- plantilla para archivos -->
                  <div
                     class="message-feed media right"
                     data-wam-id="wamid.HBgLNTA0OTc3NDc0NDYVAgARGBIyNDI3QjRGM0MyODBFOEFBQ0MA"
                  >
                     <div class="pull-right">
                        <!--  <img
                        src="https://bootdey.com/img/Content/avatar/avatar1.png"
                        alt=""
                        class="img-avatar"
                     /> -->
                        <div class="image-container-perfil">
                           <img
                              src="{$path_img}perfil.jpg"
                              alt=""
                              class="img-avatar"
                           />
                           <img
                              src="{$path_img}whatsapp.png"
                              alt=""
                              class="img-avatar-small"
                           />
                        </div>
                     </div>

                     <div class="media-body media-body-change-display">
                        <div class="mf-content mf-content-documentos">
                           <div class="palomitas">
                              <div class="contenedor_archivos">
                                 <div class="contenedor_contenido_archivos">
                                    <a
                                       href="{$path_img}prueba.jpg"
                                       target="_blank"
                                       style="
                                          width: 100%;
                                          text-decoration: none;
                                          color: black;
                                       "
                                    >
                                       <div class="nombre_archivo">
                                          <div class="logo_archivo">
                                             <img
                                                src="{$path_img}imagen_pdf.png"
                                                alt=""
                                                class="imagen"
                                                title="PDF"
                                             />
                                          </div>
                                          <div
                                             class="texto_archivo"
                                             title="File.pdf"
                                          >
                                             <p class="formatear_margin_0">
                                                File.pdf
                                             </p>
                                          </div>
                                       </div>
                                    </a>
                                 </div>
                              </div>
                           </div>
                           <div class="caption_mensaje">
                              <span class="texto">Texto o caption</span>
                           </div>
                           <small class="mf-date">
                              <div>
                                 <i class="fa fa-clock-o"></i> 2024-07-17
                                 18:10:14
                              </div>
                           </small>
                        </div>
                     </div>
                  </div>
                  <!--FIN plantilla para archivos -->

                  <!-- plantilla para imagenes -->
                  <div
                     class="message-feed media right"
                     data-wam-id="wamid.HBgLNTA0OTc3NDc0NDYVAgARGBIyNDI3QjRGM0MyODBFOEFBQ0MA"
                  >
                     <div class="pull-right">
                        <!-- <img src="./img/perfil.jpg" alt="" class="img-avatar" /> -->
                        <div class="image-container-perfil">
                           <img
                              src="{$path_img}perfil.jpg"
                              alt=""
                              class="img-avatar"
                           />
                           <img
                              src="{$path_img}sms.png"
                              alt=""
                              class="img-avatar-small-sms"
                           />
                        </div>
                     </div>
                     <div class="media-body media-body-change-display">
                        <div
                           class="mf-content mf-content-imagen mf-content-all"
                        >
                           <div class="palomitas">
                              <div class="tamano_div_imagen">
                                 <a
                                    href="https://xhde365.com/app_dev/storage/whatsapp/2024-07-18-16-41-39_11354.jpeg"
                                    target="_blank"
                                 >
                                    <div class="spinner">
                                       <i
                                          class="fa fa-circle-o-notch fa-spin"
                                       ></i>
                                    </div>

                                    <img
                                       class="imagen_imagen"
                                       src="{$path_img}prueba.jpg"
                                       alt=""
                                       style="display: none"
                                       onerror="this.src='{$path_img}error_imagen.png'"
                                    />
                                 </a>
                              </div>
                           </div>
                           <div class="caption_mensaje">
                              <span class="texto">ssssssssssssss</span>
                           </div>
                           <small class="mf-date">
                              <div>
                                 <i class="fa fa-clock-o"></i> 2024-07-17
                                 18:10:14
                              </div>
                           </small>
                        </div>
                     </div>
                  </div>
                  <!--FIN plantilla para imagenes -->
               </div>

               <!-- msb-footer -->
               <div class="msb-footer-sin-enviar-mensajes">
                  <p style="font-weight: 600">
                     <!-- <a href="#" style="text-decoration: underline"
                        >You can choose a user to chat</a
                     > -->
                     You can start chatting. choose your contact above
                  </p>
               </div>

               <!-- msb-footer con textarea -->
               <div class="msb-footer" style="display: none">
                  <div
                     style="
                        width: 100%;
                        padding-left: 5px;
                        padding-right: 4px;
                        border-bottom: 1px solid #bfbfbf;
                        padding-bottom: 6px;
                        padding-top: 10px;
                     "
                  >
                     <select
                        class="form-control form-control-sm"
                        id="seleccionar_medio_mensaje"
                     >
                        <option value="whatsapp">Reply by WhatsApp</option>
                        <option value="sms">Reply by SMS</option>
                     </select>
                  </div>

                  <div class="conjunto-msb-footer">
                     <div class="div_footer_text_area">
                        <textarea
                           placeholder="What's on your mind... "
                           id="mi-mensaje-texto"
                        ></textarea>
                     </div>

                     <div class="botones_grupo">
                        <div class="footer_opciones">

                           <div class="dropdown" style="width: 100%">
                              <button 
                              class="btn dropdown-toggle" 
                                     type="button" 
                                     id="opciones_mensajes" 
                                     data-bs-toggle="dropdown" 
                                     aria-expanded="false"
                                     style="
                                       height: 64px;
                                     "
                              >
                                <i class="fa fa-plus" style="color: #6b709f; font-size: 20px;"></i>
                              </button>
                              <ul class="dropdown-menu text-center" aria-labelledby="opciones_mensajes" style="border-radius:4px">
                                 <li
                                    role="presentation"
                                    style="cursor: pointer"
                                    id="selectPhotos"
                                 >
                                    <a
                                       role="menuitem"
                                       tabindex="-1"
                                       >Photos</a
                                    >
                                 </li>
                                 <li
                                    role="presentation"
                                    style="cursor: pointer"
                                    id="input_document"
                                 >
                                    <a
                                       role="menuitem"
                                       tabindex="-1"
                                       >Documents</a
                                    >
                                 </li>
                                 <li
                                    role="presentation"
                                    style="cursor: pointer"
                                    id="abrir_plantillas"
                                 >
                                    <a
                                       role="menuitem"
                                       tabindex="-1"
                                       >Plantilla</a
                                    >
                                 </li>
                                 <li
                                    role="presentation"
                                    style="cursor: pointer"
                                 >
                                    <a role="menuitem" tabindex="-1"
                                       >Otras cosas</a
                                    >
                                 </li>
                              </ul>
                           </div>

                           <div class="dropup" style="width: 100%">
                           {*     <button
                                 type="button"
                                 class="dropdown-toggle btn_footer_opciones"
                                 id="dropdownMenu2"
                                 data-toggle="dropdown"
                                 aria-expanded="true"
                              >
                                 <i class="fa fa-plus"></i>
                              </button>
                              <ul
                                 class="dropdown-menu"
                                 role="menu"
                                 aria-labelledby="dropdownMenu2"
                              >
                                  
                              </ul>

                              *}
                           </div>
                        </div>

                        <div class="activar_microfono" style="display: none">
                           <button id="btn_microfono" class="btn_microfono">
                              <i class="fa fa-microphone"></i>
                           </button>
                        </div>

                        <div class="footer_text_btn_enviar">
                           <button
                              id="enviar_mensaje"
                              class="btn_footer_enviar"
                           >
                              <i class="fa fa-paper-plane-o"></i>
                           </button>
                        </div>
                     </div>
                  </div>
               </div>
               <!-- FIN de msb-footer -->

               <!-- msb-footer con textarea -->
               <div class="msb-footer-audio" style="display: none">
                  <div
                     style="
                        width: 100%;
                        padding-left: 5px;
                        padding-right: 4px;
                        border-bottom: 1px solid #bfbfbf;
                        padding-bottom: 6px;
                        padding-top: 10px;
                     "
                  >
                     <select class="form-control form-control-sm" disabled>
                        <option value="whatsapp">Reply by WhatsApp</option>
                     </select>
                  </div>

                  <div class="conjunto-msb-footer">
                     <div class="div_footer_audio">
                        <div class="botones_grupo_audio">
                           <div class="div_eliminar_audio">
                              <button
                                 id="btn_eliminar_audio"
                                 class="btn_eliminar_audio"
                              >
                                 <i class="fa fa-trash"></i>
                              </button>
                           </div>

                           <div id="msg" class="div_contador_audio">
                              <span id="timer">00:00</span>
                           </div>

                           <div class="canvas_area">
                              <canvas class="canvas_vos_pintado"></canvas>
                           </div>

                           <div class="activar_microfono">
                              <button
                                 id="btn_microfono_activo_inactivo"
                                 class="btn_microfono_activo_inactivo"
                              >
                                 <i
                                    class="fa fa-microphone-slash"
                                    title="pause"
                                 ></i>
                                 <!-- <i class="fa fa-pause-circle-o"></i> -->
                              </button>
                           </div>

                           <div class="footer_text_btn_enviar">
                              <button
                                 id="enviar_mensaje_audio"
                                 class="btn_footer_enviar"
                              >
                                 <i class="fa fa-paper-plane"></i>
                              </button>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
               <!-- FIN de msb-footer -->
            </div>
         </div>
      </div>
   </div>

      <!--configuracion a la derecha-->
      <div class="offcanvas_" id="offcanvas-menu">
         <div class="offcanvas-header">
            <h4 class="offcanvas-title" id="offcanvasExampleLabel">Settings</h4>
            <button type="button" class="btn-close-offcanvas">
               <i class="fa fa-times close-icon" id="close-icon"></i>
            </button>
         </div>

         <div class="Custummers">
            <label for="id_select_custumers" class="conf_label"
               >Select a customers</label
            >
            <select
               class="select_custumers"
               name="id_select_custumers"
               id="id_select_custumers"
               style="width: 100%"
            >
              
            </select>

            <div class="custumers_div"></div>
         </div>

         <button
            class="btn btn-primary btn-sm btn_aplicar_custumers_staff"
            style="float: inline-end; margin: 1.6rem 1rem"
         >
            Apply
         </button>
      </div>

      <!--FIN configuracion a la derecha-->
      <div class="offcanvas-backdrop" id="offcanvas-backdrop"></div>

      
 
      <!-- Input de archivo oculto -->
      <input type="file" id="fileInput" accept="image/png, image/jpeg" />
      <input type="file" id="hiddenFileInput" name="fileToUpload" />
      <select name="" id="micSelect" hidden></select>

      <div class="scroll-button" id="scrollButton">
         <i class="fa fa-chevron-down"></i>
      </div>



{/block}

{block name="script"}

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

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

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

{literal}
<script type="module">


 

var URL_BASE = $("#URL_BASE").val();
var ID_USER = $("#ID_USER").val();
const PATH_IMG = $(".tener_path_img").val();

var STAFF_ID_GLOBAL = ID_USER;

 
const idiomas = [
            { 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", codigo: "en" },
            { nombre: "Inglés (Reino Unido)", codigo: "en_GB" },
            { nombre: "Inglés (EE. UU.)", codigo: "en_US" },
            { 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" },
         ];

         var BASE_DE_DATOS_GLOBAL = $("#DB_NAME").val();

         let data_config = await cargar_mi_configuracion_empleado(
            URL_BASE,
            STAFF_ID_GLOBAL,
         );

         //console.log(data_config);

         if (data_config.type == "error") {
            Swal.fire(data_config.message);
         }

         let {
            id,
            identifier,
            token,
            phone,
            phone_identifier,
            whatsapp_business_account_identifier,
            app_Identifier,
            version,
            status,
            fecha_creacion,
            sms_account_sid,
            sms_auth_token,
            sms_phone_number,
            enable_twilio: enableTwilio,
            enable_whatsapp: enableWhatsapp,
         } = data_config.data;

         //console.log(data_config.data);
         //console.log("enableTwilio");
         //console.log(enableTwilio);
         //console.log("enableWhatsapp");
         //console.log(enableWhatsapp);

         //configuracion de whatsapp

         var TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID = id;

         const FROM_GLOBAL = phone;
         const PHONE_NUMBER_ID_GLOBAL = phone_identifier;
         const VERSION_WHATSAPP_GLOBAL = version;
         const TOKEN_WHATSAPP_GLOBAL = token;
         const WHATSAPP_BUSINESS_ACCOUNT_IDENTIFIER =
            whatsapp_business_account_identifier;

         //configuracion de mensajes
         const SMS_FROM_GLOBAL = sms_phone_number;
         const ACCOUNT_SID_SMS = sms_account_sid;
         const AUTH_TOKEN_SMS = sms_auth_token;

         var TIPO_DE_PLATAFORMA = "whatsapp-sms";

         $(".tipo_config_whatsapp_identifier").text("Connected to: "+identifier);

         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 NOMBRE_CONTACTO_SELECCIONADO = null;

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

         // Variable para las opciones
         let opciones = '';

         // Agregar opción de WhatsApp si está habilitado
         if (enableTwilio == 1 || enableTwilio == "1") {
             opciones += '<option value="sms" class="seleccionar_medio_sms">Reply by SMS</option>';
         }

         // Agregar opción de SMS si está habilitado
         if (enableWhatsapp == 1 || enableWhatsapp == "1") {
            opciones += '<option value="whatsapp" class="seleccionar_medio_whatsapp">Reply by WhatsApp</option>';
         }

         // Añadir las opciones al select
         $("#seleccionar_medio_mensaje").append(opciones);

         // Seleccionar la opción predeterminada (dar prioridad a SMS si ambas están habilitadas)
         if (enableWhatsapp == 1 || enableWhatsapp == "1") {
            $("#seleccionar_medio_mensaje").val("whatsapp");
         } else if (enableTwilio == 1 || enableTwilio == "1") {
            $("#seleccionar_medio_mensaje").val("sms");
         }

         $(document).ready(function () {
            $(".select_custumers").select2({
               placeholder: "Select an option",
               allowClear: true,
            });
         });

         var numero_contacto_seleccionado = null;
         var id_contacto_seleccionado = null;

         var loading = false;

         //la parte de arriba del chat
         $(".cabecera_perfil_contacto").html(
            quitar_cabecera_contacto_seleccionado(),
         );

         //me servira para tener la lista de personas que me escribieron o contactos
         var lista_contactos =
            (await cargar_listado_contactos_api(
               URL_BASE,
               STAFF_ID_GLOBAL,
               TIPO_DE_PLATAFORMA,
               TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID,
            )) || [];

         //se usa cuando se selecciona un contacto o cuando se cre un mensaje o imagen para asignarlo manual
         var chat_mensajes = [];

         //listado de plantilla tenidas de facebook
         var listado_plantillas = [];

         //listado staff
         var listado_custumers =
            (await cargar_listado_custumers_api(URL_BASE)) || [];

         //console.log("customers");
         //console.log(listado_custumers);

         $(".select_custumers").html(
            cargar_select_custumers(listado_custumers),
         );

         //console.log(lista_contactos);

         var lista_contactos_html = "";
         lista_contactos.forEach((element) => {
            lista_contactos_html += contactos(element);
         });

         $(".mi-bandeja-mensajes-contactos").html(lista_contactos_html);

         //puse el dar click en una funcion se repetira el codigo
         click_contactos();

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

         const socket = io("https://xhde365.com", {
            path: "/socket-chat/socket.io",
            //transports: ["websocket"],
         });

         socket.on("connect", () => {
            console.log("Conectado al servidor de Socket.IO");
         });

         // Manejar la desconexión
         socket.on("disconnect", () => {
            console.log("Desconectado del servidor de Socket.IO");
         });

         socket.on(
            "chat-social-empleados/" +
               BASE_DE_DATOS_GLOBAL +
               "/" +
               STAFF_ID_GLOBAL +
               "/" +
               TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID,
            (data) => {
               //$(".cuerpo_mensaje").css("display", "");
               //$(".sin_mensaje").css("display", "none");

               //console.log("Datos de chat recibidos:", data);

               /* if (isEmpty(TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID) == true) {
                  console.log(
                     "ESTE USUARIO NO TIENE TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID",
                  );
                  return;
               } */

               var {
                  tipo_producto,
                  error_codigo,
                  error_mensaje,
                  status,
                  wam_id,
                  sid,
                  phone_number_id,
                  from,
                  to,
                  mensaje,
                  url,
                  filename,
                  tipo_mensaje,
                  db,
                  esContacto,
                  fecha_creacion,
                  id_chat_number,
                  staff_id,
                  config_whatsapp_other_id,

                  donde_estamos,
               } = data;

               //console.log("status:", status);
               //console.log("esContacto:", esContacto);
               //console.log("tipo_mensaje:", tipo_mensaje);
               //console.log("mensaje:", mensaje);
               //console.log("donde_estamos:", donde_estamos);
               //console.log("wam_id:", wam_id);
               //console.log("fecha_creacion:", fecha_creacion);
               //console.log("staff_id:", staff_id);
               //console.log("sid:", sid);
               //console.log(
               //   "config_whatsapp_other_id:",
               //   config_whatsapp_other_id,
               //);
               //console.log(
               //   "TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID:",
               //   TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID,
               //);

               /* if (
                  TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID !=
                  config_whatsapp_other_id
               ) {
                  console.log(
                     "CAYO UN MENSAJE QUE NO ES EL TIPO DE CONFIGURACION",
                  );
                  return;
               } */

               if (
                  isEmpty(tipo_mensaje) == true &&
                  isEmpty(tipo_producto) == true &&
                  isEmpty(esContacto) == true &&
                  isEmpty(status) == true
               ) {
                  return;
               }

               //PARA CUANDO LA SELECCION DE CANAL/PLATAFORMA ES MIXTO VALIDAMOS QUE TIPO DE MENSAJE ES Y ENVIAR que tipo de mensajes y enviar
               if (TIPO_DE_PLATAFORMA == "whatsapp-sms") {
                  if (tipo_producto == "sms") {
                     plantilla_tipo_sms(data);
                     return;
                  }

                  if (tipo_producto == "whatsapp") {
                     plantilla_tipo_whatsapp(data);
                     return;
                  }
               }

               //CUANDO PLATAFORMA ES SMS
               if (TIPO_DE_PLATAFORMA == "sms") {
                  if (tipo_producto == "sms") {
                     plantilla_tipo_sms(data);
                     return;
                  }
               }

               //CUANDO PLATAFORMA ES WHATSAPP
               if (TIPO_DE_PLATAFORMA == "whatsapp") {
                  if (tipo_producto == "whatsapp") {
                     plantilla_tipo_whatsapp(data);
                     return;
                  }
               }

               // Aquí puedes manejar los datos como necesites
            },
         );

         socket.on(
            "add-contactos-empleados/" +
               BASE_DE_DATOS_GLOBAL +
               "/" +
               STAFF_ID_GLOBAL,
            (data) => {
               //console.log("Datos de add-contactos-empleados:", data);
               // Aquí puedes manejar los datos como necesites

               var {
                  id,
                  number,
                  custumer_id,
                  staff_id,
                  staff_id_nuevo,
                  created_at,
                  mensajes_no_leidos,
                  nombre,
                  email_custumers,
                  phone_custumers,
                  company_custumers,
                  address_custumers,
                  fullname_staff,
                  username_staff,
                  user_type_staff,
                  phonenumber,
                  accion,
                  db,
               } = data;

               if (accion == "agregar") {
                  let add_contacto_desconocido = {
                     id: id, //clientes usan whatapp
                     nombre: nombre, //clientes usan whatapp
                     number: number, //clientes
                     custumer_id: custumer_id,
                     staff_id: staff_id,
                     created_at: created_at, //clientes usan whatapp
                     mensajes_no_leidos: mensajes_no_leidos,
                     email_custumers: email_custumers,
                     phone_custumers: phone_custumers,
                     company_custumers: company_custumers,
                     address_custumers: address_custumers,
                     fullname_staff: fullname_staff,
                     username_staff: username_staff,
                     user_type_staff: user_type_staff,
                     phonenumber: phonenumber,
                  };

                  lista_contactos.push(add_contacto_desconocido);

                  $(".mi-bandeja-mensajes-contactos").prepend(
                     contactos(add_contacto_desconocido),
                  );

                  click_contactos();
               }

               if (accion == "modificar") {
                  var modificar_contacto = lista_contactos.find(
                     (data) => data.id == id,
                  );

                  modificar_contacto.custumer_id = custumer_id;
                  modificar_contacto.staff_id = staff_id;
                  modificar_contacto.nombre = nombre;
                  modificar_contacto.email_custumers = email_custumers;
                  modificar_contacto.phone_custumers = phone_custumers;
                  modificar_contacto.company_custumers = company_custumers;
                  modificar_contacto.address_custumers = address_custumers;
                  modificar_contacto.fullname_staff = fullname_staff;
                  modificar_contacto.username_staff = username_staff;
                  modificar_contacto.phonenumber = phonenumber;
                  modificar_contacto.user_type_staff = user_type_staff;
                  //console.log(modificar_contacto);

                  var div = $(
                     '.mi-bandeja-mensajes-contactos a[data-id_contacto="' +
                        id +
                        '"]',
                  );

                  // Si el elemento <a> existe
                  if (div.length) {
                     // Seleccionamos el span dentro de este <a>
                     let contacto_nombre_contacto = div.find(
                        ".contacto_nombre_contacto",
                     );

                     contacto_nombre_contacto.text(nombre);

                     let contacto_fullname_staff = div.find(
                        ".contacto_fullname_staff ",
                     );

                     contacto_fullname_staff.text(fullname_staff);
                  }
               }

               if (accion == "eliminar") {
                  let index = lista_contactos.findIndex(
                     (data) => data.id == id,
                  );

                  if (index !== -1) {
                     var div = $(
                        '.mi-bandeja-mensajes-contactos a[data-id_contacto="' +
                           id +
                           '"]',
                     );

                     if (div.length) {
                        div.remove();
                     }

                     lista_contactos.splice(index, 1);

                     //console.log(lista_contactos);

                     $(".cuerpo_sin_mensajes").css("display", "");
                     $(".cuerpo_mensaje").css("display", "none"); //habilita las conversaciones

                     $(".msb-footer-sin-enviar-mensajes").css("display", "");
                     $(".msb-footer").css("display", "none");

                     $(".cabecera_perfil_contacto").html(
                        quitar_cabecera_contacto_seleccionado(),
                     );

                     numero_contacto_seleccionado = null;
                     id_contacto_seleccionado = null;
                     loading = false;
                  }
               }
            },
         );

         $("#enviar_mensaje").click(function () {
            let mensaje = $("#mi-mensaje-texto").val();
            //console.log(mensaje);

            let tipo_medio = $("#seleccionar_medio_mensaje").val();

            if (tipo_medio != "sms" && tipo_medio != "whatsapp") {
               Swal.fire(
                  "You must choose a correct option for the message medium: it can be WhatsApp or SMS",
               );
            }

            if (isEmpty(mensaje) == true) {
               return;
            }

            if (isEmpty(numero_contacto_seleccionado) == true) {
               Swal.fire("Select a contact");

               return;
            }
            /* socket.emit("chat-social", {
                                          tipo_producto: tipo ? "producto 1" : "producto2",
                                          mensaje: mensaje,
                                          id: 1,
                                       });

                                       socket.emit("position", {
                                          id_order: 10000,
                                          lat: 40.7128,
                                          lng: -74.006,
                                          estadoId: 12,
                                       });

                                       tipo = !tipo;
                                       */

            if (tipo_medio == "sms") {
               let datos = {
                  mensaje: mensaje,
                  to: numero_contacto_seleccionado,
                  from: SMS_FROM_GLOBAL,
                  tipo_usuario: "empleado", //admin es default
                  staff_id: STAFF_ID_GLOBAL,
                  account_sid: ACCOUNT_SID_SMS,
                  auth_token: AUTH_TOKEN_SMS,
                  configuracion_whatsapp_sms_id:
                     TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID,
               };

               // Realizar la solicitud POST
               $.ajax({
                  type: "POST",
                  url: URL_BASE + "social/enviar-mensaje-sms-texto",
                  data: JSON.stringify(datos), // Convertir datos a formato JSON
                  contentType: "application/json", // Tipo de contenido JSON
                  success: function (response) {
                     //console.log("Respuesta del servidor:", response);
                     // Hacer algo con la respuesta del servidor

                     try {
                        let info = JSON.parse(response);

                        if (info.type == "success") {
                           //cambiar_badge(numero_contacto_seleccionado, "0");

                           let sumar_msj_sin_responder = lista_contactos.find(
                              (elemento) =>
                                 elemento.number ==
                                 numero_contacto_seleccionado,
                           );

                           if (sumar_msj_sin_responder) {
                              sumar_msj_sin_responder.mensajes_no_leidos +=
                                 -info.mensajes_no_leidos;
                              let mnl = sumar_msj_sin_responder.mensajes_no_leidos <= 0 ? 0 : sumar_msj_sin_responder.mensajes_no_leidos;
                                 
                              cambiar_badge(
                                 numero_contacto_seleccionado,
                                 mnl,
                              );
                           }

                           //console.log(info.wam_id);

                           const now = new Date();
                           const formattedDate = formatDateTime(now);

                           let informacion = {
                              id: "unico-sms",
                              tipo_producto: "sms",
                              error_codigo: "",
                              error_mensaje: "",
                              status: info.status,
                              wam_id: null,
                              sid: info.sid,
                              phone_number_id: null,
                              from: SMS_FROM_GLOBAL,
                              to: numero_contacto_seleccionado,
                              mensaje: info.mensaje,
                              url: "",
                              tipo_mensaje: "text",
                              db: "no ocupo",
                              esContacto: "0",
                              fecha_creacion: formattedDate,
                           };

                           chat_mensajes.push(informacion);

                           $(".cuerpo_mensaje").append(
                              mensaje_texto_sms_usuarios(
                                 informacion.tipo_producto,
                                 informacion.error_codigo,
                                 informacion.status,
                                 informacion.sid,
                                 informacion.mensaje,
                                 informacion.fecha_creacion,
                              ),
                           );

                           $("#mi-mensaje-texto").focus();
                           $("#mi-mensaje-texto").val("");

                           scroll_abajo();

                           if(info.mensajes_no_leidos_pendiente <= 0)
                           {
                              //$(".signo_existe_mensaje_ws").fadeOut();
                           }

                        } else if (info.type == "error") {
                           Swal.fire({
                              icon: "error",
                              title: "Oops...",
                              text: info.message,
                           });
                        }
                     } catch (error) {
                        Swal.fire({
                           icon: "error",
                           title: "Oops...",
                           text: error,
                        });
                     }
                  },
                  error: function (xhr, status, error) {
                     console.error("Error en la solicitud:", error);
                     // Manejar errores aquí
                  },
               });
            }

            if (tipo_medio == "whatsapp") {
               let datos = {
                  mensaje: mensaje,
                  to: numero_contacto_seleccionado,
                  from: FROM_GLOBAL,
                  phone_number_id: PHONE_NUMBER_ID_GLOBAL,
                  tipo_usuario: "empleado", //admin es default
                  staff_id: STAFF_ID_GLOBAL, //si es admin no se valida este campo
                  version_api_whatapp: VERSION_WHATSAPP_GLOBAL,
                  token_acceso: TOKEN_WHATSAPP_GLOBAL,
                  configuracion_whatsapp_sms_id:
                     TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID,
               };


               // Realizar la solicitud POST
               $.ajax({
                  type: "POST",
                  url: URL_BASE + "social/enviar-mensaje-texto",
                  data: JSON.stringify(datos), // Convertir datos a formato JSON
                  contentType: "application/json", // Tipo de contenido JSON
                  success: function (response) {
                    console.log("Respuesta del servidor:", response);
                     // Hacer algo con la respuesta del servidor

                     try {
                        let info = JSON.parse(response);

                        if (info.type == "success") {
                           //cambiar_badge(numero_contacto_seleccionado, "0");

                           let sumar_msj_sin_responder = lista_contactos.find(
                              (elemento) =>
                                 elemento.number ==
                                 numero_contacto_seleccionado,
                           );

                           if (sumar_msj_sin_responder) {
                              sumar_msj_sin_responder.mensajes_no_leidos +=
                                 -info.mensajes_no_leidos;
                              let mnl = sumar_msj_sin_responder.mensajes_no_leidos <= 0 ? 0 : sumar_msj_sin_responder.mensajes_no_leidos;
                              
                              cambiar_badge(
                                 numero_contacto_seleccionado,
                                 mnl,
                              );
                           }

                           //console.log(info.wam_id);

                           const now = new Date();
                           const formattedDate = formatDateTime(now);

                           let informacion = {
                              id: "unico",
                              tipo_producto: "whatsapp",
                              error_codigo: "",
                              error_mensaje: "",
                              status: "wait",
                              wam_id: info.wam_id,
                              phone_number_id: PHONE_NUMBER_ID_GLOBAL,
                              from: FROM_GLOBAL,
                              to: numero_contacto_seleccionado,
                              mensaje: $("#mi-mensaje-texto").val(),
                              url: "",
                              tipo_mensaje: "text",
                              db: "no ocupo",
                              esContacto: "0",
                              fecha_creacion: formattedDate,
                           };

                           chat_mensajes.push(informacion);

                           $(".cuerpo_mensaje").append(
                              mensaje_texto_whatsapp_usuarios(
                                 "whatsapp",
                                 "",
                                 "",
                                 "wait",
                                 info.wam_id,
                                 PHONE_NUMBER_ID_GLOBAL,
                                 FROM_GLOBAL,
                                 numero_contacto_seleccionado,
                                 $("#mi-mensaje-texto").val(),
                                 "",
                                 "text",
                                 "no ocupo el db",
                                 "0",
                                 formattedDate,
                              ),
                           );

                           $("#mi-mensaje-texto").focus();

                           $("#mi-mensaje-texto").val("");

                           scroll_abajo();
                           
                           if(info.mensajes_no_leidos_pendiente == 0)
                           {
                              //$(".signo_existe_mensaje_ws").fadeOut();
                           }

                        } else if (info.type == "error") {
                           Swal.fire({
                              icon: "error",
                              title: "Oops...",
                              text: info.message,
                           });
                        }
                     } catch (error) {
                        Swal.fire({
                           icon: "error",
                           title: "Oops...",
                           text: error,
                        });
                     }
                  },
                  error: function (xhr, status, error) {
                     console.error("Error en la solicitud:", error);
                     // Manejar errores aquí
                  },
               });
            }
         });

         const MAX_FILE_SIZE_MB = 5; // Tamaño máximo en MB
         const MAX_FILE_SIZE_BYTES = MAX_FILE_SIZE_MB * 1024 * 1024;

         // Mostrar vista previa de la imagen seleccionada
         document
            .getElementById("fileInput")
            .addEventListener("change", function (event) {
               let seleccion_medio_mensaje = $(
                  "#seleccionar_medio_mensaje",
               ).val();

               if (seleccion_medio_mensaje == "sms") {
                  Swal.fire("SMS channel type cannot send photo");
                  return;
               }

               if (seleccion_medio_mensaje != "whatsapp") {
                  Swal.fire("Only enabled for WhatsApp");
                  return;
               }

               if (isEmpty(numero_contacto_seleccionado) == true) {
                  Swal.fire("Select a contact");

                  return;
               }

               const file = event.target.files[0];
               if (file) {
                  // Verificar que el archivo es una imagen PNG o JPEG
                  if (file.type === "image/png" || file.type === "image/jpeg") {
                     // Verificar que el archivo no exceda el tamaño máximo
                     if (file.size <= MAX_FILE_SIZE_BYTES) {
                        resizeImage(file, 500, 500) // Define el maxWidth y maxHeight según tus necesidades
                           .then((resizedBase64) => {
                              const base64WithoutPrefix =
                                 resizedBase64.split(",")[1]; // Dividir la cadena en base64 por la coma y tomar la segunda parte

                              //console.log(base64WithoutPrefix);

                              let mensaje = $("#mi-mensaje-texto").val();

                              let datos = {
                                 imagen: base64WithoutPrefix,
                                 to: numero_contacto_seleccionado,
                                 from: FROM_GLOBAL,
                                 phone_number_id: PHONE_NUMBER_ID_GLOBAL,
                                 caption: mensaje,
                                 tipo_usuario: "empleado", //admin es default
                                 staff_id: STAFF_ID_GLOBAL, //si es admin no se valida este campo
                                 version_api_whatapp: VERSION_WHATSAPP_GLOBAL,
                                 token_acceso: TOKEN_WHATSAPP_GLOBAL,
                                 configuracion_whatsapp_sms_id:
                                    TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID,
                              };

                              // Realizar la solicitud POST
                              $.ajax({
                                 type: "POST",
                                 url: URL_BASE + "social/enviar-mensaje-imagen",
                                 data: JSON.stringify(datos), // Convertir datos a formato JSON
                                 contentType: "application/json", // Tipo de contenido JSON
                                 success: function (response) {
                                    //console.log(
                                    //   "Respuesta del servidor:",
                                    //   response,
                                    //);

                                    const info = JSON.parse(response);

                                    if (info.type == "success") {
                                       //scroll_abajo();
                                       /* cambiar_badge(
                                          numero_contacto_seleccionado,
                                          "0",
                                       ); */

                                       let sumar_msj_sin_responder =
                                          lista_contactos.find(
                                             (elemento) =>
                                                elemento.number ==
                                                numero_contacto_seleccionado,
                                          );

                                       if (sumar_msj_sin_responder) {
                                          sumar_msj_sin_responder.mensajes_no_leidos +=
                                             -info.mensajes_no_leidos;
                                          let mnl = sumar_msj_sin_responder.mensajes_no_leidos <= 0 ? 0 : sumar_msj_sin_responder.mensajes_no_leidos;
                                          
                                          cambiar_badge(
                                             numero_contacto_seleccionado,
                                             mnl,
                                          );
                                       }

                                       const now = new Date();
                                       const formattedDate =
                                          formatDateTime(now);

                                       let informacion = {
                                          id: "100",
                                          tipo_producto: "whatsapp",
                                          error_codigo: "",
                                          error_mensaje: "",
                                          status: "wait",
                                          wam_id: info.wam_id,
                                          phone_number_id:
                                             PHONE_NUMBER_ID_GLOBAL,
                                          from: FROM_GLOBAL,
                                          to: numero_contacto_seleccionado,
                                          mensaje: $("#mi-mensaje-texto").val(),
                                          url: info.url,
                                          tipo_mensaje: "image",
                                          db: "no ocupo",
                                          esContacto: "0",
                                          fecha_creacion: formattedDate,
                                       };

                                       chat_mensajes.push(informacion);

                                       $(".cuerpo_mensaje").append(
                                          mensaje_imagen_whatsapp_usuarios(
                                             "whatsapp",
                                             "",
                                             "",
                                             "wait",
                                             info.wam_id,
                                             PHONE_NUMBER_ID_GLOBAL,
                                             FROM_GLOBAL,
                                             numero_contacto_seleccionado,
                                             $("#mi-mensaje-texto").val(),
                                             info.url, // url
                                             "image",
                                             "no ocupo el db",
                                             "0",
                                             formattedDate,
                                          ),
                                       );

                                       $("#mi-mensaje-texto").focus();
                                       $("#mi-mensaje-texto").val("");

                                       /* scroll_abajo().then((result) => {
                                          cargando_imagen(":last");
                                       }); */

                                       cargando_imagen(":last").then(() => {
                                          scroll_abajo();
                                       });

                                       if(info.mensajes_no_leidos_pendiente <= 0)
                                       {
                                          //$(".signo_existe_mensaje_ws").fadeOut();
                                       }

                                    } else if (info.type == "error") {
                                       Swal.fire({
                                          icon: "error",
                                          title: "Oops...",
                                          text: info.message,
                                       });
                                    }
                                    // Hacer algo con la respuesta del servidor

                                    //$("#mi-mensaje-texto").val("");
                                 },
                                 error: function (xhr, status, error) {
                                    console.error(
                                       "Error en la solicitud:",
                                       error,
                                    );
                                    // Manejar errores aquí
                                 },
                              });
                           })
                           .catch((error) => {
                              console.error(
                                 "Error al redimensionar la imagen:",
                                 error,
                              );
                           });
                     } else {
                        Swal.fire(
                           "El archivo excede el tamaño máximo permitido de 5 MB.",
                        );
                     }
                  } else {
                     Swal.fire(
                        "Por favor, seleccione una imagen en formato PNG o JPEG.",
                     );
                  }
               }
            });

         document
            .getElementById("selectPhotos")
            .addEventListener("click", function () {
               let seleccion_medio_mensaje = $(
                  "#seleccionar_medio_mensaje",
               ).val();

               if (seleccion_medio_mensaje == "sms") {
                  Swal.fire("SMS channel type cannot send photo");
                  return;
               }

               if (seleccion_medio_mensaje != "whatsapp") {
                  Swal.fire("Only enabled for WhatsApp");
                  return;
               }

               if (isEmpty(numero_contacto_seleccionado) == true) {
                  Swal.fire("Select a contact");
                  return;
               }
               document.getElementById("fileInput").click();
            });

         //documentos
         document
            .getElementById("input_document")
            .addEventListener("click", function () {
               let seleccion_medio_mensaje = $(
                  "#seleccionar_medio_mensaje",
               ).val();

               if (seleccion_medio_mensaje == "sms") {
                  Swal.fire("SMS channel type cannot send documents");
                  return;
               }

               if (seleccion_medio_mensaje != "whatsapp") {
                  Swal.fire("Only enabled for WhatsApp");
                  return;
               }

               if (isEmpty(numero_contacto_seleccionado) == true) {
                  Swal.fire("Select a contact");
                  return;
               }
               document.getElementById("hiddenFileInput").click();
            });

         //funcion para documentos
         document
            .getElementById("hiddenFileInput")
            .addEventListener("change", function (event) {
               let seleccion_medio_mensaje = $(
                  "#seleccionar_medio_mensaje",
               ).val();

               if (seleccion_medio_mensaje == "sms") {
                  Swal.fire("SMS channel type cannot send documents");
                  return;
               }

               if (seleccion_medio_mensaje != "whatsapp") {
                  Swal.fire("Only enabled for WhatsApp");
                  return;
               }

               if (isEmpty(numero_contacto_seleccionado) == true) {
                  Swal.fire("Select a contact");
                  return;
               }

               var file = event.target.files[0];
               //console.log(file);
               //return;

               if (!file) {
                  return;
               }

               // Verificar el tamaño del archivo (95 MB = 95 * 1024 * 1024 bytes)
               var maxSize = 95 * 1024 * 1024; // 95 MB en bytes
               if (file.size > maxSize) {
                  Swal.fire(
                     "The file exceeds the maximum allowed size of 95 MB.",
                  );

                  return;
               }

               var tipo_documento = "";

               if (file.type.startsWith("audio/") == true) {
                  var allowedMimeTypes = [
                     "audio/aac", // .aac
                     "audio/amr", // .amr
                     "audio/mpeg", // .mp3
                     "audio/mp4", // .m4a
                     "audio/ogg", // .ogg (solo códecs OPUS)
                  ];

                  // Verificar si el archivo es un tipo de audio permitido
                  if (!allowedMimeTypes.includes(file.type)) {
                     Swal.fire(
                        "File type not allowed. Only the following audio types are allowed: .aac, .amr, .mp3, .m4a, .ogg.",
                     );

                     return;
                  }
                  tipo_documento = "audio";
               } else {
                  // Tipos MIME de imágenes comunes
                  var imageMimeTypes = [
                     "image/jpeg", // .jpg, .jpeg
                     "image/png", // .png
                     "image/gif", // .gif
                     "image/bmp", // .bmp
                     "image/webp", // .webp
                     "image/tiff", // .tiff
                     "image/svg+xml", // .svg
                  ];

                  // Verificar si el archivo es una imagen
                  if (imageMimeTypes.includes(file.type)) {
                     Swal.fire("Sorry, no image files allowed.");

                     return;
                  }

                  tipo_documento = "document";
               }

               // Leer y codificar el archivo en base64
               var reader = new FileReader();
               reader.onloadend = function () {
                  var base64String = reader.result.replace(
                     /^data:.+;base64,/,
                     "",
                  );
                  let mensaje = $("#mi-mensaje-texto").val();

                  //console.log(file);

                  let datos = {
                     mensaje: mensaje,
                     archivo: base64String,
                     filename: file.name,
                     tipo_usuario: "empleado", //admin default
                     staff_id: STAFF_ID_GLOBAL,
                     to: numero_contacto_seleccionado,
                     from: FROM_GLOBAL,
                     phone_number_id: PHONE_NUMBER_ID_GLOBAL,
                     tipo_documento: tipo_documento,
                     version_api_whatapp: VERSION_WHATSAPP_GLOBAL,
                     token_acceso: TOKEN_WHATSAPP_GLOBAL,
                     configuracion_whatsapp_sms_id:
                        TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID,
                  };

                  // Realizar la solicitud POST
                  $.ajax({
                     type: "POST",
                     url: URL_BASE + "social/enviar-mensaje-documentos",
                     data: JSON.stringify(datos), // Convertir datos a formato JSON
                     contentType: "application/json", // Tipo de contenido JSON
                     success: function (response) {
                        //console.log("Respuesta del servidor:", response);
                        // Hacer algo con la respuesta del servidor

                        try {
                           let info = JSON.parse(response);

                           if (info.type == "success") {
                              let sumar_msj_sin_responder =
                                 lista_contactos.find(
                                    (elemento) =>
                                       elemento.number ==
                                       numero_contacto_seleccionado,
                                 );

                              if (sumar_msj_sin_responder) {
                                 sumar_msj_sin_responder.mensajes_no_leidos +=
                                    -info.mensajes_no_leidos;
                                 
                                 let mnl = sumar_msj_sin_responder.mensajes_no_leidos <= 0 ? 0 : sumar_msj_sin_responder.mensajes_no_leidos;
                                 cambiar_badge(
                                    numero_contacto_seleccionado,
                                    mnl,
                                 );
                              }
                              //console.log(info.wam_id);

                              const now = new Date();
                              const formattedDate = formatDateTime(now);

                              if (info.tipo_documento == "document") {
                                 let informacion = {
                                    id: "100",
                                    tipo_producto: "whatsapp",
                                    error_codigo: "",
                                    error_mensaje: "",
                                    status: "wait",
                                    wam_id: info.wam_id,
                                    phone_number_id: PHONE_NUMBER_ID_GLOBAL,
                                    from: FROM_GLOBAL,
                                    to: numero_contacto_seleccionado,
                                    mensaje: $("#mi-mensaje-texto").val(),
                                    url: info.url,
                                    tipo_mensaje: "document",
                                    db: "no ocupo",
                                    esContacto: "0",
                                    fecha_creacion: formattedDate,
                                    filename: file.name,
                                 };

                                 chat_mensajes.push(informacion);

                                 $(".cuerpo_mensaje").append(
                                    mensaje_documentos_whatsapp_usuarios(
                                       "whatsapp",
                                       "",
                                       "",
                                       "wait",
                                       info.wam_id,
                                       PHONE_NUMBER_ID_GLOBAL,
                                       FROM_GLOBAL,
                                       numero_contacto_seleccionado,
                                       $("#mi-mensaje-texto").val(),
                                       info.url, // url
                                       "document",
                                       "no ocupo el db",
                                       "0",
                                       formattedDate,
                                       file.name,
                                    ),
                                 );
                              }

                              if (info.tipo_documento == "audio") {
                                 let informacion = {
                                    id: "100",
                                    tipo_producto: "whatsapp",
                                    error_codigo: "",
                                    error_mensaje: "",
                                    status: "wait",
                                    wam_id: info.wam_id,
                                    phone_number_id: PHONE_NUMBER_ID_GLOBAL,
                                    from: FROM_GLOBAL,
                                    to: numero_contacto_seleccionado,
                                    mensaje: $("#mi-mensaje-texto").val(),
                                    url: info.url,
                                    tipo_mensaje: "audio",
                                    db: "no ocupo",
                                    esContacto: "0",
                                    fecha_creacion: formattedDate,
                                    filename: file.name,
                                 };

                                 chat_mensajes.push(informacion);

                                 $(".cuerpo_mensaje").append(
                                    mensaje_audios_whatsapp_usuarios_cargar_socket(
                                       "whatsapp",
                                       "",
                                       "",
                                       "wait",
                                       info.wam_id,
                                       PHONE_NUMBER_ID_GLOBAL,
                                       FROM_GLOBAL,
                                       numero_contacto_seleccionado,
                                       $("#mi-mensaje-texto").val(),
                                       info.url, // url
                                       "audio",
                                       "no ocupo el db",
                                       "0",
                                       formattedDate,
                                       file.name,
                                    ),
                                 );

                                 sleep(1000).then(() => {
                                    var div = $(".cuerpo_mensaje").find(
                                       '[data-wam-id="' + info.wam_id + '"]',
                                    );

                                    if (div.length > 0) {
                                       var audioElement = div.find("audio")[0];

                                       if (audioElement) {
                                          let source =
                                             document.createElement("source");
                                          source.src = info.url; // Cambia esta URL según sea necesario
                                          audioElement.appendChild(source);
                                          audioElement.controls = true;

                                          scroll_abajo();
                                       }
                                    }
                                 });
                              }

                              $("#mi-mensaje-texto").focus();
                              $("#mi-mensaje-texto").val("");

                              scroll_abajo();
                              
                              if(info.mensajes_no_leidos_pendiente <= 0)
                              {
                                 //$(".signo_existe_mensaje_ws").fadeOut();
                              }

                           } else if (info.type == "error") {
                              Swal.fire({
                                 icon: "error",
                                 title: "Oops...",
                                 text: info.message,
                              });
                           }
                        } catch (error) {
                           Swal.fire({
                              icon: "error",
                              title: "Oops...",
                              text: error,
                           });
                        }
                     },
                     error: function (xhr, status, error) {
                        console.error("Error en la solicitud:", error);
                        // Manejar errores aquí
                     },
                  });
               };

               reader.readAsDataURL(file);
            });

         function click_contactos() {
            $(".item-contactos").on("click", async function () {
               // Obtener los valores de los atributos data
               let idContacto = $(this).data("id_contacto");
               let numeroContacto = $(this).data("numero-contacto");
               let nombreContacto = $(this).data("nombre-contacto");

               NOMBRE_CONTACTO_SELECCIONADO = $(this).find(".contacto_nombre_contacto").text();


               if (id_contacto_seleccionado == idContacto) {
                  return;
               }

               chat_mensajes = [];

               $(".cuerpo_sin_mensajes").css("display", "none");
               $(".cuerpo_mensaje").css("display", "none"); //habilita las conversaciones

               $(".msb-footer-sin-enviar-mensajes").css("display", "");
               $(".msb-footer").css("display", "none");

               //cargando mensajes de chat
               $(".cuerpo_cargando_mensajes").css("display", "");

               // Mostrar los valores en la consola
               //console.log("ID Contacto:", idContacto);
               //console.log("Número Contacto:", numeroContacto);
               //console.log("Nombre Contacto:", nombreContacto);

               $(".cabecera_perfil_contacto").html(
                  cabecera_contacto_seleccionado(nombreContacto),
               );

               funcion_modal_abrir_contacto();

               //esta funcion me permite abrir el menu de opciones para que seleccione un staff y cliente al chat
               setting_offcanvas();

               //cambiamos el color seleccionado
               /* $(".item-contactos").each(function () {
                  $(this).css("background-color", "white");
               });

               $(this).css("background-color", "#f5f5f5"); */

               //cambiamos el color seleccionado
               $(".item-contactos").each(function () {
                  //$(this).css("background-color", "trasparente");
                  $(this).removeClass("item-contacto-seleccionado");
               });

               //$(this).css("background-color", "#f5f5f5");
               $(this).addClass("item-contacto-seleccionado");

               numero_contacto_seleccionado = numeroContacto;
               id_contacto_seleccionado = idContacto;

               //carga los primeros 30 o N registros
               chat_mensajes = await cargar_listado_chat_contactos_api(
                  URL_BASE,
                  numero_contacto_seleccionado,
                  FROM_GLOBAL,
                  PHONE_NUMBER_ID_GLOBAL,
                  TIPO_DE_PLATAFORMA,
                  TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID,
               );

               //console.log(chat_mensajes);

               $(".cuerpo_mensaje").html("");

               cargar_mensajes_numeros_plantillas(chat_mensajes);

               await sleep(1000);

               $(".cuerpo_cargando_mensajes").css("display", "none"); //modal carganos
               $(".cuerpo_mensaje").css("display", ""); //habilita las conversaciones

               //aparezca la parte de textarea y botones
               $(".msb-footer-sin-enviar-mensajes").css("display", "none");
               $(".msb-footer").css("display", "");

               //TODA ESTA FUNCION ME PERMITIRA VER MAS A DETALLE
               let tener_contacto = lista_contactos.find(
                  (data) => data.id == id_contacto_seleccionado,
               );

               //console.log(tener_contacto);

               if (tener_contacto.custumer_id != null) {
                  //console.log("paso");
                  //cliente
                  let data_customer = listado_custumers.find(
                     (data) => data.id == tener_contacto.custumer_id,
                  );

                  //console.log(data_customer);

                  $(".custumers_div").html(
                     descripcion_seleccion_custumer_plantilla(data_customer),
                  );

                  $(".select_custumers")
                     .val(tener_contacto.custumer_id)
                     .trigger("change");
               }

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

               var id_chat_mensajes = chat_mensajes[0]["id"];
               var wam_id_chat_mensajes = chat_mensajes[0]["wam_id"];
               //console.log("El ultimo id");
               //console.log(id_chat_mensajes);

               //await sleep(500);

               scroll_abajo().then((result) => {
                  if (result == true) {
                     const container = $(".cuerpo_mensaje");

                     container.on("scroll", async function () {
                        const scrollHeight = this.scrollHeight;
                        const clientHeight = this.clientHeight;
                        const scrollTop = this.scrollTop;

                        //scrollTop + clientHeight > scrollHeight - 3 && setTimeout(newContainer, 2000)

                        //console.log(scrollTop);

                        if (scrollTop < 240) {
                           if (loading == true) {
                              //console.log("estas en el rango de arriba");

                              loading = false;

                              let data =
                                 (await cargar_listado_chat_contactos_by_last_id_api(
                                    URL_BASE,
                                    numero_contacto_seleccionado,
                                    //FROM_GLOBAL,//antes estaba asi en el backend lo quite
                                    //PHONE_NUMBER_ID_GLOBAL,//antes estaba asi en el backend lo quite
                                    id_chat_mensajes,
                                    TIPO_DE_PLATAFORMA,
                                    TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID,
                                 )) || {
                                    data: [],
                                    cargado: false,
                                 };

                              let arreglo_nuevo = data["data"];

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

                              // Obtener los IDs de arrayB en un Set para búsqueda rápida
                              let coincidenciasIds = new Set(
                                 chat_mensajes.map((item) => item.id),
                              );

                              // Filtrar los elementos en arrayA que no están en arrayB
                              let arraySinCoincidencias = arreglo_nuevo.filter(
                                 (item) => !coincidenciasIds.has(item.id),
                              );

                              //console.log(arraySinCoincidencias);

                              if (arraySinCoincidencias.length != 0) {
                                 //console.log("El ultimo id");
                                 id_chat_mensajes =
                                    arraySinCoincidencias[0]["id"];
                                 //console.log(id_chat_mensajes);

                                 cargar_mensajes_numeros_plantillas(
                                    arraySinCoincidencias,
                                 );

                                 chat_mensajes.push(...arraySinCoincidencias);

                                 //una ves cargue la informacion lo movemos en la ultima ves donde quedo
                                 var targetId = wam_id_chat_mensajes;

                                 var $targetDiv = $(
                                    '.cuerpo_mensaje div[data-wam-id="' +
                                       targetId +
                                       '"]',
                                 );

                                 if ($targetDiv.length) {
                                    $targetDiv[0].scrollIntoView({
                                       behavior: "smooth",
                                       block: "start",
                                    });
                                 }
                                 wam_id_chat_mensajes =
                                    arraySinCoincidencias[0]["wam_id"];
                                 //loading = data["cargado"];
                              }
                           }
                           // Perform your action here
                        } else {
                           loading = true;
                        }
                     });
                  }
               });

               //
            });
         }

         //estas 2 son eventos para dar click en el boton de aplicar staff o custumer a un chat
         $(".btn_aplicar_custumers_staff").click(function () {
            let custumers_id = $(".select_custumers").val();

            if (isEmpty(custumers_id) == true) {
               Swal.fire("¡Select a customers!");

               return;
            }

            aplicar_un_custumers_api(
               id_contacto_seleccionado,
               custumers_id,
            ).then((valor) => {
               //console.log(valor.type);

               if (valor.type == "success") {
                  let {
                     id,
                     to,
                     custumer_id,
                     created_at,
                     nombre,
                     email_custumers,
                     phone_custumers,
                     company_custumers,
                     address_custumers,
                     fullname_staff,
                     username_staff,
                     user_type_staff,
                     phonenumber_staff,
                     db,
                  } = valor.data;

                  let modificar_contacto = lista_contactos.find(
                     (data) => data.id == id,
                  );

                  let data_customer = listado_custumers.find(
                     (data) => data.id == custumer_id,
                  );

                  var div = $(
                     '.mi-bandeja-mensajes-contactos a[data-id_contacto="' +
                        id +
                        '"]',
                  );

                  // Si el elemento <a> existe
                  if (div.length) {
                     modificar_contacto.custumer_id = custumers_id;

                     modificar_contacto.nombre = nombre;
                     modificar_contacto.email_custumers = email_custumers;
                     modificar_contacto.phone_custumers = phone_custumers;
                     modificar_contacto.company_custumers = company_custumers;
                     modificar_contacto.address_custumers = address_custumers;
                     /*
                  modificar_contacto.staff_id = staff_id;
                  modificar_contacto.fullname_staff = data_staff["username"];
                  modificar_contacto.username_staff = data_staff["fullname"];
                  modificar_contacto.phonenumber = data_staff["phonenumber"];
                  modificar_contacto.user_type_staff = data_staff["user_type"]; */
                     //console.log(modificar_contacto);

                     // Seleccionamos el span dentro de este <a>
                     let contacto_nombre_contacto = div.find(
                        ".contacto_nombre_contacto",
                     );

                     contacto_nombre_contacto.text(nombre);
                  }
               }
            });

            //console.log("staff_id: ", staff_id);
            //console.log("custumers_id: ", custumers_id);
            //console.log("id_contacto_seleccionado: ", id_contacto_seleccionado);
         });

         //customers
         $(".select_custumers").on("change", async function (e) {
            var selectedValue = $(this).val();

            if (isEmpty(selectedValue)) {
               return;
            }

 
            $(".custumers_div").html(
               descripcion_seleccion_custumer_plantilla(
                  listado_custumers.find((data) => data.id == selectedValue),
               ),
            );
         });

         $("#btn_new_contacto").click(async function () {
          
            if (TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID == null) {
               Swal.fire("Select a configuration");
               return;
            }

             
            $("#numero_telefono").val("");
            $("#addPhone").modal("show");
             
            //modal_elejir_contacto();
         });

         //esta sera para agregar contactos nuevos
         $("#submit_addPhone").click(function (e) {

            e.preventDefault();
            //$('#ibox_form').block({ message:block_msg });

            let telefono = $("#numero_telefono").val();
 
            if (isEmpty(telefono) == true) {
               Swal.fire("The phone is empty and is required");
               return;
            }

            let phone = telefono.replace(/\D/g, "");


            let informacion = {
               phone: phone,
               configuracion_whatsapp_sms_id: TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID,
               staff_id: ID_USER,
            };

            //console.log(informacion);
            //console.log(JSON.stringify(informacion));
 
            //return;

            $("#submit_addPhone").prop("disabled", true); // Deshabilitar el botón

            // Realizar la solicitud POST
            $.ajax({
               type: "POST",
               url: URL_BASE + "social/agregar-telefono-contacto-chat",
               data: JSON.stringify(informacion), // Convertir datos a formato JSON
               contentType: "application/json", // Tipo de contenido JSON
               success: function (response) {
                  //console.log("Respuesta del servidor:", response);
                  // Hacer algo con la respuesta del servidor

                  $("#submit_addPhone").prop("disabled", false); // Habilitar el botón

                  //console.log(response);

                  try {
                     let info = JSON.parse(response);

                     if (info.type == "success") {

                        let {
                           id,
                           number,
                           custumer_id,
                           staff_id,
                           created_at,
                           nombre,
                           email_custumers,
                           phone_custumers,
                           company_custumers,
                           address_custumers,
                           fullname_staff,
                           username_staff,
                           user_type_staff,
                           phonenumber,
                           sys_users_config_whatsapp_other_id
                        } = info.contactos;

                        Swal.fire({
                           title: "Contact added!",
                           text: "The contact has been added successfully!",
                           icon: "success"
                        });

                        let add_contacto_desconocido = {
                                 id: info.chat_number_id, 
                                 nombre: nombre, 
                                 number: number,  
                                 config_whatsapp_other_id:
                                    TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID,
                                 custumer_id: custumer_id,
                                 staff_id: staff_id,
                                 created_at: created_at,  
                                 mensajes_no_leidos: 0,
                                 email_custumers:email_custumers,
                                 phone_custumers: phone_custumers,
                                 company_custumers: company_custumers,
                                 address_custumers: address_custumers,
                                 fullname_staff: fullname_staff,
                                 username_staff: username_staff,
                                 user_type_staff:user_type_staff,
                                 phonenumber: phonenumber,
                              };

                              //console.log(add_contacto_desconocido);

                              lista_contactos.push(add_contacto_desconocido);

                              $(".mi-bandeja-mensajes-contactos").prepend(
                                 contactos(add_contacto_desconocido),
                              );

                              //puse el dar click en una funcion se repetira el codigo
                              click_contactos();

                              //console.log(lista_contactos);

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

                     } else if (info.type == "error") {
                        Swal.fire({
                           icon: "error",
                           title: "Oops...",
                           text: info.message,
                        });
                     }
                  } catch (error) {
                     Swal.fire({
                        icon: "error",
                        title: "Oops...",
                        text: error,
                     });
                  }
               },
               error: function (xhr, status, error) {
                  console.error("Error en la solicitud:", error);
                  // Manejar errores aquí
                  Swal.fire({
                     icon: "error",
                     title: "Oops...",
                     text: error,
                  });
               },
            });

             
         });

         function funcion_modal_abrir_contacto() {
           
            $("#abrirModalAgregarContacto").on("click", function () {
               //console.log("click");

               //console.log(NOMBRE_CONTACTO_SELECCIONADO);

               if(NOMBRE_CONTACTO_SELECCIONADO != "Desconocido")
               {
                  Swal.fire("Active only for Unknown contacts");
                  return;
               }

                $("#account").val("");
               $("#display_name").val("");
            
             $("#address").val("");
             $("#city").val("");
             $("#email").val("");
             $("#phone").val("");
             //$("#currency").val("");
             
             $("#username").val("");
             $("#state").val("");
             $("#zip").val("");

                $("#phone").val(numero_contacto_seleccionado);
               $("#addContacto").modal("show");
            });

            $("#marcarChatLeido").on("click", function () {

                 
                       

               //console.log("click");

               //console.log(NOMBRE_CONTACTO_SELECCIONADO);

               //numero_contacto_seleccionado = numeroContacto;
               //id_contacto_seleccionado = idContacto;

               let data = {
                  numero_contacto : numero_contacto_seleccionado,
                  id_contacto : id_contacto_seleccionado,

                  configuracion_whatsapp_sms_id:
                     TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID,
               }

               console.log(JSON.stringify(data));

               $.ajax({
               type: "POST",
               url: URL_BASE + "social/marcar-chat-leido",
               data: JSON.stringify(data), // Convertir datos a formato JSON
               contentType: "application/json", // Tipo de contenido JSON
               success: function (response) {
                     //console.log("Respuesta del servidor:", response);
                     // Hacer algo con la respuesta del servidor

                     console.log(response);

                     try {
                        let info = JSON.parse(response);

                        if (info.type == "success") {
                     
                           Swal.fire({
                              title: "Marked conversation!",
                              text: "¡Conversation marked as read successfully!",
                              icon: "success"
                           });
                           
                           cambiar_badge(
                                 numero_contacto_seleccionado,
                                 "0",
                              );
                           
                        } else if (info.type == "error") {

                           Swal.fire({
                              icon: "error",
                              title: "Oops...",
                              text: info.message,
                           });
                        }

                     } catch (error) {
                        Swal.fire({
                           icon: "error",
                           title: "Oops...",
                           text: error,
                        });
                     }
                  },
                  error: function (xhr, status, error) {
                     console.error("Error en la solicitud:", error);
                     // Manejar errores aquí
                     Swal.fire({
                        icon: "error",
                        title: "Oops...",
                        text: error,
                     });
                  },
               });

              
            });
         }

         $("#submit_addNewContact").click(function (e) {

 

            e.preventDefault();
            //$('#ibox_form').block({ message:block_msg });

               /* account
               display_name
               cid // opcional
               business_number
               country
               address
               city
               email
               phone
               currency
               owner_id
               username
               state
               zip */

            let account = $("#account").val();
            let display_name = $("#display_name").val();
            let country = $("#country").val();
            let address = $("#address").val();
            let city = $("#city").val();
            let email = $("#email").val();
            let phone = $("#phone").val();
            let currency = $("#currency").val();
            let owner_id = $("#owner_id").val();
            let username = $("#username").val();
            let state = $("#state").val();
            let zip = $("#zip").val();

            if (isEmpty(account)) {
               Swal.fire("The Full Name field is required.");
               return false;
            }

            if (isEmpty(display_name)) {
               Swal.fire("The Display Name field is required.");
               return false;
            }

            if (isEmpty(country)) {
               Swal.fire("The Country field is required.");
               return false;
            }

            if (isEmpty(address)) {
               Swal.fire("The Address field is required.");
               return false;
            }

            if (isEmpty(city)) {
               Swal.fire("The City field is required.");
               return false;
            }

            if (isEmpty(email)) {
               Swal.fire("The Email field is required.");
               return false;
            }


            if (isEmpty(currency)) {
               Swal.fire("The Currency field is required.");
               return false;
            }

            if (isEmpty(owner_id)) {
               Swal.fire("The Owner ID field is required.");
               return false;
            }

            if (isEmpty(username)) {
               Swal.fire("The Username field is required.");
               return false;
            }

            if (isEmpty(state)) {
               Swal.fire("The State field is required.");
               return false;
            }

            if (isEmpty(zip)) {
               Swal.fire("The ZIP field is required.");
               return false;
            }

            if (validateEmail(email) == false) {
               Swal.fire("The Email field is invalid.");
               return false;
            }

            let informacion = {
               account: account,
               display_name: display_name,
               country: country,
               address: address,
               city: city,
               email: email,
               currency: currency,
               owner_id: owner_id,
               username: username,
               state: state,
               zip: zip,
               numero_contacto: numero_contacto_seleccionado,
               tipo_configuracion_ws_sms_id: TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID,
               staff_id: ID_USER,
               id_contacto_seleccionado:id_contacto_seleccionado
            };

            //console.log(informacion);
            //console.log(JSON.stringify(informacion));
            //console.log("lista_contactos original");
            //console.log(lista_contactos);

            //return;

            $("#submit_addNewContact").prop("disabled", true); // Deshabilitar el botón

            // Realizar la solicitud POST
            $.ajax({
               type: "POST",
               url: URL_BASE + "social/agregar-custumers-contacto-chat",
               data: JSON.stringify(informacion), // Convertir datos a formato JSON
               contentType: "application/json", // Tipo de contenido JSON
               success: function (response) {
                  //console.log("Respuesta del servidor:", response);
                  // Hacer algo con la respuesta del servidor

                  $("#submit_addNewContact").prop("disabled", false); // Habilitar el botón

                  //console.log(response);

                  try {
                     let info = JSON.parse(response);

                     if (info.type == "success") {

                        let {
                           id,
                           number,
                           custumer_id,
                           staff_id,
                           created_at,
                           nombre,
                           email_custumers,
                           phone_custumers,
                           company_custumers,
                           address_custumers,
                           fullname_staff,
                           username_staff,
                           user_type_staff,
                           phonenumber,
                           sys_users_config_whatsapp_other_id
                        } = info.contactos;


                        Swal.fire({
                           title: "Contact added!",
                           text: "The contact has been added successfully!",
                           icon: "success"
                        });

                        let modificar = lista_contactos.find(
                              (elemento) =>
                                 elemento.id ==
                                 id_contacto_seleccionado,
                        );

                        modificar.custumer_id = custumer_id;
                        modificar.staff_id = staff_id;
                        modificar.nombre = nombre;
                        modificar.email_custumers = email_custumers;
                        modificar.phone_custumers = phone_custumers;
                        modificar.company_custumers = company_custumers;
                        modificar.address_custumers = address_custumers;
                        modificar.fullname_staff = fullname_staff;
                        modificar.username_staff = username_staff;
                        modificar.user_type_staff = user_type_staff;
                        modificar.phonenumber = phonenumber;
                        modificar.sys_users_config_whatsapp_other_id = sys_users_config_whatsapp_other_id;
                       //modificar.config_whatsapp_other_id = config_whatsapp_other_id;

                        //console.log("lista_contactos modificado");
                        //console.log(lista_contactos);

                        var div = $(
                           '.mi-bandeja-mensajes-contactos a[data-id_contacto="' +
                              id_contacto_seleccionado +
                              '"]',
                        );

                        // Si el elemento <a> existe
                        if (div.length) {
                           // Seleccionamos el span dentro de este <a>
                           let contacto_nombre_contacto = div.find(
                              ".contacto_nombre_contacto",
                           );

                           contacto_nombre_contacto.text(nombre);
                           contacto_nombre_contacto.attr('title', nombre);


                           let contacto_fullname_staff = div.find(
                              ".contacto_fullname_staff ",
                           );

                           contacto_fullname_staff.text(fullname_staff);
                           contacto_fullname_staff.attr('title', fullname_staff);


                           // Eliminar la clase 'staff-sin-asignar' y agregar la clase 'ejemplo'
                           contacto_fullname_staff
                              .removeClass("staff-sin-asignar")
                              .addClass("staff-asignado-a ");
                        }

                        NOMBRE_CONTACTO_SELECCIONADO = nombre;

                        $(".cabecera_perfil_contacto").html(
                           cabecera_contacto_seleccionado(nombre),
                        );

                        funcion_modal_abrir_contacto();

                        //esta funcion me permite abrir el menu de opciones para que seleccione un staff y cliente al chat
                        setting_offcanvas();

                        /* {
                           "id": 11793,
                           "account": "Edilberto Martinez Text",
                           "email": "edilberto@hispanosdeexitollc.net",
                           "phone": "+50432240794",
                           "company": "",
                           "address": "9107 Cascade Creek Ln"
                        } */

                        //listado staff
                        //var listado_custumers =
                        //   (await cargar_listado_custumers_api(URL_BASE)) || [];

                        //console.log("staff");
                        //console.log(listado_staff);

                        //console.log("customers");
                        //console.log(listado_custumers);

                        listado_custumers.push({
                           id: custumer_id,
                           account: nombre,
                           email: email_custumers,
                           phone: phone_custumers,
                           company: company_custumers,
                           address: address_custumers,
                        });

                        let html_listado_custumers =
                           cargar_select_custumers(listado_custumers);

                        $(".select_custumers").html(html_listado_custumers);

                        $(".tbody_custumers").html(tabla_customers(listado_custumers));
                        //add_customers_chat();

                        //cliente
                        let data_customer = listado_custumers.find(
                           (data) => data.id == custumer_id,
                        );

                        if (data_customer) {
                           $(".custumers_div").html(
                              descripcion_seleccion_custumer_plantilla(data_customer),
                           );

                           $(".select_custumers")
                              .val(custumer_id)
                              .trigger("change");
                        }

                        //staff
                        let data_staff = listado_staff.find(
                           (data) => data.id == staff_id,
                        );

                        if (data_staff) {
                           $(".staff_div").html(
                              descripcion_seleccion_staff_plantilla(data_staff),
                           );

                           $(".select_staff")
                              .val(staff_id)
                              .trigger("change");
                        }

 

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


                     } else if (info.type == "error") {
                        Swal.fire({
                           icon: "error",
                           title: "Oops...",
                           text: info.message,
                        });
                     }
                  } catch (error) {
                     Swal.fire({
                        icon: "error",
                        title: "Oops...",
                        text: error,
                     });
                  }
               },
               error: function (xhr, status, error) {
                  console.error("Error en la solicitud:", error);
                  // Manejar errores aquí
                  Swal.fire({
                     icon: "error",
                     title: "Oops...",
                     text: error,
                  });
               },
            });

             
         });

         function isEmpty(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;
            // Verifica si el valor es nulo, indefinido, o una cadena vacía (después de eliminar espacios)
            //return value === null || value === undefined || value.trim() === "";
         }


         function validateEmail(email) {
            // Expresión regular para validar un formato de correo electrónico
            var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
            
            if (emailPattern.test(email)) {
               return true;  // Es un correo válido
            } else {
               return false;  // No es un correo válido
            }
         }

         //Funciones para audio
         var pausado_accion = false;

         //FUNCION PARA PAUSAR O ACTIVAR AUDIO
         $(".btn_microfono_activo_inactivo").click(function () {
            pausado_accion = !pausado_accion;
            if (pausado_accion == false) {
               resume();
               $(".btn_microfono_activo_inactivo").html(
                  '<i class="fa fa-microphone" title="continue"></i>',
               );
            } else {
               pause();
               $(".btn_microfono_activo_inactivo").html(
                  '<i class="fa fa-microphone-slash" title="pause"></i>',
               );
            }
         });

         //aqui es donde consumimos el api para enviar el voices
         $("#enviar_mensaje_audio").click(function () {
            $(".btn_footer_enviar").prop("disabled", true);
            $(".btn_microfono_activo_inactivo").prop("disabled", true);
            $(".btn_eliminar_audio").prop("disabled", true);

            $(".btn_footer_enviar").addClass("boton_send");

            save().then((data) => {
               if (data.error == "error") {
                  $(".msb-footer-audio").hide();
                  $(".msb-footer").show();

                  $(".btn_footer_enviar").prop("disabled", false);
                  $(".btn_microfono_activo_inactivo").prop("disabled", false);
                  $(".btn_eliminar_audio").prop("disabled", false);

                  $(".btn_footer_enviar").removeClass("boton_send");
                  Swal.fire({
                     icon: "error",
                     title: "Oops...",
                     text: data.mensaje,
                  });
                  return;
               }

               let datos = {
                  mensaje: null,
                  archivo: data.data,
                  tipo_usuario: "empleado", //admin es default
                  staff_id: STAFF_ID_GLOBAL, //si es admin no se valida este campo
                  to: numero_contacto_seleccionado,
                  from: FROM_GLOBAL,
                  phone_number_id: PHONE_NUMBER_ID_GLOBAL,
                  version_api_whatapp: VERSION_WHATSAPP_GLOBAL,
                  token_acceso: TOKEN_WHATSAPP_GLOBAL,
                  configuracion_whatsapp_sms_id:
                     TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID,
               };

               // Realizar la solicitud POST
               $.ajax({
                  type: "POST",
                  url: URL_BASE + "social/enviar-mensaje-voices",
                  data: JSON.stringify(datos), // Convertir datos a formato JSON
                  contentType: "application/json", // Tipo de contenido JSON
                  success: function (response) {
                     //console.log("Respuesta del servidor:", response);
                     // Hacer algo con la respuesta del servidor

                     $(".btn_footer_enviar").prop("disabled", false);
                     $(".btn_microfono_activo_inactivo").prop(
                        "disabled",
                        false,
                     );
                     $(".btn_eliminar_audio").prop("disabled", false);

                     $(".btn_footer_enviar").removeClass("boton_send");

                     $(".msb-footer-audio").hide();
                     $(".msb-footer").show();

                     try {
                        let info = JSON.parse(response);

                        if (info.type == "success") {
                           let sumar_msj_sin_responder = lista_contactos.find(
                              (elemento) =>
                                 elemento.number ==
                                 numero_contacto_seleccionado,
                           );

                           if (sumar_msj_sin_responder) {
                              sumar_msj_sin_responder.mensajes_no_leidos +=
                                 -info.mensajes_no_leidos;
                              let mnl = sumar_msj_sin_responder.mensajes_no_leidos <= 0 ? 0 : sumar_msj_sin_responder.mensajes_no_leidos;
                              cambiar_badge(
                                 numero_contacto_seleccionado,
                                 mnl,
                              );
                           }
                           //console.log(info.wam_id);

                           const now = new Date();
                           const formattedDate = formatDateTime(now);

                           let informacion = {
                              id: "100",
                              tipo_producto: "whatsapp",
                              error_codigo: "",
                              error_mensaje: "",
                              status: "wait",
                              wam_id: info.wam_id,
                              phone_number_id: PHONE_NUMBER_ID_GLOBAL,
                              from: FROM_GLOBAL,
                              to: numero_contacto_seleccionado,
                              mensaje: $("#mi-mensaje-texto").val(),
                              url: info.url,
                              tipo_mensaje: "audio",
                              db: "no ocupo",
                              esContacto: "0",
                              fecha_creacion: formattedDate,
                              filename: "",
                           };

                           chat_mensajes.push(informacion);

                           $(".cuerpo_mensaje").append(
                              mensaje_audios_whatsapp_usuarios_cargar_socket(
                                 "whatsapp",
                                 "",
                                 "",
                                 "wait",
                                 info.wam_id,
                                 PHONE_NUMBER_ID_GLOBAL,
                                 FROM_GLOBAL,
                                 numero_contacto_seleccionado,
                                 null,
                                 info.url, // url
                                 "audio",
                                 "no ocupo el db",
                                 "0",
                                 formattedDate,
                                 "",
                              ),
                           );

                           sleep(1000).then(() => {
                              var div = $(".cuerpo_mensaje").find(
                                 '[data-wam-id="' + info.wam_id + '"]',
                              );

                              if (div.length > 0) {
                                 var audioElement = div.find("audio")[0];

                                 if (audioElement) {
                                    let source =
                                       document.createElement("source");
                                    source.src = info.url; // Cambia esta URL según sea necesario
                                    audioElement.appendChild(source);
                                    audioElement.controls = true;

                                    scroll_abajo();
                                 }
                              }
                           });

                           $("#mi-mensaje-texto").focus();
                           $("#mi-mensaje-texto").val("");

                           scroll_abajo();

                           if(info.mensajes_no_leidos_pendiente <= 0)
                           {
                              //$(".signo_existe_mensaje_ws").fadeOut();
                           }

                        } else if (info.type == "error") {
                           Swal.fire({
                              icon: "error",
                              title: "Oops...",
                              text: info.message,
                           });
                        }
                     } catch (error) {
                        Swal.fire({
                           icon: "error",
                           title: "Oops...",
                           text: error,
                        });
                     }
                  },
                  error: function (xhr, status, error) {
                     console.error("Error en la solicitud:", error);
                     // Manejar errores aquí
                     $(".msb-footer-audio").hide();
                     $(".msb-footer").show();

                     $(".btn_footer_enviar").prop("disabled", false);
                     $(".btn_microfono_activo_inactivo").prop(
                        "disabled",
                        false,
                     );
                     $(".btn_eliminar_audio").prop("disabled", false);

                     $(".btn_footer_enviar").removeClass("boton_send");
                  },
               });
            });
         });

         //FUNCION PARA ELIMINAR LA REPRODUCCION
         $(".btn_eliminar_audio").click(function () {
            stop();
            //console.log("btn_eliminar_audio");
            $(".msb-footer-audio").hide();
            $(".msb-footer").show();
         });

         //FUNCION PARA CUANDO LE DA EN EL MICROFONO COMIENZE A GRABAR
         $(".btn_microfono").click(function () {
            let seleccion_medio_mensaje = $("#seleccionar_medio_mensaje").val();

            if (seleccion_medio_mensaje == "sms") {
               Swal.fire("SMS channel type cannot send audios");

               return;
            }

            $(".btn_footer_enviar").removeClass("boton_send");

            $(".btn_footer_enviar").prop("disabled", false);
            $(".btn_microfono_activo_inactivo").prop("disabled", false);
            $(".btn_eliminar_audio").prop("disabled", false);

            start();
            $(".msb-footer-audio").show();
            $(".msb-footer").hide();
         });

         //CUANDO SELECCIONAMOS POR DONDE QUEREMOS ENVIAR MENSAJE SI ES SMS QUE SE BLOQUEE
         $("#seleccionar_medio_mensaje").on("change", function () {
            let selectedValue = $(this).val();
            if (selectedValue == null || selectedValue == undefined) {
               return;
            }

            if (selectedValue == "sms") {
               $(".btn_microfono").css("color", "#6a6b71");
               $(".btn_microfono").prop("disabled", true);
               $(".btn_microfono").html(
                  '<i class="fa fa-microphone-slash"></i>',
               );
            } else {
               $(".btn_microfono").css("color", "#6b709f");
               $(".btn_microfono").prop("disabled", false);
               $(".btn_microfono").html('<i class="fa fa-microphone"></i>');
            }
         });

         //FUNCION PARA CAMBIAR DE CONTACTOS QUE PUEDEN SER DE WHATSAPP-SMS / WHATSAPP / SMS
         $(".canal_mensajeria").click(async function () {
            let canal = $(this).data("canal-mensajeria");

            TIPO_DE_PLATAFORMA = canal;
            //console.log(TIPO_DE_PLATAFORMA);

            lista_contactos =
               (await cargar_listado_contactos_api(
                  URL_BASE,
                  STAFF_ID_GLOBAL,
                  TIPO_DE_PLATAFORMA,
                  TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID,
               )) || [];

            var lista_contactos_html = "";
            lista_contactos.forEach((element) => {
               lista_contactos_html += contactos(element);
            });

            $(".mi-bandeja-mensajes-contactos").html(lista_contactos_html);

            //puse el dar click en una funcion se repetira el codigo
            click_contactos();

            numero_contacto_seleccionado = null;
            id_contacto_seleccionado = null;

            loading = false;
            chat_mensajes = [];

            $(".cabecera_perfil_contacto").html(
               quitar_cabecera_contacto_seleccionado(),
            );

            $(".cuerpo_mensaje").html("");

            $(".cuerpo_sin_mensajes").css("display", "");
            $(".cuerpo_mensaje").css("display", "none"); //habilita las conversaciones

            $(".msb-footer-sin-enviar-mensajes").css("display", "");
            $(".msb-footer").css("display", "none");

            //cargando mensajes de chat
            $(".cuerpo_cargando_mensajes").css("display", "none");

            if (TIPO_DE_PLATAFORMA == "whatsapp-sms") {
               $("#seleccionar_medio_mensaje").prop("disabled", false);
               $("#seleccionar_medio_mensaje").val("whatsapp");

               $(".btn_microfono").css("color", "#6b709f");
               $(".btn_microfono").prop("disabled", false);
               $(".btn_microfono").html('<i class="fa fa-microphone"></i>');
            } else {
               $("#seleccionar_medio_mensaje").prop("disabled", true);
               $("#seleccionar_medio_mensaje").val(TIPO_DE_PLATAFORMA);

               if (TIPO_DE_PLATAFORMA == "sms") {
                  $(".btn_microfono").css("color", "#6a6b71");
                  $(".btn_microfono").prop("disabled", true);
                  $(".btn_microfono").html(
                     '<i class="fa fa-microphone-slash"></i>',
                  );
               } else {
                  $(".btn_microfono").css("color", "#6b709f");
                  $(".btn_microfono").prop("disabled", false);
                  $(".btn_microfono").html('<i class="fa fa-microphone"></i>');
               }
            }

            $("#cambiar_titulo_plataforma").text($(this).text());
         });

         $("#abrir_plantillas").click(async function () {

            let seleccion_medio_mensaje = $(
                  "#seleccionar_medio_mensaje",
               ).val();

            if (seleccion_medio_mensaje != "whatsapp") {
                  Swal.fire("Only enabled for WhatsApp");

                  return;
               }

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

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

            let info = await cargar_plantillas_whatsapp(
               URL_BASE,
               WHATSAPP_BUSINESS_ACCOUNT_IDENTIFIER,
               10,
               VERSION_WHATSAPP_GLOBAL,
               TOKEN_WHATSAPP_GLOBAL,
            );

            if (info.type == "error") {
               return;
            }

            listado_plantillas = info.data || [];

            var html_tabla_plantilla = "";

            if (listado_plantillas.length != 0) {
               $(".tbody_plantillas").html(
                  tener_mensajes_de_plantillas(listado_plantillas),
               );

               plantilla_seleccionada(info.namcespaces);
            }

            $("#myModal").modal("show");

            //console.log(listado_plantillas);
         });

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

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

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

               $(".tbody_plantillas").html(
                  tener_mensajes_de_plantillas(informacion_filtrada),
               );
               plantilla_seleccionada();
            }
         });

         $(".retroceder_listado_plantilla").click(async function () {
            /* pantalla_modal //pantalla_modal
                                  informacion_tabla // tabla de plantillas
                                  configuracion_plantilla //configurar plantilla */

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

         $(".btn_enviar_plantilla").click(async function () {
            //var dataId = $(this).data("id");
            var namcespaces = $(this).data("namcespaces");

            //console.log(ID_PLANTILLA_SELECCIONADO);
            //console.log("namcespaces");
            //console.log(namcespaces);

            let info = listado_plantillas.find(
               (data) => data.id == ID_PLANTILLA_SELECCIONADO,
            );

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

                  return;
               }

               var enviar_informacion = {
                  tipo_usuario: "empleado", //admin es default
                  staff_id: STAFF_ID_GLOBAL,
                  to: numero_contacto_seleccionado,
                  from: FROM_GLOBAL,
                  phone_number_id: PHONE_NUMBER_ID_GLOBAL,
                  version_api_whatapp: VERSION_WHATSAPP_GLOBAL,
                  token_acceso: TOKEN_WHATSAPP_GLOBAL,
                  namespaces: namcespaces,
                  name: info.name,
                  language: info.language,
                  components: [],
                  plantilla_original: info,
                  configuracion_whatsapp_sms_id:
                     TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID,
               };

               const components = info.components || [];

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

               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;

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

                                 contenidoHeader = value;
                              },
                           );
                        }
                     }

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

                     if (formato_minuscula == "location") {
                        $("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 + "}}";

                           contenidoBody.push({
                              buscar: "{{" + dataId + "}}",
                              texto: value || "",
                           });
                        },
                     );
                  }

                  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 (existeHeader == true) {
                  //console.log("existe header");
                  //console.log(contenidoHeader);
                  if (formatoHeader == "text") {
                     if (isEmpty(contenidoHeader) == 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;
                  }

                  arrHeader = {
                     type: "HEADER",
                     format: formatoHeader,
                     extension: INFORMACION_PLANTILLA_HEADER_EXTENSION,
                     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;
                  }

                  let bodyVacio = contenidoBody.find(
                     (data) => data.texto.trim() === "",
                  );

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

                     return;
                  }

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

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

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

               $.ajax({
                  type: "POST",
                  url: URL_BASE + "social/enviar-mensaje-plantillas",
                  data: JSON.stringify(enviar_informacion), // Convertir datos a formato JSON
                  contentType: "application/json", // Tipo de contenido JSON
                  success: function (response) {
                     //console.log("Respuesta del servidor:", response);
                     // Hacer algo con la respuesta del servidor

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

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

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

                     try {
                        let info = JSON.parse(response);

                        if (info.type == "success") {
                           INFORMACION_PLANTILLA_HEADER = ""; //esto es para tener base64 cuando es archivo

                           let formato_headers = info.formato_headers;

                           let template_original = info.template_original;
                           let template_data = info.template_data;

                           $("#mi-mensaje-texto").focus();

                           let sumar_msj_sin_responder = lista_contactos.find(
                              (elemento) =>
                                 elemento.number ==
                                 numero_contacto_seleccionado,
                           );

                           if (sumar_msj_sin_responder) {
                              sumar_msj_sin_responder.mensajes_no_leidos +=
                                 -info.mensajes_no_leidos;
                              
                              let mnl = sumar_msj_sin_responder.mensajes_no_leidos <= 0 ? 0 : sumar_msj_sin_responder.mensajes_no_leidos;
                              cambiar_badge(
                                 numero_contacto_seleccionado,
                                 mnl,
                              );
                           }

                           const now = new Date();
                           const formattedDate = formatDateTime(now);

                           //seleccionar_archivo_plantilla_headers
                           if (
                              formato_headers == "text" ||
                              formato_headers == "location" ||
                              formato_headers == ""
                           ) {
                              let informacion = {
                                 id: "unico",
                                 tipo_producto: "whatsapp",
                                 error_codigo: "",
                                 error_mensaje: "",
                                 status: "wait",
                                 wam_id: info.wam_id,
                                 phone_number_id: PHONE_NUMBER_ID_GLOBAL,
                                 from: FROM_GLOBAL,
                                 to: numero_contacto_seleccionado,
                                 mensaje: $("#mi-mensaje-texto").val(),
                                 url: "",
                                 tipo_mensaje: "template",
                                 db: "no ocupo",
                                 esContacto: "0",
                                 fecha_creacion: formattedDate,
                              };

                              chat_mensajes.push(informacion);

                              $(".cuerpo_mensaje").append(
                                 mensajes_templates_whatsapp_usuario(
                                    "unico",
                                    "whatsapp",
                                    info.mensaje_error_code, //
                                    info.mensaje_error_mensaje, //
                                    "wait", //
                                    info.wam_id, //
                                    PHONE_NUMBER_ID_GLOBAL,
                                    FROM_GLOBAL,
                                    numero_contacto_seleccionado,
                                    "",
                                    "",
                                    "",
                                    template_original, //
                                    template_data, //
                                    "template",
                                    "no lo ocupo",
                                    "0",
                                    formattedDate, //
                                    "",
                                    "",

                                    //info de sms
                                    "",
                                 ),
                              );
                           } else {
                              let informacion = {
                                 id: "unico",
                                 tipo_producto: "whatsapp",
                                 error_codigo: "",
                                 error_mensaje: "",
                                 status: "wait",
                                 wam_id: info.wam_id,
                                 phone_number_id: PHONE_NUMBER_ID_GLOBAL,
                                 from: FROM_GLOBAL,
                                 to: numero_contacto_seleccionado,
                                 mensaje: $("#mi-mensaje-texto").val(),
                                 url: "",
                                 tipo_mensaje: "template",
                                 db: "no ocupo",
                                 esContacto: "0",
                                 fecha_creacion: formattedDate,
                              };

                              chat_mensajes.push(informacion);

                              if (
                                 formato_headers == "image" ||
                                 formato_headers == "document"
                              ) {
                                 $(".cuerpo_mensaje").append(
                                    mensajes_templates_whatsapp_usuario_cargar_socket(
                                       "unico",
                                       "whatsapp",
                                       info.mensaje_error_code, //
                                       info.mensaje_error_mensaje, //
                                       "wait", //
                                       info.wam_id, //
                                       PHONE_NUMBER_ID_GLOBAL,
                                       FROM_GLOBAL,
                                       numero_contacto_seleccionado,
                                       "",
                                       info.url,
                                       "",
                                       template_original, //
                                       template_data, //
                                       "template",
                                       "no lo ocupo",
                                       "0",
                                       formattedDate, //
                                       "",
                                       "",

                                       //info de sms
                                       "",
                                    ),
                                 );
                              }

                              if (formato_headers == "video") {
                                 $(".cuerpo_mensaje").append(
                                    mensajes_templates_whatsapp_usuario_cargar_socket(
                                       "unico",
                                       "whatsapp",
                                       info.mensaje_error_code, //
                                       info.mensaje_error_mensaje, //
                                       "wait", //
                                       info.wam_id, //
                                       PHONE_NUMBER_ID_GLOBAL,
                                       FROM_GLOBAL,
                                       numero_contacto_seleccionado,
                                       "",
                                       info.url,
                                       "",
                                       template_original, //
                                       template_data, //
                                       "template",
                                       "no lo ocupo",
                                       "0",
                                       formattedDate, //
                                       "",
                                       "",

                                       //info de sms
                                       "",
                                    ),
                                 );

                                 sleep(1000).then(() => {
                                    var div = $(".cuerpo_mensaje").find(
                                       '[data-wam-id="' + info.wam_id + '"]',
                                    );

                                    if (div.length > 0) {
                                       var audioElement = div.find("video")[0];

                                       if (audioElement) {
                                          // console.log("entre al elemento de audio")
                                          let source =
                                             document.createElement("source");
                                          source.src = info.url; // Cambia esta URL según sea necesario
                                          audioElement.appendChild(source);
                                          audioElement.controls = true;

                                          scroll_abajo();
                                       }
                                    }
                                 });
                              }
                           }

                           scroll_abajo();

                           if(info.mensajes_no_leidos_pendiente <= 0)
                           {
                              //$(".signo_existe_mensaje_ws").fadeOut();
                           }

                        } else if (info.type == "error") {
                           Swal.fire({
                              icon: "error",
                              title: "Oops...",
                              text: info.message,
                           });
                        }
                     } catch (error) {
                        Swal.fire({
                           icon: "error",
                           title: "Oops...",
                           text: error,
                        });
                     }

                     $("#myModal").modal("hide");
                  },
                  error: function (xhr, status, error) {
                     $(".btn_enviar_plantilla").prop("disabled", false);

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

                     $("#myModal").modal("hide");
                  },
               });
            }
         });

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

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

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

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

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

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

                              var html_input = "";

                              for (let i = 1; i <= cantidad_parametros; i++) {
                                 html_input +=
                                    "<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'>" +
                                    "</input>";
                              }

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

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

                              updateText(text);

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

                                    updateText(text);

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

                                    */
                                 },
                              );
                           }
                        }

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

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

                           for (let i = 1; i <= cantidad_parametros; i++) {
                              html_input +=
                                 "<label style='margin-top:12px;' id='texto_label_plantilla_body_" +
                                 i +
                                 "' data-id='" +
                                 i +
                                 "'>Field {{ " +
                                 i +
                                 " }}  <span style='color: red; font-size: 10px;'>* Field is required</span></label>" +
                                 "<input id='texto_input_plantilla_body_" +
                                 i +
                                 "' data-id='" +
                                 i +
                                 "' class='form-control form-control-sm color-error'>" +
                                 "</input>";
                           }

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

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

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

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

                                    */
                              },
                           );

                           //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" value="' +
                              typeButtonValue +
                              '" disabled />' +
                              '<label style="margin-top: 10px">Text Buttons</label>' +
                              '<input type="text" class="form-control form-control-sm" value="' +
                              textButtonValue +
                              '" disabled />' +
                              '<label style="margin-top: 10px">Value Buttons</label>' +
                              '<input type="text" class="form-control form-control-sm" value="' +
                              valueButtonValue +
                              '" disabled />';

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

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

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

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

                        // Inserta el contenido HTML en los divs correspondientes
                        $(".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();
                     }
                  });

                  //input_header_plantilla
               }

               /* pantalla_modal //pantalla_modal
                                  informacion_tabla // tabla de plantillas
                                  configuracion_plantilla //configurar plantilla */

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

         function updateText(prueba) {
            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, value || placeholder);
            });

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

         function updateTextBody(miTexto) {
            let updatedText = miTexto;

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

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

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

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

         function adjustHeightTexto_TextArea_Header() {
            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);
            });

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

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

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

               textarea.style.height = "auto";
               textarea.style.height = `${textarea.scrollHeight}px`;

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

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

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

         function seleccionar_archivo_plantilla_headers(
            tipo_documento,
            tipo_archivo,
         ) {
            const htmlContent =
               "<label>Open file</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>";
                     } */

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

         function plantilla_tipo_sms(data) {
            $(".btn_microfono").css("color", "#6a6b71");
            $(".btn_microfono").prop("disabled", true);
            $(".btn_microfono").html('<i class="fa fa-microphone-slash"></i>');

            var {
               tipo_producto,
               error_codigo,
               error_mensaje,
               status,
               wam_id,
               sid,
               phone_number_id,
               from,
               to,
               mensaje,
               url,
               filename,
               tipo_mensaje,
               db,
               esContacto,
               fecha_creacion,
               id_chat_number,
               staff_id,
               donde_estamos,

               nombre,
               email_custumers,
               phone_custumers,
               company_custumers,
               address_custumers,
               custumer_id,

            } = data;

            if (isEmpty(sid) == true) {
               return;
            }

            //si se ha seleccionado el numero de contacto que caigan los mensajes
            if (numero_contacto_seleccionado != to) {
               return;
            }

            if (esContacto == true) {
               if (TIPO_DE_PLATAFORMA == "whatsapp-sms") {
                  $("#seleccionar_medio_mensaje").val(tipo_producto);
               }

               //status received sumar badge: VALIDACION SUMA DE MENSAJES NO LEIDAS
               if (status == "received") {
                  let sumar_msj_sin_responder = lista_contactos.find(
                     (elemento) => elemento.number === to,
                  );

                  if (sumar_msj_sin_responder) {
                     sumar_msj_sin_responder.mensajes_no_leidos =
                        parseInt(sumar_msj_sin_responder.mensajes_no_leidos) +
                        1;

                     cambiar_badge(
                        to,
                        sumar_msj_sin_responder.mensajes_no_leidos,
                     );
                  }
               }
               //FIN DE VALIDACION PARA SUMAR MENSAJES NO LEIDOS

               if (tipo_mensaje == "text") {
                  let plantilla = mensaje_texto_sms_clientes(
                     tipo_producto,
                     sid,
                     mensaje,
                     fecha_creacion,
                  );

                  $(".cuerpo_mensaje").append(plantilla);
               }
            } else {
               //si es aqui son mensajes de nostros

               var error_title =
                  status == "failed"
                     ? "Status: " +
                       status +
                       "\n\nCodigo (" +
                       error_codigo +
                       ") "
                     : "Status: " + status;

               var div = $('.cuerpo_mensaje div[data-sid-id="' + sid + '"]');

               if (tipo_mensaje == "text") {
                  var plantilla = mensaje_texto_sms_usuarios(
                     tipo_producto,
                     error_codigo,
                     status,
                     sid,
                     mensaje,
                     fecha_creacion,
                  );

                  if (div.length == 0) {
                     // Usar el método append para agregar el HTML al div cuerpo_mensaje
                     $(".cuerpo_mensaje").append(plantilla);

                     scroll_abajo();

                     return;
                  }

                  /* let contenidoDivPalomitas = div.find(".palomitas"); // Encuentra el div con la clase mf-content dentro del div encontrado

                  contenidoDivPalomitas
                     .find(".texto")
                     .text(mensaje + " status: " + status); */

                  // Cambiar la imagen dentro del div
                  div.find(".fecha_y_palomitas .palomita_texto")
                     //.attr("src", "img/" + url_status_img)
                     //.attr("width", tamaño_palomita)
                     .attr("title", error_title);
               }
            }

            return;
         }

         function plantilla_tipo_whatsapp(data) {
            $(".btn_microfono").css("color", "#6b709f");
            $(".btn_microfono").prop("disabled", false);
            $(".btn_microfono").html('<i class="fa fa-microphone"></i>');

            var {
               tipo_producto,
               error_codigo,
               error_mensaje,
               status,
               wam_id,
               sid,
               phone_number_id,
               from,
               to,
               mensaje,
               url,
               filename,
               template_original,
               template_data,
               tipo_mensaje,
               db,
               esContacto,
               fecha_creacion,
               id_chat_number,
               staff_id,
               donde_estamos,
            } = data;

            if (isEmpty(wam_id) == true) {
               return;
            }

            //si es igual a true es por que viene de afuera, si es falso es porque usamos el api de whatapp
            if (esContacto == true) {
               if (TIPO_DE_PLATAFORMA == "whatsapp-sms") {
                  $("#seleccionar_medio_mensaje").val(tipo_producto);
               }

               //status deliveri sumar badge
               if (status == "delivered") {
                  let sumar_msj_sin_responder = lista_contactos.find(
                     (elemento) => elemento.number === to,
                  );

                  if (sumar_msj_sin_responder) {
                     sumar_msj_sin_responder.mensajes_no_leidos =
                        parseInt(sumar_msj_sin_responder.mensajes_no_leidos) +
                        1;

                     cambiar_badge(
                        to,
                        sumar_msj_sin_responder.mensajes_no_leidos,
                     );
                  }
               }

               //si se ha seleccionado el numero de contacto que caigan los mensajes
               if (numero_contacto_seleccionado != to) {
                  return;
               }

               if (tipo_mensaje == "text") {
                  let plantilla = mensaje_texto_whatsapp_clientes(
                     tipo_producto,
                     error_codigo,
                     error_mensaje,
                     status,
                     wam_id,
                     phone_number_id,
                     from,
                     to,
                     mensaje,
                     url,
                     tipo_mensaje,
                     db,
                     esContacto,
                     fecha_creacion,
                  );

                  $(".cuerpo_mensaje").append(plantilla);
               }

               if (tipo_mensaje == "image") {
                  let plantilla = mensaje_imagen_whatsapp_clientes(
                     tipo_producto,
                     error_codigo,
                     error_mensaje,
                     status,
                     wam_id,
                     phone_number_id,
                     from,
                     to,
                     mensaje,
                     url,
                     tipo_mensaje,
                     db,
                     esContacto,
                     fecha_creacion,
                  );

                  // Añadir el mensaje al cuerpo del mensaje existente
                  $(".cuerpo_mensaje").append(plantilla);

                  //cargando_imagen();

                  cargando_imagen(":last").then(() => {
                     scroll_abajo();
                  });
               }

               if (tipo_mensaje == "document") {
                  let plantilla = mensaje_documentos_whatsapp_cliente(
                     tipo_producto,
                     error_codigo,
                     error_mensaje,
                     status,
                     wam_id,
                     phone_number_id,
                     from,
                     to,
                     mensaje,
                     url,
                     tipo_mensaje,
                     db,
                     esContacto,
                     fecha_creacion,
                     filename,
                  );

                  // Añadir el mensaje al cuerpo del mensaje existente
                  $(".cuerpo_mensaje").append(plantilla);
               }

               if (tipo_mensaje == "audio") {
                  let plantilla = mensaje_audios_whatsapp_cliente_cargar_socket(
                     tipo_producto,
                     error_codigo,
                     error_mensaje,
                     status,
                     wam_id,
                     phone_number_id,
                     from,
                     to,
                     mensaje,
                     url,
                     tipo_mensaje,
                     db,
                     esContacto,
                     fecha_creacion,
                     filename,
                  );

                  // Añadir el mensaje al cuerpo del mensaje existente
                  $(".cuerpo_mensaje").append(plantilla);

                  sleep(1000).then(() => {
                     var div = $(".cuerpo_mensaje").find(
                        '[data-wam-id="' + wam_id + '"]',
                     );

                     if (div.length > 0) {
                        var audioElement = div.find("audio")[0];

                        if (audioElement) {
                           let source = document.createElement("source");
                           source.src = url; // Cambia esta URL según sea necesario
                           audioElement.appendChild(source);
                           audioElement.controls = true;
                        }
                     }
                  });
               }

               if (tipo_mensaje == "video") {
                  let plantilla = mensaje_video_whatsapp_cliente_cargar_socket(
                     tipo_producto,
                     error_codigo,
                     error_mensaje,
                     status,
                     wam_id,
                     phone_number_id,
                     from,
                     to,
                     mensaje,
                     url,
                     tipo_mensaje,
                     db,
                     esContacto,
                     fecha_creacion,
                     filename,
                  );

                  // Añadir el mensaje al cuerpo del mensaje existente
                  $(".cuerpo_mensaje").append(plantilla);

                  sleep(1000).then(() => {
                     var div = $(".cuerpo_mensaje").find(
                        '[data-wam-id="' + wam_id + '"]',
                     );

                     if (div.length > 0) {
                        var audioElement = div.find("video")[0];

                        if (audioElement) {
                           let source = document.createElement("source");
                           source.src = url; // Cambia esta URL según sea necesario
                           audioElement.appendChild(source);
                           audioElement.controls = true;
                        }
                     }
                  });
               }
            } else {
               //si es el que usa la api

               //si se ha seleccionado el numero de contacto que caigan los mensajes
               if (numero_contacto_seleccionado != to) {
                  return;
               }

               var error_title =
                  status == "failed"
                     ? "Codigo (" + error_codigo + ") " + error_mensaje
                     : "";

               let url_status_img = status + ".png";
               let tamaño_palomita = status == "read" ? "18px" : "20px";

               var div = $('.cuerpo_mensaje div[data-wam-id="' + wam_id + '"]');

               if (tipo_mensaje == "text") {
                  var plantilla = mensaje_texto_whatsapp_usuarios(
                     tipo_producto,
                     error_codigo,
                     error_mensaje,
                     status,
                     wam_id,
                     phone_number_id,
                     from,
                     to,
                     mensaje,
                     url,
                     tipo_mensaje,
                     db,
                     esContacto,
                     fecha_creacion,
                  );

                  if (div.length == 0) {
                     // Usar el método append para agregar el HTML al div cuerpo_mensaje
                     $(".cuerpo_mensaje").append(plantilla);

                     scroll_abajo();
                     return;
                  }

                  /* var contenidoDivPalomitas = div.find(".palomitas"); // Encuentra el div con la clase mf-content dentro del div encontrado

                  contenidoDivPalomitas
                     .find(".texto")
                     .text(mensaje + " status: " + status); */

                  // Cambiar la imagen dentro del div
                  div.find(".fecha_y_palomitas .palomita_texto")
                     .attr("src", PATH_IMG + url_status_img)
                     .attr("width", tamaño_palomita)
                     .attr("title", error_title);
               }

               if (tipo_mensaje == "image") {
                  var plantilla = mensaje_imagen_whatsapp_usuarios(
                     tipo_producto,
                     error_codigo,
                     error_mensaje,
                     status,
                     wam_id,
                     phone_number_id,
                     from,
                     to,
                     mensaje,
                     url,
                     tipo_mensaje,
                     db,
                     esContacto,
                     fecha_creacion,
                  );

                  if (div.length == 0) {
                     // Usar el método append para agregar el HTML al div cuerpo_mensaje
                     $(".cuerpo_mensaje").append(plantilla);

                     //cargando_imagen();
                     cargando_imagen(":last").then(() => {
                        scroll_abajo();
                     });

                     return;
                  }

                  var div = $(".cuerpo_mensaje").find(
                     '[data-wam-id="' + wam_id + '"]',
                  );

                  // Actualizar el texto y la imagen del mensaje
                  div.find(".palomitas").find(".texto").text(mensaje);

                  // Cambiar la imagen dentro del div
                  div.find(".fecha_y_palomitas .palomita_texto")
                     .attr("src", PATH_IMG + url_status_img)
                     .attr("width", tamaño_palomita)
                     .attr("title", error_title);
               }

               if (tipo_mensaje == "document") {
                  let plantilla = mensaje_documentos_whatsapp_usuarios(
                     tipo_producto,
                     error_codigo,
                     error_mensaje,
                     status,
                     wam_id,
                     phone_number_id,
                     from,
                     to,
                     mensaje,
                     url,
                     tipo_mensaje,
                     db,
                     esContacto,
                     fecha_creacion,
                     filename,
                  );

                  if (div.length == 0) {
                     // Usar el método append para agregar el HTML al div cuerpo_mensaje
                     $(".cuerpo_mensaje").append(plantilla);

                     scroll_abajo();

                     return;
                  }

                  var div = $(".cuerpo_mensaje").find(
                     '[data-wam-id="' + wam_id + '"]',
                  );

                  // Actualizar el texto y la imagen del mensaje
                  div.find(".palomitas").find(".texto").text(mensaje);

                  // Cambiar la imagen dentro del div
                  div.find(".fecha_y_palomitas .palomita_texto")
                     .attr("src", PATH_IMG + url_status_img)
                     .attr("width", tamaño_palomita)
                     .attr("title", error_title);
               }

               if (tipo_mensaje == "audio") {
                  let plantilla =
                     mensaje_audios_whatsapp_usuarios_cargar_socket(
                        tipo_producto,
                        error_codigo,
                        error_mensaje,
                        status,
                        wam_id,
                        phone_number_id,
                        from,
                        to,
                        mensaje,
                        url,
                        tipo_mensaje,
                        db,
                        esContacto,
                        fecha_creacion,
                        filename,
                     );

                  if (div.length == 0) {
                     // Usar el método append para agregar el HTML al div cuerpo_mensaje
                     $(".cuerpo_mensaje").append(plantilla);

                     sleep(1000).then(() => {
                        var div = $(".cuerpo_mensaje").find(
                           '[data-wam-id="' + wam_id + '"]',
                        );

                        if (div.length > 0) {
                           var audioElement = div.find("audio")[0];

                           if (audioElement) {
                              let source = document.createElement("source");
                              source.src = url; // Cambia esta URL según sea necesario
                              audioElement.appendChild(source);
                              audioElement.controls = true;

                              scroll_abajo();
                           }
                        }
                     });

                     return;
                  }

                  // Actualizar el texto y la imagen del mensaje
                  div.find(".palomitas").find(".texto").text(mensaje);

                  // Cambiar la imagen dentro del div
                  div.find(".fecha_y_palomitas .palomita_texto")
                     .attr("src", PATH_IMG + url_status_img)
                     .attr("width", tamaño_palomita)
                     .attr("title", error_title);
               }

               if (tipo_mensaje == "template") {
                  //console.log(template_original);
                  //console.log(template_data);

                  var plantilla = mensajes_templates_whatsapp_usuario(
                     id,
                     tipo_producto,
                     error_codigo,
                     error_mensaje,
                     status,
                     wam_id,
                     phone_number_id,
                     from,
                     to,
                     mensaje,
                     url,
                     filename,
                     template_original,
                     template_data,
                     tipo_mensaje,
                     db,
                     esContacto,
                     fecha_creacion,
                     id_chat_number,
                     donde_estamos,

                     //info de sms
                     sid,
                  );

                  if (div.length == 0) {
                     // Usar el método append para agregar el HTML al div cuerpo_mensaje
                     $(".cuerpo_mensaje").append(plantilla);

                     scroll_abajo();

                     return;
                  }

                  // Cambiar la imagen dentro del div
                  div.find(".fecha_y_palomitas .palomita_texto")
                     .attr("src", PATH_IMG + url_status_img)
                     .attr("width", tamaño_palomita)
                     .attr("title", error_title);
               }

               //fin if
            }
         }
         //fin
         
         
         
         
          document.getElementById("mi-mensaje-texto").addEventListener("keydown", function(event) {
    if (event.key === "Enter") {
        event.preventDefault(); // Previene un salto de línea en el textarea
        let texto = document.getElementById("mi-mensaje-texto").value;
        ejecutarFuncion(texto); // Llama a la función con el texto como argumento
         }
      });

      function ejecutarFuncion(texto) {
         console.log("Texto ingresado:", texto);
         // Aquí puedes agregar el código que desees ejecutar con el texto

         let mensaje = $("#mi-mensaje-texto").val();

            let tipo_medio = $("#seleccionar_medio_mensaje").val();

            if (tipo_medio != "sms" && tipo_medio != "whatsapp") {
               Swal.fire(
                  "You must choose a correct option for the message medium: it can be WhatsApp or SMS",
               );
            }

            if (isEmpty(mensaje) == true) {
               return;
            }

            if (isEmpty(numero_contacto_seleccionado) == true) {
               Swal.fire("Select a contact");

               return;
            }

            if (tipo_medio == "sms") {
               let datos = {
                  mensaje: mensaje,
                  to: numero_contacto_seleccionado,
                  from: SMS_FROM_GLOBAL,
                  tipo_usuario: "admin", //admin es default
                  staff_id: STAFF_ID_GLOBAL, //admin es default
                  account_sid: ACCOUNT_SID_SMS,
                  auth_token: AUTH_TOKEN_SMS,
                  configuracion_whatsapp_sms_id:
                     TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID,
               };

               // Realizar la solicitud POST
               $.ajax({
                  type: "POST",
                  url: URL_BASE + "social/enviar-mensaje-sms-texto",
                  data: JSON.stringify(datos), // Convertir datos a formato JSON
                  contentType: "application/json", // Tipo de contenido JSON
                  success: function (response) {
                     //console.log("Respuesta del servidor:", response);
                     // Hacer algo con la respuesta del servidor

                     try {
                        let info = JSON.parse(response);

                        if (info.type == "success") {
                           //cambiar_badge(numero_contacto_seleccionado, "0");

                           let sumar_msj_sin_responder = lista_contactos.find(
                              (elemento) =>
                                 elemento.number ==
                                 numero_contacto_seleccionado,
                           );

                           if (sumar_msj_sin_responder) {
                              //sumar_msj_sin_responder.mensajes_no_leidos = 0;
                              sumar_msj_sin_responder.mensajes_no_leidos +=
                                 -info.mensajes_no_leidos;

                              let mnl = sumar_msj_sin_responder.mensajes_no_leidos <= 0 ? 0 : sumar_msj_sin_responder.mensajes_no_leidos;

                              cambiar_badge(
                                 numero_contacto_seleccionado,
                                 mnl,
                              );
                           }

                           //console.log(info.wam_id);

                           const now = new Date();
                           const formattedDate = formatDateTime(now);

                           let informacion = {
                              id: "unico-sms",
                              tipo_producto: "sms",
                              error_codigo: "",
                              error_mensaje: "",
                              status: info.status,
                              wam_id: null,
                              sid: info.sid,
                              phone_number_id: null,
                              from: SMS_FROM_GLOBAL,
                              to: numero_contacto_seleccionado,
                              mensaje: info.mensaje,
                              url: "",
                              tipo_mensaje: "text",
                              db: "no ocupo",
                              esContacto: "0",
                              fecha_creacion: formattedDate,
                           };

                           chat_mensajes.push(informacion);

                           $(".cuerpo_mensaje").append(
                              mensaje_texto_sms_usuarios(
                                 informacion.tipo_producto,
                                 informacion.error_codigo,
                                 informacion.status,
                                 informacion.sid,
                                 informacion.mensaje,
                                 informacion.fecha_creacion,
                              ),
                           );

                           $("#mi-mensaje-texto").focus();
                           $("#mi-mensaje-texto").val("");
                           scroll_abajo();
                           
                           if(info.mensajes_no_leidos_pendiente <= 0)
                           {
                              //$(".signo_existe_mensaje_ws").fadeOut();
                           }

                        } else if (info.type == "error") {
                           Swal.fire({
                              icon: "error",
                              title: "Oops...",
                              text: info.message,
                           });
                        }
                     } catch (error) {
                        Swal.fire({
                           icon: "error",
                           title: "Oops...",
                           text: error,
                        });
                     }
                  },
                  error: function (xhr, status, error) {
                     console.error("Error en la solicitud:", error);
                     // Manejar errores aquí
                     Swal.fire({
                        icon: "error",
                        title: "Oops...",
                        text: error,
                     });
                  },
               });
            }

            if (tipo_medio == "whatsapp") {
               let datos = {
                  mensaje: mensaje,
                  to: numero_contacto_seleccionado,
                  from: FROM_GLOBAL,
                  phone_number_id: PHONE_NUMBER_ID_GLOBAL,
                  tipo_usuario: "admin", //admin es default
                  staff_id: STAFF_ID_GLOBAL, //si es admin no se valida este campo
                  version_api_whatapp: VERSION_WHATSAPP_GLOBAL,
                  token_acceso: TOKEN_WHATSAPP_GLOBAL,
                  configuracion_whatsapp_sms_id:
                     TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID,
               };

               //console.log(JSON.stringify(datos));
               //return;

               // Realizar la solicitud POST
               $.ajax({
                  type: "POST",
                  url: URL_BASE + "social/enviar-mensaje-texto",
                  data: JSON.stringify(datos), // Convertir datos a formato JSON
                  contentType: "application/json", // Tipo de contenido JSON
                  success: function (response) {
                     //console.log("Respuesta del servidor:", response);
                     // Hacer algo con la respuesta del servidor

                     try {
                        let info = JSON.parse(response);

                        if (info.type == "success") {
                           let sumar_msj_sin_responder = lista_contactos.find(
                              (elemento) =>
                                 elemento.number ==
                                 numero_contacto_seleccionado,
                           );

                           if (sumar_msj_sin_responder) {
                              sumar_msj_sin_responder.mensajes_no_leidos +=
                                 -info.mensajes_no_leidos;

                              let mnl = sumar_msj_sin_responder.mensajes_no_leidos <= 0 ? 0 : sumar_msj_sin_responder.mensajes_no_leidos;

                              cambiar_badge(
                                 numero_contacto_seleccionado,
                                 mnl,
                              );
                           }

                           //console.log(info.wam_id);

                           const now = new Date();
                           const formattedDate = formatDateTime(now);

                           let informacion = {
                              id: "unico",
                              tipo_producto: "whatsapp",
                              error_codigo: "",
                              error_mensaje: "",
                              status: "wait",
                              wam_id: info.wam_id,
                              phone_number_id: PHONE_NUMBER_ID_GLOBAL,
                              from: FROM_GLOBAL,
                              to: numero_contacto_seleccionado,
                              mensaje: $("#mi-mensaje-texto").val(),
                              url: "",
                              tipo_mensaje: "text",
                              db: "no ocupo",
                              esContacto: "0",
                              fecha_creacion: formattedDate,
                           };

                           chat_mensajes.push(informacion);

                           $(".cuerpo_mensaje").append(
                              mensaje_texto_whatsapp_usuarios(
                                 "whatsapp",
                                 "",
                                 "",
                                 "wait",
                                 info.wam_id,
                                 PHONE_NUMBER_ID_GLOBAL,
                                 FROM_GLOBAL,
                                 numero_contacto_seleccionado,
                                 $("#mi-mensaje-texto").val(),
                                 "",
                                 "text",
                                 "no ocupo el db",
                                 "0",
                                 formattedDate,
                              ),
                           );

                           $("#mi-mensaje-texto").focus();
                           $("#mi-mensaje-texto").val("");

                           scroll_abajo();

                           if(info.mensajes_no_leidos_pendiente <= 0)
                           {
                              //$(".signo_existe_mensaje_ws").fadeOut();
                           }

                            
                        } else if (info.type == "error") {
                           Swal.fire({
                              icon: "error",
                              title: "Oops...",
                              text: info.message,
                           });
                        }
                     } catch (error) {
                        Swal.fire({
                           icon: "error",
                           title: "Oops...",
                           text: error,
                        });
                     }
                  },
                  error: function (xhr, status, error) {
                     console.error("Error en la solicitud:", error);
                     // Manejar errores aquí
                     Swal.fire({
                        icon: "error",
                        title: "Oops...",
                        text: error,
                     });
                  },
               });
            }
      }
   
</script>
{/literal}

{/block}