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

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

</style>

    

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

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

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

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

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

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

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

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

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

 
   <!-- 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" style="max-width: 80%;">
            <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="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="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 teneraddress">

                                                            <ol class="list-group-address" 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>


                                                   

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

     
   <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 ocultar_mostrar_botones_cerca_contactos" style="display: none">
                  <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; display: none; border-color: #d3cac0 !important; border: 1px solid #d3cac0 !important; width: 100%; background-color: white; color: black;"
                  >
                     Add new contact
                  </button>

                  <button
                     type="button"
                     class="btn borde-boton btn-block"
                     id="btn_search_contacto"
                     style="display: none;margin-bottom: 4px; border-color: #d3cac0 !important; border: 1px solid #d3cac0 !important; width: 100%; background-color: white; color: black;"
                  >
                    <i class="fa fa-search" style="font-size:16px"></i> search for contacts
                  </button>

                  <div class="row mostras_ocultar_buscador_contactos" style="margin: 0px; margin-bottom: 4px; display: none">

                     <div class="col-sm-12" style="padding: 0px;">
                        <div class="input-group">
                           <input type="text" class="form-control" id="search_contacto" placeholder="Search for contacts..." style="border: 1px solid #d3cac0 !important;background-color: white;color: black;height: 36px;border-bottom-left-radius: 5px;border-top-right-radius: 0px;border-top-left-radius: 5px;border-bottom-right-radius: 0px;">

                           <span class="input-group-btn">
                              <button class="btn btn-default btn_search_contacto_close waves-effect waves-themed" type="button" id="btn_search_contacto_2" style="border-radius: 0px;border: 1px solid #d3cac0 !important;background-color: white;color: black;height: 36px;border-bottom-left-radius: 0px;border-bottom-right-radius: 5px;border-top-right-radius: 5px;">
                                 <i class="fa fa-times"></i>
                              </button>
                           </span>
                           
                        </div>
                     </div>
                  
                  </div>
 
                  <div class="dropdown ocultar_tipo_canal" style="display: none">
      
                     <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>
 
 
               <div class="action-header clearfix cargando_mensajes_chat_interno" style="padding: 8px; display: none;">
                  <div class="d-flex justify-content-center align-items-center" style="gap: 10px;">
                     <div class="spinner" style="font-size: 18px;">
                        <i class="fa fa-circle-o-notch fa-spin"></i>
                     </div>
                     <h6 style="color: #767676; margin: 0;">Loading messages...</h6>
                  </div>
               </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="{{APP_URL}}/storage/system/{{$config['logo_default']}}"
                           alt=""
                           style="max-width: 100%; width: 213px;height: 152px"
                        />
                     </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" class="seleccionar_medio_whatsapp">Reply by WhatsApp</option>
                        <option value="sms" class="seleccionar_medio_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>
                                 
                              </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="Staff">
            <label for="id_select_staff" class="conf_label"
               >Select a Staff</label
            >
            <select
               class="select_staff"
               name="id_select_staff"
               id="id_select_staff"
               style="width: 100%"
            >
               
            </select>

           

            <div class="staff_div"></div>
         </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>

         <div style="  max-width: 100%; width: 100% !important;" >
            <button
               class="btn  btn-sm btn_aplicar_custumers_staff"
               style="float: inline-end; margin: 1.6rem 1rem; border-color: #d3cac0 !important; border: 1px solid #d3cac0 !important; background-color: white; color: black; padding: 7px; width: 92%;"
            >
               Apply
            </button>
            <br>
            <br>
         </div>

          
      </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 BASE_DATOS_LOCAL_INDEXEDDB = null;
         var databases_name_indexedDb = "contactos_chat_admin";
         var tabla_contactos_chat_indexedDb = "contactos_chat";

         const currentUrl = window.location.href; // http://localhost:50001/app_dev/?ng=social/social-chat
         const channel = new BroadcastChannel("tab_check_channel");
         const tabId = Date.now().toString();
         let tabCount = 0;
         let hasProcessed = false; // Bandera para ejecutar solo una vez

         // Enviar mensaje para anunciar esta pestaña
         channel.postMessage({ url: currentUrl, tabId: tabId, type: "ping" });

         // Escuchar mensajes de otras pestañas y decidir
         channel.onmessage = (event) => {
            const { url, tabId: otherTabId, type } = event.data;

            if (type === "ping" && url === currentUrl && otherTabId !== tabId) {
               tabCount++;
               console.log(`Pestaña detectada con tabId: ${otherTabId}, total ahora: ${tabCount + 1}`);
               channel.postMessage({ url: currentUrl, tabId: tabId, type: "pong" });
            } else if (type === "pong" && url === currentUrl && otherTabId !== tabId) {
               tabCount++;
               console.log(`Pestaña confirmada con tabId: ${otherTabId}, total ahora: ${tabCount + 1}`);
            }

            // Procesar solo una vez después de recibir mensajes
            if (!hasProcessed) {
               hasProcessed = true;
               const totalTabs = tabCount + 1; // Incluye esta pestaña
               console.log(`Total de pestañas con la misma URL al cargar: ${totalTabs}`);

               if (totalTabs === 1) {
                     console.log("Solo hay una pestaña, eliminando la base de datos...");
                     const deleteRequest = window.indexedDB.deleteDatabase(databases_name_indexedDb);

                     deleteRequest.onsuccess = () => {
                        console.log("Base de datos eliminada con éxito");
                        abrirYCrearBaseDatos();
                     };

                     deleteRequest.onerror = (error) => {
                        console.error("Error al eliminar la base de datos: ", error);
                        abrirYCrearBaseDatos();
                     };

                     deleteRequest.onblocked = () => {
                        console.warn("Eliminación bloqueada, puede haber conexiones abiertas");
                        abrirYCrearBaseDatos();
                     };
               } else {
                     console.log("Hay más de una pestaña, no se elimina la base de datos...");
                     abrirYCrearBaseDatos();
               }
            }
         };

         // Si no hay respuesta inmediata (primera pestaña), procesar como única
         window.addEventListener("load", () => {
            setTimeout(() => { // Breve retraso para permitir mensajes, pero ejecuta inmediatamente después
               if (!hasProcessed) {
                     hasProcessed = true;
                     console.log("No se detectaron otras pestañas al cargar, asumiendo 1 pestaña...");
                     const deleteRequest = window.indexedDB.deleteDatabase(databases_name_indexedDb);

                     deleteRequest.onsuccess = () => {
                        console.log("Base de datos eliminada con éxito");
                        abrirYCrearBaseDatos();
                     };

                     deleteRequest.onerror = (error) => {
                        console.error("Error al eliminar la base de datos: ", error);
                        abrirYCrearBaseDatos();
                     };

                     deleteRequest.onblocked = () => {
                        console.warn("Eliminación bloqueada, puede haber conexiones abiertas");
                        abrirYCrearBaseDatos();
                     };
               }
            }, 0); // Retraso mínimo para permitir mensajes síncronos
         });


         function abrirYCrearBaseDatos()
         {
            const conexion_indexedDb = window.indexedDB.open(databases_name_indexedDb, 1);

            conexion_indexedDb.onsuccess = () => {
               BASE_DATOS_LOCAL_INDEXEDDB = conexion_indexedDb.result;
               console.log("Base de datos abierta", BASE_DATOS_LOCAL_INDEXEDDB);
 

               //let creacion = {
               //   chat_number_id: "56",
               //   data: mi_creacion
               //}

               //console.log("MI ARREGLO PRUEBA");
               //console.log(creacion);

               //agregarInformacionDBLocal(creacion, tabla_contactos_chat_indexedDb);

               BASE_DATOS_LOCAL_INDEXEDDB.onversionchange = function (event) {
                  alert("A new version of this page is ready. Please reload!");
                  BASE_DATOS_LOCAL_INDEXEDDB.close();
               };

            };

            conexion_indexedDb.onupgradeneeded = (e) => {
               BASE_DATOS_LOCAL_INDEXEDDB = e.target.result;
               console.log("Base de datos creada", BASE_DATOS_LOCAL_INDEXEDDB);

               const coleccionObjetos = BASE_DATOS_LOCAL_INDEXEDDB.createObjectStore(tabla_contactos_chat_indexedDb, {
                  keyPath: "chat_number_id",
               });

            };

            conexion_indexedDb.onerror = (error) => {
               console.log("Error ", error);
            };
         }
         
    

         const agregarInformacionDBLocal = (info, nombre_tabla) => {

            if(BASE_DATOS_LOCAL_INDEXEDDB == null){
               return;
            }

            const trasaccion = BASE_DATOS_LOCAL_INDEXEDDB.transaction([nombre_tabla], "readwrite");
            const coleccionObjetos = trasaccion.objectStore(nombre_tabla);
            const conexion = coleccionObjetos.add(info);
            //consultarInformacionDBLocal();
         };

         const obtenerInformacionDBLocal = (clave, nombre_tabla) => {
            return new Promise((resolve, reject) => {

               if(BASE_DATOS_LOCAL_INDEXEDDB != null){

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

                  const trasaccion = BASE_DATOS_LOCAL_INDEXEDDB.transaction([nombre_tabla], "readonly");
                  const coleccionObjetos = trasaccion.objectStore(nombre_tabla);

                  const conexion = coleccionObjetos.get( String(clave || "") );

                  conexion.onsuccess = (e) => {
                     resolve(conexion.result); // Devuelve el resultado
                  };

                  conexion.onerror = (e) => {
                     resolve({});
                  };
               }else{
                   resolve({});
               }
               

                
            });
         };
 

         const actualizarInformacionDBLocal = (clave, data, nombre_tabla) => {

            if(BASE_DATOS_LOCAL_INDEXEDDB == null){
               return;
            }

            const trasaccion = BASE_DATOS_LOCAL_INDEXEDDB.transaction([nombre_tabla], "readonly");
            const coleccionObjetos = trasaccion.objectStore(nombre_tabla);
            const conexion = coleccionObjetos.get(clave);

            conexion.onsuccess = (e) => {

               let data_encontrada = conexion.result;

               if (data_encontrada) {

                  console.log("registro encontrado su valor es");
                  console.log(data_encontrada); 

                     let mi_arreglo_nuevo = [...data_encontrada.data, ...[data]];

                     let objeto_construido = {
                        chat_number_id:   clave,
                        data: mi_arreglo_nuevo
                     };

                     const trasaccion_update = BASE_DATOS_LOCAL_INDEXEDDB.transaction([nombre_tabla], "readwrite");
                     const coleccionObjetos_update = trasaccion_update.objectStore(nombre_tabla);
                     const conexion_update = coleccionObjetos_update.put(objeto_construido);

                     conexion_update.onsuccess = () => {};

               }  
 
            };

            conexion.onerror = (e) => {
               
            };
             
         };

         const actualizarSinBuscadorInformacionDBLocal = (data, nombre_tabla) => {

            if(BASE_DATOS_LOCAL_INDEXEDDB == null){
               return;
            }

            const trasaccion_update = BASE_DATOS_LOCAL_INDEXEDDB.transaction([nombre_tabla], "readwrite");
            const coleccionObjetos_update = trasaccion_update.objectStore(nombre_tabla);
            const conexion_update = coleccionObjetos_update.put(data);

            conexion_update.onsuccess = () => {};
             
         };

         const consultarInformacionDBLocal = (nombre_tabla) => {

            if(BASE_DATOS_LOCAL_INDEXEDDB == null){
               return;
            }

            const trasaccion = BASE_DATOS_LOCAL_INDEXEDDB.transaction([nombre_tabla], "readonly");
            const coleccionObjetos = trasaccion.objectStore(nombre_tabla);
            const conexion = coleccionObjetos.openCursor();

            console.log("Lista de tareas");

            conexion.onsuccess = (e) => {
               const cursor = e.target.result;
               if (cursor) {
                  console.log(cursor.value);
                  cursor.continue();
               } else {
                  console.log("No hay tareas en la lista");
               }
            };
         };

          



         //FIN - BASE DE DATOS LOCAL INDEXEDDB
 
 
         var URL_BASE = $("#URL_BASE").val();
         const PATH_IMG = $(".tener_path_img").val();

         var IMG_NOMBRE_PERFIL = $("#IMG_NOMBRE_PERFIL").val();

         var MI_IMAGEN_PERFIL = $("#IMAGEN_PERFIL").val();
         var MI_RUTA_IMAGEN_PERFIL = $("#RUTA_IMAGEN_PERFIL").val();
         var MI_RUTA_PROYECTO = $("#RUTA_PROYECTO").val();

         var APP_URL_ORIGINAL_SOCKET = $("#APP_URL_ORIGINAL_SOCKET").val();

         
         

         var ID_USER = $("#ID_USER").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" },
            { nombre: "Honduras", codigo: "es_HN" },
         ];

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

         //configuracion de whatsapp
         var FROM_GLOBAL = null;
         var ID_CONFIG_WHATSAPP_OTHER_GLOBAL = null;
         var PHONE_NUMBER_ID_GLOBAL = null;
         var VERSION_WHATSAPP_GLOBAL = null;
         var TOKEN_WHATSAPP_GLOBAL = null;
         var WHATSAPP_BUSINESS_ACCOUNT_IDENTIFIER = null;

         //configuracion de mensajes
         var SMS_FROM_GLOBAL = null;
         var ACCOUNT_SID_SMS = null;
         var AUTH_TOKEN_SMS = null;

         var TIPO_DE_PLATAFORMA = "whatsapp-sms";
         var TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID = null;

         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;

         var LISTADO_CONFIGURACION_WHATSAPP_SMS =
            await cargar_listado_configuracion_whatsapp_sms(URL_BASE);

         //console.log(LISTADO_CONFIGURACION_WHATSAPP_SMS);

         //me servira para tener la lista de personas que me escribieron o contactos
         var lista_contactos = [];

         if (LISTADO_CONFIGURACION_WHATSAPP_SMS.type == "error") {
            Swal.fire({
               icon: "error",
               title: "Oops...",
               text: "Failed to bring WhatsApp account settings!",
            });
         }

         if (Array.isArray(LISTADO_CONFIGURACION_WHATSAPP_SMS.data)) {
            if (LISTADO_CONFIGURACION_WHATSAPP_SMS.data.length == 0) {
               Swal.fire({
                  icon: "error",
                  title: "Oops...",
                  text: "There is no WhatsApp configuration available.!",
               });
            } else {
               LISTADO_CONFIGURACION_WHATSAPP_SMS =
                  LISTADO_CONFIGURACION_WHATSAPP_SMS.data;

               $(".item_dropdown_config").html(
                  configuracion_whatsapp_other_html(
                     LISTADO_CONFIGURACION_WHATSAPP_SMS,
                  ),
               );


               if(LISTADO_CONFIGURACION_WHATSAPP_SMS.length == 1)
               {
                   
                  //LOCO ESTAMOS AQUI

                  let {
                     identifier,
 
                  } = LISTADO_CONFIGURACION_WHATSAPP_SMS[0];

                  console.log("LISTADO_CONFIGURACION_WHATSAPP_SMS[0]");
                  console.log(LISTADO_CONFIGURACION_WHATSAPP_SMS[0]);
 
                  const $item = $("li.item_config[data-identifier=" + identifier +  "]");

                  if ($item.length){

                     const {
                        id,
                        identifier,
                        token,
                        phone,
                        phoneIdentifier: phone_identifier,
                        whatsappBusinessAccountIdentifier: whatsapp_business_account_identifier,
                        appIdentifier: app_identifier,
                        version,
                        status,
                        fechaCreacion: fecha_creacion,
                        smsAccountSid: sms_account_sid,
                        smsAuthToken: sms_auth_token,
                        smsPhoneNumber: sms_phone_number,
                        enableTwilio,
                        enableWhatsapp,
                     } = $item.data();

                     console.log({
                        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,
                        enableTwilio,
                        enableWhatsapp,
                     });
 
 
                     // Limpiar el select
                     $("#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");
                     }
         
         

                     TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID = id;

                     //configuracion de whatsapp
                     FROM_GLOBAL = phone;
                     PHONE_NUMBER_ID_GLOBAL = phone_identifier;
                     VERSION_WHATSAPP_GLOBAL = version;
                     TOKEN_WHATSAPP_GLOBAL = token;
                     WHATSAPP_BUSINESS_ACCOUNT_IDENTIFIER =
                        whatsapp_business_account_identifier;

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

                     $("#cambiar_titulo_config").text(identifier);

                     let canalMensajeria = $(".canal_mensajeria");
                     let canal = canalMensajeria.data("canal-mensajeria");

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

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

                     
                     

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

                     console.log(lista_contactos);

                     var lista_contactos_html = "";

                     lista_contactos.forEach((element) => {

                        obtenerInformacionDBLocal(element.id, tabla_contactos_chat_indexedDb).then((miData) => {
                              
                           if (!miData) {
                              let informacionObtenida = miData || {};
         
                              if(Object.keys(informacionObtenida).length == 0)
                              {
                                 let data_guardar = {
                                    chat_number_id: element.id + "",
                                    informacion_contacto: element,
                                    mensajes_no_leidos: element.mensajes_no_leidos,
                                    mensajes_no_leidos_sms: element.mensajes_no_leidos_sms,
                                    mensajes_no_leidos_whatsapp: element.mensajes_no_leidos_whatsapp,
                                    data: []
                                 };

                                 agregarInformacionDBLocal(data_guardar, tabla_contactos_chat_indexedDb);

                              }
                              
                           }else{

                              let informacionObtenida = miData || {};

                              if(Object.keys(informacionObtenida).length != 0)
                              {
                                 let data_guardar = {
                                    chat_number_id: element.id + "",
                                    informacion_contacto: element,
                                    mensajes_no_leidos: element.mensajes_no_leidos,
                                    mensajes_no_leidos_sms: element.mensajes_no_leidos_sms,
                                    mensajes_no_leidos_whatsapp: element.mensajes_no_leidos_whatsapp,
                                    data: informacionObtenida.data
                                 };

                                 //console.log("que onda cayo en modificar jajaja");

                                 actualizarSinBuscadorInformacionDBLocal(data_guardar, tabla_contactos_chat_indexedDb);

                              }



                           }
                        });
         
                        lista_contactos_html += contactos(element);
                     });

                     consultarInformacionDBLocal(tabla_contactos_chat_indexedDb);

                     //console.log("mi bandeja de contactos");
                     //console.log(lista_contactos_html);

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

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

                     $("#btn_new_contacto").show();

                     $("#btn_search_contacto").css("display", "");
                     $(".ocultar_tipo_canal").css("display", "");

         
                     
                     

                     numero_contacto_seleccionado = null;
                     id_contacto_seleccionado = null;

                     loading = false;
                     chat_mensajes = [];

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

                     modal_elejir_contacto();

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

                     //cargar staff por empresas
                     listado_staff =
                        (await cargar_listado_statt_api(
                           URL_BASE,
                           TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID,
                        )) || [];

                     $(".select_staff").html(cargar_select_staff(listado_staff));


                  }

               }else{
                  $("#cambiar_titulo_config").text("Select a configuration");
               }

 
               //
            }
         }

         $(document).ready(function () {

           $("#country").select2({
               dropdownParent: $('#addContacto')  // Ajusta el modal donde aparece el select2
            }).on('select2:open', function() {
               $('.select2-container--open').css('z-index', 9999);  // Ajusta el z-index
            });

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

         var numero_contacto_seleccionado = null;
         var id_contacto_seleccionado = null;

         var loading = false;

         var esTW_WS = false;

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

         modal_elejir_contacto();

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

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

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

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

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

         var id_chat_mensajes = null;
         var wam_id_chat_mensajes = null;
         var sid_id_chat_mensajes = null;

        

         function esqueletonContactos() {

            let concatenar = "";
            
            for (let index = 0; index < 5; index++) {
               concatenar +=
                  '<a class="list-group-item media item-contactos placeholder-glow" style=" padding-left: 11px; padding-right: 11px; ">' +
                  '  <div class="pull-left" style="height: 100%;">' +
                  '    <div class="placeholder placeholder-glow rounded-circle bg-info" style="width: 40px; height: 40px;"></div>' +
                  "  </div>" +
                  '  <div class="active-display-inline">' +
                  "    <div>" +
                  '      <small class="list-group-item-text c-gray placeholder col-6" style="background: gray; color: transparent; user-select: none; border-radius: 4px;">Integraciones Tec...</small>' +
                  '      <small class="fecha_humana placeholder col-2 bg-info" style="float: right; font-size: 9px; color: transparent !important; user-select: none; border-radius: 4px;">03/06/2025</small>' +
                  "    </div>" +
                  '    <hr style="padding: 0px; margin: 0px; border: 0; margin-top:5px;">' +
                  "    <i>" +
                  '      <small class="list-group-item-heading nombre_whatsapp placeholder col-8" title="*Si es prioridad Llámame" style="background: gray; color: transparent; user-select: none; border-radius: 4px;">*Si es prioridad ...</small>' +
                  "    </i><br>" +
                  '    <small class="list-group-item-text c-gray placeholder col-4" style="color: transparent; background: gray; user-select: none; border-radius: 4px;">+50498632131</small><br>' +
                  '    <small class="list-group-item-text c-gray contacto_fullname_staff placeholder col-3" style="color: transparent; background: gray; user-select: none; border-radius: 4px;">jair</small>' +
                  "  </div>" +
                  '  <span class="badge-contactos badge badge-colors"></span>' +
                  "</a>";
            }

            return concatenar;
         }

         function esqueletonMensajes(){

            let concatenar = "";

            let miMensaje = "<div class=\"message-feed media placeholder-glow\">" +
               "  <div class=\"pull-left\">" +
               "    <div class=\"image-container-perfil\">" +
               "      <div class=\"placeholder rounded-circle bg-info\" style=\"width: 40px; height: 40px;\"></div>" +
               "    </div>" +
               "  </div>" +
               "  <div class=\"media-body media-body-change-display\">" +
               "    <div class=\"mf-content mf-content-documentos\">" +
               "      <div class=\"palomitas\">" +
               "        <div class=\"plantilla-header-mensaje placeholder col-6\" style=\"border-radius: 4px; background: #beb9b9; \"></div>" +
               "        <div class=\"plantilla-body-mensaje\">" +
               "          <p class=\"texto_body_mensaje placeholder col-8\" style=\"color: transparent; background: #beb9b9; user-select: none; border-radius: 4px; width: 100%; height: 69px; margin-top: 4px;\">Tu código de verificación es *12345*. Por tu seguridad, no lo compartas.</p>" +
               "        </div>" +
               "        <div class=\"plantilla-footer-mensaje\" style=\"/* background: #beb9b9; */ /* border-radius: 4px; */\">" +
               "          <span class=\"texto_footer_mensaje placeholder col-4\" style=\"color: transparent; background: #beb9b9; border-radius: 4px; width: 100%; user-select: none;\">...</span>" +
               "        </div>" +
               "      </div>" +
               "      <small class=\"mf-date fecha_y_palomitas\">" +
               "        <div class=\"placeholder col-3\" style=\"color: transparent; background: #beb9b9; user-select: none; border-radius: 4px;\">02-04-2025 05:56 pm</div>" +
               "        <div class=\"placeholder rounded bg-info\" style=\"width: 18px; height: 18px;\"></div>" +
               "      </small>" +
               "      <div class=\"mensajes_botones\" style=\"display: none;\"></div>" +
               "    </div>" +
               "  </div>" +
               "</div>";

               //#beb9b9

               let miMensajeCliente = "<div class=\"message-feed media right placeholder-glow\">" +
               "  <div class=\"pull-right\">" +
               "    <div class=\"image-container-perfil\">" +
               "      <div class=\"placeholder rounded-circle bg-info\" style=\"width: 40px; height: 40px;\"></div>" +
               "    </div>" +
               "  </div>" +
               "  <div class=\"media-body media-body-change-display\">" +
               "    <div class=\"mf-content\">" +
               "      <div class=\"palomitas\">" +
               "        <div class=\"izquierda\">" +
               "          <span class=\"placeholder col-6\" style=\"display: inline-block; height: 14px; border-radius: 4px; user-select: none; color: transparent; background: #beb9b9;\">asdasdas3333333333333333333333333333333dasd</span><br>" +
               "          <span class=\"placeholder col-5\" style=\"display: inline-block; height: 14px; border-radius: 4px; user-select: none; color: transparent; background: #beb9b9;\"></span><br>" +
               "          <span class=\"placeholder col-4\" style=\"display: inline-block; height: 14px; border-radius: 4px; user-select: none; color: transparent; background: #beb9b9;\"></span>" +
               "        </div>" +
               "      </div>" +
               "      <small class=\"mf-date\">" +
               "        <div class=\"placeholder col-3\" style=\"height: 12px; border-radius: 4px;\"></div>" +
               "      </small>" +
               "    </div>" +
               "  </div>" +
               "</div>";

               concatenar =   miMensajeCliente + miMensaje + miMensajeCliente + miMensaje;
 
               return concatenar;
 
         }

         //"https://xhde365.com"

         //console.log(APP_URL_ORIGINAL_SOCKET);

         const socket = io(APP_URL_ORIGINAL_SOCKET, {
            path: "/socket-chat/socket.io",
            //transports: ["websocket"],
              transports: ["polling"],  // Usar

         });

         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", (data) => {
           //console.log("Datos de chat recibidos General:", data);
         });

         socket.on(
            "add-contactos-empleados/" +
               BASE_DE_DATOS_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") {
                  return;
                  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,
                  );

                  if(modificar_contacto)
                  {
                     obtenerInformacionDBLocal(id, tabla_contactos_chat_indexedDb).then((miDato) => {

                        if(miDato)
                        {

                           if(Object.keys(miDato).length != 0){

                              let miInformacionNuevaContacto = {
                                 id: id,
                                 number: number,
                                 custumer_id: custumer_id,
                                 staff_id: staff_id,
                                 created_at: created_at,
                                 nombre: nombre,
                                 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,
                              };

                              let data_modificada = {
                                 chat_number_id: miDato.chat_number_id,
                                 data: miDato.data,

                                 mensajes_no_leidos:          miDato.mensajes_no_leidos,
                                 mensajes_no_leidos_sms:      miDato.mensajes_no_leidos_sms,
                                 mensajes_no_leidos_whatsapp: miDato.mensajes_no_leidos_whatsapp,

                                 informacion_contacto: {...miDato.informacion_contacto, ...miInformacionNuevaContacto},
                              };

                              console.log("miDato db local");
                              console.log(miDato);

                              actualizarSinBuscadorInformacionDBLocal(data_modificada, tabla_contactos_chat_indexedDb);
                           }

                            
                        }

                     }) 

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

                        let maxLength = 17;  

                        let nombre_temporal = nombre;
   
                        if (nombre_temporal.length >= maxLength) {
                           nombre_temporal = nombre_temporal.substring(0, maxLength) + "...";
                        }

                        contacto_nombre_contacto.text(nombre_temporal);

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

                        if(contacto_fullname_staff.length)
                        {
                           contacto_fullname_staff.removeClass("staff-sin-asignar");
                           contacto_fullname_staff.removeClass("staff-asignado-a");

                           if(fullname_staff == "Unassigned staff")
                           {
                              contacto_fullname_staff.addClass("staff-sin-asignar");
                           }else{
                              contacto_fullname_staff.addClass("staff-asignado-a");
                           }

                           contacto_fullname_staff.text(fullname_staff);
                        }

                        div.attr('data-nombre', nombre);
                        
                     }

                  }
 
               }
 
            },
         );

         socket.on("change-customer-admin/" + BASE_DE_DATOS_GLOBAL, (data) => {
            //console.log(
            //   "Datos de change-customer-admin recibidos General:",
            //   data,
            //);

            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,
            } = data;

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

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

               modificar_contacto.custumer_id = custumer_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"]; */
            }
         });

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

            console.log("Datos de chat recibidos:", data);
 
            var {
               id,
               tipo_producto,
               error_codigo,
               error_mensaje,
               status,
               wam_id,
               sid,
               phone_number_id,
               from,
               to,
               mensaje,
               url,
               filename,
               tipo_mensaje,
               template_original,
               template_data,
               db,
               esContacto,
               fecha_creacion,
               id_chat_number,

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

               staff_id,
               donde_estamos,

               user_img,
               user_fullname,
               fecha_humana,
               nombre_whatsapp,
               config_whatsapp_other_id,
            } = data;

            if(esContacto == true)
            {
               actualizarInformacionDBMensajesSocket(data);
            }

            if (TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID == null) {
               console.log(
                  "CAYO UN MENSAJE PERO NO SE SELECCIONO LA CONFIGURACION",
               );
               return;
            }
 
            //console.log("id:", id);
            //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,
            //);
            //console.log("template_original:", template_original);
            //console.log("template_data:", template_data);

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

         $(".item_config").click(async function () {
            const {
               id,
               identifier,
               token,
               phone,
               phoneIdentifier: phone_identifier,
               whatsappBusinessAccountIdentifier:
                  whatsapp_business_account_identifier,
               appIdentifier: app_identifier,
               version,
               status,
               fechaCreacion: fecha_creacion,
               smsAccountSid: sms_account_sid,
               smsAuthToken: sms_auth_token,
               smsPhoneNumber: sms_phone_number,
               enableTwilio,
               enableWhatsapp,
            } = $(this).data();

            //console.log(enableTwilio);
            //console.log(enableWhatsapp);

            console.log($(this).data());
 
            // Limpiar el select
            $("#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");
            }
 

            TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID = id;

            //configuracion de whatsapp
            FROM_GLOBAL = phone;
            PHONE_NUMBER_ID_GLOBAL = phone_identifier;
            VERSION_WHATSAPP_GLOBAL = version;
            TOKEN_WHATSAPP_GLOBAL = token;
            WHATSAPP_BUSINESS_ACCOUNT_IDENTIFIER =
               whatsapp_business_account_identifier;

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

            $("#cambiar_titulo_config").text(identifier);

            let canalMensajeria = $(".canal_mensajeria");
            let canal = canalMensajeria.data("canal-mensajeria");

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

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

            $(".ocultar_mostrar_botones_cerca_contactos").css("display", "none");


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

            //return;  

            //return;        

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

            console.log(lista_contactos);

            var lista_contactos_html = "";

            lista_contactos.forEach((element) => {

               obtenerInformacionDBLocal(element.id, tabla_contactos_chat_indexedDb).then((miData) => {
                      
                  if (!miData) {
                     let informacionObtenida = miData || {};
 
                     if(Object.keys(informacionObtenida).length == 0)
                     {
                        let data_guardar = {
                           chat_number_id: element.id + "",
                           informacion_contacto: element,
                           mensajes_no_leidos: element.mensajes_no_leidos,
                           mensajes_no_leidos_sms: element.mensajes_no_leidos_sms,
                           mensajes_no_leidos_whatsapp: element.mensajes_no_leidos_whatsapp,
                           data: []
                        };

                        agregarInformacionDBLocal(data_guardar, tabla_contactos_chat_indexedDb);

                     }
                      
                  }else{

                     let informacionObtenida = miData || {};

                     if(Object.keys(informacionObtenida).length != 0)
                     {
                        let data_guardar = {
                           chat_number_id: element.id + "",
                           informacion_contacto: element,
                           mensajes_no_leidos: element.mensajes_no_leidos,
                           mensajes_no_leidos_sms: element.mensajes_no_leidos_sms,
                           mensajes_no_leidos_whatsapp: element.mensajes_no_leidos_whatsapp,
                           data: informacionObtenida.data
                        };

                        //console.log("que onda cayo en modificar jajaja");

                        actualizarSinBuscadorInformacionDBLocal(data_guardar, tabla_contactos_chat_indexedDb);

                     }



                  }
               });
 
               lista_contactos_html += contactos(element);
            });

            consultarInformacionDBLocal(tabla_contactos_chat_indexedDb);

            //console.log("mi bandeja de contactos");
            //console.log(lista_contactos_html);

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

            $(".ocultar_mostrar_botones_cerca_contactos").css("display", "");

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

            $("#btn_new_contacto").show();

            $("#btn_search_contacto").css("display", "");
            $(".ocultar_tipo_canal").css("display", "");

 
              
             

            numero_contacto_seleccionado = null;
            id_contacto_seleccionado = null;

            loading = false;
            chat_mensajes = [];

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

            modal_elejir_contacto();

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

            //cargar staff por empresas
            listado_staff =
               (await cargar_listado_statt_api(
                  URL_BASE,
                  TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID,
               )) || [];

            $(".select_staff").html(cargar_select_staff(listado_staff));

            // Ahora puedes usar estas variables individualmente
            /* console.log({
               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,
            }); */
         });

         $("#enviar_mensaje").click(function () {
 

            let estaDeshabilitado = $(this).prop("disabled");

            //console.log(estaDeshabilitado);

            if(estaDeshabilitado == true)
            {
               return;
            }
 

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

            $(".btn_footer_enviar").css("color", "#a7aaca");
            $(".btn_footer_enviar").prop("disabled", true);

            $(".enviar_mensaje").prop("disabled", true);
            $("#mi-mensaje-texto").prop("disabled", true);
             

            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

                     $(".btn_footer_enviar").css("color", "#6b709f");
                     $(".btn_footer_enviar").prop("disabled", false);
                     $(".enviar_mensaje").prop("disabled", false);
                     $("#mi-mensaje-texto").prop("disabled", false);


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

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

                           const now = new Date();
                           //const formattedDate = formatDateTime(now);
                           const formattedDate = info.fecha_creacion;

                           let informacion = {
                              id: info.id_chat_social,
                              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,
                           };

                           //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,
                                 "0",
                              );

                              obtenerInformacionDBLocal(id_contacto_seleccionado, tabla_contactos_chat_indexedDb).then((miData) => {

                                 if (miData) {

                                    console.log("registro encontrado en la base de datos local");
                                    console.log(miData);

                                    if(Object.keys(miData).length != 0){

                                       let nuevo_arreglo = [...miData.data];

                                       nuevo_arreglo.push(informacion);
      
                                       let cabecera = {
                                          chat_number_id:              miData.chat_number_id,
                                          informacion_contacto:        miData.informacion_contacto,
                                          mensajes_no_leidos:          0,
                                          mensajes_no_leidos_sms:      0,
                                          mensajes_no_leidos_whatsapp: 0,
                                          data: nuevo_arreglo,
                                       };

                                       actualizarSinBuscadorInformacionDBLocal(cabecera, tabla_contactos_chat_indexedDb);
                                    }
                                     
                     
                                 }
                              
                              });

                           }

                           var div = $('.mi-bandeja-mensajes-contactos a[data-numero-contacto="' + numero_contacto_seleccionado + '"]');

                           if (div.length) {
                              // Obtener el HTML completo del elemento, incluida la etiqueta principal
                              let fullHtml = div.prop('outerHTML');
                              
                              // Mostrar el HTML completo en la consola
                              //console.log(fullHtml);
                              
                              // Eliminar el elemento
                              div.remove();
                              
                              $(".mi-bandeja-mensajes-contactos").prepend(
                                 fullHtml,
                              );

                              click_contactos(); 
                           }  

                           //console.log(info.wam_id);

                            

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

                           $("#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

                     $(".btn_footer_enviar").css("color", "#6b709f");
                     $(".btn_footer_enviar").prop("disabled", false);
                     $(".enviar_mensaje").prop("disabled", false);
                     $("#mi-mensaje-texto").prop("disabled", false);


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

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

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

                           const formattedDate = info.fecha_creacion;

                           let informacion = {
                              id: info.id_chat_social,
                              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: info.fecha_creacion,
                           };

                           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,
                                 "0",
                              );

                              obtenerInformacionDBLocal(id_contacto_seleccionado, tabla_contactos_chat_indexedDb).then((miData) => {

                                 if (miData) {

                                    console.log("registro encontrado en la base de datos local");
                                    console.log(miData);

                                    if(Object.keys(miData).length != 0)
                                    {
                                       let nuevo_arreglo = [...miData.data];

                                       nuevo_arreglo.push(informacion);
      
                                       let cabecera = {
                                          chat_number_id:              miData.chat_number_id,
                                          informacion_contacto:        miData.informacion_contacto,
                                          mensajes_no_leidos:          0,
                                          mensajes_no_leidos_sms:      0,
                                          mensajes_no_leidos_whatsapp: 0,
                                          data: nuevo_arreglo,
                                       };

                                       actualizarSinBuscadorInformacionDBLocal(cabecera, tabla_contactos_chat_indexedDb);
                                    }
                                     
                     
                                 }
                              
                              });
                           }
                              

                           var div = $('.mi-bandeja-mensajes-contactos a[data-numero-contacto="' + numero_contacto_seleccionado + '"]');

                           if (div.length) {
                              // Obtener el HTML completo del elemento, incluida la etiqueta principal
                              let fullHtml = div.prop('outerHTML');
                              
                              // Mostrar el HTML completo en la consola
                              //console.log(fullHtml);
                              
                              // Eliminar el elemento
                              div.remove();
                              
                              $(".mi-bandeja-mensajes-contactos").prepend(
                                 fullHtml,
                              );

                              click_contactos(); 
                           }

                           //console.log(info.wam_id);
 

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

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

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

                              var datos = {
                                 imagen: base64WithoutPrefix,
                                 to: numero_contacto_seleccionado,
                                 from: FROM_GLOBAL,
                                 phone_number_id: PHONE_NUMBER_ID_GLOBAL,
                                 caption: mensaje,
                                 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,
                              };

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

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

                                       if(sumar_msj_sin_responder)
                                       {
                                          var div = $('.mi-bandeja-mensajes-contactos a[data-numero-contacto="' + numero_contacto_seleccionado + '"]');

                                          if (div.length) {
                                             // Obtener el HTML completo del elemento, incluida la etiqueta principal
                                             let fullHtml = div.prop('outerHTML');
                                             
                                             // Mostrar el HTML completo en la consola
                                             //console.log(fullHtml);
                                             
                                             // Eliminar el elemento
                                             div.remove();
                                             
                                             $(".mi-bandeja-mensajes-contactos").prepend(
                                                fullHtml,
                                             );

                                             click_contactos(); 
                                          }
                                       }


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

                                       const formattedDate = info.fecha_creacion;
                                           
                                       let informacion = {
                                          id: info.id_chat_social,
                                          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,
                                       };

                                       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,
                                             "0",
                                          );

                                          obtenerInformacionDBLocal(id_contacto_seleccionado, tabla_contactos_chat_indexedDb).then((miData) => {

                                             if (miData) {

                                                console.log("registro encontrado en la base de datos local");
                                                console.log(miData);

                                                if(Object.keys(miData).length != 0){

                                                   let nuevo_arreglo = [...miData.data];

                                                   nuevo_arreglo.push(informacion);
                  
                                                   let cabecera = {
                                                      chat_number_id:              miData.chat_number_id,
                                                      informacion_contacto:        miData.informacion_contacto,
                                                      mensajes_no_leidos:          0,
                                                      mensajes_no_leidos_sms:      0,
                                                      mensajes_no_leidos_whatsapp: 0,
                                                      data: nuevo_arreglo,
                                                   };

                                                   actualizarSinBuscadorInformacionDBLocal(cabecera, tabla_contactos_chat_indexedDb);
                                                }

                                                 
                                 
                                             }
                                          
                                          });
                                       }

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

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

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


                                       if(info.mensajes_no_leidos_pendiente <= 0)
                                       {
                                          //$(".signo_existe_mensaje_ws").fadeOut();
                                       }
                                       /*  scroll_abajo().then((result) => {
                                                                                     cargando_imagen(":last");
                                                                                  }); */
                                    } 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,
                                    );
                                    Swal.fire({
                                       icon: "error",
                                       title: "Oops...",
                                       text: 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.",
                     );
                  }
               }
            });

         //imagenes
         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: "admin", //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)
                              {
                                 var div = $('.mi-bandeja-mensajes-contactos a[data-numero-contacto="' + numero_contacto_seleccionado + '"]');

                                 if (div.length) {
                                    // Obtener el HTML completo del elemento, incluida la etiqueta principal
                                    let fullHtml = div.prop('outerHTML');
                                    
                                    // Mostrar el HTML completo en la consola
                                    //console.log(fullHtml);
                                    
                                    // Eliminar el elemento
                                    div.remove();
                                    
                                    $(".mi-bandeja-mensajes-contactos").prepend(
                                       fullHtml,
                                    );

                                    click_contactos(); 
                                 }

                              }

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

                              const formattedDate = info.fecha_creacion;

                              if (info.tipo_documento == "document") {


                                 let informacion = {
                                    id: info.id_chat_social,
                                    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,
                                 };

                                 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,
                                       "0",
                                    );

                                    obtenerInformacionDBLocal(id_contacto_seleccionado, tabla_contactos_chat_indexedDb).then((miData) => {

                                       if (miData) {

                                          console.log("registro encontrado en la base de datos local");
                                          console.log(miData);
                                          
                                          if(Object.keys(miData).length != 0)
                                          {
                                             let nuevo_arreglo = [...miData.data];

                                             nuevo_arreglo.push(informacion);
            
                                             let cabecera = {
                                                chat_number_id:              miData.chat_number_id,
                                                informacion_contacto:        miData.informacion_contacto,
                                                mensajes_no_leidos:          0,
                                                mensajes_no_leidos_sms:      0,
                                                mensajes_no_leidos_whatsapp: 0,
                                                data: nuevo_arreglo,
                                             };

                                             actualizarSinBuscadorInformacionDBLocal(cabecera, tabla_contactos_chat_indexedDb);
                                          }

                                           
                           
                                       }
                                    
                                    });

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

                              if (info.tipo_documento == "audio") {

                                 let informacion = {
                                    id: info.id_chat_social,
                                    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,
                                 };

                                 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,
                                       "0",
                                    );

                                    obtenerInformacionDBLocal(id_contacto_seleccionado, tabla_contactos_chat_indexedDb).then((miData) => {

                                       if (miData) {

                                          console.log("registro encontrado en la base de datos local");
                                          console.log(miData);

                                          if(Object.keys(miData).length != 0)
                                          {
                                             let nuevo_arreglo = [...miData.data];

                                             nuevo_arreglo.push(informacion);
            
                                             let cabecera = {
                                                chat_number_id:              miData.chat_number_id,
                                                informacion_contacto:        miData.informacion_contacto,
                                                mensajes_no_leidos:          0,
                                                mensajes_no_leidos_sms:      0,
                                                mensajes_no_leidos_whatsapp: 0,
                                                data: nuevo_arreglo,
                                             };

                                             actualizarSinBuscadorInformacionDBLocal(cabecera, tabla_contactos_chat_indexedDb);
                                          }

                                           
                           
                                       }
                                    
                                    });

                                 }

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

                                 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í
                        Swal.fire({
                           icon: "error",
                           title: "Oops...",
                           text: error,
                        });
                     },
                  });
               };

               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();
               NOMBRE_CONTACTO_SELECCIONADO = $(this).data("nombre");
               
               //console.log("NOMBRE_CONTACTO_SELECCIONADO");
               //console.log(NOMBRE_CONTACTO_SELECCIONADO);
 
               //console.log("esto es conacot");
               //console.log(numeroContacto);
               //console.log(nombreContacto);

               //if (id_contacto_seleccionado == idContacto) {
               //   return;
               //}

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

               $(".ocultarBarraOpcionesChat").css("display", "none"); // Ocultar  


               chat_mensajes = [];

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

                $(".cuerpo_sin_mensajes").css("display", "none");
               //$(".cuerpo_mensaje").css("display", "none"); //habilita las conversaciones
               $(".cuerpo_mensaje").css("display", ""); //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");

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

               //return;
               
               funcion_modal_abrir_contacto();

               //activamos boton para agregar contactos a chat
               $("#btn_elejir_contacto").show();

               //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", "trasparente");
                  $(this).removeClass("item-contacto-seleccionado");
               });

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

               numero_contacto_seleccionado = numeroContacto;
               id_contacto_seleccionado = idContacto;

               console.log("id_contacto_seleccionado");
               console.log(id_contacto_seleccionado);

               
               console.log("tabla_contactos_chat_indexedDb");
               console.log(tabla_contactos_chat_indexedDb);

               //console.log("TIPO_DE_PLATAFORMA");
               //console.log(TIPO_DE_PLATAFORMA);
 
              var se_cargo_por_base_datos_local = true;

              chat_mensajes_dbLocal_temporal = [];

               let miData = await  obtenerInformacionDBLocal(id_contacto_seleccionado, tabla_contactos_chat_indexedDb);

               if (miData) {

                  //console.log("registro encontrado en la base de datos local");
                  //console.log(miData);

                  if(Object.keys(miData).length != 0)
                  {
                     if(miData.data.length != 0){

                       let informacion_filtrada_canal = [];

                        if(TIPO_DE_PLATAFORMA == "whatsapp")
                        {
                           informacion_filtrada_canal = miData.data.filter(
                              (item) =>
                                 item.tipo_producto == "whatsapp"  
                           ) || [];
                        }

                        if(TIPO_DE_PLATAFORMA == "sms")
                        {
                           informacion_filtrada_canal = miData.data.filter(
                              (item) =>
                                 item.tipo_producto == "sms"  
                           ) || [];
                        }

                        if(TIPO_DE_PLATAFORMA == "whatsapp-sms"){
                           informacion_filtrada_canal = [...miData.data || []];
                        }
                        

                        chat_mensajes_dbLocal_temporal = [...informacion_filtrada_canal];
                        chat_mensajes = [...chat_mensajes_dbLocal_temporal.splice(-10)];

                        se_cargo_por_base_datos_local = true;

                        console.log("comenzando chat_mensajes_dbLocal_temporal");
                        console.log(chat_mensajes_dbLocal_temporal);

                        console.log("comenzando chat_mensajes");
                        console.log(chat_mensajes);

                        
                        if(chat_mensajes.length < 10)
                        {
                           //console.log("cargando api: cantidad de mensajes " +chat_mensajes.length);

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

                           se_cargo_por_base_datos_local = false;

                           let miData = await obtenerInformacionDBLocal(id_contacto_seleccionado, tabla_contactos_chat_indexedDb);

                           if (miData) {

                              //console.log("registro encontrado en la base de datos local");
                              //console.log(miData);

                              if(Object.keys(miData).length != 0){
                                 let cabecera = {
                                    chat_number_id: miData.chat_number_id,
                                    informacion_contacto: miData.informacion_contacto,

                                    mensajes_no_leidos:          miData.mensajes_no_leidos,
                                    mensajes_no_leidos_sms:      miData.mensajes_no_leidos_sms,
                                    mensajes_no_leidos_whatsapp: miData.mensajes_no_leidos_whatsapp,

                                    data: chat_mensajes,
                                 };

                                 actualizarSinBuscadorInformacionDBLocal(cabecera, tabla_contactos_chat_indexedDb);
                              }

                               
                           }
                        }
                        
                        
                     } 
                  }

                   
                      
               }
          
               if(chat_mensajes.length == 0){

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

                  se_cargo_por_base_datos_local = false;

                  let miData = await obtenerInformacionDBLocal(id_contacto_seleccionado, tabla_contactos_chat_indexedDb);

                  if (miData) {

                     //console.log("registro encontrado en la base de datos local");
                     //console.log(miData);

                     if(Object.keys(miData).length != 0){
                        let cabecera = {
                           chat_number_id: miData.chat_number_id,
                           informacion_contacto: miData.informacion_contacto,

                           mensajes_no_leidos:          miData.mensajes_no_leidos,
                           mensajes_no_leidos_sms:      miData.mensajes_no_leidos_sms,
                           mensajes_no_leidos_whatsapp: miData.mensajes_no_leidos_whatsapp,

                           data: chat_mensajes,
                        };

                        actualizarSinBuscadorInformacionDBLocal(cabecera, tabla_contactos_chat_indexedDb);
                     }

                      
 
                  }
 
                  console.log("jejeje paso a cargar la api xd");
               }
 
                //console.log("se_cargo_por_base_datos_local");
                //console.log(se_cargo_por_base_datos_local);

               console.log("MI LISTADO DE MENSAJES DE BASE DE DATOS");
               console.log(chat_mensajes);

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

               cargar_mensajes_numeros_plantillas(chat_mensajes);
 
               if (chat_mensajes.length != 0) {
                  //dependiendo el ultimo mensaje cargamos
                  let tipo_p = chat_mensajes[chat_mensajes.length - 1];

                  $("#seleccionar_medio_mensaje").val(tipo_p["tipo_producto"]);
                  //console.log(tipo_p);
               }

               //await sleep(1000);

               setTimeout(() => {
                  //console.log("Desplazando hacia abajo después de 1 segundo");
                  const container = $(".cuerpo_mensaje");
                  if (container.length) { // Verificar que el elemento exista
                     container.animate({
                           scrollTop: container[0].scrollHeight
                     }, 0); // Duración de la animación en milisegundos (1 segundo)
                  }
               }, 0); // Retraso inicial de 1 segundo

               $(".ocultarBarraOpcionesChat").css("display", ""); // Ocultar  

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

               $(".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 (es donde se selecciona staff y cliente)
               let tener_contacto = lista_contactos.find(
                  (data) => data.id == id_contacto_seleccionado,
               );

               if (!tener_contacto) {
                  return;
               }

               //console.log(tener_contacto);

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

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

                     $(".select_custumers")
                        .val(tener_contacto.custumer_id)
                        .trigger("change");
                  }
               } else {
                  $(".select_custumers").val(null).trigger("change");
                  $(".custumers_div").html("");
               }

               if (tener_contacto.staff_id != null) {
                  //staff
                  let data_staff = listado_staff.find(
                     (data) => data.id == tener_contacto.staff_id,
                  );

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

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

           
               } else {
                
                  $(".select_staff").val(null).trigger("change");
                  $(".staff_div").html("");
               }

               if (chat_mensajes.length == 0) {
                  console.log("no hay mensajes en el arreglo xd");
                  return;
               }

               id_chat_mensajes = chat_mensajes[0]["id"];
               wam_id_chat_mensajes = chat_mensajes[0]["wam_id"];
               sid_id_chat_mensajes = chat_mensajes[0]["sid"];

               // ||  chat_mensajes[0]["sid"]

               //esTW_WS = isEmpty(wam_id_chat_mensajes) == true ? true : false;
 
               console.log("El ultimo id id_chat_mensajes");
               console.log(id_chat_mensajes);

               //console.log(chat_mensajes);

               //return;

               //await sleep(500);

               const scrollButton = $("#scrollButton");

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

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

                              loading = false;

                              //console.log("comenzando chat_mensajes_dbLocal_temporal scroll");
                              //console.log(chat_mensajes_dbLocal_temporal);

                              //console.log("comenzando chat_mensajes scroll");
                              //console.log(chat_mensajes);
 
                              if(chat_mensajes_dbLocal_temporal.length != 0)
                              {

                                 if(chat_mensajes_dbLocal_temporal.length != 0){

                                    let quitarElementos = chat_mensajes_dbLocal_temporal.splice(-5);
                                    
                                    id_chat_mensajes = quitarElementos[0]["id"];
                                        
                                    console.log("El ultimo id para db local");
                                    console.log(id_chat_mensajes);

                                    cargar_mensajes_numeros_plantillas(
                                       quitarElementos,
                                    );

                                    chat_mensajes.unshift(...quitarElementos);

                                    if(isEmpty(quitarElementos[0]["wam_id"]) == false)
                                    {
                                       //
                                       var targetId = wam_id_chat_mensajes;

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

                                       //console.log("targetId wam_id");
                                       //console.log(targetId);

                                       if ($targetDiv.length) {
                                          
                                          //await sleep(300);

                                          $targetDiv[0].scrollIntoView();

                                       }

                                       wam_id_chat_mensajes = quitarElementos[0]["wam_id"];
 
                                    }

                                    if(isEmpty(chat_mensajes[0]["sid"]) == false)
                                    {
                                       var targetId = sid_id_chat_mensajes;

                                       // Find the target div
                                       var $targetDiv = $(
                                          '.cuerpo_mensaje div[data-sid-id="' +
                                             targetId +
                                             '"]',
                                       );

                                       //console.log("targetId sid");
                                       //console.log(targetId);

                                       //console.log(id_chat_mensajes);

                                       if ($targetDiv.length) {
                                          
                                          //await sleep(300);

                                          $targetDiv[0].scrollIntoView();

                                       }

                                       sid_id_chat_mensajes = quitarElementos[0]["sid"];
 
                                    }
 
                                 }

                              }else{

                                 $('.cargando_mensajes_chat_interno').fadeIn(300);

                                 id_chat_mensajes = chat_mensajes[0]["id"];
                                 wam_id_chat_mensajes = chat_mensajes[0]["wam_id"];
                                 sid_id_chat_mensajes = chat_mensajes[0]["sid"];

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

                                 console.log("El ultimo id");
                                 console.log(id_chat_mensajes);

                                 let arreglo_nuevo = data["data"];

                                 console.log("informacion de base de datos arreglo_nuevo");
                                 console.log(arreglo_nuevo);

                                 if (arreglo_nuevo.length != 0) {

                                    console.log("ENTRO AL arreglo con arraySinCoincidencias");

                                    //id_chat_mensajes = arreglo_nuevo[0]["id"];

                                    cargar_mensajes_numeros_plantillas(
                                       arreglo_nuevo,
                                    );
                                    
                                    chat_mensajes.unshift(...arreglo_nuevo);

                                    let miData = await obtenerInformacionDBLocal(id_contacto_seleccionado, tabla_contactos_chat_indexedDb);

                                    if (miData) {

                                          //console.log("registro encontrado en la base de datos local");
                                          //console.log(miData);

                                          if(Object.keys(miData).length != 0)
                                          {
                                             let nuevo_arreglo = [...miData.data];

                                             nuevo_arreglo.unshift(...arreglo_nuevo);

                                             let cabecera = {
                                                chat_number_id: miData.chat_number_id,
                                                informacion_contacto: miData.informacion_contacto,

                                                mensajes_no_leidos:          miData.mensajes_no_leidos,
                                                mensajes_no_leidos_sms:      miData.mensajes_no_leidos_sms,
                                                mensajes_no_leidos_whatsapp: miData.mensajes_no_leidos_whatsapp,

                                                data: nuevo_arreglo,
                                             };

                                             actualizarSinBuscadorInformacionDBLocal(cabecera, tabla_contactos_chat_indexedDb);
                                          }

                                          
   
                                    }

                                    if(chat_mensajes.length == 0)
                                    {
                                       console.log("no hay mensajes en el arreglo");
                                       return;
                                    }
                                    
 
                                    if(isEmpty(arreglo_nuevo[0]["wam_id"]) == false)
                                    {
                                          //
                                          var targetId = wam_id_chat_mensajes;

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

                                          console.log("targetId wam_id");
                                          console.log(targetId);

                                          if ($targetDiv.length) {
                                             
                                             //await sleep(300);
 
                                             $targetDiv[0].scrollIntoView(); 

                                          }

                                          wam_id_chat_mensajes = arreglo_nuevo[0]["wam_id"];

                                          console.log("mensaje wam_id");
                                          console.log(arreglo_nuevo[0]["wam_id"]);
 
                                    }

                                    if(isEmpty(arreglo_nuevo[0]["sid"]) == false)
                                    {
                                          var targetId = sid_id_chat_mensajes;

                                          // Find the target div
                                          var $targetDiv = $(
                                             '.cuerpo_mensaje div[data-sid-id="' +
                                                targetId +
                                                '"]',
                                          );

                                          console.log("targetId sid");
                                          console.log(targetId);

                                          //console.log(id_chat_mensajes);

                                          if ($targetDiv.length) {
                                             
                                             //await sleep(300);
 
                                             $targetDiv[0].scrollIntoView(); 

                                          }

                                          sid_id_chat_mensajes = arreglo_nuevo[0]["sid"];

                                          console.log("mensaje sid");
                                          console.log(arreglo_nuevo[0]["sid"]);
 
                                    }
 
                                 }

                                 $('.cargando_mensajes_chat_interno').fadeOut(300);


                              }
 

                           }
                           // Perform your action here
                        } else {
                           loading = true;
                        }

                        if (scrollHeight - scrollTop - clientHeight >= 100) {
                           scrollButton.fadeIn();
                        } else {
                           scrollButton.fadeOut();
                        }
                     });

                     scrollButton.click(function () {
                        scroll_abajo();
                     });
                  }
               });

               //
            });
         }

         //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 staff_id = $(".select_staff").val();
            let custumers_id = $(".select_custumers").val();

            if (isEmpty(custumers_id) == true && isEmpty(staff_id) == true) {
               Swal.fire("¡select a staff or a customer!");
               return;
            }

            aplicar_un_staff_y_custumers_api(
               URL_BASE,
               id_contacto_seleccionado,
               staff_id,
               custumers_id,
               TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID,
            ).then( (valor) => {
               if (valor == true) {

                  Swal.fire({
                     title: "Assigned Employee!",
                     text: "¡employee successfully assigned!",
                     icon: "success"
                  });


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

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

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

                  modificar_contacto.custumer_id = custumers_id;
                  modificar_contacto.staff_id = staff_id;

                  if(data_customer)
                  {
                     modificar_contacto.nombre = data_customer["account"];
                     modificar_contacto.email_custumers = data_customer["email"];
                     modificar_contacto.phone_custumers = data_customer["phone"];
                     modificar_contacto.company_custumers = data_customer["company"];
                     modificar_contacto.address_custumers = data_customer["address"];

                     NOMBRE_CONTACTO_SELECCIONADO = data_customer["account"];
                  }

                  if(data_staff)
                  {
                     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"];
                  }
 
                  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>

                     if(data_customer)
                     {
                        let contacto_nombre_contacto = div.find(
                           ".contacto_nombre_contacto",
                        );

                        let maxLength = 17;  
                        let nombre = data_customer["account"] || "";

                        if (nombre.length >= maxLength) {
                           nombre = nombre.substring(0, maxLength) + "...";
                        }

                        contacto_nombre_contacto.text(nombre);

                        div.attr('data-nombre', data_customer["account"]);
                     }else{
                        let contacto_nombre_contacto = div.find(
                           ".contacto_nombre_contacto",
                        );

                        contacto_nombre_contacto.text("Desconocido");

                        div.attr('data-nombre', "Desconocido");
                        
                        $(".custumers_div").html("");

                      }
 
                     if(data_staff)
                     {
                        let contacto_fullname_staff = div.find(
                           ".contacto_fullname_staff ",
                        );

                        contacto_fullname_staff.text(data_staff["fullname"]);

                        // Eliminar la clase 'staff-sin-asignar' y agregar la clase 'ejemplo'
                        contacto_fullname_staff
                           .removeClass("staff-sin-asignar")
                           .addClass("staff-asignado-a ");
                     }else{
                        let contacto_fullname_staff = div.find(
                           ".contacto_fullname_staff ",
                        );

                        contacto_fullname_staff.text("Unassigned staff");

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

                        $(".staff_div").html("");

                     }
 
                  }
               }
            });

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

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

            if (isEmpty(selectedValue)) {
               return;
            }

            

            $(".staff_div").html(
               descripcion_seleccion_staff_plantilla(
                  listado_staff.find((data) => data.id == selectedValue),
               ),
            );
         });

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

                              let data_guardar = {
                                 chat_number_id: info.chat_number_id + "",
                                 data: []
                              };

                              agregarInformacionDBLocal(data_guardar, tabla_contactos_chat_indexedDb);

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

               var div_contacto = $(
                  '.mi-bandeja-mensajes-contactos a[data-numero-contacto="' +
                     numero_contacto_seleccionado +
                     '"]',
               );

               // Si el elemento <a> existe
               if (div_contacto.length) {

                  let nombre = div_contacto.attr('data-nombre');

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

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

               //return;

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

                           obtenerInformacionDBLocal(id_contacto_seleccionado, tabla_contactos_chat_indexedDb).then((miData) => {

                              if (miData) {

                                 if(Object.keys(miData).length != 0)
                                 {
                                    //console.log("registro encontrado en la base de datos local");
                                    //console.log(miData);
      
                                    let cabecera = {
                                       chat_number_id:              miData.chat_number_id,
                                       informacion_contacto:        miData.informacion_contacto,
                                       mensajes_no_leidos:          0,
                                       mensajes_no_leidos_sms:      0,
                                       mensajes_no_leidos_whatsapp: 0,
                                       data: miData.data,
                                    };

                                    actualizarSinBuscadorInformacionDBLocal(cabecera, tabla_contactos_chat_indexedDb);
                                 }

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

              
            });

            $(".CerrarChat").on("click", function () {

               console.log("click");

               //sin_mensaje cuerpo_sin_mensajes

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

                $(".cuerpo_cargando_mensajes").css("display", "none");

               //$(".cuerpo_sin_mensajes").css("display", "none");



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

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

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

               $("#scrollButton").css("display", "none");
 
  

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

         $("#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;

                        var div_numero_contacto = $(
                           '.mi-bandeja-mensajes-contactos a[data-numero-contacto="' +
                              numero_contacto_seleccionado +
                              '"]',
                        );

                        // Si el elemento <a> existe
                        if (div_numero_contacto.length) {
                           div_numero_contacto.attr('data-nombre', NOMBRE_CONTACTO_SELECCIONADO);
                        }

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


                        /* $("#btn_elejir_contacto").hide();


                        TIPO_DE_PLATAFORMA = "whatsapp-sms";
                        TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID = null;

                        ID_PLANTILLA_SELECCIONADO = "";
                        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
                        INFORMACION_PLANTILLA_HEADER_EXTENSION = ""; //esta variable la cree para tener la base 64 cuando sea header tener el tipo de documento
 
                        $(".mi-bandeja-mensajes-contactos").html("");
                                 
                        //$("#cambiar_titulo_config").text(identifier);
                        $("#cambiar_titulo_config").text("Select a configuration");

                        //console.log(numero_contacto_seleccionado);

                        numero_contacto_seleccionado = null;
                        id_contacto_seleccionado = null;
                        NOMBRE_CONTACTO_SELECCIONADO = null;

                        chat_mensajes = [];

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

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

                        $("#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 === "";
         }


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


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

            //console.log("llego aqui");

            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: "admin", //admin 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,
                  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) {
                              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);

                           var div = $('.mi-bandeja-mensajes-contactos a[data-numero-contacto="' + numero_contacto_seleccionado + '"]');

                           if (div.length) {
                              // Obtener el HTML completo del elemento, incluida la etiqueta principal
                              let fullHtml = div.prop('outerHTML');
                              
                              // Mostrar el HTML completo en la consola
                              //console.log(fullHtml);
                              
                              // Eliminar el elemento
                              div.remove();
                              
                              $(".mi-bandeja-mensajes-contactos").prepend(
                                 fullHtml,
                              );

                              click_contactos(); 
                           }

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

                           const formattedDate = info.fecha_creacion;

                           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,
                                 "",
                                 IMG_NOMBRE_PERFIL
                              ),
                           );

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

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

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

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

            //$(".ocultar_mostrar_botones_cerca_contactos").css("display", "none");
            $(".mi-bandeja-mensajes-contactos").html(esqueletonContactos()); 

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

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

            //$(".ocultar_mostrar_botones_cerca_contactos").css("display", "");

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

            let miData = await obtenerInformacionDBLocal(id_contacto_seleccionado, tabla_contactos_chat_indexedDb);

            if (miData) {

               //console.log("registro encontrado en la base de datos local");
               //console.log(miData);

               let cabecera = {
                  chat_number_id: miData.chat_number_id,
                  informacion_contacto: miData.informacion_contacto,

                  mensajes_no_leidos:          miData.mensajes_no_leidos,
                  mensajes_no_leidos_sms:      miData.mensajes_no_leidos_sms,
                  mensajes_no_leidos_whatsapp: miData.mensajes_no_leidos_whatsapp,

                  data: [],
               };

               actualizarSinBuscadorInformacionDBLocal(cabecera, tabla_contactos_chat_indexedDb);

                
            }

            //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: "admin",
                  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);

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

                           var div = $('.mi-bandeja-mensajes-contactos a[data-numero-contacto="' + numero_contacto_seleccionado + '"]');

                           if (div.length) {
                              // Obtener el HTML completo del elemento, incluida la etiqueta principal
                              let fullHtml = div.prop('outerHTML');
                              
                              // Mostrar el HTML completo en la consola
                              //console.log(fullHtml);
                              
                              // Eliminar el elemento
                              div.remove();
                              
                              $(".mi-bandeja-mensajes-contactos").prepend(
                                 fullHtml,
                              );

                              click_contactos(); 
                           }

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

                           const formattedDate = info.fecha_creacion;

                           if (
                              formato_headers == "text" ||
                              formato_headers == "" ||
                              formato_headers == "location"
                           ) {
                              let informacion = {
                                 id: info.id_chat_social,
                                 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,
                              };
                              
                              if (sumar_msj_sin_responder){
                                 obtenerInformacionDBLocal(id_contacto_seleccionado, tabla_contactos_chat_indexedDb).then((miData) => {

                                    if (miData) {

                                       console.log("registro encontrado en la base de datos local");
                                       console.log(miData);

                                       if(Object.keys(miData).length != 0){
                                          let nuevo_arreglo = [...miData.data];

                                          nuevo_arreglo.push(informacion);
         
                                          let cabecera = {
                                             chat_number_id:              miData.chat_number_id,
                                             informacion_contacto:        miData.informacion_contacto,
                                             mensajes_no_leidos:          0,
                                             mensajes_no_leidos_sms:      0,
                                             mensajes_no_leidos_whatsapp: 0,
                                             data: nuevo_arreglo,
                                          };

                                          actualizarSinBuscadorInformacionDBLocal(cabecera, tabla_contactos_chat_indexedDb);
                                       }
                        
                                    }
                                 
                                 });
                              }

                              chat_mensajes.push(informacion);

                              $(".cuerpo_mensaje").append(
                                 mensajes_templates_whatsapp_usuario(
                                    info.id_chat_social,
                                    "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
                                    "",

                                    IMG_NOMBRE_PERFIL
                                 ),
                              );
                           } else {
                              let informacion = {
                                 id: info.id_chat_social,
                                 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,
                              };

                              if (sumar_msj_sin_responder){
                                 obtenerInformacionDBLocal(id_contacto_seleccionado, tabla_contactos_chat_indexedDb).then((miData) => {

                                    if (miData) {

                                       console.log("registro encontrado en la base de datos local");
                                       console.log(miData);

                                       if(Object.keys(miData).length != 0){
                                          let nuevo_arreglo = [...miData.data];

                                          nuevo_arreglo.push(informacion);
         
                                          let cabecera = {
                                             chat_number_id:              miData.chat_number_id,
                                             informacion_contacto:        miData.informacion_contacto,
                                             mensajes_no_leidos:          0,
                                             mensajes_no_leidos_sms:      0,
                                             mensajes_no_leidos_whatsapp: 0,
                                             data: nuevo_arreglo,
                                          };

                                          actualizarSinBuscadorInformacionDBLocal(cabecera, tabla_contactos_chat_indexedDb);
                                       }
                        
                                    }
                                 
                                 });
                              }

                              chat_mensajes.push(informacion);

                              if (
                                 formato_headers == "image" ||
                                 formato_headers == "document"
                              ) {
                                 $(".cuerpo_mensaje").append(
                                    mensajes_templates_whatsapp_usuario_cargar_socket(
                                      info.id_chat_social,
                                       "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
                                       "",

                                       IMG_NOMBRE_PERFIL
                                    ),
                                 );
                              }

                              if (formato_headers == "video") {
                                 $(".cuerpo_mensaje").append(
                                    mensajes_templates_whatsapp_usuario_cargar_socket(
                                      info.id_chat_social,
                                       "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
                                       "",

                                       IMG_NOMBRE_PERFIL
                                    ),
                                 );

                                 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();
                           $("#mi-mensaje-texto").val("");

                           if(info.mensajes_no_leidos_pendiente <= 0)
                           {
                              //$(".signo_existe_mensaje_ws").fadeOut();
                           }
                        } else if (info.type == "error") {
                           Swal.fire(info.message);
                        }

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

                     Swal.fire({
                        icon: "error",
                        title: "Oops...",
                        text: 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 + "";
                           }

                           // 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   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 modal_elejir_contacto() {
            $(".choose_chat").click(async function () {
               if (TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID == null) {
                  Swal.fire("Select a configuration");
                  return;
               }

               let info_tmp = LISTADO_CONFIGURACION_WHATSAPP_SMS.find(
                  (data) => data.id == TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID,
               );

               if (info_tmp) {
                  //console.log(info_tmp);
                  $("#identificador_contacto").text(info_tmp.identifier);
                  $("#modal_elejir_contacto").modal("show");
               }
            });

            $(".btn_cerrar_confirmacion_modal_elejir_contacto").click(
               async function () {
                  $("#modal_elejir_contacto").modal("hide");
               },
            );
         }

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

            let info_tmp = LISTADO_CONFIGURACION_WHATSAPP_SMS.find(
               (data) => data.id == TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID,
            );

            if (info_tmp) {
               //console.log(info_tmp);
               $("#identificador_contacto").text(info_tmp.identifier);
               $("#modal_elejir_contacto").modal("show");
            }
            //modal_elejir_contacto();
         });

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

            let info_tmp = LISTADO_CONFIGURACION_WHATSAPP_SMS.find(
               (data) => data.id == TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID,
            );

            if (info_tmp) {
               //console.log(info_tmp);
               $("#numero_telefono").val("");
               $("#addPhone").modal("show");
            }
            //modal_elejir_contacto();
         });

         $("#btn_search_contacto").click(async function () {
 
            $("#btn_search_contacto").hide();

            $(".mostras_ocultar_buscador_contactos").show();
            
            $("#search_contacto").focus();
            $("#search_contacto").val("");
    
         });

         $("#btn_search_contacto_2").click(async function () {
 
            $("#btn_search_contacto").show();
            $(".mostras_ocultar_buscador_contactos").hide();

            /*
            Swal.fire({
               title: 'Do you want to lose the contact filter?',
               icon: 'question',
               showCancelButton: true,
               cancelButtonText: 'No',
               confirmButtonText: 'Yes',
               reverseButtons: true
            }).then((result) => {
               if (result.isConfirmed) {
                  $('.item-contactos').show();

                  $('.item-contactos').each(function() {
                        const $contacto = $(this);
                        const $numero = $contacto.find('.list-group-item-text.c-gray[title]').first();
                        const $staff = $contacto.find('.contacto_fullname_staff');
                        
                        // Restaurar número
                        if ($numero.data('original-html')) {
                           $numero.html($numero.data('original-html'));
                        }
                        
                        // Restaurar staff (por si acaso)
                        if ($staff.data('original-html')) {
                           $staff.html($staff.data('original-html'));
                        }
                  });

               } else {
                  
               }
            });
            */

            $('.item-contactos').show();

                  $('.item-contactos').each(function() {
                        const $contacto = $(this);
                        const $numero = $contacto.find('.list-group-item-text.c-gray[title]').first();
                        const $staff = $contacto.find('.contacto_fullname_staff');
                        
                        // Restaurar número
                        if ($numero.data('original-html')) {
                           $numero.html($numero.data('original-html'));
                        }
                        
                        // Restaurar staff (por si acaso)
                        if ($staff.data('original-html')) {
                           $staff.html($staff.data('original-html'));
                        }
                  });

            
    
         });

         let debounceTimer;

         $('#search_contacto').on('input', function() {
            const searchTerm = $(this).val().trim().toLowerCase();
            const valor = $(this).val();

            clearTimeout(debounceTimer);

            debounceTimer = setTimeout(function() {
               console.log('Buscando:', valor);

               // Restaurar todos los textos originales primero
               $('.item-contactos').each(function() {
                     const $contacto = $(this);
                     const $numero = $contacto.find('.list-group-item-text.c-gray[title]').first();
                     const $staff = $contacto.find('.contacto_fullname_staff');
                     
                     // Restaurar número
                     if ($numero.data('original-html')) {
                        $numero.html($numero.data('original-html'));
                     }
                     
                     // Restaurar staff (por si acaso)
                     if ($staff.data('original-html')) {
                        $staff.html($staff.data('original-html'));
                     }
               });

               if (searchTerm === '') {
                     $('.item-contactos').show();
                     return;
               }

               $('.item-contactos').each(function() {
                     const $item = $(this);
                     const nombre = String($item.data('nombre') || '').toLowerCase();
                     const numeroContacto = String($item.data('numero-contacto') || '').toLowerCase();
                     const nombreContacto = String($item.data('nombre-contacto') || '').toLowerCase();
                     
                     const numeroStartsWith = numeroContacto.startsWith(searchTerm);
                     const nombreMatch = nombre.includes(searchTerm) || nombreContacto.includes(searchTerm);

                     if (numeroStartsWith || nombreMatch) {
                        $item.show();
                        
                        // Resaltar coincidencia en el número (manejando correctamente la estructura HTML)
                        const $numeroElement = $item.find('.list-group-item-text.c-gray[title]').first();
                        const $staffElement = $item.find('.contacto_fullname_staff');
                        
                        // Guardar HTML original si no está guardado
                        if (!$numeroElement.data('original-html')) {
                           $numeroElement.data('original-html', $numeroElement.html());
                        }
                        if (!$staffElement.data('original-html')) {
                           $staffElement.data('original-html', $staffElement.html());
                        }
                        
                        // Resaltar solo si hay coincidencia en el número
                        if (numeroStartsWith || numeroContacto.includes(searchTerm)) {
                           const originalNumero = $numeroElement.data('original-html');
                           const numeroSinSigno = originalNumero.replace('+', '');
                           
                           if (numeroSinSigno.toLowerCase().includes(searchTerm)) {
                                 const index = numeroSinSigno.toLowerCase().indexOf(searchTerm);
                                 const matchedText = numeroSinSigno.substr(index, searchTerm.length);
                                 const highlightedText = originalNumero.replace(
                                    new RegExp(matchedText, 'i'),
                                    '<span style="background-color: yellow; color: black; font-weight: bold; padding: 0 1px; border-radius: 2px;">$&</span>'
                                 );
                                 $numeroElement.html(highlightedText);
                           }
                        }
                     } else {
                        $item.hide();
                     }
               });
            }, 500);
         });

          


          

         $("#filtro_buscador_customer").click(async function () {
            let filtro_customer = $(".buscador_custumers").val();
            if (isEmpty(filtro_customer) == true) {
               Swal.fire("the search is empty!");
               return;
            }

            let resultados = listado_custumers.filter(function (element) {
               return (
                  element.account
                     .toLowerCase()
                     .includes(filtro_customer.toLowerCase()) ||
                  element.email
                     .toLowerCase()
                     .includes(filtro_customer.toLowerCase()) ||
                  element.phone
                     .toLowerCase()
                     .includes(filtro_customer.toLowerCase())
               );
            });

            $(".tbody_custumers").html(tabla_customers(resultados));

            add_customers_chat();
         });

         function add_customers_chat() {
            $(".btn_add_customer_chat").click(async function () {
               let dataId = $(this).data("id_customers_chat");

               let info_contacto = listado_custumers.find(
                  (data) => data.id == dataId,
               );

               if (info_contacto) {
                  if (isEmpty(info_contacto.phone) == true) {
                     Swal.fire("The phone is empty and is required");
                     return;
                  }

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

                  let datos = {
                     phone: phone,
                     custumers_id: dataId,
                     configuracion_whatsapp_sms_id:
                        TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID,
                  };

                  // Realizar la solicitud POST
                  $.ajax({
                     type: "POST",
                     url: URL_BASE + "social/agregar-contacto-chat",
                     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 add_contacto_desconocido = {
                                 id: info.chat_number_id, //clientes usan whatapp
                                 nombre: info_contacto.account, //clientes usan whatapp
                                 number: phone, //clientes
                                 config_whatsapp_other_id:
                                    TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID,
                                 custumer_id: dataId,
                                 staff_id: null,
                                 created_at: formatDateTime(new Date()), //clientes usan whatapp
                                 mensajes_no_leidos: 0,
                                 email_custumers: info_contacto.email,
                                 phone_custumers: phone,
                                 company_custumers: info_contacto.company,
                                 address_custumers: info_contacto.address,
                                 fullname_staff: "Unassigned staff",
                                 username_staff: "",
                                 user_type_staff: "",
                                 phonenumber: "",
                              };

                              //console.log(add_contacto_desconocido);

                              let data_guardar = {
                                 chat_number_id: info.chat_number_id + "",
                                 data: []
                              };

                              agregarInformacionDBLocal(data_guardar, tabla_contactos_chat_indexedDb);

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

                              $("#modal_elejir_contacto").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) {
                        Swal.fire({
                           icon: "error",
                           title: "Oops...",
                           text: error,
                        });
                        // Manejar errores aquí
                     },
                  });
               }

               /*
            let add_contacto_desconocido = {
                     id: id, //clientes usan whatapp
                     nombre: nombre, //clientes usan whatapp
                     number: number, //clientes
                     custumer_id: dataId,
                     staff_id: null,
                     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: "",
                     username_staff: "",
                     user_type_staff: "",
                     phonenumber: "",
                  };

                  lista_contactos.push(add_contacto_desconocido);

               */
            });
         }

         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,

               user_img,
               user_fullname,
               fecha_humana,

            } = data;

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

            var div = $('.mi-bandeja-mensajes-contactos a[data-numero-contacto="' + to + '"]');

            if (div.length) {
               // Obtener el HTML completo del elemento, incluida la etiqueta principal
               let fullHtml = div.prop('outerHTML');
               
               // Mostrar el HTML completo en la consola
               //console.log(fullHtml);
               
               // Eliminar el elemento
               div.remove();
               
               $(".mi-bandeja-mensajes-contactos").prepend(
                 fullHtml,
               );

               click_contactos(); 

            }  

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

               //VALIDACION PARA VER SI EL CONTACTO ES NUEVO
               let contacto_desconocido = lista_contactos.find(
                  (elemento) => elemento.number == to,
               );

               let add_contacto_desconocido = {
                  id: id_chat_number, //clientes usan whatapp
                  nombre: nombre, //clientes usan whatapp
                  number: to, //clientes
                  custumer_id: custumer_id,
                  staff_id: null,
                  created_at: formatDateTime(new Date()), //clientes usan whatapp
                  mensajes_no_leidos: 0,
                  email_custumers: email_custumers,
                  phone_custumers: phone_custumers,
                  company_custumers: company_custumers,
                  address_custumers: address_custumers,
                  fullname_staff: "Unassigned staff",
                  username_staff: null,
                  user_type_staff: null,
                  phonenumber: null,
                  fecha_humana: fecha_humana,
               };

               //si no esta que se agregue
               if (!contacto_desconocido) {
                  lista_contactos.push(add_contacto_desconocido);

                  let data_guardar = {
                     chat_number_id: id_chat_number + "",
                     data: []
                  };

                  agregarInformacionDBLocal(data_guardar, tabla_contactos_chat_indexedDb);

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

                  click_contactos();
               }
               //FIN DE VALIDACION PARA SABER SI EL CONTACTO ES NUEVO

               //status deliveri 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,
                     );

                     //
                     var div_fecha_humana = $(
                        '.mi-bandeja-mensajes-contactos a[data-numero-contacto="' +
                           to +
                           '"]',
                     );

                     // Si el elemento <a> existe
                     if (div_fecha_humana.length) {

                        let cambiar_fecha_humana = div_fecha_humana.find(
                           ".fecha_humana",
                        );

                        if (cambiar_fecha_humana.length){
                           cambiar_fecha_humana.text(fecha_humana);
                        }

                        

                     }

                     //de aqui para abajo es para colocar al principio el mensaje
                     var div = $('.mi-bandeja-mensajes-contactos a[data-numero-contacto="' + to + '"]');

                     if (div.length) {
                        // Obtener el HTML completo del elemento, incluida la etiqueta principal
                        let fullHtml = div.prop('outerHTML');
                        
                        // Mostrar el HTML completo en la consola
                        //console.log(fullHtml);
                        
                        // Eliminar el elemento
                        div.remove();
                        
                        $(".mi-bandeja-mensajes-contactos").prepend(
                          fullHtml,
                        );

                        click_contactos(); 

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

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

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

                  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, template_opcional = "") {
            $(".btn_microfono").css("color", "#6b709f");
            $(".btn_microfono").prop("disabled", false);
            $(".btn_microfono").html('<i class="fa fa-microphone"></i>');

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

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

               staff_id,
               donde_estamos,

               user_img,
               user_fullname,
               fecha_humana,
               nombre_whatsapp,
               config_whatsapp_other_id,
            } = data;
 
 
            //si pasa el tipo de producto validamos si no este vacio
            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);
               }

               let contacto_desconocido = lista_contactos.find(
                  (elemento) => elemento.number == to,
               );

               //console.log("mensaje original");
               //console.log(lista_contactos);

 
               let add_contacto_desconocido = {
                  id: id_chat_number, //clientes usan whatapp
                  nombre: nombre, //clientes usan whatapp
                  number: to, //clientes
                  custumer_id: custumer_id,
                  staff_id: null,
                  created_at: formatDateTime(new Date()), //clientes usan whatapp
                  mensajes_no_leidos: 0,
                  email_custumers: email_custumers,
                  phone_custumers: phone_custumers,
                  company_custumers: company_custumers,
                  address_custumers: address_custumers,
                  fullname_staff: "Unassigned staff",
                  username_staff: null,
                  user_type_staff: null,
                  phonenumber: null,
                  fecha_humana : fecha_humana,
                  nombre_whatsapp: nombre_whatsapp,
               };

               //si no esta que se agregue
               if (!contacto_desconocido) {
                  lista_contactos.push(add_contacto_desconocido);

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

                  let data_guardar = {
                     chat_number_id: id_chat_number + "",
                     informacion_contacto:{},
                     data: []
                  };

                  agregarInformacionDBLocal(data_guardar, tabla_contactos_chat_indexedDb);

                  click_contactos();
               }

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

                     //
                     var div_fecha_humana = $(
                        '.mi-bandeja-mensajes-contactos a[data-numero-contacto="' +
                           to +
                           '"]',
                     );

                     // Si el elemento <a> existe
                     if (div_fecha_humana.length) {

                        let cambiar_fecha_humana = div_fecha_humana.find(
                           ".fecha_humana",
                        );

                        if (cambiar_fecha_humana.length){
                           cambiar_fecha_humana.text(fecha_humana);
                        }

                        //nombre_whatsapp --------------
                        let cambiar_nombre_whatsapp = div_fecha_humana.find(
                           ".nombre_whatsapp",
                        );

                        if (cambiar_nombre_whatsapp.length){
                           cambiar_nombre_whatsapp.text(nombre_whatsapp);
                        }

                     }

                     //de aqui para abajo es para colocar al principio el mensaje
                     var div = $('.mi-bandeja-mensajes-contactos a[data-numero-contacto="' + to + '"]');

                     if (div.length) {
                        // Obtener el HTML completo del elemento, incluida la etiqueta principal
                        let fullHtml = div.prop('outerHTML');
                        
                        // Mostrar el HTML completo en la consola
                        //console.log(fullHtml);
                        
                        // Eliminar el elemento
                        div.remove();
                        
                        $(".mi-bandeja-mensajes-contactos").prepend(
                          fullHtml,
                        );

                        click_contactos(); 

                     }  
 

                  }
               }
 

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

               if (tipo_mensaje == "unsupported") {
                  let plantilla = mensaje_unsupported_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 == "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
                     : "";

               //failed
               //failed

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

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

                  //console.log("PASO MENSAJE mensaje original PARA CAMBIAR icono estadus");
                  //console.log(PATH_IMG + url_status_img);

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

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

                     cargando_imagen(":last").then(() => {
                        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 == "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,
                     user_img
                  );

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

                     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 == "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,
                        user_img
                     );

                  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,

                     user_img
                  );

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

            let estaDeshabilitado = $(this).prop("disabled");

            //console.log(estaDeshabilitado);

            if(estaDeshabilitado == true)
            {
               return;
            }

            $(".btn_footer_enviar").css("color", "#a7aaca");

            $(".enviar_mensaje").prop("disabled", true);
            $("#mi-mensaje-texto").prop("disabled", true);

            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

                     $(".btn_footer_enviar").css("color", "#6b709f");
                     $(".enviar_mensaje").prop("disabled", false);
                     $("#mi-mensaje-texto").prop("disabled", false);

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

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

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

                           const formattedDate = info.fecha_creacion;

                           let informacion = {
                              id: info.id_chat_social,
                              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,
                           };

                           //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,
                                 "0",
                              );

                              obtenerInformacionDBLocal(id_contacto_seleccionado, tabla_contactos_chat_indexedDb).then((miData) => {

                                 if (miData) {

                                    if(Object.keys(miData).length != 0){
                                       console.log("registro encontrado en la base de datos local");
                                       console.log(miData);

                                       let nuevo_arreglo = [...miData.data];

                                       nuevo_arreglo.push(informacion);
      
                                       let cabecera = {
                                          chat_number_id:              miData.chat_number_id,
                                          informacion_contacto:        miData.informacion_contacto,
                                          mensajes_no_leidos:          0,
                                          mensajes_no_leidos_sms:      0,
                                          mensajes_no_leidos_whatsapp: 0,
                                          data: nuevo_arreglo,
                                       };

                                       actualizarSinBuscadorInformacionDBLocal(cabecera, tabla_contactos_chat_indexedDb);
                                    }
                     
                                 }
                              
                              });

                           }

                           var div = $('.mi-bandeja-mensajes-contactos a[data-numero-contacto="' + numero_contacto_seleccionado + '"]');

                           if (div.length) {
                              // Obtener el HTML completo del elemento, incluida la etiqueta principal
                              let fullHtml = div.prop('outerHTML');
                              
                              // Mostrar el HTML completo en la consola
                              //console.log(fullHtml);
                              
                              // Eliminar el elemento
                              div.remove();
                              
                              $(".mi-bandeja-mensajes-contactos").prepend(
                                 fullHtml,
                              );

                              click_contactos(); 
                           }  

                           //console.log(info.wam_id);

                            

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

                           $("#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

                     $(".btn_footer_enviar").css("color", "#6b709f");

                     $(".enviar_mensaje").prop("disabled", false);
                     $("#mi-mensaje-texto").prop("disabled", false);

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

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

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

                           const formattedDate = info.fecha_creacion;

                           let informacion = {
                              id: info.id_chat_social,
                              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: info.fecha_creacion,
                           };

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

                              obtenerInformacionDBLocal(id_contacto_seleccionado, tabla_contactos_chat_indexedDb).then((miData) => {

                                 if (miData) {

                                    console.log("registro encontrado en la base de datos local");
                                    console.log(miData);

                                    if(Object.keys(miData).length != 0){
                                       let nuevo_arreglo = [...miData.data];

                                       nuevo_arreglo.push(informacion);
      
                                       let cabecera = {
                                          chat_number_id:              miData.chat_number_id,
                                          informacion_contacto:        miData.informacion_contacto,
                                          mensajes_no_leidos:          0,
                                          mensajes_no_leidos_sms:      0,
                                          mensajes_no_leidos_whatsapp: 0,
                                          data: nuevo_arreglo,
                                       };

                                       actualizarSinBuscadorInformacionDBLocal(cabecera, tabla_contactos_chat_indexedDb);
                                    }
                     
                                 }
                              
                              });
                              
                           }

                           var div = $('.mi-bandeja-mensajes-contactos a[data-numero-contacto="' + numero_contacto_seleccionado + '"]');

                           if (div.length) {
                              // Obtener el HTML completo del elemento, incluida la etiqueta principal
                              let fullHtml = div.prop('outerHTML');
                              
                              // Mostrar el HTML completo en la consola
                              //console.log(fullHtml);
                              
                              // Eliminar el elemento
                              div.remove();
                              
                              $(".mi-bandeja-mensajes-contactos").prepend(
                                 fullHtml,
                              );

                              click_contactos(); 
                           }  

                           //console.log(info.wam_id);

                            

                            console.log( info.fecha_creacion);
                            console.log("sasa")
                            console.log( info.fecha_creacion_);

                           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",
                                 info.fecha_creacion,
                                 IMG_NOMBRE_PERFIL
                              ),
                           );

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

      function serach_address(address,secundary,option = 1) {

         var country = $('#country').val();

         //console.log(address);

            let x=address.trim();
            if (x.length > 2 && country === "United States") {
               var settings = {
                  "url": "https://us-autocomplete-pro.api.smarty.com/lookup?key=188805315395749398&search="+address+"&selected="+secundary+"&include_only_cities=&include_only_states=&include_only_zip_codes=&exclude_states=&prefer_cities=&prefer_states=&prefer_zip_codes=&source=all",
                  "method": "GET",
                  "timeout": 0,
                  "headers": {
                  "Host": "us-autocomplete-pro.api.smarty.com",
                  "Referer": "https://xhde365.com"
               },
            };

               $('#browsers').html('');
               $('#browsers').show();

               $.ajax(settings).done(function (response) {

               $.each(response.suggestions, function (k, v) {
                  let text=v.street_line+' '+v.secondary+' '+v.city+', '+v.state+' '+v.zipcode;
                  let line=v.street_line+' '+v.secondary+' ('+v.entries+') '+v.city+', '+v.state+' '+v.zipcode;
                  let line2=v.street_line+' '+v.secondary;
                  let entries=(v.entries > 1) ? '<a href="#" data-data1="'+line+'" data-data2="'+line2+'" class="addresssec"><span class="badge bg-primary rounded-pill">+ '+v.entries+' Address</span></a>' : "" ;
                  let option='<li class="list-group-item d-flex justify-content-between align-items-start "><div class="ms-2 me-auto address1" data-data1="'+v.city+'" data-data2="'+v.state+'" data-data3="'+v.zipcode+'" data-data4="'+v.street_line+' '+v.secondary+'"><div class="fw-bold">'+text+'</div></div>'+entries+'</li>';
                  $('#browsers').append(option);
                  x++;
               });
               });
            }
      }


      $("input[name='address']").on('input', function(e){
         var address = $(this).val();
         var country = $('#country').val();
         let x=address.trim();
         if (x.length > 2 && country === "United States") {
            address = address.replace(/,/g, "");
            address = address.replace(/ /g, "+");
            address = address.replace(/#/g, "%23");
            serach_address(address,"",1);    
         }
      });


      $(document).on('click', '.address1', function(e){
         e.preventDefault();
         $('#city').val($(this).data('data1'));
         $('#state').val($(this).data('data2'));
         $('#zip').val($(this).data('data3'));
         $('#address').val($(this).data('data4'));
         $('#browsers').hide();

      });


      $(document).on('click', '.addresssec', function(e){
         e.preventDefault();
         let address=$(this).data('data2');
         $('#address').val(address);
         let secundary=$(this).data('data1');
         secundary = secundary.replace(/,/g, "");
         secundary = secundary.replace(/ /g, "+");
         secundary = secundary.replace(/#/g, "%23");
         address = address.replace(/,/g, "");
         address = address.replace(/ /g, "+");
         address = address.replace(/#/g, "%23");
         serach_address(address,secundary,2);
      });


      function actualizarInformacionDBMensajesSocket(data)
      {
         let {
                     id,
                     wam_id,
                     sid,
                     id_chat_number,
                     from,
                     to,
                     mensaje,
                     url,
                     filename,
                     template_original,
                     template_data,
                     tipo_mensaje,
                     esContacto,
                     error_codigo,
                     error_mensaje,
                     phone_number_id,
                     tipo_producto,
                     fecha_creacion,
                     status,
                     config_whatsapp_other_id,
                     user_id=null,
                     user_img=null,
                  } = data;

            let mi_objeto_mensaje = {
                     id,
                     wam_id,
                     sid,
                     chat_number_id:id_chat_number,
                     from,
                     to,
                     mensaje,
                     url,
                     filename,
                     template_original,
                     template_data,
                     tipo_mensaje,
                     esContacto,
                     error_codigo,
                     error_mensaje,
                     phone_number_id,
                     tipo_producto,
                     fecha_creacion,
                     status,
                     config_whatsapp_other_id,
                     user_id:null,
                     user_img:null,
            };
 

            obtenerInformacionDBLocal(id_chat_number, tabla_contactos_chat_indexedDb).then((miData) => {

               if (miData) {

                  console.log("registro encontrado en la base de datos local");
                  console.log(miData);

                  if(Object.keys(miData).length != 0){
                     let nuevo_arreglo = [...miData.data];

                     nuevo_arreglo.push(mi_objeto_mensaje);

                     let suma_mensajes_no_leidos_whatsapp = 0;
                     let suma_mensajes_no_leidos_sms = 0;

                     if(tipo_producto == "whatsapp")
                     {
                        suma_mensajes_no_leidos_whatsapp = 1;
                     }else{
                        suma_mensajes_no_leidos_sms = 1;
                     }

                     let cabecera = {
                        chat_number_id:              miData.chat_number_id,
                        informacion_contacto:        miData.informacion_contacto,
                        mensajes_no_leidos:          procesarVariable(miData.mensajes_no_leidos) + 1,
                        mensajes_no_leidos_sms:      procesarVariable(miData.mensajes_no_leidos_sms) + suma_mensajes_no_leidos_sms,
                        mensajes_no_leidos_whatsapp: procesarVariable(miData.mensajes_no_leidos_whatsapp) + suma_mensajes_no_leidos_whatsapp,
                        data: nuevo_arreglo,
                     };

                     actualizarSinBuscadorInformacionDBLocal(cabecera, tabla_contactos_chat_indexedDb);
                  }
   
               }else{
                  //agregamos

                  console.log("agregar registro base de datos local");
 
                  let nuevo_arreglo = [];

                  nuevo_arreglo.push(mi_objeto_mensaje);

                  let suma_mensajes_no_leidos_whatsapp = 0;
                  let suma_mensajes_no_leidos_sms = 0;

                  if(tipo_producto == "whatsapp")
                  {
                     suma_mensajes_no_leidos_whatsapp =  1;
                  }else{
                     suma_mensajes_no_leidos_sms = 1;
                  }

                  let cabecera = {
                     chat_number_id:              id_chat_number,
                     informacion_contacto:        {},
                     mensajes_no_leidos:          1,
                     mensajes_no_leidos_sms:      suma_mensajes_no_leidos_sms,
                     mensajes_no_leidos_whatsapp: suma_mensajes_no_leidos_whatsapp,
                     data: nuevo_arreglo,
                  };

                  agregarInformacionDBLocal(cabecera, tabla_contactos_chat_indexedDb);

               }

            });

             

      }

      function procesarVariable(variable) {
         if (variable === null || variable === undefined || variable === '') {
            return 0;
         }

         if (typeof variable === 'string') {
            return parseInt(variable) || 0; // Si parseInt falla (NaN), retorna 0
         }

         return variable;
      }

      
   
</script>
{/literal}

{/block}