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

      <input type="text" id="url_modulo_api_direccion_smarty" name="url_modulo_api_direccion_smarty" class="form-control url_modulo_api_direccion_smarty" value="{$url_modulo_api_direccion_smarty}" disabled hidden >
      <input type="text" id="key_modulo_api_direccion_smarty" name="key_modulo_api_direccion_smarty" class="form-control key_modulo_api_direccion_smarty" value="{$key_modulo_api_direccion_smarty}" disabled hidden  >
      <input type="text" id="host_modulo_api_direccion_smarty" name="host_modulo_api_direccion_smarty" class="form-control host_modulo_api_direccion_smarty" value="{$host_modulo_api_direccion_smarty}" disabled hidden  >
      <input type="text" id="referer_modulo_api_direccion_smarty" name="referer_modulo_api_direccion_smarty" class="form-control referer_modulo_api_direccion_smarty" value="{$referer_modulo_api_direccion_smarty}" disabled hidden  >

 
      <input
         type="text"
         value="{$imagen_url_sms}"
         disabled
         hidden
         id="URL_IMAGEN_SMS"
      />
 
      <input
         type="text"
         value="{$imagen_url_whatsapp}"
         disabled
         hidden
         id="URL_IMAGEN_WHATSAPP"
      />
 
   <!-- modal plantillas -->

{*
<select id="miSelect" style="width: 200px">
      <option value="2" data-icon="https://www.pngitem.com/pimgs/m/526-5263226_png-50-px-icon-twitter-transparent-png.png">Opción 2</option>
      <option value="3" data-icon="https://www.pngitem.com/pimgs/m/526-5263226_png-50-px-icon-twitter-transparent-png.png">Opción 3</option>
   </select>

*}
   

   {*
   
   <select class="form-control form-control-sm" id="seleccionar_medio_mensaje">
      <option value="whatsapp" data-icon="https://xhde365.com/app_dev/ui/theme/default/img/whatsapp.png" class="seleccionar_medio_whatsapp">Reply by WhatsApp</option>
      <option value="sms" data-icon="https://xhde365.com/app_dev/ui/theme/default/img/whatsapp.png" class="seleccionar_medio_sms">Reply by SMS</option>
   </select>
   *}

    

{*
<select
                        class="form-control form-control-sm"
                        id="seleccionar_medio_mensaje"
                     >
                        <option value="whatsapp" data-icon="https://xhde365.com/app_dev/ui/theme/default/img/whatsapp.png" class="seleccionar_medio_whatsapp">Reply by WhatsApp</option>
                        <option value="sms" data-icon="https://xhde365.com/app_dev/ui/theme/default/img/whatsapp.png" class="seleccionar_medio_sms">Reply by SMS</option>
                     </select>
                  </div>

*}
    

       
      <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" style=" background: white; ">
                  <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" style=" background: white; border-radius: 4px; ">
                        <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" style="background-color: white;">  
               <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">

                  <input
                     type="text"
                     class="form-control form-control-sm"
                     id="tipo_plantilla_enviar"
                     hidden
                     disabled
                  />

                  <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 quitar_tabla_informacion_plantillas" style="padding: 12px; box-shadow: none;">
                           <!-- 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="cargando_plantillas" style="display: none;">

                     <div>
                        <div class="pintar_card" style="border:none;box-shadow:none; -webkit-box-shadow: none; width: 100%;">
                           <div class="pintar_body_card container">
                           
                              <h4 style="color:#082645">Please wait while the template loads...</h4>
                              
                              <br>
                               <div style="width:100%; height:40px">
                                 <span class="loader_ws"></span>
                              </div>

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

                  </div>

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


                        {*periodo de tiempo en que se enviara la plantilla*}
                        
                        <!-- descripcion plantilla -->
                        <div class="descripcion_general_plantilla habilitar_configuracion_plantilla" style="display:none;">
                              <h5
                                 style="
                                    font-weight: 600;
                                    color: black;
                                    margin: 0px;
                                    padding: 15px;
                                    font-size: 17px;
                                 "
                              >
                                 Send template time settings
                              </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-12 col-sm-6 reset separador">
                                    <label>Date</label>
                                    <input
                                       value=""
                                       id="input_fecha_configuracion_mensaje"
                                       type="date"
                                       class="form-control form-control-sm"
                                    />
                                 </div>

                                 <div class="col-12 col-sm-6 reset">
                                    <label>Hour</label>
                                    <input
                                       id="input_hora_configuracion_mensaje"
                                       type="time"
                                       class="form-control form-control-sm"
                                    />
                                 </div>
                              </div>

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

                        {**}

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

                                         

                                             <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-3">
                                                            <select class="form-control form-control-sm" id="codigo_pais"></select>
                                                         </div>

                                                         <div class="col-sm-6">
                                                            <input type="number" id="numero_telefono" name="numero_telefono" class="form-control" autofocus placeholder="Eje: 98744564">
                                                         </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" style="float: inline-end;">{$_L['Save']}</button>
                                                      </div>
                                                </div>
                                             </div>


                                    
                                    </div>

                                 </div>



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

      <div class="modal fade" id="modalCerrarConversacion" tabindex="-1" aria-labelledby="exampleModalLabel___" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false" >
         <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___">Status of the conversation</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="motivos_conversacion_cierre" class="col-sm-3"><span class="h6">Reason for the conversation:</span><span class="text-danger">*</span></label>
                                                         <div class="col-sm-9">

                                                            <textarea id="motivos_conversacion_cierre" name="motivos_conversacion_cierre" class="form-control" autofocus row="4"></textarea>

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

                                                <div class="col-md-12 col-sm-12">
                                                      <div class="mb-3 row">
                                                         <label for="producto_interes_cierre" class="col-sm-3"><span class="h6">Product of interest</span><span class="text-danger">*</span></label>
                                                         <div class="col-sm-9">

                                                            <select class="form-select tener_producto_interes_cierre" name="producto_interes_cierre" id="producto_interes_cierre">
                                                                   
                                                            </select>
 
                                                         </div>
                                                      </div>
                                                </div>

                                                <div class="col-md-12 col-sm-12">
                                                      <div class="mb-3 row">
                                                         <label for="fecha_contacto_cierre" class="col-sm-3"><span class="h6">Suggest next date contact</span><span class="text-danger"></span></label>
                                                         <div class="col-sm-9">
                                                            <input type="date" id="fecha_contacto_cierre" name="fecha_contacto_cierre" class="form-control">
                                                         </div>
                                                      </div>
                                                </div>

                                                <div class="col-md-12 col-sm-12">
                                                      <div class="mb-3 row">
                                                         <label for="estado_conversacion" class="col-sm-3"><span class="h6">Conversation status</span><span class="text-danger">*</span></label>
                                                         <div class="col-sm-9">

                                                            <select class="form-select tener_estado_conversacion" name="estado_conversacion" id="estado_conversacion">
                                                                   
                                                            </select>
 
                                                         </div>
                                                      </div>
                                                </div>

                                                <div class="col-md-12 col-sm-12">
                                                   <p style="color:red; font-weight: 700;" id="mensaje_advertencia"></p>
                                                </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_addCerrarConversacion" style=" float: inline-end; ">Update changes</button>
                                                      </div>
                                                </div>
                                             </div>


                                          </form>
                                    </div>

                                 </div>



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

 
      <div class="modal fade" id="modal_asignar_staff_contactos" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel3" 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="staticBackdropLabel3"> Search Staff </span></h5>
               
               <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
               </div>

               <div class="modal-body pantalla_modal" style=" background: white; ">
                  <div style="display: flex;" class=" ">
                     <input
                        type="text"
                        placeholder="search"
                        class="form-control form-control-sm buscador_asignar_staff ocultar_buscador_y_tabla"
                        style="margin-right: 10px"
                     />
                     <button
                        class="btn ocultar_buscador_y_tabla"
                        id="btn_filtro_buscador_staff"
                        type="button"
                        style="border-color: #d3cac0;border: 1px solid #d3cac0;background-color: white;"
                     >
                        Search
                     </button>
                  </div>

                  <br />

                  <div class="cargando_login_staff" style="display: none;">
                     <div>
                        <div class="pintar_card" style="border:none;box-shadow:none; -webkit-box-shadow: none; width: 100%;">
                           <div class="pintar_body_card container">
                           
                              <h4 style="color:#082645">Please wait while the template loads...</h4>
                              
                              <br>
                              <div style="width:100%; height:40px">
                                 <span class="loader_ws"></span>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>

                  <div class="row ocultar_buscador_y_tabla">
                     <div class="col-sm-12" style=" background: white; border-radius: 4px; ">
                        <div class="table-responsive" style="height: 401px">
                           <!-- Agregado -->
                           <table class="table">
                              <thead>
                                 <tr>
                                    <th class="centrar">Fullname</th>
                                    <th class="centrar">Username</th>
                                    <th class="centrar">User Type</th>
                                    <th class="centrar"></th>
                                    
                                 </tr>
                              </thead>
                              <tbody class="tbody_asignar_staff">
                              {*
                              
                                 <tr>
                                    <td class="centrar">Juan</td>
                                    <td class="centrar">Juan@live.com</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>

      <div class="modal fade" id="modal_asignar_clientes_contactos" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel4" 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="staticBackdropLabel4"> Search Customer </span></h5>
               
               <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
               </div>
               <div class="modal-body pantalla_modal" style=" background: white; ">
                  <div style="display: flex">
                     <input
                        type="text"
                        placeholder="search"
                        class="form-control form-control-sm buscador_asignar_clientes"
                        style="margin-right: 10px"
                     />
                     <button
                        class="btn"
                        id="btn_filtro_buscador_clientes"
                        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" style=" background: white; border-radius: 4px; ">
                        <div class="table-responsive" style="height: 401px">
                           <!-- Agregado -->
                           <table class="table">
                              <thead>
                                 <tr>
                                    <th class="centrar">Account</th>
                                    <th class="centrar">Phone</th>
                                    <th class="centrar">Email</th>
                                    <th class="centrar">Address</th>
                                    <th class="centrar"></th>
                                    
                                 </tr>
                              </thead>
                              <tbody class="tbody_asignar_clientes">
                              {*
                              
                                 <tr>
                                    <td class="centrar">Juan</td>
                                    <td class="centrar">Juan@live.com</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>

      <div class="modal fade" id="ventana_confirmacion" tabindex="-1" aria-labelledby="exampleModalLabel__ventanaconfirmacion" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false" >
         <div class="modal-dialog modal-dialog-centered"  >
            <div class="modal-content" style="background-color:white">
               <div class="modal-header">
               <h3 class="titulo_modal_confirmar">Estas seguro de eliminar</h3>
                  <button type="button" class="btn-close "  id="btn_close_ventana_confirmacion" ></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>

                                          <input class="tipo_modal_confirmar" hidden disabled/> 

                                          <div class="row">
                                                <div class="col-md-12 col-sm-12">
 
                                                      <h4 class="mensaje_modal_confirmar" style="text-align:center; color:black">Estas seguro de eliminar</h4>
                                                       

                                                       <p class="mensaje_espera_moda_confirmacion mt-3" style="text-align:center; color:red; font-weight:600">Espere mientras termina el proceso</p>
                                                </div>
                                           
                                             </div>
 

                                             <div class="row mt-2">
                                                <div class="col-md-12">
                                                      <div style=" float: inline-end; ">
                                                         <button class="btn btn-primary me-2" type="button" id="btn_cerrar_ventana_confirmacion" style=" background: #001b3b; ">No</button>

                                                         <button class="btn btn-primary " type="button" id="btn_aplicar_ventana_confirmacion" style=" background: red; ">Remove</button>
                                                      </div>
                                                </div>
                                             </div>
                                    </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" style="display: none">
            <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>


         {*fin empresas*}
         <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; display:none; padding:5px; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;">
                  Whatsapp/SMS 
               </a>

               <a class="btn  borde-boton placeholder-glow waves-effect waves-themed" type="button" id="quitar_placeholder_cambiar_titulo_config"   style="border-color: #d3cac0 !important;border: 1px solid #d3cac0 !important;width:100%;background-color:white;color:black; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; padding:5px;">
                  <span class="placeholder col-6" style="width: 100%; border-radius: 4px;"></span>
               </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>
         {*fin empresas*}

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

            {* canal mis asiganos entre otros *}
            <div class="col-12 col-sm-6 col-md-6 col-lg-6" style="padding: 0px; padding-right: 2px;" >
        
               <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="contactos_staff_asignados" 
                        data-bs-toggle="dropdown" 
                        aria-expanded="false" 
                        style="border-color: #d3cac0 !important; border: 1px solid #d3cac0 !important; width:100%; background-color:white; color:black; display:none; padding:5px; text-align: left;box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; padding:5px;">
                        
                        <i class="fa fa-users" style=" font-size: 14px; color: #434343; padding-left:4px "></i> 
                        <span id="cambiar_texto_contacto_seleccionado_staff" data-tipo_usuario="2" data-tipo="todos">Todos</span>
                     </a>

                     <a class="btn  borde-boton placeholder-glow waves-effect waves-themed quitar_placeholder_elementos_tipo_select" type="button" style="border-color: #d3cac0 !important;border: 1px solid #d3cac0 !important;width:100%;background-color:white;color:black; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; padding:5px; ">
                        <span class="placeholder col-6" style="width: 100%; border-radius: 4px;"></span>
                     </a>

                     <ul class="text-center dropdown-menu item_dropdown_contactos_staff" aria-labelledby="contactos_staff_asignados"  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; max-height: 300px; overflow-y: auto;">
                        
                      
                     </ul>
                     
                  </div>
                  
               </div>
             
               {* fin col *}
            </div>

            <div class="col-12 col-sm-6 col-md-6 col-lg-6" style=" padding: 0px;  padding-left: 2px;">
        
               <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="etapas_staff_asignados" 
                        data-bs-toggle="dropdown" 
                        aria-expanded="false" 
                        style="border-color: #d3cac0 !important; border: 1px solid #d3cac0 !important; width:100%; background-color:white; color:black; display:none; padding:5px; text-align: left;box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; padding:5px;">
                        <i class="fa fa-road" style=" font-size: 14px; color: #434343; padding-left:4px "></i> 
                        <span id="cambiar_texto_contacto_seleccionado_staff_etapas" data-etapa_id="0" data-tipo_etapa="2">Todos</span>
                     </a>

                     <a class="btn  borde-boton placeholder-glow waves-effect waves-themed quitar_placeholder_elementos_tipo_select" type="button" style="border-color: #d3cac0 !important;border: 1px solid #d3cac0 !important;width:100%;background-color:white;color:black; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; padding:5px; ">
                        <span class="placeholder col-6" style="width: 100%; border-radius: 4px;"></span>
                     </a>

                     <ul class="text-center dropdown-menu item_dropdown_contactos_staff_etapa" aria-labelledby="etapas_staff_asignados"  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; max-height: 300px; overflow-y: auto;">
                        

                     </ul>
                     
                  </div>
                  
               </div>
             
          
             
            
               {* fin col *}
            </div>

         </div>

         <div class="tile tile-alt" id="messages-main" >
            <div class="ms-menu">
               <div class="ms-user clearfix" style="min-height:71px; align-content: center;">

                  {* 
                  <img
                     src="{$imagen_perfil}"
                     alt=""
                     class="img-avatar pull-left"
                  />
                  <div>
                     {$fullname} <br />
                     {$username}
                  </div>
                  *}

                  <div class="mostrar_conjunto_botones row" style=" padding: 0px; ">

                     <div class="col-4" style="padding:0px; text-align:center;">

                        <button
                           type="button"
                           class="btn borde-boton btn-block"
                           id="btn_search_contacto"
                           style="margin-bottom: 4px;width: 40px;background-color: white;color: #434343; border: 1px solid rgb(211, 202, 192) !important; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;"
                        >
                           <i class="fa fa-search" style="font-size:13px; display: flex; justify-content: center; align-items: center;"></i>  
                        </button>

                     </div>

                     <div class="col-4" style="padding:0px; text-align:center;">

                        <button
                           disabled
                           type="button"
                           class="btn borde-boton btn-block"
                           id="btn_elejir_contacto"
                           style="margin-bottom: 4px;width: 40px;background-color: white;color: #434343; border: 1px solid rgb(211, 202, 192) !important; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;"
                        >
                           <i class="fa fa-user-plus" style="font-size:13px; display: flex; justify-content: center; align-items: center;"></i>  
                        </button>

                     </div>


                     <div class="col-4" style="padding:0px; text-align:center;">

                        <button
                           disabled
                           type="button"
                           class="btn borde-boton btn-block"
                           id="btn_new_contacto"
                           style="margin-bottom: 4px;width: 40px;background-color: white;color: #434343; border: 1px solid rgb(211, 202, 192) !important; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;"
                        >
                           <i class="fa fa-phone" style="font-size:13px; display: flex; justify-content: center; align-items: center;"></i>  
                        </button>
                     </div>

                      

                  </div>
                  
                  {*Buscador*}

                  <div class="row mostras_ocultar_buscador_contactos" style="margin: 0px;  padding: 0px; display: none; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; border-radius: 4px;">

                     <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: #434343;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>

                  {*fin buscador*}

               </div>
 
               <div class="  ocultar_mostrar_botones_cerca_contactos" style="display: none">
 
                  <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">
            
            {*
                     <img
                        src="http://localhost:50001/app_dev_parnerts/ui/theme/default/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">prueba</a></span
                     >
                  
                  *}
            
            <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>
                  <div class="pull-left hidden-xs cabecera_informacion"  style=" width: 100%;  ">
                   

                     <div class="row padding_responsivo_500px" style="max-width: 100%;">

                        <div class="col-12 col-sm-8">
                           
                           <div class="row">
                           
                              <div class="col-12 col-sm-6" style=" border-right: 1px solid #b5b5b5; ">
                              
                                 <p class="quitar_paddin_margen" style=" font-weight: 600; color: #082645; ">
                                    Desconocido
                                 </p>

                                 <p class="quitar_paddin_margen" style=" font-size: 11px; ">
                                    50492323
                                 </p>

                              </div>

                              <div class="col-12 col-sm-6 margin_responsivo_500px">
                                 
                                 <select  class="form-select form-select-sm tenerEtapaConversacionSelect estilo_select" >
                                    <option value="">New </option>
                                    <option value="">Old </option>
                                    
                                 </select>
                              
                              </div>

                           </div>

                           

                        </div>

                        <div class="col-12 col-sm-4 margin_responsivo_500px" >

                           <ul class="  actions ocultarBarraOpcionesChat" style=" float: right; ">
                     
                              <li id="abrirEstadoConversacion" title="Status of the conversation">
                                 <i
                                    class="fa fa-folder"
                                    style="
                                       font-size: 18px;
                                       margin-left: 10px;
                                       color: #434343;
                                       cursor: pointer;
                                    "
                                 ></i>
                              </li>

                              <li id="marcarChatLeido" title="Mark Chat Read">
                                 <i
                                    class="fa fa-check"
                                    style="
                                       font-size: 18px;
                                       margin-left: 10px;
                                       color: #434343;
                                       cursor: pointer;
                                    "
                                 ></i>
                              </li>
                              <li id="abrirModalAgregarContacto" title="Add Contact">
                                 <i
                                    class="fa fa-user-plus"
                                    style="
                                       font-size: 18px;
                                       margin-left: 10px;
                                       color: #434343;
                                       cursor: pointer;
                                    "
                                 ></i>
                              </li>
                              <li class="CerrarChat" title="Close Chat">
                                 <i
                                    class="fa fa-times"
                                    style="
                                       font-size: 18px;
                                       margin-left: 10px;
                                       color: #434343;
                                       cursor: pointer;
                                    "
                                 ></i>
                              </li>
                              <li class="dropdown">
                                 <div id="setting-offcanvas">
                                    <i
                                       class="fa fa-bars"
                                       style="
                                          font-size: 18px;
                                          margin-left: 10px;
                                          color: #434343;
                                          cursor: pointer;
                                       "
                                    ></i>
                                 </div>
                              </li>
                           </ul>
                        
                        </div>

                        

                     </div>
                      
                  

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


            {*
            <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_choose_user">
                  <span class="active-word-wrap">
                     <a style="cursor: pointer" class="choose_chat"
                     >You can choose a user to chat</a
                     >
                  </span>
               </div>
            </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>
                     *}
                      
                     <span class="loader_ld me-4"></span>

                     Loading messages...
                  </div>
               </div>



               

               

               <!--Sin Mensajes-->
               <div class="sin_mensaje cuerpo_sin_mensajes">
                  <div class="pintar_card"  style="border:none;box-shadow:none; -webkit-box-shadow: none;">
                     <div class="pintar_body_card container">
                        <h4 style="color:#082645">Let's start a conversation!</h4>


                         {if $cantidad_cuentas_whatsapp eq "1"}

                           <span style="color:#082645">
                              You don't have an account set up yet. To do so, go to
                           </span>
                           
                           <a style="color:#082645" href="{$url_setting_CRM_Parnerts_prepared}" target="_blank"> Settings > Chat Settings. </a>
                           
                         {/if}

                        <br />
                        <img
                           src="{{APP_URL}}/storage/system/{{$config['logo_default']}}"
                           alt=""
                           style="max-width: 100%; width: 213px;height: 152px"
                        />


                        <div style="width:100%; height:44px">
                           
                        </div>
                     </div>
                  </div>
               </div>

               <!--CARGANDO CHAT-->
               <div
                  class="sin_mensaje cuerpo_cargando_mensajes"
                   style="display: none"
               >
                  <div class="pintar_card" style="border:none;box-shadow:none; -webkit-box-shadow: none;">
                     <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>

                        *}

                        <h4 style="color:#082645">Let's start a conversation!</h4>

                        {if $cantidad_cuentas_whatsapp eq "1"}
                           <span style="color:#082645">
                              You don't have an account set up yet. To do so, go to
                           </span>
                           
                           <a style="color:#082645" href="{$url_setting_CRM_Parnerts_prepared}" target="_blank"> Settings > Chat Settings. </a>
                           
                         {/if}

                        <br>
                        <img
                           src="{{APP_URL}}/storage/system/{{$config['logo_default']}}"
                           alt=""
                           style="max-width: 100%; width: 213px;height: 152px"
                        />

                        <div style="width:100%; height:40px">
                           <span class="loader_ws"></span>
                        </div>
                         

 

                     </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 blur-in" style="display: none">
                  <div style="width: 100%; margin-bottom: 10px;" class="ocultar_mostrar_medio_mensaje">
 
                     {*  
                     <select
                        class="form-control form-control-sm"
                        id="seleccionar_medio_mensaje"
                     >
                        <option value="whatsapp" data-icon="https://xhde365.com/app_dev/ui/theme/default/img/whatsapp.png" class="seleccionar_medio_whatsapp">Reply by WhatsApp</option>
                        <option value="sms" data-icon="https://xhde365.com/app_dev/ui/theme/default/img/whatsapp.png" class="seleccionar_medio_sms">Reply by SMS</option>
                     </select>
                     *}

                     <select class="form-control form-control-sm" id="seleccionar_medio_mensaje">
                        <option value="whatsapp" data-icon="{{APP_URL}}/ui/theme/default/img/whatsapp.png" class="seleccionar_medio_whatsapp">Reply by WhatsApp</option>
                        <option value="sms" data-icon="{{APP_URL}}/ui/theme/default/img/whatsapp.png" class="seleccionar_medio_sms">Reply by SMS</option>
                     </select>
                  </div>

                  <div class="conjunto-msb-footer ocultar_opciones_enviar_mensajes blur-in" >
                     <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="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 class="advertencia_mensaje_plantilla" style="display: none; width: 100%; min-height: 66px; background: #E6EFFF; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; border-radius: 5px; margin: 0px">
                     <div class="whatsapp-container">
                        <div class="whatsapp-icon">
                              <img src="{{APP_URL}}/ui/theme/default/img/whatsapp.png"   style="height: 20px; width: 20px;" />
                        </div>
                        <div class="whatsapp-text">
                              <h4>WhatsApp customer service window closed</h4>
                              <p>WhatsApp doesn't allow sending messages after 24 hours from a contact's last reply. To continue, please send an approved message template.</p>
                        </div>
                     </div>
                  </div>
                  
                  <div class="ocultar_opciones_menu_mensajes blur-in" style="width: 100%; height:30px; margin-top:0px;  ">

                     <button
                        id="abrir_plantillas_cron"
                        class="btn_footer_enviar"
                        style="width:32px;"
                        type="button"
                     >
                        <i class="fa fa-clock"></i>
                     </button>
                     
                     <button
                        id="abrir_plantillas"
                        class="btn_footer_enviar "
                        style="width:32px;"
                        type="button"
                     >
                        <i class="fa fa-whatsapp"></i>
                     </button>

                     <button
                        id="input_document"
                        class="btn_footer_enviar "
                        style="width:32px;"
                        type="button"
                     >
                        <i class="fa fa-file" style=" font-size: 22px; "></i>
                     </button>

                     <button
                        id="selectPhotos"
                        class="btn_footer_enviar "
                        style="width:32px;"
                        type="button"
                     >
                        <i class="fa fa-image" style=" font-size: 22px; "></i>
                     </button>

                     <button
                        id="enviar_plantilla_whatsapp"
                        class="custom-btn" style="margin-top: 7px;"
                     >
                       Send WhatsApp message template
                     </button>

                     <button
                        id="enviar_plantilla_whatsapp_cron"
                        class="custom-btn" style="margin-top: 7px; background: green;"
                     >
                       Schedule Template Message
                     </button>

                     <button
                        id="enviar_comentarios"
                        class="btn_footer_enviar"
                        style="float: right; width: 50px;"
                     >
                        <i class="fa fa-comment"></i>
                     </button>

                      

                  </div>

                  {*seccion enviar comentarios*}
                  <div class="conjunto-msb-footer ocultar_opciones_enviar_mensajes_comentarios blur-in" style="display: none">
                     <div class="div_footer_text_area">
                        <textarea
                           placeholder="What's on your mind... "
                           id="mi-comentario-mensaje-texto"
                           style=" min-height: 129px; "
                        ></textarea>
                     </div>

                     <div class="botones_grupo">
                        
                        <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="cerrar_mensaje_comentario"
                              class="btn_footer_enviar_comentario"
                           >
                              <i class="fa fa-times" style=" font-size: 22px;  "></i>
                           </button>

                           <button
                              id="enviar_mensaje_comentario" 
                              class="btn_footer_enviar_comentario"
                           >
                              <i class="fa fa-paper-plane-o" style=" font-size: 22px; "></i>
                           </button>

                           
                        </div>
                     </div>

                  </div>
                   

                  <div class="ocultar_mensaje_comentario" style=" margin-top: 4px; "> 
                     <span style="font-style: italic;"> Add comment to the conversation (It will not be sent to the contact) </span>
                  </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="row" style=" height: 100vh; padding: 0px; margin: 0px; ">

            <div class="col-11" style=" padding: 0px; ">

               <div class="offcanvas-header" >
                  <h3  style=" margin: 4px; " class="offcanvas_titulo">Contacts Settings</h3>

                  {*
                     <button type="button" class="btn-close-offcanvas">
                        <i class="fa fa-times close-icon" id="close-icon"></i>
                     </button>
                  *}
                   
               </div>


                

               <div class="card_seguro_desea_crear_usuario">

                  <div class="card mb-3" style=" margin: 13px; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; ">
                     <div class="card-body position-relative">
                        <div class="row">
                           <div class="col-lg-12">
                              <h3>Do you want to create a CRM user for this contact?</h3>
                           <p class="mt-2">
                              A new user will be created and will remain in the CRM with the requested information. If you agree, click on the yes button.
                           </p>
                          
                           <div class="row">

                              <div class="col-6">
                              
                                 <button
                                    class="btn btn-sm yes_crear_usuario_crm"
                                    style="margin-bottom: 4px;width: 100%;background-color: #001b3b;color: white;border: 1px solid rgb(211, 202, 192) !important;box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;"
                                 >
                                    Yes
                                 </button>

                              </div>


                              <div class="col-6">
                                 
                                 <button
                                    class="btn btn-sm no_crear_usuario_crm"
                                    style="margin-bottom: 4px;width: 100% ;background-color: white;color: #434343; border: 1px solid rgb(211, 202, 192) !important; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;"
                                 >
                                    No
                                 </button>

                              </div>
                           
                           </div>

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

               <div class="card_mostrar_informacion" style="display: none">

                  <div class="informacion_staff">

                     <div class="card mb-3" style=" margin: 13px; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; ">
                        <div class="card-body position-relative">
                           <div class="row">
                              <div class="col-lg-12">

                                 <h3>General Staff Information</h3>

                                 <div class="General_STAFF"> 
                                  
                                 </div>
                                 

                                 <div class="row">

                                    <div class="col-12">
                                       
                                       <button
                                          class="btn btn-sm select_new_staff"
                                          style="margin-bottom: 4px;width: 100%;background-color: #001b3b;color: white;border: 1px solid rgb(211, 202, 192) !important;box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;"
                                       >
                                          Select new staff
                                       </button>

                                    </div>

                                    <div class="col-12 ocultar_mostrar_btn_deselect_staff">
                                       
                                       <button
                                          class="btn btn-sm deselect_staff"
                                          style="padding: 5px; width: 100% ;background-color: red; color: white; border: 1px solid rgb(211, 202, 192) !important; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;"
                                       >
                                          Remove staff
                                       </button>

                                    </div>
                                  
                                 </div>

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

                  <div class="informacion_customers mt-2" >

                     <div class="card mb-3" style=" margin: 13px; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; ">
                        <div class="card-body position-relative">
                           <div class="row">
                              <div class="col-lg-12">

                                 <h3>General Customer Information</h3>

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

                                    <div class="col-12">
                                       
                                       <button
                                          class="btn btn-sm select_new_customers"
                                          style="margin-bottom: 4px;width: 100%;background-color: #001b3b;color: white;border: 1px solid rgb(211, 202, 192) !important;box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;"
                                       >
                                          Select new Customer
                                       </button>

                                    </div>


                                    <div class="col-12 ocultar_mostrar_btn_deselect_customers">
                                       
                                       <button
                                          class="btn btn-sm deselect_customers"
                                          style="padding: 5px; width: 100% ;background-color: red; color: white; border: 1px solid rgb(211, 202, 192) !important; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;"
                                       >
                                          Remove customer
                                       </button>

                                    </div>
                                 
                                 </div>

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

               </div>

               <div class="detalle_ingreso_clientes">

                     <div class="row reset" style="padding-left: 10px; padding-right: 10px" >
   
                        <div class="col-sm-12 mt-3">

                           <label style="color:black;">Outstanding balance</label>
                           <input type="text"  class="form-control form-control-sm" id="saldo_pendiente_ingresos_clientes" disabled  >
                              
                        </div>

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

                           <label style="color:black;">Selections period:</label>
                           <input type="text" name="reportrange" class="form-control form-control-sm" id="reportrange"  >
                              
                        </div>

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

                           <label style="color:black;">Total billed</label>
                           <input type="text" class="form-control form-control-sm" id="saldo_facturado_ingresos_clientes" disabled >
                              
                        </div>

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

                           <button class="btn btn-sm filtrar_detalle_ingresos_clientes waves-effect waves-themed" style="margin-bottom: 4px;width: 100%;background-color: #001b3b;color: white;border: 1px solid rgb(211, 202, 192) !important;box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;">
                              Filter information
                           </button>
                              
                        </div>

                        

                        <hr class="mt-2"/>

                        
                        <div class="col-sm-12" style=" background: white; border-radius: 4px; ">
                           <div class="table-responsive" >
                              <!-- Agregado -->
                              <table class="table">
                                 <thead>
                                    <tr>
                                       <th class="centrar">Product</th>
                                       <th class="centrar">Date</th>
                                       <th class="centrar">Price</th>
                                       <th class="centrar">Invocies</th>
                                    </tr>
                                 </thead>
                                 <tbody class="tbody_detalle_ingresos_clientes">

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

               </div>

               <div class="historial_cambio_clientes">

                     <div class="row" style="padding-left: 10px; padding-right: 10px" >

                        <div class="col-sm-12 mt-3">
                           <label style="color:black;">Selections period:</label>
                           <input type="text" name="reportrange_hhc" class="form-control form-control-sm" id="reportrange_hhc"  >
                        </div>
   
                        <div class="col-sm-12 mt-3">
                           <button class="btn btn-sm filtrar_hhc waves-effect waves-themed" style="margin-bottom: 4px;width: 100%;background-color: #001b3b;color: white;border: 1px solid rgb(211, 202, 192) !important;box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;">
                              Filter information
                           </button>                              
                        </div>

                        <hr class="mt-2"/>

                        <div class="imprimir_card_hcc"></div>
                         
                     </div>

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

            <div class="col-1" style="border: 1px solid #b7b7b7;padding: 0px; background-color: #001b3b;">
            
               {*  *}
               <div style=" width: 100%; height: 56px; border-bottom: 1px solid #b7b7b7; ">

                  <button type="button" class="btn hover_boton_setting btn-close-offcanvas" >
                     <i class="fa fa-times" style="font-size:14px;display: flex;justify-content: center;align-items: center;color: white;"  ></i>  
                  </button>

               </div>
               {*  *}

               {*  *}
               <div style=" width: 100%; height: 56px; border-bottom: 1px solid #b7b7b7; ">

                  <button type="button" class="btn hover_boton_setting  mostrarInformacionContacto"  >
                     <i class="fa fa-user" style="font-size:14px;display: flex;justify-content: center;align-items: center;color: white;"  ></i>  
                  </button>

               </div>
               {*  *}

               {*  *}
               <div style=" width: 100%; height: 56px; border-bottom: 1px solid #b7b7b7; ">

                  <button type="button" class="btn hover_boton_setting mostrarIngresosClientes"  >
                     <i class="fa fa-history" style="font-size:14px;display: flex;justify-content: center;align-items: center;color: white;"  ></i>  
                  </button>

               </div>
               {*  *}

               {*  *}
               <div style=" width: 100%; height: 56px; border-bottom: 1px solid #b7b7b7; ">

                  <button type="button" class="btn hover_boton_setting mostrarHistorialConversacionesClientes"  >
                     <i class="fa fa-list-ul" style="font-size:14px;display: flex;justify-content: center;align-items: center;color: white;"  ></i>  
                  </button>

               </div>
               {*  *}

            </div>

         </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 WS_NOMBRE_SOCKET = document.getElementById('ws_nombre_socket').value;

        var start = moment().subtract(29, 'days');
        var end = moment();

        var startDate = moment();
        var endDate = moment();
 
         $("#btn_elejir_contacto").css("display", "");

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

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

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

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

         $("#btn_elejir_contacto").prop("disabled", true);
         $("#btn_new_contacto").prop("disabled", true);
         $("#btn_search_contacto").prop("disabled", true);

          

   
          

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

         //cargando mensajes de chat
         $(".cuerpo_cargando_mensajes").css("display", "");
         //return;
         
          
         $(".cuerpo_sin_mensajes").css("display", "none");
 
 
         var BASE_DATOS_LOCAL_INDEXEDDB = null;
         var databases_name_indexedDb = BASE_DE_DATOS_GLOBAL;
         var tabla_contactos_chat_indexedDb = BASE_DE_DATOS_GLOBAL;

         abrirYCrearBaseDatos();

         evento_ventana_confirmacion();

          


         /*
         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);
 
               BASE_DATOS_LOCAL_INDEXEDDB.onversionchange = function (event) {
                  //alert("A new version of this page is ready. Please reload!");
                  //BASE_DATOS_LOCAL_INDEXEDDB.close();
               };

               consultarIdContactosInformacionDBLocal(tabla_contactos_chat_indexedDb).then((miData) => {

                  let mi_arreglo_indexdb = [];

                  if (miData.type == "success") {
                     mi_arreglo_indexdb = miData.data || [];

                     /*

                     const conOrden = mi_arreglo_indexdb
                        .filter(item => item.orden && !isNaN(parseInt(item.orden)))
                        .sort((a, b) => parseInt(a.orden) - parseInt(b.orden));
 
                     const sinOrden = mi_arreglo_indexdb
                        .filter(item => !item.orden || isNaN(parseInt(item.orden)));

                     mi_arreglo_indexdb = [...conOrden, ...sinOrden];

                     */

                     mi_arreglo_indexdb = mi_arreglo_indexdb.sort((a, b) => {
                        return Number(b.orden) - Number(a.orden);
                     });

                  }
                   
                  ejecutarApiConsolidadas(mi_arreglo_indexdb);

               });


               // fin
            };

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

               ejecutarApiConsolidadas([]);
            };
         }
         

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

         const consultarIdContactosInformacionDBLocal = (nombre_tabla) => {

            return new Promise((resolve, reject) => {

               if (BASE_DATOS_LOCAL_INDEXEDDB == null) {
 
                     resolve({
                        type: "error",
                        data: [],
                        mensaje: "Error al obtener los datos de IndexedDB: BASE_DATOS_LOCAL_INDEXEDDB == null",
                     });

                     return;
               }

               console.log("Lista de tareas consultarIdContactosInformacionDBLocal");

               const transaction = BASE_DATOS_LOCAL_INDEXEDDB.transaction([nombre_tabla], "readonly");
               const objectStore = transaction.objectStore(nombre_tabla);
               const requestGetAll = objectStore.getAll();

               requestGetAll.onsuccess = (event) => {

                     try {

                        const data = event.target.result || [];

                        const sortedData = data.sort((a, b) => a.orden - b.orden);

                        //console.log("sortedData");
                        //console.log(sortedData);
                        
                        resolve({
                              type: "success",
                              data: sortedData,
                        });

                     } catch (error) {

                        //reject(new Error("Error al procesar los datos: " + error.message));
                        
                        resolve({
                              type: "error",
                              data: [],
                              mensaje: "Error al procesar los datos: " + error.message,
                        });

                     }
               };

               requestGetAll.onerror = (event) => {
                  //reject(new Error("Error al obtener los datos de IndexedDB: " + event.target.error));

                  resolve({
                        type: "error",
                        data: [],
                        mensaje: "Error al obtener los datos de IndexedDB requestGetAll.onerror: " + event.target.error,
                  });

               };

               transaction.onerror = (event) => {
                  //reject(new Error("Error en la transacción: " + event.target.error));

                  resolve({
                        type: "error",
                        data: [],
                        mensaje: "Error al obtener los datos de IndexedDB transaction.onerror: " + event.target.error,
                  });
               };
            });
         };
 
         //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" },
         ];

 
         //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;
         var ZONA_HORARIA_CONFIGURACION_WHATSAPP_SMS = null;

         var FECHA_ULTIMO_MENSAJE_PLANTILLA = 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 isEnabledWhatsapp = null;
         var isEnabledSMS = 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 = [];

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

         var lista_productos = [];
         
         var listado_custumers = [];

         var listado_staff = [];

         var resultado_consulta_plantillas_whatsapp = {};



         async function ejecutarApiConsolidadas(mi_arreglo_indexdb = [])
         {

 

            /* 
            if(mi_arreglo_indexdb.length != 0)
            {
               var lista_contactos_html = "";

               mi_arreglo_indexdb.map((data) => data.informacion_contacto).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();

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

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

            console.log("mi_arreglo_indexdb ORIGINAL");
            console.log(mi_arreglo_indexdb);

            //let listado_chat_number_id = mi_arreglo_indexdb.map((element) => {
            //   return element.chat_number_id;
            //});

            let listado_chat_number_id = mi_arreglo_indexdb.map((element) => element.chat_number_id ).filter((value) => {
                           if (value === null || value === undefined) return false;
                           const numValue = Number(value);
                           return !isNaN(numValue) && /^\d+$/.test(value);
                        }) || [];

            console.log("listado_id");
            console.log(listado_chat_number_id);

            //console.log("listado_id");
            //console.log(listado_chat_number_id.join(","));

            let informacion_filtrada = {
               tipo: "admin",
               staff_id: "",
               filtrar_id: listado_chat_number_id.join(","),
               //filtrar_id: "56,31,37,39,60",
            };

            //simulacion de id 
            //filtrar_id: "56,31,37,39,60", //63 no lo incluimos para simular que no lo tenemos

            console.log("JSON.stringify(informacion_filtrada)"); 
            console.log(JSON.stringify(informacion_filtrada)); 

            $.ajax({
               type: "POST",
               url: URL_BASE + "social/configuracion-api-consolidadas/",
               data: JSON.stringify(informacion_filtrada), 
               contentType: "application/json", 
               success: function (response) {

   
                  try {

                     let info = JSON.parse(response);

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

                        lista_productos = info.listado_productos_servicios || [];   

                        let html_productos = plantilla_option_select_selected("", "Select a product", true);

                        lista_productos.forEach((element) => {
                           let { id, name } = element;

                           html_productos += plantilla_option_select_etapa(id, name);
                        }); 

                        $(".tener_producto_interes_cierre ").html(html_productos);
 
                        // 

                        LISTADO_CONFIGURACION_WHATSAPP_SMS = info.config || [];

                        lista_contactos          = info.contacts || [];
                        lista_etapa_conversacion = info.etapa_conversacion || [];

                        let filtrar_mostrar_etapa = lista_etapa_conversacion.filter((element) => element.mostrarEtapa == 1 && element.activo == 1 );

                        if(filtrar_mostrar_etapa.length != 0)
                        {

                           html_listado_etapa_conversacion_select = plantilla_option_select_selected("", "Select a stage", true);

                           let mi_html_staff_etapa = htmlCambiarStaffEtapa("Todos", 2, 0);

                           filtrar_mostrar_etapa.forEach((element) => {
                              let { id, nombre_etapa, mostrarEtapa } = element;

                              html_listado_etapa_conversacion_select += plantilla_option_select_etapa(id,nombre_etapa);

                              //en caso de que sea seleccionadble plantilla_option_select_selected
                           });

                           lista_etapa_conversacion.forEach((element) => {
                              let { id, nombre_etapa, mostrarEtapa } = element;

                              mi_html_staff_etapa += htmlCambiarStaffEtapa(nombre_etapa, 1, id);
                           });
                        
 
                           $(".item_dropdown_contactos_staff_etapa ").html(mi_html_staff_etapa);

                        }

                        let filtrar_noMostrar_etapa = lista_etapa_conversacion.filter((element) => element.mostrarEtapa == 2 && element.activo == 1 );
 
                        if(filtrar_noMostrar_etapa.length != 0)
                        {
                           let html_no_mostrar = plantilla_option_select_selected("", "Select a state", true);

                           filtrar_noMostrar_etapa.forEach((element) => {
                              let { id, nombre_etapa, mostrarEtapa } = element;

                              html_no_mostrar += plantilla_option_select_etapa(id,nombre_etapa);

                           });
 
 
                           $(".tener_estado_conversacion ").html(html_no_mostrar);
                        }

                        if(listado_chat_number_id.length == 0)
                        {
                           lista_contactos = info.contacts || [];
                        }else{

                          let existe_data = info.contacts || [];

                          if(true)
                          {

                           console.log("CAYO AQUI")
                           
                           let miArrListaContactosTemporal = [];


                           mi_arreglo_indexdb.forEach((element_lvl2) => {
                                       

                              element_lvl2.mensajes_no_leidos = "0";
                              element_lvl2.mensajes_no_leidos_whatsapp = "0";
                              element_lvl2.mensajes_no_leidos_sms = "0";
                              element_lvl2.ultimo_mensaje = element_lvl2.ultimo_mensaje;

                              element_lvl2.id_etapa_conversacion          = element_lvl2.id_etapa_conversacion || "";
                              element_lvl2.nombre_etapa_conversacion      = element_lvl2.nombre_etapa_conversacion || "";
                              element_lvl2.color_fondo_etapa_conversacion = element_lvl2.color_fondo_etapa_conversacion || "";
                              element_lvl2.color_texto_etapa_conversacion = element_lvl2.color_texto_etapa_conversacion || "";
 
                              if(Object.keys(element_lvl2).length != 0)
                              {
                                 element_lvl2.informacion_contacto = {
                                    orden: element_lvl2.informacion_contacto.orden,
                                    id: element_lvl2.informacion_contacto.id,
                                    number: element_lvl2.informacion_contacto.number,
                                    custumer_id: element_lvl2.informacion_contacto.custumer_id,
                                    staff_id: element_lvl2.informacion_contacto.staff_id,
                                    created_at: element_lvl2.informacion_contacto.created_at,
                                    nombre: element_lvl2.informacion_contacto.nombre,
                                    email_custumers: element_lvl2.informacion_contacto.email_custumers,
                                    phone_custumers: element_lvl2.informacion_contacto.phone_custumers,
                                    company_custumers: element_lvl2.informacion_contacto.company_custumers,
                                    address_custumers: element_lvl2.informacion_contacto.address_custumers,
                                    fullname_staff: element_lvl2.informacion_contacto.fullname_staff,
                                    username_staff: element_lvl2.informacion_contacto.username_staff,
                                    user_type_staff: element_lvl2.informacion_contacto.user_type_staff,
                                    phonenumber: element_lvl2.informacion_contacto.phonenumber,
                                    sys_users_config_whatsapp_other_id: element_lvl2.informacion_contacto.sys_users_config_whatsapp_other_id,
                                    config_whatsapp_other_id: element_lvl2.informacion_contacto.config_whatsapp_other_id,
                                    nombre_actual: element_lvl2.informacion_contacto.nombre_actual,
                                    fecha_humana: element_lvl2.informacion_contacto.fecha_humana,
                                    fecha_humana_enviado: element_lvl2.informacion_contacto.fecha_humana_enviado,
                                    fecha_ultimo_mensaje_recibido_unix: element_lvl2.informacion_contacto.fecha_ultimo_mensaje_recibido_unix,
                                    fecha_ultimo_mensaje_enviado_unix: element_lvl2.informacion_contacto.fecha_ultimo_mensaje_enviado_unix,

                                    fecha_ultimo_mensaje_recibido: element_lvl2.informacion_contacto.fecha_ultimo_mensaje_recibido,
                                    fecha_ultimo_mensaje_enviado: element_lvl2.informacion_contacto.fecha_ultimo_mensaje_enviado,
                                    fecha_ultimo_mensaje: element_lvl2.informacion_contacto.fecha_ultimo_mensaje,
                                    fecha_ultimo_mensaje_unix: element_lvl2.informacion_contacto.fecha_ultimo_mensaje_unix,
                                    
                                    nombre_whatsapp: element_lvl2.informacion_contacto.nombre_whatsapp,
                                    ultimo_mensaje: element_lvl2.informacion_contacto.ultimo_mensaje,
                                    mensajes_no_leidos_sms: '0',
                                    mensajes_no_leidos_whatsapp: '0',
                                    mensajes_no_leidos: '0',

                                    id_etapa_conversacion: element_lvl2.id_etapa_conversacion,
                                    nombre_etapa_conversacion: element_lvl2.informacion_contacto.nombre_etapa_conversacion,
                                    color_fondo_etapa_conversacion: element_lvl2.informacion_contacto.color_fondo_etapa_conversacion,
                                    color_texto_etapa_conversacion: element_lvl2.informacion_contacto.color_texto_etapa_conversacion,
                                 };

                                 element_lvl2.config_whatsapp_other_id = element_lvl2.informacion_contacto.config_whatsapp_other_id;

                                 element_lvl2.id_etapa_conversacion          = element_lvl2.id_etapa_conversacion || "";
                                 element_lvl2.nombre_etapa_conversacion      = element_lvl2.nombre_etapa_conversacion || "";
                                 element_lvl2.color_fondo_etapa_conversacion = element_lvl2.color_fondo_etapa_conversacion || "";
                                 element_lvl2.color_texto_etapa_conversacion = element_lvl2.color_texto_etapa_conversacion || "";

                                 
                              }else{
                                 
                                 element_lvl2.informacion_contacto =  {};
                              }

                              let encontre_registro = existe_data.find((item) => item.id == element_lvl2.chat_number_id);

                              if(encontre_registro)
                              {

                                 let {
                                    orden,
                                    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,
                                    config_whatsapp_other_id,
                                    nombre_actual,
                                    fecha_humana,
                                    fecha_humana_enviado,
                                    fecha_ultimo_mensaje_recibido_unix,
                                    fecha_ultimo_mensaje_enviado_unix,
                                    nombre_whatsapp,
                                    chat_con_mensaje_whatsapp,
                                    mensajes_no_leidos_sms,
                                    mensajes_no_leidos_whatsapp,
                                    mensajes_no_leidos,

                                    fecha_ultimo_mensaje_recibido,
                                    fecha_ultimo_mensaje_enviado,
                                    fecha_ultimo_mensaje,
                                    fecha_ultimo_mensaje_unix,
                                    ultimo_mensaje,

                                    id_etapa_conversacion,
                                    nombre_etapa_conversacion,
                                    color_fondo_etapa_conversacion,
                                    color_texto_etapa_conversacion,

                                 } = encontre_registro;
 
                                 element_lvl2.informacion_contacto = {
                                       orden,
                                       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,
                                       config_whatsapp_other_id,
                                       nombre_actual,
                                       fecha_humana,
                                       fecha_humana_enviado,
                                       fecha_ultimo_mensaje_recibido_unix,
                                       fecha_ultimo_mensaje_enviado_unix,
                                       nombre_whatsapp,
                                       mensajes_no_leidos_sms,
                                       mensajes_no_leidos_whatsapp,
                                       mensajes_no_leidos,

                                       fecha_ultimo_mensaje_recibido,
                                       fecha_ultimo_mensaje_enviado,
                                       fecha_ultimo_mensaje,
                                       fecha_ultimo_mensaje_unix,
                                       ultimo_mensaje,
 
                                       id_etapa_conversacion,
                                       nombre_etapa_conversacion,
                                       color_fondo_etapa_conversacion,
                                       color_texto_etapa_conversacion,

                                 };

 
                                 element_lvl2.mensajes_no_leidos = mensajes_no_leidos;
                                 element_lvl2.mensajes_no_leidos_whatsapp = mensajes_no_leidos_whatsapp;
                                 element_lvl2.mensajes_no_leidos_sms = mensajes_no_leidos_sms;
                                 element_lvl2.ultimo_mensaje = ultimo_mensaje;

                                 element_lvl2.config_whatsapp_other_id = config_whatsapp_other_id;
                                 
                                 element_lvl2.id_etapa_conversacion = id_etapa_conversacion;
                                 element_lvl2.nombre_etapa_conversacion = nombre_etapa_conversacion;
                                 element_lvl2.color_fondo_etapa_conversacion = color_fondo_etapa_conversacion;
                                 element_lvl2.color_texto_etapa_conversacion = color_texto_etapa_conversacion;



                                 miArrListaContactosTemporal.push(element_lvl2.informacion_contacto); 

                              }else{

                                 miArrListaContactosTemporal.push(element_lvl2.informacion_contacto); 

                              }

 
                           });

                           let listado_id_temporal = miArrListaContactosTemporal.map((element) => element.id);
                           let elementos_sin_conversaciones_nuevos = existe_data.filter((data) => !listado_id_temporal.includes(data.id) );  

                           //console.log("existe_data xd");
                           //console.log(existe_data);
                           //console.log("listado_id_temporal");
                           //console.log(listado_id_temporal);
                           //console.log("elementos_sin_conversaciones_nuevos");
                           //console.log(elementos_sin_conversaciones_nuevos);

                           elementos_sin_conversaciones_nuevos.forEach((element) => {

                              miArrListaContactosTemporal.push(element); 
                   
                           });

                           lista_contactos = miArrListaContactosTemporal.sort((a, b) => {
                              return Number(b.orden) - Number(a.orden);
                           });

                           
                           //lista_contactos = lista_contactos.map((item, index) => ({
                           // ...item,
                           //   orden: (index + 1)
                           //}));  

                           //console.log("lista_contactos xd");
                           //console.log(lista_contactos);
                           //console.log("caimos en un return aqui abajo mi dog");
                           //return;
                             

                          }
 

                          //console.log("lista_contactos filtrada indexdb");
                          //console.log(lista_contactos);

                        }
                       
                         
                        listado_staff = info.staff || [];

                        console.log("listado_staff xd");
                        console.log(listado_staff);

                        //listado_custumers = info.customer || [];
   
                        console.log("LISTADO_CONFIGURACION_WHATSAPP_SMS");
                        console.log(LISTADO_CONFIGURACION_WHATSAPP_SMS);

                        $(".item_dropdown_config").html(
                           configuracion_whatsapp_other_html(
                              LISTADO_CONFIGURACION_WHATSAPP_SMS,
                           ),
                        );
                        
                        evento_seleccion_empresa();
                        
                        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,
                                 zona_horaria,
                              } = $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,
                              //});
         
                              isEnabledWhatsapp = enableWhatsapp;
                              isEnabledSMS = enableTwilio;
         
                              // 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") {

                                 let URL_IMAGEN_SMS = $("#URL_IMAGEN_SMS").val();

                                 opciones += '<option value="sms" data-icon="' + URL_IMAGEN_SMS  + '" class="seleccionar_medio_sms">Reply by SMS to: +' + sms_phone_number + '</option>';
                              }

                              // Agregar opción de SMS si está habilitado
                              if (enableWhatsapp == 1 || enableWhatsapp == "1") {
                                 
                                 let URL_IMAGEN_WHATSAPP = $("#URL_IMAGEN_WHATSAPP").val();

                                 opciones += '<option value="whatsapp" data-icon="' + URL_IMAGEN_WHATSAPP  + '" class="seleccionar_medio_whatsapp">Reply by WhatsApp to: +' + phone + ' </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").trigger('change');
                              } else if (enableTwilio == 1 || enableTwilio == "1") {
                                 $("#seleccionar_medio_mensaje").val("sms").trigger('change');
                              }
                
                              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;

                              ZONA_HORARIA_CONFIGURACION_WHATSAPP_SMS = zona_horaria;

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

                              let texto = "";
                              texto = texto + identifier;

                              if (enableWhatsapp == 1) {
                                 if (isEmpty(phone) == false) {
                                    texto = texto + " - WS(+" + phone + ")";
                                 }
                              }

                              if (enableTwilio == 1) {
                                 if (isEmpty(sms_phone_number) == false) {
                                    texto = texto + " - TW(+" + sms_phone_number + ")";
                                 }
                              }

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

                              //$("#cambiar_titulo_config").text(identifier + " - (+" + phone + ")");

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

   
                              //console.log("hey mira esta lista: lista_contactos");
                              //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 + "",
                                             orden: element.orden + "",
                                             informacion_contacto: element,
                                             mensajes_no_leidos: procesarVariable(element.mensajes_no_leidos),
                                             mensajes_no_leidos_sms: procesarVariable(element.mensajes_no_leidos_sms),
                                             mensajes_no_leidos_whatsapp: procesarVariable(element.mensajes_no_leidos_whatsapp),
                                             config_whatsapp_other_id: element.config_whatsapp_other_id,

                                             id_etapa_conversacion: element.id_etapa_conversacion,
                                             nombre_etapa_conversacion: element.nombre_etapa_conversacion,
                                             color_fondo_etapa_conversacion: element.color_fondo_etapa_conversacion,
                                             color_texto_etapa_conversacion: element.color_texto_etapa_conversacion,

                                             ultimo_mensaje: element.ultimo_mensaje,
                                             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 + "",
                                             orden: element.orden + "",
                                             informacion_contacto: element,
                                             mensajes_no_leidos: procesarVariable(element.mensajes_no_leidos),
                                             mensajes_no_leidos_sms: procesarVariable(element.mensajes_no_leidos_sms),
                                             mensajes_no_leidos_whatsapp: procesarVariable(element.mensajes_no_leidos_whatsapp),
                                             config_whatsapp_other_id: element.config_whatsapp_other_id,

                                             id_etapa_conversacion: element.id_etapa_conversacion,
                                             nombre_etapa_conversacion: element.nombre_etapa_conversacion,
                                             color_fondo_etapa_conversacion: element.color_fondo_etapa_conversacion,
                                             color_texto_etapa_conversacion: element.color_texto_etapa_conversacion,

                                             data: informacionObtenida.data,
                                             ultimo_mensaje: element.ultimo_mensaje,
                                          };

                                          //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
                              
                              /*
                              if (TIPO_DE_PLATAFORMA == "whatsapp-sms") {
                                 $("#seleccionar_medio_mensaje").prop("disabled", false);
                                 $("#seleccionar_medio_mensaje").val("whatsapp").trigger('change');
                                 $(".btn_microfono").css("color", "#434343");
                                 $(".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).trigger('change');

                                 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", "#434343");
                                    $(".btn_microfono").prop("disabled", false);
                                    $(".btn_microfono").html('<i class="fa fa-microphone"></i>');
                                 }
                              }
                              */

                              //cargar staff por empresas

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

                              let mi_html_staff = htmlCambiarStaff();

                              listado_staff.forEach((element, index) => {
                                 
                                 let {
                                    id,
                                    username,
                                    fullname,
                                    phonenumber,
                                    user_type,
                                 } = element;

                                 let construccion = {
                                    tipo : id,
                                    texto : fullname,
                                    tipo_usuario : 1,
                                 };

                                 if(id != STAFF_ID_GLOBAL)
                                 {
                                    if (index === listado_staff.length - 1)
                                    {
                                       mi_html_staff += crearHtmlCambiarStaff(construccion, true); 
                                    }else{
                                       mi_html_staff += crearHtmlCambiarStaff(construccion, false); 
                                    }

                                     
                                 }

 
                              });

                              $(".item_dropdown_contactos_staff").html(mi_html_staff);

                              evento_seleccion_contactos_staff();
                              evento_seleccion_contactos_staff_etapa();


                              /*
                              cargar_plantillas_whatsapp(
                                 URL_BASE,
                                 WHATSAPP_BUSINESS_ACCOUNT_IDENTIFIER,
                                 10,
                                 VERSION_WHATSAPP_GLOBAL,
                                 TOKEN_WHATSAPP_GLOBAL,
                              ).then((data) =>{
                                 resultado_consulta_plantillas_whatsapp = data;
                              });
                              */
 
                           } 

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

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

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

                        $("#cambiar_titulo_config").show();
                        $("#quitar_placeholder_cambiar_titulo_config").hide();

                        $(".quitar_placeholder_elementos_tipo_select").hide();
                        $("#contactos_staff_asignados").show();
                        $("#etapas_staff_asignados").show();

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

                        */

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

                        $(".cuerpo_sin_mensajes").css("display", "");
                         
                        modal_elejir_contacto();

                        $("#btn_new_contacto").prop("disabled", false);
                        $("#btn_search_contacto").prop("disabled", false);

   

                     }

                     console.log(info); 
                     

                  } catch (error) {

                     console.log(
                        "Error al parsear la respuesta  : " +
                           error.message,
                     );

                     Swal.fire({
                        icon: "error",
                        title: "Oops...",
                        text: "Error loading information " + error.message + "!",
                     });
                     
                  }
               },

               error: function (xhr, status, error) {
                  console.log(
                     "Error en la solicitud  : " +
                        status +
                        " - " +
                        error,
                  );

                  Swal.fire({
                     icon: "error",
                     title: "Oops...",
                     text: "Error loading your details: " + error + "!",
                  });
                  
               },
            });

            listado_custumers =
               (await cargar_listado_custumers_api(URL_BASE)) || [];

            //console.log("customers db");
            //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();

            $("#btn_elejir_contacto").css("display", "");

            $("#btn_elejir_contacto").prop("disabled", false);

 

         }

         function bloquearBotonesPlantillaWhatsapp()
         {
            $(".advertencia_mensaje_plantilla").css("display", "none");  
            $("#selectPhotos").css("display", "");  
            $("#input_document").css("display", "");  
            $("#abrir_plantillas").css("display", "");  
            $("#abrir_plantillas_cron").css("display", "");  
            $("#enviar_plantilla_whatsapp").css("display", "none"); 
            $("#enviar_plantilla_whatsapp_cron").css("display", "none"); 

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

         }

         function desbloquearBotonesPlantillaWhatsapp()
         {
            $(".advertencia_mensaje_plantilla").css("display", "");  
            $("#selectPhotos").css("display", "none");  
            $("#input_document").css("display", "none");  
            $("#abrir_plantillas").css("display", "none");  
            $("#abrir_plantillas_cron").css("display", "none");  
            $("#enviar_plantilla_whatsapp").css("display", "");    
            $("#enviar_plantilla_whatsapp_cron").css("display", "");    
            $(".ocultar_opciones_enviar_mensajes").css("display", "none");  
         } 

         function verificarSiCumpleFechaPlantillaWhatsapp()
         {
         
            if(isEnabledWhatsapp == 1 || isEnabledWhatsapp == true)
            {

               if(isEmpty(FECHA_ULTIMO_MENSAJE_PLANTILLA) == true)
               {
                  //console.log("no hay fecha ultimo mensaje plantilla");
                  //console.log(FECHA_ULTIMO_MENSAJE_PLANTILLA);
                  desbloquearBotonesPlantillaWhatsapp();
                  return;
               }
               
               let mostrar_plantilla_whatsapp = validarRangoFechas(FECHA_ULTIMO_MENSAJE_PLANTILLA, ZONA_HORARIA_CONFIGURACION_WHATSAPP_SMS);

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

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

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

               if(mostrar_plantilla_whatsapp == true)
               {
                  desbloquearBotonesPlantillaWhatsapp();
               }else{
                  bloquearBotonesPlantillaWhatsapp();
               }

            }

             

         }
 
         $(document).ready(function () {

            $('#numero_telefono').on('focus', function() {
               this.select();
            }).focus();

            // Opcional: Verifica si el input es visible antes de enfocar
            if ($('#numero_telefono').is(':visible')) {
               $('#numero_telefono').select();
            } else {
               // Si está oculto, espera a que sea visible (por ejemplo, al abrir un modal)
               $(document).on('shown.bs.modal', function() {
                     $('#numero_telefono').focus().select();
               });
            }

            // Formatear la opción para mostrar la bandera y el nombre del país
            function formatOption(option) {
               if (!option.id) {
                  return option.text; // Placeholder o texto por defecto
               }
               const $option = $(
                  `<span><img src="${option.element.dataset.icon}" class="img-flag" style="width: 20px; margin-right: 8px; vertical-align: middle;" />${option.text}</span>`
               );
               return $option;
            }

            // Función para permitir búsqueda por nombre del país
            function matchCustom(params, data) {
               if (!params.term || params.term.trim() === '') {
                  return data;
               }
               const term = params.term.toLowerCase();
               if (data.text.toLowerCase().indexOf(term) > -1) {
                  return data;
               }
               return null;
            }

            let paisesConCodigos = [
               {
                  pais: 'United States',
                  codigo: '1',
                  flag: 'https://flagcdn.com/w20/us.png',
               },
               { pais: 'Honduras', codigo: '504', flag: 'https://flagcdn.com/w20/hn.png' },
               {
                  pais: 'Afghanistan',
                  codigo: '93',
                  flag: 'https://flagcdn.com/w20/af.png',
               },
               { pais: 'Albania', codigo: '355', flag: 'https://flagcdn.com/w20/al.png' },
               { pais: 'Algeria', codigo: '213', flag: 'https://flagcdn.com/w20/dz.png' },
               { pais: 'Andorra', codigo: '376', flag: 'https://flagcdn.com/w20/ad.png' },
               { pais: 'Angola', codigo: '244', flag: 'https://flagcdn.com/w20/ao.png' },
               {
                  pais: 'Antigua and Barbuda',
                  codigo: '1-268',
                  flag: 'https://flagcdn.com/w20/ag.png',
               },
               { pais: 'Argentina', codigo: '54', flag: 'https://flagcdn.com/w20/ar.png' },
               { pais: 'Armenia', codigo: '374', flag: 'https://flagcdn.com/w20/am.png' },
               { pais: 'Australia', codigo: '61', flag: 'https://flagcdn.com/w20/au.png' },
               { pais: 'Austria', codigo: '43', flag: 'https://flagcdn.com/w20/at.png' },
               {
                  pais: 'Azerbaijan',
                  codigo: '994',
                  flag: 'https://flagcdn.com/w20/az.png',
               },
               {
                  pais: 'Bahamas',
                  codigo: '1-242',
                  flag: 'https://flagcdn.com/w20/bs.png',
               },
               { pais: 'Bahrain', codigo: '973', flag: 'https://flagcdn.com/w20/bh.png' },
               {
                  pais: 'Bangladesh',
                  codigo: '880',
                  flag: 'https://flagcdn.com/w20/bd.png',
               },
               {
                  pais: 'Barbados',
                  codigo: '1-246',
                  flag: 'https://flagcdn.com/w20/bb.png',
               },
               { pais: 'Belarus', codigo: '375', flag: 'https://flagcdn.com/w20/by.png' },
               { pais: 'Belgium', codigo: '32', flag: 'https://flagcdn.com/w20/be.png' },
               { pais: 'Belize', codigo: '501', flag: 'https://flagcdn.com/w20/bz.png' },
               { pais: 'Benin', codigo: '229', flag: 'https://flagcdn.com/w20/bj.png' },
               { pais: 'Bhutan', codigo: '975', flag: 'https://flagcdn.com/w20/bt.png' },
               { pais: 'Bolivia', codigo: '591', flag: 'https://flagcdn.com/w20/bo.png' },
               {
                  pais: 'Bosnia and Herzegovina',
                  codigo: '387',
                  flag: 'https://flagcdn.com/w20/ba.png',
               },
               { pais: 'Botswana', codigo: '267', flag: 'https://flagcdn.com/w20/bw.png' },
               { pais: 'Brazil', codigo: '55', flag: 'https://flagcdn.com/w20/br.png' },
               { pais: 'Brunei', codigo: '673', flag: 'https://flagcdn.com/w20/bn.png' },
               { pais: 'Bulgaria', codigo: '359', flag: 'https://flagcdn.com/w20/bg.png' },
               {
                  pais: 'Burkina Faso',
                  codigo: '226',
                  flag: 'https://flagcdn.com/w20/bf.png',
               },
               { pais: 'Burundi', codigo: '257', flag: 'https://flagcdn.com/w20/bi.png' },
               {
                  pais: 'Cabo Verde',
                  codigo: '238',
                  flag: 'https://flagcdn.com/w20/cv.png',
               },
               { pais: 'Cambodia', codigo: '855', flag: 'https://flagcdn.com/w20/kh.png' },
               { pais: 'Cameroon', codigo: '237', flag: 'https://flagcdn.com/w20/cm.png' },
               { pais: 'Canada', codigo: '1', flag: 'https://flagcdn.com/w20/ca.png' },
               {
                  pais: 'Central African Republic',
                  codigo: '236',
                  flag: 'https://flagcdn.com/w20/cf.png',
               },
               { pais: 'Chad', codigo: '235', flag: 'https://flagcdn.com/w20/td.png' },
               { pais: 'Chile', codigo: '56', flag: 'https://flagcdn.com/w20/cl.png' },
               { pais: 'China', codigo: '86', flag: 'https://flagcdn.com/w20/cn.png' },
               { pais: 'Colombia', codigo: '57', flag: 'https://flagcdn.com/w20/co.png' },
               { pais: 'Comoros', codigo: '269', flag: 'https://flagcdn.com/w20/km.png' },
               {
                  pais: 'Congo (Brazzaville)',
                  codigo: '242',
                  flag: 'https://flagcdn.com/w20/cg.png',
               },
               {
                  pais: 'Congo (Kinshasa)',
                  codigo: '243',
                  flag: 'https://flagcdn.com/w20/cd.png',
               },
               {
                  pais: 'Costa Rica',
                  codigo: '506',
                  flag: 'https://flagcdn.com/w20/cr.png',
               },
               { pais: 'Croatia', codigo: '385', flag: 'https://flagcdn.com/w20/hr.png' },
               { pais: 'Cuba', codigo: '53', flag: 'https://flagcdn.com/w20/cu.png' },
               { pais: 'Cyprus', codigo: '357', flag: 'https://flagcdn.com/w20/cy.png' },
               {
                  pais: 'Czech Republic',
                  codigo: '420',
                  flag: 'https://flagcdn.com/w20/cz.png',
               },
               { pais: 'Denmark', codigo: '45', flag: 'https://flagcdn.com/w20/dk.png' },
               { pais: 'Djibouti', codigo: '253', flag: 'https://flagcdn.com/w20/dj.png' },
               {
                  pais: 'Dominica',
                  codigo: '1-767',
                  flag: 'https://flagcdn.com/w20/dm.png',
               },
               {
                  pais: 'Dominican Republic',
                  codigo: '1-809',
                  flag: 'https://flagcdn.com/w20/do.png',
               },
               { pais: 'Ecuador', codigo: '593', flag: 'https://flagcdn.com/w20/ec.png' },
               { pais: 'Egypt', codigo: '20', flag: 'https://flagcdn.com/w20/eg.png' },
               {
                  pais: 'El Salvador',
                  codigo: '503',
                  flag: 'https://flagcdn.com/w20/sv.png',
               },
               {
                  pais: 'Equatorial Guinea',
                  codigo: '240',
                  flag: 'https://flagcdn.com/w20/gq.png',
               },
               { pais: 'Eritrea', codigo: '291', flag: 'https://flagcdn.com/w20/er.png' },
               { pais: 'Estonia', codigo: '372', flag: 'https://flagcdn.com/w20/ee.png' },
               { pais: 'Eswatini', codigo: '268', flag: 'https://flagcdn.com/w20/sz.png' },
               { pais: 'Ethiopia', codigo: '251', flag: 'https://flagcdn.com/w20/et.png' },
               { pais: 'Fiji', codigo: '679', flag: 'https://flagcdn.com/w20/fj.png' },
               { pais: 'Finland', codigo: '358', flag: 'https://flagcdn.com/w20/fi.png' },
               { pais: 'France', codigo: '33', flag: 'https://flagcdn.com/w20/fr.png' },
               { pais: 'Gabon', codigo: '241', flag: 'https://flagcdn.com/w20/ga.png' },
               { pais: 'Gambia', codigo: '220', flag: 'https://flagcdn.com/w20/gm.png' },
               { pais: 'Georgia', codigo: '995', flag: 'https://flagcdn.com/w20/ge.png' },
               { pais: 'Germany', codigo: '49', flag: 'https://flagcdn.com/w20/de.png' },
               { pais: 'Ghana', codigo: '233', flag: 'https://flagcdn.com/w20/gh.png' },
               { pais: 'Greece', codigo: '30', flag: 'https://flagcdn.com/w20/gr.png' },
               {
                  pais: 'Grenada',
                  codigo: '1-473',
                  flag: 'https://flagcdn.com/w20/gd.png',
               },
               {
                  pais: 'Guatemala',
                  codigo: '502',
                  flag: 'https://flagcdn.com/w20/gt.png',
               },
               { pais: 'Guinea', codigo: '224', flag: 'https://flagcdn.com/w20/gn.png' },
               {
                  pais: 'Guinea-Bissau',
                  codigo: '245',
                  flag: 'https://flagcdn.com/w20/gw.png',
               },
               { pais: 'Guyana', codigo: '592', flag: 'https://flagcdn.com/w20/gy.png' },
               { pais: 'Haiti', codigo: '509', flag: 'https://flagcdn.com/w20/ht.png' },
               { pais: 'Hungary', codigo: '36', flag: 'https://flagcdn.com/w20/hu.png' },
               { pais: 'Iceland', codigo: '354', flag: 'https://flagcdn.com/w20/is.png' },
               { pais: 'India', codigo: '91', flag: 'https://flagcdn.com/w20/in.png' },
               { pais: 'Indonesia', codigo: '62', flag: 'https://flagcdn.com/w20/id.png' },
               { pais: 'Iran', codigo: '98', flag: 'https://flagcdn.com/w20/ir.png' },
               { pais: 'Iraq', codigo: '964', flag: 'https://flagcdn.com/w20/iq.png' },
               { pais: 'Ireland', codigo: '353', flag: 'https://flagcdn.com/w20/ie.png' },
               { pais: 'Israel', codigo: '972', flag: 'https://flagcdn.com/w20/il.png' },
               { pais: 'Italy', codigo: '39', flag: 'https://flagcdn.com/w20/it.png' },
               {
                  pais: 'Jamaica',
                  codigo: '1-876',
                  flag: 'https://flagcdn.com/w20/jm.png',
               },
               { pais: 'Japan', codigo: '81', flag: 'https://flagcdn.com/w20/jp.png' },
               { pais: 'Jordan', codigo: '962', flag: 'https://flagcdn.com/w20/jo.png' },
               { pais: 'Kazakhstan', codigo: '7', flag: 'https://flagcdn.com/w20/kz.png' },
               { pais: 'Kenya', codigo: '254', flag: 'https://flagcdn.com/w20/ke.png' },
               { pais: 'Kiribati', codigo: '686', flag: 'https://flagcdn.com/w20/ki.png' },
               { pais: 'Kuwait', codigo: '965', flag: 'https://flagcdn.com/w20/kw.png' },
               {
                  pais: 'Kyrgyzstan',
                  codigo: '996',
                  flag: 'https://flagcdn.com/w20/kg.png',
               },
               { pais: 'Laos', codigo: '856', flag: 'https://flagcdn.com/w20/la.png' },
               { pais: 'Latvia', codigo: '371', flag: 'https://flagcdn.com/w20/lv.png' },
               { pais: 'Lebanon', codigo: '961', flag: 'https://flagcdn.com/w20/lb.png' },
               { pais: 'Lesotho', codigo: '266', flag: 'https://flagcdn.com/w20/ls.png' },
               { pais: 'Liberia', codigo: '231', flag: 'https://flagcdn.com/w20/lr.png' },
               { pais: 'Libya', codigo: '218', flag: 'https://flagcdn.com/w20/ly.png' },
               {
                  pais: 'Liechtenstein',
                  codigo: '423',
                  flag: 'https://flagcdn.com/w20/li.png',
               },
               {
                  pais: 'Lithuania',
                  codigo: '370',
                  flag: 'https://flagcdn.com/w20/lt.png',
               },
               {
                  pais: 'Luxembourg',
                  codigo: '352',
                  flag: 'https://flagcdn.com/w20/lu.png',
               },
               {
                  pais: 'Madagascar',
                  codigo: '261',
                  flag: 'https://flagcdn.com/w20/mg.png',
               },
               { pais: 'Malawi', codigo: '265', flag: 'https://flagcdn.com/w20/mw.png' },
               { pais: 'Malaysia', codigo: '60', flag: 'https://flagcdn.com/w20/my.png' },
               { pais: 'Maldives', codigo: '960', flag: 'https://flagcdn.com/w20/mv.png' },
               { pais: 'Mali', codigo: '223', flag: 'https://flagcdn.com/w20/ml.png' },
               { pais: 'Malta', codigo: '356', flag: 'https://flagcdn.com/w20/mt.png' },
               {
                  pais: 'Marshall Islands',
                  codigo: '692',
                  flag: 'https://flagcdn.com/w20/mh.png',
               },
               {
                  pais: 'Mauritania',
                  codigo: '222',
                  flag: 'https://flagcdn.com/w20/mr.png',
               },
               {
                  pais: 'Mauritius',
                  codigo: '230',
                  flag: 'https://flagcdn.com/w20/mu.png',
               },
               { pais: 'Mexico', codigo: '52', flag: 'https://flagcdn.com/w20/mx.png' },
               {
                  pais: 'Micronesia',
                  codigo: '691',
                  flag: 'https://flagcdn.com/w20/fm.png',
               },
               { pais: 'Moldova', codigo: '373', flag: 'https://flagcdn.com/w20/md.png' },
               { pais: 'Monaco', codigo: '377', flag: 'https://flagcdn.com/w20/mc.png' },
               { pais: 'Mongolia', codigo: '976', flag: 'https://flagcdn.com/w20/mn.png' },
               {
                  pais: 'Montenegro',
                  codigo: '382',
                  flag: 'https://flagcdn.com/w20/me.png',
               },
               { pais: 'Morocco', codigo: '212', flag: 'https://flagcdn.com/w20/ma.png' },
               {
                  pais: 'Mozambique',
                  codigo: '258',
                  flag: 'https://flagcdn.com/w20/mz.png',
               },
               { pais: 'Myanmar', codigo: '95', flag: 'https://flagcdn.com/w20/mm.png' },
               { pais: 'Namibia', codigo: '264', flag: 'https://flagcdn.com/w20/na.png' },
               { pais: 'Nauru', codigo: '674', flag: 'https://flagcdn.com/w20/nr.png' },
               { pais: 'Nepal', codigo: '977', flag: 'https://flagcdn.com/w20/np.png' },
               {
                  pais: 'Netherlands',
                  codigo: '31',
                  flag: 'https://flagcdn.com/w20/nl.png',
               },
               {
                  pais: 'New Zealand',
                  codigo: '64',
                  flag: 'https://flagcdn.com/w20/nz.png',
               },
               {
                  pais: 'Nicaragua',
                  codigo: '505',
                  flag: 'https://flagcdn.com/w20/ni.png',
               },
               { pais: 'Niger', codigo: '227', flag: 'https://flagcdn.com/w20/ne.png' },
               { pais: 'Nigeria', codigo: '234', flag: 'https://flagcdn.com/w20/ng.png' },
               {
                  pais: 'North Korea',
                  codigo: '850',
                  flag: 'https://flagcdn.com/w20/kp.png',
               },
               {
                  pais: 'North Macedonia',
                  codigo: '389',
                  flag: 'https://flagcdn.com/w20/mk.png',
               },
               { pais: 'Norway', codigo: '47', flag: 'https://flagcdn.com/w20/no.png' },
               { pais: 'Oman', codigo: '968', flag: 'https://flagcdn.com/w20/om.png' },
               { pais: 'Pakistan', codigo: '92', flag: 'https://flagcdn.com/w20/pk.png' },
               { pais: 'Palau', codigo: '680', flag: 'https://flagcdn.com/w20/pw.png' },
               { pais: 'Panama', codigo: '507', flag: 'https://flagcdn.com/w20/pa.png' },
               {
                  pais: 'Papua New Guinea',
                  codigo: '675',
                  flag: 'https://flagcdn.com/w20/pg.png',
               },
               { pais: 'Paraguay', codigo: '595', flag: 'https://flagcdn.com/w20/py.png' },
               { pais: 'Peru', codigo: '51', flag: 'https://flagcdn.com/w20/pe.png' },
               {
                  pais: 'Philippines',
                  codigo: '63',
                  flag: 'https://flagcdn.com/w20/ph.png',
               },
               { pais: 'Poland', codigo: '48', flag: 'https://flagcdn.com/w20/pl.png' },
               { pais: 'Portugal', codigo: '351', flag: 'https://flagcdn.com/w20/pt.png' },
               { pais: 'Qatar', codigo: '974', flag: 'https://flagcdn.com/w20/qa.png' },
               { pais: 'Romania', codigo: '40', flag: 'https://flagcdn.com/w20/ro.png' },
               { pais: 'Russia', codigo: '7', flag: 'https://flagcdn.com/w20/ru.png' },
               { pais: 'Rwanda', codigo: '250', flag: 'https://flagcdn.com/w20/rw.png' },
               {
                  pais: 'Saint Kitts and Nevis',
                  codigo: '1-869',
                  flag: 'https://flagcdn.com/w20/kn.png',
               },
               {
                  pais: 'Saint Lucia',
                  codigo: '1-758',
                  flag: 'https://flagcdn.com/w20/lc.png',
               },
               {
                  pais: 'Saint Vincent and the Grenadines',
                  codigo: '1-784',
                  flag: 'https://flagcdn.com/w20/vc.png',
               },
               { pais: 'Samoa', codigo: '685', flag: 'https://flagcdn.com/w20/ws.png' },
               {
                  pais: 'San Marino',
                  codigo: '378',
                  flag: 'https://flagcdn.com/w20/sm.png',
               },
               {
                  pais: 'Saudi Arabia',
                  codigo: '966',
                  flag: 'https://flagcdn.com/w20/sa.png',
               },
               { pais: 'Senegal', codigo: '221', flag: 'https://flagcdn.com/w20/sn.png' },
               { pais: 'Serbia', codigo: '381', flag: 'https://flagcdn.com/w20/rs.png' },
               {
                  pais: 'Seychelles',
                  codigo: '248',
                  flag: 'https://flagcdn.com/w20/sc.png',
               },
               {
                  pais: 'Sierra Leone',
                  codigo: '232',
                  flag: 'https://flagcdn.com/w20/sl.png',
               },
               { pais: 'Singapore', codigo: '65', flag: 'https://flagcdn.com/w20/sg.png' },
               { pais: 'Slovakia', codigo: '421', flag: 'https://flagcdn.com/w20/sk.png' },
               { pais: 'Slovenia', codigo: '386', flag: 'https://flagcdn.com/w20/si.png' },
               {
                  pais: 'Solomon Islands',
                  codigo: '677',
                  flag: 'https://flagcdn.com/w20/sb.png',
               },
               { pais: 'Somalia', codigo: '252', flag: 'https://flagcdn.com/w20/so.png' },
               {
                  pais: 'South Africa',
                  codigo: '27',
                  flag: 'https://flagcdn.com/w20/za.png',
               },
               {
                  pais: 'South Korea',
                  codigo: '82',
                  flag: 'https://flagcdn.com/w20/kr.png',
               },
               {
                  pais: 'South Sudan',
                  codigo: '211',
                  flag: 'https://flagcdn.com/w20/ss.png',
               },
               { pais: 'Spain', codigo: '34', flag: 'https://flagcdn.com/w20/es.png' },
               { pais: 'Sri Lanka', codigo: '94', flag: 'https://flagcdn.com/w20/lk.png' },
               { pais: 'Sudan', codigo: '249', flag: 'https://flagcdn.com/w20/sd.png' },
               { pais: 'Suriname', codigo: '597', flag: 'https://flagcdn.com/w20/sr.png' },
               { pais: 'Sweden', codigo: '46', flag: 'https://flagcdn.com/w20/se.png' },
               {
                  pais: 'Switzerland',
                  codigo: '41',
                  flag: 'https://flagcdn.com/w20/ch.png',
               },
               { pais: 'Syria', codigo: '963', flag: 'https://flagcdn.com/w20/sy.png' },
               { pais: 'Taiwan', codigo: '886', flag: 'https://flagcdn.com/w20/tw.png' },
               {
                  pais: 'Tajikistan',
                  codigo: '992',
                  flag: 'https://flagcdn.com/w20/tj.png',
               },
               { pais: 'Tanzania', codigo: '255', flag: 'https://flagcdn.com/w20/tz.png' },
               { pais: 'Thailand', codigo: '66', flag: 'https://flagcdn.com/w20/th.png' },
               {
                  pais: 'Timor-Leste',
                  codigo: '670',
                  flag: 'https://flagcdn.com/w20/tl.png',
               },
               { pais: 'Togo', codigo: '228', flag: 'https://flagcdn.com/w20/tg.png' },
               { pais: 'Tonga', codigo: '676', flag: 'https://flagcdn.com/w20/to.png' },
               {
                  pais: 'Trinidad and Tobago',
                  codigo: '1-868',
                  flag: 'https://flagcdn.com/w20/tt.png',
               },
               { pais: 'Tunisia', codigo: '216', flag: 'https://flagcdn.com/w20/tn.png' },
               { pais: 'Turkey', codigo: '90', flag: 'https://flagcdn.com/w20/tr.png' },
               {
                  pais: 'Turkmenistan',
                  codigo: '993',
                  flag: 'https://flagcdn.com/w20/tm.png',
               },
               { pais: 'Tuvalu', codigo: '688', flag: 'https://flagcdn.com/w20/tv.png' },
               { pais: 'Uganda', codigo: '256', flag: 'https://flagcdn.com/w20/ug.png' },
               { pais: 'Ukraine', codigo: '380', flag: 'https://flagcdn.com/w20/ua.png' },
               {
                  pais: 'United Arab Emirates',
                  codigo: '971',
                  flag: 'https://flagcdn.com/w20/ae.png',
               },
               {
                  pais: 'United Kingdom',
                  codigo: '44',
                  flag: 'https://flagcdn.com/w20/gb.png',
               },
               { pais: 'Uruguay', codigo: '598', flag: 'https://flagcdn.com/w20/uy.png' },
               {
                  pais: 'Uzbekistan',
                  codigo: '998',
                  flag: 'https://flagcdn.com/w20/uz.png',
               },
               { pais: 'Vanuatu', codigo: '678', flag: 'https://flagcdn.com/w20/vu.png' },
               {
                  pais: 'Vatican City',
                  codigo: '379',
                  flag: 'https://flagcdn.com/w20/va.png',
               },
               { pais: 'Venezuela', codigo: '58', flag: 'https://flagcdn.com/w20/ve.png' },
               { pais: 'Vietnam', codigo: '84', flag: 'https://flagcdn.com/w20/vn.png' },
               { pais: 'Yemen', codigo: '967', flag: 'https://flagcdn.com/w20/ye.png' },
               { pais: 'Zambia', codigo: '260', flag: 'https://flagcdn.com/w20/zm.png' },
               { pais: 'Zimbabwe', codigo: '263', flag: 'https://flagcdn.com/w20/zw.png' },
            ];

            let options = '';

            for (const pais of paisesConCodigos) {
               options += `<option value="${pais.codigo}" data-icon="${pais.flag}">${pais.pais} (+${pais.codigo})</option>`;
            }

            $('#codigo_pais').html(options);

            $('#codigo_pais').select2({
               templateResult: formatOption,
               templateSelection: formatOption,
               matcher: matchCustom,
               dropdownParent: $('#codigo_pais').parent() // Asegura que el dropdown se alinee con el contenedor padre
            }).on('select2:open', function() {
               $('.select2-container--open .select2-dropdown').css('z-index', '1060'); // Ajusta este valor según el z-index del modal
            });

            $('#seleccionar_medio_mensaje').select2({
               minimumResultsForSearch: Infinity, // Oculta el buscador
               templateResult: function (data) {
                  if (!data.id) return data.text;
                  var icon = $(data.element).data('icon');
                  return $('<span><img src="' + icon + '" style="width:20px;height:20px;margin-right:5px;" />' + data.text + '</span>');
               },
               templateSelection: function (data) {
                  var icon = $(data.element).data('icon');
                  return $('<span><img src="' + icon + '" style="width:20px;height:20px;margin-right:5px;" />' + data.text + '</span>');
               }
            }).on('select2:open', function () {
               // Cuando el menú se abre, aplicamos los estilos a .select2-container--open .select2-dropdown--below
               $('.select2-container--open .select2-dropdown--below').css({
                  'border': '1px solid rgb(211, 202, 192)',
                  'background-color': '#f8f9fa'
               });
            }).on('select2:close', function () {
               // Opcional: Puedes resetear los estilos al cerrar el menú si es necesario
               $('.select2-container--open .select2-dropdown--below').css({
                  'border': '',
                  'background-color': ''
               });
            });

            $('#seleccionar_medio_mensaje').on('select2:clear', function (e) {
               //console.log("se limpio el select");
               //console.log(e);
            });

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


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


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

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

               let bloquear = estadoBotonesMensajes();

               if(bloquear == true)
               {
                  return;
               }

               let etapa_id = $(".tenerEtapaConversacionSelect ").val();

               if (isEmpty(etapa_id) == true) {
                  Swal.fire("Select a conversation stage");
                  return;
               }

               console.log("abrir plantilla");

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

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

               //$(".cargando_plantillas").show();
               //quitar_tabla_informacion_plantillas

               $("#input_fecha_configuracion_mensaje").val("");
               $("#input_hora_configuracion_mensaje").val("");

               $(".quitar_tabla_informacion_plantillas").css("display", "none");
               $(".cargando_plantillas").css("display", "");

               $("#tipo_plantilla_enviar").val("1");
               $(".habilitar_configuracion_plantilla").css("display", "none"); 
               
               $(".configuracion_plantilla").hide();

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

               $("#myModal").modal("show");
               
               let info = await cargar_plantillas_whatsapp(
                  URL_BASE,
                  WHATSAPP_BUSINESS_ACCOUNT_IDENTIFIER,
                  10,
                  VERSION_WHATSAPP_GLOBAL,
                  TOKEN_WHATSAPP_GLOBAL,
               );
               
               //resultado_consulta_plantillas_whatsapp
               if (info.type == "error") {
                  Swal.fire({
                     icon: "error",
                     title: "Oops...",
                     text: info.message,
                  });
                  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);
               }

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

               $(".quitar_tabla_informacion_plantillas").css("display", "");
               $(".cargando_plantillas").css("display", "none");
                  //console.log(listado_plantillas);
            });

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

               let bloquear = estadoBotonesMensajes();

               if(bloquear == true)
               {
                  return;
               }

               let etapa_id = $(".tenerEtapaConversacionSelect ").val();

               if (isEmpty(etapa_id) == true) {
                  Swal.fire("Select a conversation stage");
                  return;
               }

               console.log("abrir plantilla");

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

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

               //$(".cargando_plantillas").show();
               //quitar_tabla_informacion_plantillas

               $("#input_fecha_configuracion_mensaje").val("");
               $("#input_hora_configuracion_mensaje").val("");

               $(".quitar_tabla_informacion_plantillas").css("display", "none");
               $(".cargando_plantillas").css("display", "");

               $("#tipo_plantilla_enviar").val("2");
               $(".habilitar_configuracion_plantilla").css("display", ""); 
               
               $(".configuracion_plantilla").hide();

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

               $("#myModal").modal("show");
               
               let info = await cargar_plantillas_whatsapp(
                  URL_BASE,
                  WHATSAPP_BUSINESS_ACCOUNT_IDENTIFIER,
                  10,
                  VERSION_WHATSAPP_GLOBAL,
                  TOKEN_WHATSAPP_GLOBAL,
               );
               
               //resultado_consulta_plantillas_whatsapp
               if (info.type == "error") {
                  Swal.fire({
                     icon: "error",
                     title: "Oops...",
                     text: info.message,
                  });
                  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);
               }

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

               $(".quitar_tabla_informacion_plantillas").css("display", "");
               $(".cargando_plantillas").css("display", "none");
                  //console.log(listado_plantillas);
            });

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

               let bloquear = estadoBotonesMensajes();

               if(bloquear == true)
               {
                  return;
               }

               let etapa_id = $(".tenerEtapaConversacionSelect ").val();

               if (isEmpty(etapa_id) == true) {
                  Swal.fire("Select a conversation stage");
                  return;
               }

               console.log("abrir plantilla");

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

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

                     return;
                  }

               $("#input_fecha_configuracion_mensaje").val("");
               $("#input_hora_configuracion_mensaje").val("");

               $(".quitar_tabla_informacion_plantillas").css("display", "none");
               $(".cargando_plantillas").css("display", "");

               $("#tipo_plantilla_enviar").val("1");
               $(".habilitar_configuracion_plantilla").css("display", "none"); 

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

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

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


 
               let info = await cargar_plantillas_whatsapp(
                  URL_BASE,
                  WHATSAPP_BUSINESS_ACCOUNT_IDENTIFIER,
                  10,
                  VERSION_WHATSAPP_GLOBAL,
                  TOKEN_WHATSAPP_GLOBAL,
               );
            
               //resultado_consulta_plantillas_whatsapp
               if (info.type == "error") {
                  Swal.fire({
                     icon: "error",
                     title: "Oops...",
                     text: info.message,
                  });
                  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);
               }

               $(".quitar_tabla_informacion_plantillas").css("display", "");
               $(".cargando_plantillas").css("display", "none");

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

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

               let bloquear = estadoBotonesMensajes();

               if(bloquear == true)
               {
                  return;
               }

               let etapa_id = $(".tenerEtapaConversacionSelect ").val();

               if (isEmpty(etapa_id) == true) {
                  Swal.fire("Select a conversation stage");
                  return;
               }

               console.log("abrir plantilla con");

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

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

               $("#input_fecha_configuracion_mensaje").val("");
               $("#input_hora_configuracion_mensaje").val("");

               $("#tipo_plantilla_enviar").val("2");
               $(".habilitar_configuracion_plantilla").css("display", ""); 

               $(".quitar_tabla_informacion_plantillas").css("display", "none");
               $(".cargando_plantillas").css("display", "");

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

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

               $("#myModal").modal("show");
 
               let info = await cargar_plantillas_whatsapp(
                  URL_BASE,
                  WHATSAPP_BUSINESS_ACCOUNT_IDENTIFIER,
                  10,
                  VERSION_WHATSAPP_GLOBAL,
                  TOKEN_WHATSAPP_GLOBAL,
               );
            
               //resultado_consulta_plantillas_whatsapp
               if (info.type == "error") {
                  Swal.fire({
                     icon: "error",
                     title: "Oops...",
                     text: info.message,
                  });
                  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);
               }

               $(".quitar_tabla_informacion_plantillas").css("display", "");
               $(".cargando_plantillas").css("display", "none");

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

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

               console.log("abrir comentarios");

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

               let mostrar_plantilla_whatsapp = validarRangoFechas(FECHA_ULTIMO_MENSAJE_PLANTILLA, ZONA_HORARIA_CONFIGURACION_WHATSAPP_SMS);

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

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

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

               if(mostrar_plantilla_whatsapp == true)
               {
                  desbloquearBotonesPlantillaWhatsapp();
               }else{
                  bloquearBotonesPlantillaWhatsapp();
               }

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

               $(".advertencia_mensaje_plantilla").css("display", "none"); // este es para habilitar el mensaje de advertencia de plantilla

 
               $(".ocultar_opciones_enviar_mensajes").css("display", "none");
               $(".ocultar_opciones_menu_mensajes").css("display", "none");
               $(".ocultar_opciones_enviar_mensajes_comentarios").css("display", "");

               $("#mi-mensaje-texto").val("");
 
               //console.log(listado_plantillas);
            });

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

               console.log("abrir comentarios");

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

               verificarSiCumpleFechaPlantillaWhatsapp();

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

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

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

               $(".ocultar_opciones_menu_mensajes").css("display", "");
               
               $(".ocultar_opciones_enviar_mensajes_comentarios").css("display", "none");
 
               //console.log(listado_plantillas);
            });

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

               console.log("abrir enviar_mensaje_comentario");

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

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

               if (isEmpty(TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID) == true) {
                  Swal.fire("Select a WhatsApp/SMS configuration account");
                  return;
               }

               let etapa_id = $(".tenerEtapaConversacionSelect ").val();

               if (isEmpty(etapa_id) == true) {
                  Swal.fire("Select a conversation stage");
                  return;
               }

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


               if (isEmpty(mi_comentario_mensaje_text) == true) {
                  Swal.fire("Write a comment");
                  return;
               }

               let UUID_generado = generadorUUID();

               let datos = {
                  UUID: UUID_generado,
                  to: numero_contacto_seleccionado,
                  from: FROM_GLOBAL,
                  staff_id: STAFF_ID_GLOBAL, //admin es default
                  configuracion_whatsapp_sms_id: TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID,
                  chat_number_id: id_contacto_seleccionado,
                  mensaje: mi_comentario_mensaje_text,
                  tipo_producto: "whatsapp",
                  etapa_id: etapa_id,
                  phone_number_id: PHONE_NUMBER_ID_GLOBAL,
               };

               console.log("datos");
               console.log(datos);

               $(".enviar_mensaje_comentario").css("color", "#434343");
               $(".enviar_mensaje_comentario").prop("disabled", true);     
               $("#mi-comentario-mensaje-texto").prop("disabled", true);

               bloquearBotonesMensajes();

               $.ajax({
                  type: "POST",
                  url: URL_BASE + "social/guardar-comentario-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

                     desbloquearBotonesMensajes();

                     $(".enviar_mensaje_comentario").css("color", "#434343");
                     $(".enviar_mensaje_comentario").prop("disabled", false);
                    
                     $("#mi-comentario-mensaje-texto").prop("disabled", false);

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

                        if (info.type == "success") {
 
                           const formattedDate = info.fecha_creacion;
 
                           let informacion = {
                              id: info.id_chat_social,
                              tipo_producto: "ninguno",
                              error_codigo: "",
                              error_mensaje: "",
                              status: "send",
                              wam_id: null,
                              UUID: UUID_generado,
                              phone_number_id: PHONE_NUMBER_ID_GLOBAL,
                              from: FROM_GLOBAL,
                              to: numero_contacto_seleccionado,
                              mensaje: info.message,
                              url: "",
                              tipo_mensaje: info.tipo_mensaje,
                              db: "no ocupo",
                              esContacto: "0",
                              fecha_creacion: info.fecha_creacion,

                              user_id: STAFF_ID_GLOBAL,
                              user_img: IMG_NOMBRE_PERFIL,

                              chat_number_id: id_contacto_seleccionado,

                              fecha_creacion_original       : info.fecha_creacion_original,  
                              fecha_creacion_GMT            : info.fecha_creacion_GMT,  
                           };

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

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

                              if (div.length) {

                                 let etapa_conversacion = div.find(".etapa_conversacion");

                                 if(etapa_conversacion.length){
                                   
                                    etapa_conversacion.text(quitarTextoLargo( info.nombre_etapa ));
                                    etapa_conversacion.attr('title', info.nombre_etapa );  

                                    etapa_conversacion.css({
                                       'background-color': info.color_fondo_etapa_conversacion, 
                                       'color': info.color_texto_etapa_conversacion,  
                                    });
                                 }
 
                              }  

                              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 existe_registro = (miData.data || []).find((item) => item.UUID == UUID_generado);

                                       if(!existe_registro)
                                       {
                                          let nuevo_arreglo = [...miData.data];

                                          nuevo_arreglo.push(informacion);
         
                                          let cabecera = {
                                             chat_number_id:              miData.chat_number_id,
                                             orden:                       miData.orden + "",
                                             informacion_contacto:        {
                                                ...miData.informacion_contacto,
                                                orden: miData.orden + "",
                                                ultimo_mensaje:                 miData.ultimo_mensaje,

                                                id_etapa_conversacion:          info.etapa_id,
                                                nombre_etapa_conversacion:      info.nombre_etapa,
                                                color_fondo_etapa_conversacion: info.color_fondo_etapa_conversacion,
                                                color_texto_etapa_conversacion: info.color_texto_etapa_conversacion,
                                             },
                                             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,
                                             config_whatsapp_other_id:    miData.config_whatsapp_other_id,
                                             data: nuevo_arreglo,
                                             ultimo_mensaje:              miData.ultimo_mensaje,

                                             id_etapa_conversacion:          info.etapa_id,
                                             nombre_etapa_conversacion:      info.nombre_etapa,
                                             color_fondo_etapa_conversacion: info.color_fondo_etapa_conversacion,
                                             color_texto_etapa_conversacion: info.color_texto_etapa_conversacion,
                                          };

                                          actualizarSinBuscadorInformacionDBLocal(cabecera, tabla_contactos_chat_indexedDb);
                                       }

                                        
                                    }
                                     
                     
                                 }
                              
                              });

                              
                           }
 
                           chat_mensajes.push(informacion);
 
                           const div_mensaje = $(".cuerpo_mensaje").find(`div[data-uuid="${UUID_generado}"]`);
  
                           if (div_mensaje.length == 0) 
                           {
                               let estructura_etapa = {
                                 wam_id: "",
                                 mensaje: mensaje,
                                 fecha_creacion: fecha_creacion,
                                 UUID: UUID,
                                 user_id: STAFF_ID_GLOBAL,
                                 user_img: IMG_NOMBRE_PERFIL,
                              };

                              console.log("api UUID_generado");
                              console.log(UUID_generado);

                              $(".cuerpo_mensaje").append(  
                                 mensaje_etapa_conversacion_whatsapp_usuarios(
                                    estructura_etapa
                                 ),
                              ); 
                           }  

                           scroll_abajo();

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

                     $(".enviar_mensaje_comentario").css("color", "#434343");
                     $(".enviar_mensaje_comentario").prop("disabled", false);
                    
                     $("#mi-comentario-mensaje-texto").prop("disabled", false);

                     desbloquearBotonesMensajes();

                  },
               });


              
            });

            $('#seleccionar_medio_mensaje').on('change', function () {
               const valorSeleccionado = $(this).val();
               console.log('Medio seleccionado:', valorSeleccionado);

               //$(".ocultar_opciones_enviar_mensajes_comentarios ").css("display", "none");  
               //$(".ocultar_mostrar_medio_mensaje").css("display", "");
               //$("#mi-comentario-mensaje-texto",).val("");
               //$("#mi-mensaje-texto",).val("");
               //$(".ocultar_opciones_menu_mensajes").css("display", "");
               //$(".ocultar_opciones_enviar_mensajes_comentarios").css("display", "none");
               //$(".enviar_plantilla_whatsapp").css("display", "none");

               if(valorSeleccionado == "sms")
               {
                   
                  bloquearBotonesPlantillaWhatsapp();
               }else{
                  verificarSiCumpleFechaPlantillaWhatsapp();
               }

               // Puedes agregar aquí cualquier acción que necesites
            });

 
         });

         $('#id_select_staff').on('select2:clear', function (e) {
            

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

         $('#id_select_custumers').on('select2:clear', function (e) {
 
            $(".custumers_div").html("");
         });


         var numero_contacto_seleccionado = null;
         var id_contacto_seleccionado = null;

         var loading = false;

         var esTW_WS = false;

          

          

         //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 id_chat_mensajes = null;
         var wam_id_chat_mensajes = null;
         var sid_id_chat_mensajes = null;
         var UUID_chat_mensajes = null;

         evento_seleccion_contactos_staff();
         evento_seleccion_contactos_staff_etapa();


         function esqueletonContactos() {

            let concatenar = "";
            
            for (let index = 0; index < 5; index++) {
               concatenar +=
                  '<a class="list-group-item media item-contactos placeholder-glow blur-in-expand" 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;
 
         }


         function htmlCambiarStaff() {
            const opciones = [
               { texto: 'Todos', tipo: 'todos' },
               { texto: 'Mis Asignados', tipo: 'asignados' },
               { texto: 'Sin Asignar', tipo: 'sin_asignar' }
            ];

            return opciones.map(opcion => `
               <li class="item_cambiar_staff" data-tipo="${opcion.tipo}" data-tipo_usuario="2" style="border-bottom: 1px solid #f5f5f5;">
                     ${opcion.texto}
               </li>
            `).join('');
         }

         function htmlCambiarStaffEtapa(texto="Todos", tipo_etapa = 2, etapa_id = 0) {
          

            return `
               <li class="item_cambiar_etapa"  data-etapa_id="${etapa_id}" data-tipo_etapa="${tipo_etapa}" style="border-bottom: 1px solid #f5f5f5;">
                     ${texto}
               </li>
            `;
         }

         function crearHtmlCambiarStaff(data={}, ultimo=false) {
             let{
               tipo,
               tipo_usuario,
               texto
             } = data;


            if(ultimo == true)
            {
               return `
                  <li class="item_cambiar_staff" data-tipo="${tipo}" data-tipo_usuario="${tipo_usuario}">
                        ${texto}
                  </li>
               `;
            }else{
               return `
                  <li class="item_cambiar_staff" data-tipo="${tipo}" data-tipo_usuario="${tipo_usuario}" style="border-bottom: 1px solid #f5f5f5;">
                        ${texto}
                  </li>
               `;
            }

             
         }

         //"https://xhde365.com"

         //console.log(APP_URL_ORIGINAL_SOCKET);

         const socket = io(APP_URL_ORIGINAL_SOCKET, {
            path: "/" + WS_NOMBRE_SOCKET + "/socket.io",
            //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 = "",
                  nombre_whatsapp = "",
                  accion,
                  db,
                  config_whatsapp_other_id,
               } = 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,
                     mensajes_no_leidos: 0,
                     mensajes_no_leidos_sms: 0,
                     mensajes_no_leidos_whatsapp: 0,
                     config_whatsapp_other_id:    config_whatsapp_other_id,
                  };

                  lista_contactos.push(add_contacto_desconocido);

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

                  //click_contactos();
                  click_only_contactos(id);
               }
 

               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,
                                 nombre_actual: 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,
                                 config_whatsapp_other_id:    config_whatsapp_other_id,

                                 id_etapa_conversacion:          miDato.id_etapa_conversacion,
                                 nombre_etapa_conversacion:      miDato.nombre_etapa_conversacion,
                                 color_fondo_etapa_conversacion: miDato.color_fondo_etapa_conversacion,
                                 color_texto_etapa_conversacion: miDato.color_texto_etapa_conversacion,
                              };

                              let data_modificada = {
                                 chat_number_id: miDato.chat_number_id,
                                 orden: miDato.orden + "",
                                 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,
                                 config_whatsapp_other_id:    config_whatsapp_other_id,
                                 ultimo_mensaje:              miDato.ultimo_mensaje,

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

                                 id_etapa_conversacion:          miDato.id_etapa_conversacion,
                                 nombre_etapa_conversacion:      miDato.nombre_etapa_conversacion,
                                 color_fondo_etapa_conversacion: miDato.color_fondo_etapa_conversacion,
                                 color_texto_etapa_conversacion: miDato.color_texto_etapa_conversacion,
                              };

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

                        if(contacto_nombre_contacto.length)
                        {
                           let maxLength = 15;  

                           let nombre_original = nombre;
                           let nombre_temporal = nombre;

                           let nuevo_nombre = "";
                           let nuevo_titulo_nombre = "";

                           let nombre_whatsapp_original = nombre_whatsapp || "";

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

                           let nuevo_estilo_nombre = "mi-texto-normal";

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

                           if (nombre == "Desconocido") {
                              nuevo_nombre =
                                 isEmpty(nombre_whatsapp) == true ? "Desconocido" : nombre_whatsapp;

                              nuevo_titulo_nombre =
                                 isEmpty(nombre_whatsapp) == true
                                    ? "Desconocido"
                                    : nombre_whatsapp_original;

                              nuevo_estilo_nombre =
                                 isEmpty(nombre_whatsapp) == true
                                    ? "mi-texto-normal"
                                    : "mi-texto-cursivo";
                           } else {

                              nuevo_nombre = nombre;
                              nuevo_titulo_nombre = nombre_original;

                              nuevo_estilo_nombre = "mi-texto-normal";
                           }
 
                           contacto_nombre_contacto.removeClass("mi-texto-cursivo");
                           contacto_nombre_contacto.removeClass("mi-texto-normal");
                           contacto_nombre_contacto.addClass(nuevo_estilo_nombre);

                           contacto_nombre_contacto.attr("title", nuevo_nombre);
                           contacto_nombre_contacto.text(nuevo_nombre);

                           //if (contacto_nombre_contacto.hasClass("mi-texto-cursivo")) {
                           //   contacto_nombre_contacto.removeClass("mi-texto-cursivo");
                           //}

                           //contacto_nombre_contacto.addClass("mi-texto-normal");
                        }

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

                              contacto_fullname_staff.text("N/A");
                              contacto_fullname_staff.attr("title", "Unassigned staff");

                           }else{
                              
                              if(isEmpty(fullname_staff) == true)
                              {
                                 
                                 contacto_fullname_staff.addClass("staff-sin-asignar ");
                                 contacto_fullname_staff.text("N/A");
                                 contacto_fullname_staff.attr("title", "Unassigned staff");

                              }else{

                                 contacto_fullname_staff.addClass("staff-asignado-a ");

                                 let words = (fullname_staff || "").split(" "); 

                                 contacto_fullname_staff.attr("title", fullname_staff);

                                 let nombre_abreviado = words[0].charAt(0).toUpperCase(); 

                                 if (words.length > 1) {
                                    nombre_abreviado += words[1].charAt(0).toUpperCase();
                                 }

                                 contacto_fullname_staff.text(nombre_abreviado);

                              }

                               
                           }

                           //contacto_fullname_staff.text(fullname_staff);

                        }

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

                     if ($('.offcanvas_').hasClass('offcanvas-show')) {
                        console.log('La clase offcanvas-show está activa');

                        let $offcanvasMenu = $("#offcanvas-menu");
                        let $offcanvasBackdrop = $("#offcanvas-backdrop");
                        let $offcanvasClose = $(".btn-close-offcanvas");

                        $offcanvasMenu.removeClass("offcanvas-show");
                        $offcanvasBackdrop.hide();

                        Swal.fire({
                           title: "The changes were updated. Open the menu again to see the updated changes.",
                           allowOutsideClick: false, // Evita cerrar al hacer clic fuera
                           allowEscapeKey: false, // Evita cerrar con la tecla Escape
                           confirmButtonText: "OK" // Botón para cerrar manualmente
                        });


                     } else {
                        console.log('La clase offcanvas-show NO está activa');
                     }

                  }
 
               }
 
            },
         );

         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,
               url_original,
               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);
            }else{
               //si estamos en este punto significa que actualizaremos el estado de los mensajes del que envio por medio del CRM

               actualizarMensajeDBLocalContactosSocket(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 &&
               isEmpty(id_chat_number) == true
            ) {
               return;
            }

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

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

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

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

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

         socket.on("chat-social-otros-mensajes/" + BASE_DE_DATOS_GLOBAL, (data) => {
 
            console.log("Datos de chat recibidos chat-social-otros-mensajes:", data);
            
            var {
               id,
               configuracion_whatsapp_sms_id,
               etapa_id,
               id_chat_number,
               tipo_producto,
               status,
               UUID,
               from,
               to,
               staff_id,
               mensaje,
               tipo_mensaje,
               fecha_creacion,
               color_fondo_etapa_conversacion,
               color_texto_etapa_conversacion,
               nombre_etapa,
               db,
            } = data;

            //aqui debemos de guardar el mensaje en la base de datos local falta que programar
            actualizarOtrosMensajesDBLocal(data);
          
            //dibujar contenido en pantalla
            if (TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID == null) {
               console.log(
                  "CAYO UN MENSAJE PERO NO SE SELECCIONO LA CONFIGURACION",
               );
               return;
            }

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

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

            // Si el elemento <a> existe
            if (div.length) 
            {
               let etapa_conversacion = div.find(".etapa_conversacion");

               if(etapa_conversacion.length){
                 
                  etapa_conversacion.text(quitarTextoLargo( nombre_etapa ));
                  etapa_conversacion.attr('title', nombre_etapa );  

                  etapa_conversacion.css({
                     'background-color': color_fondo_etapa_conversacion, 
                     'color': color_texto_etapa_conversacion,  
                  });
               }
            }
 

            if(id_chat_number != id_contacto_seleccionado)
            {
               console.log(
                  "No se selecciono un contacto para dibujar el mensaje",
               );
               return;
            }

            if (
               isEmpty(UUID) == true &&
               isEmpty(mensaje) == true &&
               isEmpty(tipo_mensaje) == true 
              
            ) {
               //console.log("entro en validacion");
               return;
            }
 

            const div_mensaje = $('.cuerpo_mensaje div[data-uuid="' + UUID + '"]');

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

            if (div_mensaje.length == 0) 
            {
               
               let estructura_etapa = {
                  wam_id: "",
                  mensaje: mensaje,
                  fecha_creacion: fecha_creacion,
                  UUID: UUID,
                  user_id: STAFF_ID_GLOBAL,
                  user_img: IMG_NOMBRE_PERFIL,
               };

               if(tipo_mensaje == "etapa_conversacion")
               {
                  $(".cuerpo_mensaje").append(  
                     mensaje_etapa_conversacion_whatsapp_usuarios(
                        estructura_etapa
                     ),
                  ); 
               }

               //console.log("tipo_mensaje xds-----");
               //console.log(tipo_mensaje);

               if(tipo_mensaje == "comentario")
               {

                  //console.log("tipo_mensaje  entre----");
 
                  $(".cuerpo_mensaje").append(  
                     mensaje_comentarios_whatsapp_usuarios(
                        estructura_etapa
                     ),
                  ); 

               }

               

                
            } 

                        //   {
            //    "id": 153,
            //    "configuracion_whatsapp_sms_id": 51,
            //    "etapa_id": "1",
            //    "id_chat_number": 2,
            //    "tipo_producto": "whatsapp",
            //    "status": "sent",
            //    "UUID": "bc1a65b0-4c3a-4cd5-9c65-636a90da53f5-6d80-beed-441100",
            //    "from": 15550389264,
            //    "to": 50497747446,
            //    "staff_id": "17",
            //    "mensaje": "Hola marcos",
            //    "tipo_mensaje": "comentario",
            //    "fecha_creacion": "23-05-2025 01:23 PM",
            //    "color_fondo_etapa_conversacion": "blue",
            //    "color_texto_etapa_conversacion": "white",
            //    "nombre_etapa": "New lead",
            //    "db": "hde360_app"
            //}

            scroll_abajo();

 
         });

         

         function evento_seleccion_empresa()
         {
            $(".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,
                  zona_horaria,
               } = $(this).data();

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

               console.log($(this).data());
   
               // Limpiar el select
               $("#seleccionar_medio_mensaje").html("");

               isEnabledWhatsapp = enableWhatsapp;
               isEnabledSMS = enableTwilio;

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

               // Agregar opción de WhatsApp si está habilitado
               if (enableTwilio == 1 || enableTwilio == "1") {
                  
                  let URL_IMAGEN_SMS = $("#URL_IMAGEN_SMS").val();

                  opciones += '<option value="sms" data-icon="' + URL_IMAGEN_SMS  + '" class="seleccionar_medio_sms">Reply by SMS to: +' + sms_phone_number + '</option>';
               }

               // Agregar opción de SMS si está habilitado
               if (enableWhatsapp == 1 || enableWhatsapp == "1") {

                  let URL_IMAGEN_WHATSAPP = $("#URL_IMAGEN_WHATSAPP").val();

                  opciones += '<option value="whatsapp" data-icon="' + URL_IMAGEN_WHATSAPP  + '" class="seleccionar_medio_whatsapp">Reply by WhatsApp to: +' + phone + '</option>';
               }

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

               //$("#seleccionar_medio_mensaje").html(`
               //   <option value="whatsapp" data-icon="${icono_whatsapp}" class="seleccionar_medio_whatsapp">Reply by WhatsApp to: +${mi_n}</option>
               //   <option value="sms" data-icon="${icono_sms}" class="seleccionar_medio_sms">Reply by SMS to: +${mi_n}</option>
               //`);

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

               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;

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

               let texto = "";
               texto = texto + identifier;

               if (enableWhatsapp == 1) {
                  if (isEmpty(phone) == false) {
                     texto = texto + " - WS(+" + phone + ")";
                  }
               }

               if (enableTwilio == 1) {
                  if (isEmpty(sms_phone_number) == false) {
                     texto = texto + " - TW(+" + sms_phone_number + ")";
                  }
               }

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

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

               //TIPO_DE_PLATAFORMA = $("#cambiar_titulo_plataforma").text();

               let canal = $("#cambiar_titulo_plataforma").text().trim();

               if(canal == "Whatsapp/SMS")
               {
                  TIPO_DE_PLATAFORMA = "whatsapp-sms";
               }

               if(canal == "Whatsapp")
               {
                  TIPO_DE_PLATAFORMA = "whatsapp";
               }

               if(canal == "SMS")
               {
                  TIPO_DE_PLATAFORMA = "sms";
               }

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

               let filtrar_id = "";
               let mi_arreglo_indexdb = [];

               if(TIPO_DE_PLATAFORMA == "whatsapp-sms")
               {
                  let miData = await consultarIdContactosInformacionDBLocal(tabla_contactos_chat_indexedDb);  

                  if (miData.type == "success") {
                     mi_arreglo_indexdb = [...(miData.data || []).filter((data) => data.config_whatsapp_other_id == TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID) || [] ];

                     filtrar_id = mi_arreglo_indexdb.map((element) => element.chat_number_id ).filter((value) => {
                        if (value === null || value === undefined) return false;
                        const numValue = Number(value);
                        return !isNaN(numValue) && /^\d+$/.test(value);
                     }).join(",");

                     //filtrar_id = mi_arreglo_indexdb.map((element) => element.chat_number_id ).join(",");

                  }

               }
    
               let informacion = {
                  tipo: "admin",
                  canal: TIPO_DE_PLATAFORMA,
                  configuracion_whatsapp_other_id: TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID,
                  filtrar_id: filtrar_id,
                  //filtrar_id: "56,31,37,39,60",
                  //filtrar_id: mi_arreglo_indexdb.map((element) => element.chat_number_id ).join(","),
               };

               console.log(informacion);
               //return;

               let data__backend_lista_contactos =
                  (await cargar_listado_contactos_api_post(
                     URL_BASE,
                    informacion
                  )) || [];


               if(TIPO_DE_PLATAFORMA == "whatsapp-sms")
               {
                  let existe_data = data__backend_lista_contactos;

                  if(true)
                  {
                  
                     let miArrListaContactosTemporal = [];

                     mi_arreglo_indexdb.forEach((element_lvl2) => {
                                 

                        element_lvl2.mensajes_no_leidos = "0";
                        element_lvl2.mensajes_no_leidos_whatsapp = "0";
                        element_lvl2.mensajes_no_leidos_sms = "0";
                        element_lvl2.ultimo_mensaje = element_lvl2.ultimo_mensaje;

                        element_lvl2.id_etapa_conversacion          = element_lvl2.id_etapa_conversacion || "";
                        element_lvl2.nombre_etapa_conversacion      = element_lvl2.nombre_etapa_conversacion || "";
                        element_lvl2.color_fondo_etapa_conversacion = element_lvl2.color_fondo_etapa_conversacion || "";
                        element_lvl2.color_texto_etapa_conversacion = element_lvl2.color_texto_etapa_conversacion || "";
 
                        if(Object.keys(element_lvl2).length != 0)
                        {
                           element_lvl2.informacion_contacto = {
                              orden: element_lvl2.informacion_contacto.orden,
                              id: element_lvl2.informacion_contacto.id,
                              number: element_lvl2.informacion_contacto.number,
                              custumer_id: element_lvl2.informacion_contacto.custumer_id,
                              staff_id: element_lvl2.informacion_contacto.staff_id,
                              created_at: element_lvl2.informacion_contacto.created_at,
                              nombre: element_lvl2.informacion_contacto.nombre,
                              email_custumers: element_lvl2.informacion_contacto.email_custumers,
                              phone_custumers: element_lvl2.informacion_contacto.phone_custumers,
                              company_custumers: element_lvl2.informacion_contacto.company_custumers,
                              address_custumers: element_lvl2.informacion_contacto.address_custumers,
                              fullname_staff: element_lvl2.informacion_contacto.fullname_staff,
                              username_staff: element_lvl2.informacion_contacto.username_staff,
                              user_type_staff: element_lvl2.informacion_contacto.user_type_staff,
                              phonenumber: element_lvl2.informacion_contacto.phonenumber,
                              sys_users_config_whatsapp_other_id: element_lvl2.informacion_contacto.sys_users_config_whatsapp_other_id,
                              config_whatsapp_other_id: element_lvl2.informacion_contacto.config_whatsapp_other_id,
                              nombre_actual: element_lvl2.informacion_contacto.nombre_actual,
                              fecha_humana: element_lvl2.informacion_contacto.fecha_humana,
                              fecha_humana_enviado: element_lvl2.informacion_contacto.fecha_humana_enviado,
                              fecha_ultimo_mensaje_recibido_unix: element_lvl2.informacion_contacto.fecha_ultimo_mensaje_recibido_unix,
                              fecha_ultimo_mensaje_enviado_unix: element_lvl2.informacion_contacto.fecha_ultimo_mensaje_enviado_unix,

                              fecha_ultimo_mensaje_recibido: element_lvl2.informacion_contacto.fecha_ultimo_mensaje_recibido,
                              fecha_ultimo_mensaje_enviado: element_lvl2.informacion_contacto.fecha_ultimo_mensaje_enviado,
                              fecha_ultimo_mensaje: element_lvl2.informacion_contacto.fecha_ultimo_mensaje,
                              fecha_ultimo_mensaje_unix: element_lvl2.informacion_contacto.fecha_ultimo_mensaje_unix,
                              
                              nombre_whatsapp: element_lvl2.informacion_contacto.nombre_whatsapp,
                              mensajes_no_leidos_sms: '0',
                              mensajes_no_leidos_whatsapp: '0',
                              mensajes_no_leidos: '0',
                              ultimo_mensaje: element_lvl2.informacion_contacto.ultimo_mensaje,

                              id_etapa_conversacion: element_lvl2.id_etapa_conversacion,
                              nombre_etapa_conversacion: element_lvl2.informacion_contacto.nombre_etapa_conversacion,
                              color_fondo_etapa_conversacion: element_lvl2.informacion_contacto.color_fondo_etapa_conversacion,
                              color_texto_etapa_conversacion: element_lvl2.informacion_contacto.color_texto_etapa_conversacion,

                           };
                           
                           element_lvl2.config_whatsapp_other_id = element_lvl2.informacion_contacto.config_whatsapp_other_id;

                           element_lvl2.id_etapa_conversacion          = element_lvl2.id_etapa_conversacion || "";
                           element_lvl2.nombre_etapa_conversacion      = element_lvl2.nombre_etapa_conversacion || "";
                           element_lvl2.color_fondo_etapa_conversacion = element_lvl2.color_fondo_etapa_conversacion || "";
                           element_lvl2.color_texto_etapa_conversacion = element_lvl2.color_texto_etapa_conversacion || "";

                           
                        }else{
                           
                           element_lvl2.informacion_contacto =  {};
                        }

                        let encontre_registro = existe_data.find((item) => item.id == element_lvl2.chat_number_id);

                        if(encontre_registro)
                        {

                           let {
                              orden,
                              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,
                              config_whatsapp_other_id,
                              nombre_actual,
                              fecha_humana,
                              fecha_humana_enviado,
                              fecha_ultimo_mensaje_recibido_unix,
                              fecha_ultimo_mensaje_enviado_unix,
                              nombre_whatsapp,
                              chat_con_mensaje_whatsapp,
                              mensajes_no_leidos_sms,
                              mensajes_no_leidos_whatsapp,
                              mensajes_no_leidos,

                              fecha_ultimo_mensaje_recibido,
                              fecha_ultimo_mensaje_enviado,
                              fecha_ultimo_mensaje,
                              fecha_ultimo_mensaje_unix,
                              ultimo_mensaje,

                              id_etapa_conversacion,
                              nombre_etapa_conversacion,
                              color_fondo_etapa_conversacion,
                              color_texto_etapa_conversacion,

                           } = encontre_registro;

                           if(isEmpty(orden) == true)
                           {
                              orden = orden || 0;
                           }

                           element_lvl2.informacion_contacto = {
                                 orden,
                                 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,
                                 config_whatsapp_other_id,
                                 nombre_actual,
                                 fecha_humana,
                                 fecha_humana_enviado,
                                 fecha_ultimo_mensaje_recibido_unix,
                                 fecha_ultimo_mensaje_enviado_unix,
                                 nombre_whatsapp,
                                 mensajes_no_leidos_sms,
                                 mensajes_no_leidos_whatsapp,
                                 mensajes_no_leidos,

                                 fecha_ultimo_mensaje_recibido,
                                 fecha_ultimo_mensaje_enviado,
                                 fecha_ultimo_mensaje,
                                 fecha_ultimo_mensaje_unix,
                                 ultimo_mensaje,

                                 id_etapa_conversacion,
                                 nombre_etapa_conversacion,
                                 color_fondo_etapa_conversacion,
                                 color_texto_etapa_conversacion,
                           };

                           element_lvl2.id_etapa_conversacion = id_etapa_conversacion;
                           element_lvl2.nombre_etapa_conversacion = nombre_etapa_conversacion;
                           element_lvl2.color_fondo_etapa_conversacion = color_fondo_etapa_conversacion;
                           element_lvl2.color_texto_etapa_conversacion = color_texto_etapa_conversacion;

                           element_lvl2.mensajes_no_leidos = mensajes_no_leidos;
                           element_lvl2.mensajes_no_leidos_whatsapp = mensajes_no_leidos_whatsapp;
                           element_lvl2.mensajes_no_leidos_sms = mensajes_no_leidos_sms;
                           element_lvl2.ultimo_mensaje = ultimo_mensaje;

                           element_lvl2.config_whatsapp_other_id = config_whatsapp_other_id;

                           miArrListaContactosTemporal.push(element_lvl2.informacion_contacto); 

                        }else{

                           miArrListaContactosTemporal.push(element_lvl2.informacion_contacto); 

                        }

 
                     });

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

                     //return;

                     let listado_id_temporal = miArrListaContactosTemporal.map((element) => element.id);
                     let elementos_sin_conversaciones_nuevos = existe_data.filter((data) => !listado_id_temporal.includes(data.id) );  

                     //console.log("existe_data xd");
                     //console.log(existe_data);
                     //console.log("listado_id_temporal");
                     //console.log(listado_id_temporal);
                     //console.log("elementos_sin_conversaciones_nuevos");
                     //console.log(elementos_sin_conversaciones_nuevos);

                     elementos_sin_conversaciones_nuevos.forEach((element) => {

                        miArrListaContactosTemporal.push(element); 
                     
                     });

                     lista_contactos = miArrListaContactosTemporal.sort((a, b) => {
                        return Number(b.orden) - Number(a.orden);
                     });
 

                     //console.log("lista_contactos xd");
                     //console.log(lista_contactos);
                     //console.log("caimos en un return aqui abajo mi dog");
                     //return;


                  }

               }else{
                  lista_contactos = data__backend_lista_contactos;
               }

               //console.log("data__backend_lista_contactos")
               //console.log(data__backend_lista_contactos)
 
               //console.log("lista_contactos db");
               //console.log(lista_contactos);
               //console.log("ahi un return aqui abajo");
               //return;
               

               /*
               const [lista_contactos___, listado_staff___] = await Promise.all([

                  cargar_listado_contactos_api(
                     URL_BASE,
                     "admin",
                     TIPO_DE_PLATAFORMA,
                     TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID
                  ),

                  cargar_listado_statt_api(
                     URL_BASE,
                     TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID
                  )
               ]);

               lista_contactos = lista_contactos___ || [];
               listado_staff = listado_staff___ || [];
               */
 

               //console.log(lista_contactos);

               var lista_contactos_html = "";

               lista_contactos.forEach((element) => {

                  //console.log("element");
                  //console.log(element.ultimo_mensaje);

                  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 + "",
                              orden: element.orden + "",
                              informacion_contacto: element,
                              mensajes_no_leidos:    procesarVariable(element.mensajes_no_leidos),
                              mensajes_no_leidos_sms: procesarVariable(element.mensajes_no_leidos_sms),
                              mensajes_no_leidos_whatsapp: procesarVariable(element.mensajes_no_leidos_whatsapp),
                              config_whatsapp_other_id: element.config_whatsapp_other_id,
                              ultimo_mensaje: element.ultimo_mensaje,

                              id_etapa_conversacion: element.id_etapa_conversacion,
                              nombre_etapa_conversacion: element.nombre_etapa_conversacion,
                              color_fondo_etapa_conversacion: element.color_fondo_etapa_conversacion,
                              color_texto_etapa_conversacion: element.color_texto_etapa_conversacion,

                              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 + "",
                              orden: element.orden + "",
                              informacion_contacto: element,
                              mensajes_no_leidos: procesarVariable(element.mensajes_no_leidos),
                              mensajes_no_leidos_sms: procesarVariable(element.mensajes_no_leidos_sms),
                              mensajes_no_leidos_whatsapp: procesarVariable(element.mensajes_no_leidos_whatsapp),
                              config_whatsapp_other_id: element.config_whatsapp_other_id,
                              ultimo_mensaje: element.ultimo_mensaje,

                              id_etapa_conversacion: element.id_etapa_conversacion,
                              nombre_etapa_conversacion: element.nombre_etapa_conversacion,
                              color_fondo_etapa_conversacion: element.color_fondo_etapa_conversacion,
                              color_texto_etapa_conversacion: element.color_texto_etapa_conversacion,

                              data: informacionObtenida.data
                           };

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

                           actualizarSinBuscadorInformacionDBLocal(data_guardar, tabla_contactos_chat_indexedDb);

                        }


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

               //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").trigger('change');
                  $(".btn_microfono").css("color", "#434343");
                  $(".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).trigger('change');

                  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", "#434343");
                     $(".btn_microfono").prop("disabled", false);
                     $(".btn_microfono").html('<i class="fa fa-microphone"></i>');
                  }
               }
               */

               listado_staff = [];
               $(".select_staff").html("");

               $("#cambiar_texto_contacto_seleccionado_staff").text("Todos");

               $("#cambiar_texto_contacto_seleccionado_staff").attr({
                  "data-tipo": "todos",
                  "data-tipo_usuario": "2"
               });

               $("#cambiar_texto_contacto_seleccionado_staff_etapas").text("Todos");

               $("#cambiar_texto_contacto_seleccionado_staff_etapas").attr({
                 "data-etapa_id": "0",
                 "data-tipo_etapa": "2"
               });

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

               let mi_html_staff = htmlCambiarStaff();

               listado_staff.forEach((element, index) => {
                  
                  let {
                     id,
                     username,
                     fullname,
                     phonenumber,
                     user_type,
                  } = element;

                  let construccion = {
                     tipo : id,
                     texto : fullname,
                     tipo_usuario : 1,
                  };

                  if(id != STAFF_ID_GLOBAL)
                  {
                     if (index === listado_staff.length - 1)
                     {
                        mi_html_staff += crearHtmlCambiarStaff(construccion, true); 
                     }else{
                        mi_html_staff += crearHtmlCambiarStaff(construccion, false); 
                     }

                  }
 
               });

               $(".item_dropdown_contactos_staff").html(mi_html_staff);

               evento_seleccion_contactos_staff();

               evento_seleccion_contactos_staff_etapa();

               /*
               cargar_plantillas_whatsapp(
                  URL_BASE,
                  WHATSAPP_BUSINESS_ACCOUNT_IDENTIFIER,
                  10,
                  VERSION_WHATSAPP_GLOBAL,
                  TOKEN_WHATSAPP_GLOBAL,
               ).then((data) =>{
                  resultado_consulta_plantillas_whatsapp = data;
               });
               */

                
              
            });
         }
 
         function evento_seleccion_contactos_staff()
         {
            $(".item_cambiar_staff").click(async function () {
               const {
                  tipo,
                  tipo_usuario,
               
               } = $(this).data();

               let texto = $(this).text();

               $("#cambiar_texto_contacto_seleccionado_staff").text(texto);

               $("#cambiar_texto_contacto_seleccionado_staff").attr({
                  "data-tipo": tipo,
                  "data-tipo_usuario": tipo_usuario
               });
 
               $(".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());   

               let filtrar_id = "";
               let filtro_contactos_db_local = [];

               let miData = await consultarIdContactosInformacionDBLocal(tabla_contactos_chat_indexedDb);  

               if (miData.type == "success") {
                  filtro_contactos_db_local = [...(miData.data || []).filter((data) => data.config_whatsapp_other_id == TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID) || [] ];

                  let variable_filtro_tipo = null;
 
                  let mi_lista_contactos_filtrada = [];

                  if(filtro_contactos_db_local.length != 0)
                  {

                     let filtro_informacion_general = filtro_contactos_db_local.map((data) =>  data.informacion_contacto );

                     if(tipo == "todos" && tipo_usuario == "2")
                     {  
                        mi_lista_contactos_filtrada = filtro_informacion_general || [];
                     }

                     if(tipo == "asignados" && tipo_usuario == "2")
                     {  
                        mi_lista_contactos_filtrada = filtro_informacion_general.filter((data) => data.staff_id == STAFF_ID_GLOBAL ) || [];
                     }

                     if(tipo == "sin_asignar" && tipo_usuario == "2")
                     {  
                        mi_lista_contactos_filtrada = filtro_informacion_general.filter((data) => isEmpty(data.staff_id) == true ) || [];
                     }

                     if(tipo_usuario == "1")
                     {
                        mi_lista_contactos_filtrada = filtro_informacion_general.filter((data) => data.staff_id == tipo ) || [];
                     }

                     //filtrar usuarios por etapa ------------------------------
                  
                     let etapa_id = $("#cambiar_texto_contacto_seleccionado_staff_etapas").attr("data-etapa_id");
                     let tipo_etapa = $("#cambiar_texto_contacto_seleccionado_staff_etapas").attr("data-tipo_etapa");

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

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

                     //si es 2 es porque es todos
                     if(tipo_etapa == "2" || tipo_etapa == 2)
                     {  
                        mi_lista_contactos_filtrada = mi_lista_contactos_filtrada || [];
                     }

                     //por id de etapa
                     if(tipo_etapa == "1" || tipo_etapa == 1)
                     {  
                        mi_lista_contactos_filtrada = mi_lista_contactos_filtrada.filter((data) => data.id_etapa_conversacion == etapa_id ) || [];
                     }

                     //---------------------------------------------------------

                     mi_lista_contactos_filtrada = mi_lista_contactos_filtrada.sort((a, b) => {
                        return Number(b.orden) - Number(a.orden);
                     });

                     var lista_contactos_html = "";

                     mi_lista_contactos_filtrada.forEach((element) => {
                        lista_contactos_html += contactos(element);
                     });

                      
                     //console.log("filtro_informacion_general ");
                     //console.log(filtro_informacion_general);
 
                     //console.log("mi_lista_contactos_filtrada ");
                     //console.log(mi_lista_contactos_filtrada);

                     //console.log("STAFF_ID_GLOBAL ");
                     //console.log(STAFF_ID_GLOBAL);
                     //console.log(tipo);

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

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

                  }
                   

                  //console.log("filtro_contactos_db_local informacion general");
                  //console.log(filtro_contactos_db_local);

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

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

               }
 
 
            });
         }

         function evento_seleccion_contactos_staff_etapa()
         {

     
            $(".item_cambiar_etapa").click(async function () {
               const {
                  etapa_id,
                  tipo_etapa,
               
               } = $(this).data();

               let texto = $(this).text();

 
               $("#cambiar_texto_contacto_seleccionado_staff_etapas").text(texto);

               //data-etapa_id="0" data-tipo_etapa="2" esto significa que es todos
               //data-etapa_id="2" data-tipo_etapa="1" esto es por id de etapa donde 2 es el id

               $("#cambiar_texto_contacto_seleccionado_staff_etapas").attr({
                 "data-etapa_id": etapa_id,
                 "data-tipo_etapa": tipo_etapa
               });

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

               let filtrar_id = "";
               let filtro_contactos_db_local = [];

               let miData = await consultarIdContactosInformacionDBLocal(tabla_contactos_chat_indexedDb);  

               if (miData.type == "success") {
                  filtro_contactos_db_local = [...(miData.data || []).filter((data) => data.config_whatsapp_other_id == TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID) || [] ];

                  let variable_filtro_tipo = null;
 
                  let mi_lista_contactos_filtrada = [];

                  if(filtro_contactos_db_local.length != 0)
                  {
                     let filtro_informacion_general = filtro_contactos_db_local.map((data) =>  data.informacion_contacto );

                     if(tipo_etapa == "2" || tipo_etapa == 2)
                     {  
                        mi_lista_contactos_filtrada = filtro_informacion_general || [];
                     }

                     if(tipo_etapa == "1" || tipo_etapa == 1)
                     {  
                        mi_lista_contactos_filtrada = filtro_informacion_general.filter((data) => data.id_etapa_conversacion == etapa_id ) || [];
                     }

                     //cambiar etapa--------------------------------------------
                     let tipo = $("#cambiar_texto_contacto_seleccionado_staff").attr("data-tipo");
                     let tipo_usuario = $("#cambiar_texto_contacto_seleccionado_staff").attr("data-tipo_usuario");

                     if(tipo == "todos" && tipo_usuario == "2")
                     {  
                        mi_lista_contactos_filtrada = mi_lista_contactos_filtrada || [];
                     }

                     if(tipo == "asignados" && tipo_usuario == "2")
                     {  
                        mi_lista_contactos_filtrada = mi_lista_contactos_filtrada.filter((data) => data.staff_id == STAFF_ID_GLOBAL ) || [];
                     }

                     if(tipo == "sin_asignar" && tipo_usuario == "2")
                     {  
                        mi_lista_contactos_filtrada = mi_lista_contactos_filtrada.filter((data) => isEmpty(data.staff_id) == true ) || [];
                     }

                     if(tipo_usuario == "1")
                     {
                        mi_lista_contactos_filtrada = mi_lista_contactos_filtrada.filter((data) => data.staff_id == tipo ) || [];
                     }

                     mi_lista_contactos_filtrada = mi_lista_contactos_filtrada.sort((a, b) => {
                        return Number(b.orden) - Number(a.orden);
                     });

                     var lista_contactos_html = "";

                     mi_lista_contactos_filtrada.forEach((element) => {

                        lista_contactos_html += contactos(element);
                     });


                     //console.log("filtro_informacion_general ");
                     //console.log(filtro_informacion_general);
 
                     //console.log("mi_lista_contactos_filtrada ");
                     //console.log(mi_lista_contactos_filtrada);

                     //console.log("STAFF_ID_GLOBAL ");
                     //console.log(STAFF_ID_GLOBAL);
                     //console.log(tipo);

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

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

                  }
                   

                  //console.log("filtro_contactos_db_local informacion general");
                  //console.log(filtro_contactos_db_local);

                

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


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

                   

               }
 
 
            });
         }
 

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

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

            //console.log(estaDeshabilitado);

            if(estaDeshabilitado == true)
            {
               return;
            }

            let etapa_id = $(".tenerEtapaConversacionSelect ").val();

            if (isEmpty(etapa_id) == true) {
               Swal.fire("Select a conversation stage");
               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;
            }

            let UUID_generado = generadorUUID();

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

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

            bloquearBotonesMensajes();
             

            if (tipo_medio == "sms") {
               let datos = {
                  UUID: UUID_generado,
                  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,

                  etapa_id: etapa_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", "#434343");
                     $(".btn_footer_enviar").prop("disabled", false);
                     $(".enviar_mensaje").prop("disabled", false);
                     $("#mi-mensaje-texto").prop("disabled", false);

                     desbloquearBotonesMensajes();


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

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

                           let color_texto_encontrado = "";
                           let color_fondo_encontrado = "";
                           let nombre_etapa_encontrado = "";
                           let id_etapa_conversacion_encontrado = "";
                            
                           let mi_etapa = lista_etapa_conversacion.find((element) => element.id == info.etapa_id);

                           if(mi_etapa)
                           {
                              nombre_etapa_encontrado  = mi_etapa.nombre_etapa;
                              color_fondo_encontrado = mi_etapa.color_fondo_etapa_conversacion;
                              color_texto_encontrado = mi_etapa.color_texto_etapa_conversacion;
                              id_etapa_conversacion_encontrado = mi_etapa.id;
                           }

                           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,
                              UUID: UUID_generado,
                              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,

                              user_id: STAFF_ID_GLOBAL,
                              user_img: IMG_NOMBRE_PERFIL,

                              chat_number_id: id_contacto_seleccionado,

                              fecha_creacion_original       : info.fecha_creacion_original,  
                              fecha_creacion_GMT            : info.fecha_creacion_GMT,  
                           };
 

                           let sumar_msj_sin_responder = lista_contactos.find(
                              (elemento) =>
                                 elemento.id == id_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;

                              sumar_msj_sin_responder.mensajes_no_leidos = 0;
                              sumar_msj_sin_responder.mensajes_no_leidos_sms = 0;
                              sumar_msj_sin_responder.mensajes_no_leidos_whatsapp = 0;

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

                              if (div.length) {

                                 let etapa_conversacion = div.find(".etapa_conversacion");

                                 if(etapa_conversacion.length){
                                   
                                    etapa_conversacion.text(quitarTextoLargo( nombre_etapa_encontrado ));
                                    etapa_conversacion.attr('title', nombre_etapa_encontrado );  

                                    etapa_conversacion.css({
                                      'background': color_fondo_encontrado,    
                                      'color': color_texto_encontrado,          
                                    });
                                 }

                                 let ultimo_mensaje_div = div.find(".ultimo_mensaje_div");

                                 if(ultimo_mensaje_div.length){
                                   
                                    ultimo_mensaje_div.text(quitarTextoLargo($("#mi-mensaje-texto").val()));
                                    ultimo_mensaje_div.attr('title', $("#mi-mensaje-texto").val());  
                                 }

                                 var badge = div.find(".badge-contactos");

                                 if(badge.length){
                                    badge.text("");
                                    badge.removeClass("badge-colors");
                                 }

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

                                 if(div_fecha_humana.length)
                                 {
                                    div_fecha_humana.text(info.fecha_humana);
                                 }

                                 let fullHtml = div.prop('outerHTML');
 
                                 div.remove();
                                 
                                 $(".mi-bandeja-mensajes-contactos").prepend(
                                    fullHtml,
                                 );


                                 click_only_contactos(id_contacto_seleccionado);
                              } 
 
                              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,
                                          orden: info.fecha_creacion_unix + "",
                                          informacion_contacto:        {
                                             ...miData.informacion_contacto,
                                             orden: info.fecha_creacion_unix + "",
                                             ultimo_mensaje:              info.mensaje,

                                             id_etapa_conversacion:          id_etapa_conversacion_encontrado,
                                             nombre_etapa_conversacion:      nombre_etapa_encontrado,
                                             color_fondo_etapa_conversacion: color_fondo_encontrado,
                                             color_texto_etapa_conversacion: color_texto_encontrado,
                                          },
                                          mensajes_no_leidos:          0,
                                          mensajes_no_leidos_sms:      0,
                                          mensajes_no_leidos_whatsapp: 0,
                                          config_whatsapp_other_id:    miData.config_whatsapp_other_id,
                                          data: nuevo_arreglo,
                                          ultimo_mensaje:              info.mensaje,

                                          id_etapa_conversacion:          id_etapa_conversacion_encontrado,
                                          nombre_etapa_conversacion:      nombre_etapa_encontrado,
                                          color_fondo_etapa_conversacion: color_fondo_encontrado,
                                          color_texto_etapa_conversacion: color_texto_encontrado,
                                       };
 
                                       console.log("cabecera");
                                       console.log(cabecera);

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

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

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

                     desbloquearBotonesMensajes();
                  },
               });
            }

            if (tipo_medio == "whatsapp") {

 
               let datos = {
                  UUID: UUID_generado,
                  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,

                  etapa_id: etapa_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", "#434343");
                     $(".btn_footer_enviar").prop("disabled", false);
                     $(".enviar_mensaje").prop("disabled", false);
                     $("#mi-mensaje-texto").prop("disabled", false);

                     desbloquearBotonesMensajes();

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

                        if (info.type == "success") {
                           
                           let color_texto_encontrado = "";
                           let color_fondo_encontrado = "";
                           let nombre_etapa_encontrado = "";
                           let id_etapa_conversacion_encontrado = "";
                            
                           let mi_etapa = lista_etapa_conversacion.find((element) => element.id == info.etapa_id);

                           if(mi_etapa)
                           {
                              nombre_etapa_encontrado  = mi_etapa.nombre_etapa;
                              color_fondo_encontrado = mi_etapa.color_fondo_etapa_conversacion;
                              color_texto_encontrado = mi_etapa.color_texto_etapa_conversacion;
                              id_etapa_conversacion_encontrado = mi_etapa.id;
                           }

                           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,
                              UUID: UUID_generado,
                              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,
                              user_id: STAFF_ID_GLOBAL,
                              user_img: IMG_NOMBRE_PERFIL,
                              chat_number_id: id_contacto_seleccionado,

                              fecha_creacion_original       : info.fecha_creacion_original,  
                              fecha_creacion_GMT            : info.fecha_creacion_GMT,  
                           };

                           let sumar_msj_sin_responder = lista_contactos.find(
                              (elemento) =>
                                 elemento.id == id_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;
                              
                              sumar_msj_sin_responder.mensajes_no_leidos = 0;
                              sumar_msj_sin_responder.mensajes_no_leidos_sms = 0;
                              sumar_msj_sin_responder.mensajes_no_leidos_whatsapp = 0;

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

                              if (div.length) {

                                 let etapa_conversacion = div.find(".etapa_conversacion");

                                 if(etapa_conversacion.length){
                                   
                                    etapa_conversacion.text(quitarTextoLargo( nombre_etapa_encontrado ));
                                    etapa_conversacion.attr('title', nombre_etapa_encontrado );  

                                    etapa_conversacion.css({
                                      'background': color_fondo_encontrado,    
                                      'color': color_texto_encontrado,          
                                    });
                                 }
 

                                 let ultimo_mensaje_div = div.find(".ultimo_mensaje_div");

                                 if(ultimo_mensaje_div.length){
                                   
                                    ultimo_mensaje_div.text(quitarTextoLargo($("#mi-mensaje-texto").val()));
                                    ultimo_mensaje_div.attr('title', $("#mi-mensaje-texto").val());  
                                 }

                                 var badge = div.find(".badge-contactos");

                                 if(badge.length){
                                    badge.text("");
                                    badge.removeClass("badge-colors");
                                 }

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

                                 if(div_fecha_humana.length)
                                 {
                                    div_fecha_humana.text(info.fecha_humana);
                                 }

                                 // 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_only_contactos(id_contacto_seleccionado);
                              }  
                                
 
                              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,
                                          ultimo_mensaje:              $("#mi-mensaje-texto").val(),
                                          orden: info.fecha_creacion_unix + "",
                                          informacion_contacto:        {
                                             ...miData.informacion_contacto,
                                             orden: info.fecha_creacion_unix + "",
                                             ultimo_mensaje:              $("#mi-mensaje-texto").val(),

                                             id_etapa_conversacion:          id_etapa_conversacion_encontrado,
                                             nombre_etapa_conversacion:      nombre_etapa_encontrado,
                                             color_fondo_etapa_conversacion: color_fondo_encontrado,
                                             color_texto_etapa_conversacion: color_texto_encontrado,

                                          },
                                          mensajes_no_leidos:          0,
                                          mensajes_no_leidos_sms:      0,
                                          mensajes_no_leidos_whatsapp: 0,
                                          config_whatsapp_other_id:    miData.config_whatsapp_other_id,
                                          data: nuevo_arreglo,

                                          id_etapa_conversacion:          id_etapa_conversacion_encontrado,
                                          nombre_etapa_conversacion:      nombre_etapa_encontrado,
                                          color_fondo_etapa_conversacion: color_fondo_encontrado,
                                          color_texto_etapa_conversacion: color_texto_encontrado,
                                       };
 
                                       actualizarSinBuscadorInformacionDBLocal(cabecera, tabla_contactos_chat_indexedDb);
                                    }
                                     
                     
                                 }
                              
                              });
                           }
 
                           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,
                                 UUID_generado,
                              ),
                           );

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

                     desbloquearBotonesMensajes();
                  },
               });
            }
         });

         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 estaDeshabilitado = estadoBotonesMensajes();
               
               if(estaDeshabilitado == true)
               {
                  return;
               }

               let etapa_id = $(".tenerEtapaConversacionSelect ").val();

               if (isEmpty(etapa_id) == true) {
                  Swal.fire("Select a conversation stage");
                  return;
               }

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

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

               //if (seleccion_medio_mensaje != "whatsapp") {
               //   Swal.fire("Only enabled for WhatsApp");
               //   return;
               //}
 
               if (isEmpty(numero_contacto_seleccionado) == true) {
                  Swal.fire("Select a contact");
                  return;
               }

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

                              //console.log(base64WithoutPrefix);

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

                              let UUID_generado = generadorUUID();

                              bloquearBotonesMensajes();

                              if (seleccion_medio_mensaje == "whatsapp")
                              {
                                 var datos = {
                                    UUID: UUID_generado,
                                    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,

                                    etapa_id: etapa_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) {

                                       desbloquearBotonesMensajes();

                                       //console.log(
                                       //   "Respuesta del servidor:",
                                       //   response,
                                       //);

                                       const info = JSON.parse(response);

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

                                          let color_texto_encontrado = "";
                                          let color_fondo_encontrado = "";
                                          let nombre_etapa_encontrado = "";
                                          let id_etapa_conversacion_encontrado = "";
                                          
                                          let mi_etapa = lista_etapa_conversacion.find((element) => element.id == info.etapa_id);

                                          if(mi_etapa)
                                          {
                                             nombre_etapa_encontrado  = mi_etapa.nombre_etapa;
                                             color_fondo_encontrado = mi_etapa.color_fondo_etapa_conversacion;
                                             color_texto_encontrado = mi_etapa.color_texto_etapa_conversacion;
                                             id_etapa_conversacion_encontrado = mi_etapa.id;
                                          }

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

                                          if(sumar_msj_sin_responder)
                                          {
                                             
                                             sumar_msj_sin_responder.mensajes_no_leidos = 0;
                                             sumar_msj_sin_responder.mensajes_no_leidos_sms = 0;
                                             sumar_msj_sin_responder.mensajes_no_leidos_whatsapp = 0;

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

                                             if (div.length) {

                                                let etapa_conversacion = div.find(".etapa_conversacion");

                                                if(etapa_conversacion.length){
                                                
                                                   etapa_conversacion.text(quitarTextoLargo( nombre_etapa_encontrado ));
                                                   etapa_conversacion.attr('title', nombre_etapa_encontrado );  

                                                   etapa_conversacion.css({
                                                   'background': color_fondo_encontrado,    
                                                   'color': color_texto_encontrado,          
                                                   });
                                                }

                                                let ultimo_mensaje_div = div.find(".ultimo_mensaje_div");

                                                if(ultimo_mensaje_div.length){
                                                
                                                   ultimo_mensaje_div.text(quitarTextoLargo("Attached file"));
                                                   ultimo_mensaje_div.attr('title', "Attached file");  
                                                }

                                                var badge = div.find(".badge-contactos");

                                                if(badge.length){
                                                   badge.text("");
                                                   badge.removeClass("badge-colors");
                                                }

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

                                                if(div_fecha_humana.length)
                                                {
                                                   div_fecha_humana.text(info.fecha_humana);
                                                }

                                                let fullHtml = div.prop('outerHTML');
               
                                                div.remove();
                                                
                                                $(".mi-bandeja-mensajes-contactos").prepend(
                                                   fullHtml,
                                                );


                                                click_only_contactos(id_contacto_seleccionado);
                                             }

                                          }

                                          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,
                                             UUID: UUID_generado,
                                             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,

                                             user_id: STAFF_ID_GLOBAL,
                                             user_img: IMG_NOMBRE_PERFIL,
                                             url_original: info.url_original,

                                             fecha_creacion_original       : info.fecha_creacion_original,  
                                             fecha_creacion_GMT            : info.fecha_creacion_GMT,  
                                          };

                                          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;
                                          
                                             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,
                                                         orden: info.fecha_creacion_unix + "",
                                                         informacion_contacto:        {
                                                            ...miData.informacion_contacto,
                                                            orden: info.fecha_creacion_unix + "",
                                                            ultimo_mensaje: "Attached file",

                                                            id_etapa_conversacion:          id_etapa_conversacion_encontrado,
                                                            nombre_etapa_conversacion:      nombre_etapa_encontrado,
                                                            color_fondo_etapa_conversacion: color_fondo_encontrado,
                                                            color_texto_etapa_conversacion: color_texto_encontrado,
                                                         },
                                                         mensajes_no_leidos:          0,
                                                         mensajes_no_leidos_sms:      0,
                                                         mensajes_no_leidos_whatsapp: 0,
                                                         config_whatsapp_other_id:    miData.config_whatsapp_other_id,
                                                         data: nuevo_arreglo,
                                                         ultimo_mensaje: "Attached file",

                                                         id_etapa_conversacion:          id_etapa_conversacion_encontrado,
                                                         nombre_etapa_conversacion:      nombre_etapa_encontrado,
                                                         color_fondo_etapa_conversacion: color_fondo_encontrado,
                                                         color_texto_etapa_conversacion: color_texto_encontrado,
                                                      };

                                                      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,
                                                info.url_original,
                                                UUID_generado
                                             ),
                                          );

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

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

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


                                          if(info.mensajes_no_leidos_pendiente <= 0)
                                          {
                                             //$(".signo_existe_mensaje_ws").fadeOut();
                                          }
                                          
                                       } else if (info.type == "error") {
                                          Swal.fire({
                                             icon: "error",
                                             title: "Oops...",
                                             text: info.message,
                                          });

                                          $("#fileInput").val("");
                                       }
                                       // 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í

                                       desbloquearBotonesMensajes();

                                       $("#fileInput").val("");
                                    },
                                 });

                              }else{

                                 let datos = {
                                    UUID: UUID_generado,
                                    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,

                                    etapa_id: etapa_id,

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

                                       desbloquearBotonesMensajes();

                                       //console.log(
                                       //   "Respuesta del servidor:",
                                       //   response,
                                       //);

                                       const info = JSON.parse(response);

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

                                          let color_texto_encontrado = "";
                                          let color_fondo_encontrado = "";
                                          let nombre_etapa_encontrado = "";
                                          let id_etapa_conversacion_encontrado = "";
                                          
                                          let mi_etapa = lista_etapa_conversacion.find((element) => element.id == info.etapa_id);

                                          if(mi_etapa)
                                          {
                                             nombre_etapa_encontrado  = mi_etapa.nombre_etapa;
                                             color_fondo_encontrado = mi_etapa.color_fondo_etapa_conversacion;
                                             color_texto_encontrado = mi_etapa.color_texto_etapa_conversacion;
                                             id_etapa_conversacion_encontrado = mi_etapa.id;
                                          }

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

                                          if(sumar_msj_sin_responder)
                                          {
                                             
                                             sumar_msj_sin_responder.mensajes_no_leidos = 0;
                                             sumar_msj_sin_responder.mensajes_no_leidos_sms = 0;
                                             sumar_msj_sin_responder.mensajes_no_leidos_whatsapp = 0;

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

                                             if (div.length) {

                                                let etapa_conversacion = div.find(".etapa_conversacion");

                                                if(etapa_conversacion.length){
                                                
                                                   etapa_conversacion.text(quitarTextoLargo( nombre_etapa_encontrado ));
                                                   etapa_conversacion.attr('title', nombre_etapa_encontrado );  

                                                   etapa_conversacion.css({
                                                   'background': color_fondo_encontrado,    
                                                   'color': color_texto_encontrado,          
                                                   });
                                                }

                                                let ultimo_mensaje_div = div.find(".ultimo_mensaje_div");

                                                if(ultimo_mensaje_div.length){
                                                
                                                   ultimo_mensaje_div.text(quitarTextoLargo("Attached file"));
                                                   ultimo_mensaje_div.attr('title', "Attached file");  
                                                }

                                                var badge = div.find(".badge-contactos");

                                                if(badge.length){
                                                   badge.text("");
                                                   badge.removeClass("badge-colors");
                                                }

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

                                                if(div_fecha_humana.length)
                                                {
                                                   div_fecha_humana.text(info.fecha_humana);
                                                }

                                                let fullHtml = div.prop('outerHTML');
               
                                                div.remove();
                                                
                                                $(".mi-bandeja-mensajes-contactos").prepend(
                                                   fullHtml,
                                                );


                                                click_only_contactos(id_contacto_seleccionado);
                                             }

                                          }

                                          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,
                                             UUID: UUID_generado,
                                             sid: info.sid,
                                             phone_number_id: null,
                                             from: SMS_FROM_GLOBAL,
                                             to: numero_contacto_seleccionado,
                                             mensaje: info.mensaje,
                                             url: info.url,
                                             tipo_mensaje: "image",
                                             db: "no ocupo",
                                             esContacto: "0",
                                             fecha_creacion: formattedDate,

                                             user_id: STAFF_ID_GLOBAL,
                                             user_img: IMG_NOMBRE_PERFIL,

                                             url_original: info.url_original,

                                             chat_number_id: id_contacto_seleccionado,

                                             fecha_creacion_original       : info.fecha_creacion_original,  
                                             fecha_creacion_GMT            : info.fecha_creacion_GMT,  
                                          };

                                          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;
                                          
                                             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,
                                                         orden: info.fecha_creacion_unix + "",
                                                         informacion_contacto:        {
                                                            ...miData.informacion_contacto,
                                                            orden: info.fecha_creacion_unix + "",
                                                            ultimo_mensaje: "Attached file",

                                                            id_etapa_conversacion:          id_etapa_conversacion_encontrado,
                                                            nombre_etapa_conversacion:      nombre_etapa_encontrado,
                                                            color_fondo_etapa_conversacion: color_fondo_encontrado,
                                                            color_texto_etapa_conversacion: color_texto_encontrado,
                                                         },
                                                         mensajes_no_leidos:          0,
                                                         mensajes_no_leidos_sms:      0,
                                                         mensajes_no_leidos_whatsapp: 0,
                                                         config_whatsapp_other_id:    miData.config_whatsapp_other_id,
                                                         data: nuevo_arreglo,
                                                         ultimo_mensaje: "Attached file",

                                                         id_etapa_conversacion:          id_etapa_conversacion_encontrado,
                                                         nombre_etapa_conversacion:      nombre_etapa_encontrado,
                                                         color_fondo_etapa_conversacion: color_fondo_encontrado,
                                                         color_texto_etapa_conversacion: color_texto_encontrado,
                                                      };

                                                      actualizarSinBuscadorInformacionDBLocal(cabecera, tabla_contactos_chat_indexedDb);
                                                   }

                                                   
                                    
                                                }
                                             
                                             });
                                          }

                                          chat_mensajes.push(informacion);

                                          $(".cuerpo_mensaje").append(
                                             mensaje_image_sms_usuarios(
                                                informacion.tipo_producto,
                                                "",
                                                informacion.status,
                                                informacion.sid,
                                                informacion.mensaje,
                                                informacion.fecha_creacion,
                                                IMG_NOMBRE_PERFIL,
                                                UUID_generado,
                                                informacion,
                                             )
                                          );
  
                                          $("#mi-mensaje-texto").focus();
                                          $("#mi-mensaje-texto").val("");
                                          $("#fileInput").val("");

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

                                          if(info.mensajes_no_leidos_pendiente <= 0)
                                          {
                                             //$(".signo_existe_mensaje_ws").fadeOut();
                                          }
                                          
                                       } else if (info.type == "error") {
                                          Swal.fire({
                                             icon: "error",
                                             title: "Oops...",
                                             text: info.message,
                                          });

                                          $("#fileInput").val("");
                                       }
                                       // 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í

                                       desbloquearBotonesMensajes();

                                       $("#fileInput").val("");
                                    },
                                 });
                                 
                              }

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

                        $("#fileInput").val("");
                     }
                  } else {
                     Swal.fire(
                        "Por favor, seleccione una imagen en formato PNG o JPEG.",
                     );

                     $("#fileInput").val("");
                  }
               }
            });

         //imagenes
         document
            .getElementById("selectPhotos")
            .addEventListener("click", function () {

               let bloquear = estadoBotonesMensajes();

               if(bloquear == true)
               {
                  return;
               }

               let etapa_id = $(".tenerEtapaConversacionSelect ").val();

               if (isEmpty(etapa_id) == true) {
                  Swal.fire("Select a conversation stage");
                  return;
               }

               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 bloquear = estadoBotonesMensajes();

               if(bloquear == true)
               {
                  return;
               }

               let etapa_id = $(".tenerEtapaConversacionSelect ").val();

               if (isEmpty(etapa_id) == true) {
                  Swal.fire("Select a conversation stage");
                  return;
               }

               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 estaDeshabilitado = estadoBotonesMensajes();
               
               if(estaDeshabilitado == true)
               {
                  return;
               }

               let etapa_id = $(".tenerEtapaConversacionSelect ").val();

               if (isEmpty(etapa_id) == true) {
                  Swal.fire("Select a conversation stage");
                  return;
               }

               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/")) {
                  var allowedMimeTypes = [
                     "audio/aac", // .aac
                     "audio/amr", // .amr
                     "audio/mpeg", // .mp3
                     "audio/mp4", // .m4a
                     "audio/ogg"  // .ogg
                  ];

                  if (!allowedMimeTypes.includes(file.type)) {
                     tipo_documento = "document";
                  }else{
                     tipo_documento = "audio";
                  }
                   
               } else if (file.type.startsWith("video/")) {
                  
                  var allowedVideoMimeTypes = [
                     "video/mp4", // .mp4
                     "video/3gpp" // .3gp
                  ];

                  if (!allowedVideoMimeTypes.includes(file.type)) {
                     tipo_documento = "document";
                  }else{
                     tipo_documento = "video";
                  }

                 
               } else {
                  var imageMimeTypes = [
                     "image/jpeg",
                     "image/png",
                     "image/gif",
                     "image/bmp",
                     "image/webp",
                     "image/tiff",
                     "image/svg+xml"
                  ];

                  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 UUID_generado = generadorUUID();

                  bloquearBotonesMensajes();

                  if (seleccion_medio_mensaje == "whatsapp") 
                  {

                     let datos = {
                        UUID: UUID_generado,
                        mensaje: mensaje,
                        archivo: base64String,
                        filename: file.name,
                        tipo_archivo: file.type, // no se usa
                        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,

                        etapa_id: etapa_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

                           desbloquearBotonesMensajes();

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

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

                                 let color_texto_encontrado = "";
                                 let color_fondo_encontrado = "";
                                 let nombre_etapa_encontrado = "";
                                 let id_etapa_conversacion_encontrado = "";
                                 
                                 let mi_etapa = lista_etapa_conversacion.find((element) => element.id == info.etapa_id);

                                 if(mi_etapa)
                                 {
                                    nombre_etapa_encontrado  = mi_etapa.nombre_etapa;
                                    color_fondo_encontrado = mi_etapa.color_fondo_etapa_conversacion;
                                    color_texto_encontrado = mi_etapa.color_texto_etapa_conversacion;
                                    id_etapa_conversacion_encontrado = mi_etapa.id;
                                 }

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

                                 
                                 if(sumar_msj_sin_responder)
                                 {
                                    
                                    sumar_msj_sin_responder.mensajes_no_leidos = 0;
                                    sumar_msj_sin_responder.mensajes_no_leidos_sms = 0;
                                    sumar_msj_sin_responder.mensajes_no_leidos_whatsapp = 0;

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

                                    if (div.length) {

                                       let etapa_conversacion = div.find(".etapa_conversacion");

                                       if(etapa_conversacion.length){
                                       
                                          etapa_conversacion.text(quitarTextoLargo( nombre_etapa_encontrado ));
                                          etapa_conversacion.attr('title', nombre_etapa_encontrado );  

                                          etapa_conversacion.css({
                                          'background': color_fondo_encontrado,    
                                          'color': color_texto_encontrado,          
                                          });
                                       }

                                       let ultimo_mensaje_div = div.find(".ultimo_mensaje_div");

                                       if(ultimo_mensaje_div.length){
                                       
                                          ultimo_mensaje_div.text(quitarTextoLargo("Attached file"));
                                          ultimo_mensaje_div.attr('title', "Attached file");  
                                       }

                                       var badge = div.find(".badge-contactos");

                                       if(badge.length){
                                          badge.text("");
                                          badge.removeClass("badge-colors");
                                       }

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

                                       if(div_fecha_humana.length)
                                       {
                                          div_fecha_humana.text(info.fecha_humana);
                                       }

                                       let fullHtml = div.prop('outerHTML');
               
                                       div.remove();
                                       
                                       $(".mi-bandeja-mensajes-contactos").prepend(
                                          fullHtml,
                                       );


                                       click_only_contactos(id_contacto_seleccionado);
                                    }

                                 }

                                 
                                 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,
                                       UUID: UUID_generado,
                                       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,

                                       user_id: STAFF_ID_GLOBAL,
                                       user_img: IMG_NOMBRE_PERFIL,

                                       chat_number_id: id_contacto_seleccionado,

                                       fecha_creacion_original       : info.fecha_creacion_original,  
                                       fecha_creacion_GMT            : info.fecha_creacion_GMT,  
                                    };

                                    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;
                                       
                                       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,
                                                   orden: info.fecha_creacion_unix + "",
                                                   informacion_contacto:        {
                                                      ...miData.informacion_contacto,
                                                      orden: info.fecha_creacion_unix + "",
                                                      ultimo_mensaje: "Attached file",

                                                      id_etapa_conversacion:          id_etapa_conversacion_encontrado,
                                                      nombre_etapa_conversacion:      nombre_etapa_encontrado,
                                                      color_fondo_etapa_conversacion: color_fondo_encontrado,
                                                      color_texto_etapa_conversacion: color_texto_encontrado,
                                                   },
                                                   mensajes_no_leidos:          0,
                                                   mensajes_no_leidos_sms:      0,
                                                   mensajes_no_leidos_whatsapp: 0,
                                                   config_whatsapp_other_id:    miData.config_whatsapp_other_id,
                                                   data: nuevo_arreglo,
                                                   ultimo_mensaje: "Attached file",

                                                   id_etapa_conversacion:          id_etapa_conversacion_encontrado,
                                                   nombre_etapa_conversacion:      nombre_etapa_encontrado,
                                                   color_fondo_etapa_conversacion: color_fondo_encontrado,
                                                   color_texto_etapa_conversacion: color_texto_encontrado,
                                                };

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

                                 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,
                                       UUID:UUID_generado,
                                       phone_number_id: PHONE_NUMBER_ID_GLOBAL,
                                       from: FROM_GLOBAL,
                                       to: numero_contacto_seleccionado,
                                       mensaje: "",
                                       url: info.url,
                                       tipo_mensaje: "audio",
                                       db: "no ocupo",
                                       esContacto: "0",
                                       fecha_creacion: formattedDate,
                                       filename: file.name,

                                       user_id: STAFF_ID_GLOBAL,
                                       user_img: IMG_NOMBRE_PERFIL,

                                       chat_number_id: id_contacto_seleccionado,

                                       fecha_creacion_original       : info.fecha_creacion_original,  
                                       fecha_creacion_GMT            : info.fecha_creacion_GMT,  
                                    };

                                    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;
                                       

                                       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,
                                                   orden: info.fecha_creacion_unix + "",
                                                   informacion_contacto:        {
                                                      ...miData.informacion_contacto,
                                                      orden: info.fecha_creacion_unix + "",
                                                      ultimo_mensaje: "Attached file",

                                                      id_etapa_conversacion:          id_etapa_conversacion_encontrado,
                                                      nombre_etapa_conversacion:      nombre_etapa_encontrado,
                                                      color_fondo_etapa_conversacion: color_fondo_encontrado,
                                                      color_texto_etapa_conversacion: color_texto_encontrado,
                                                   },
                                                   mensajes_no_leidos:          0,
                                                   mensajes_no_leidos_sms:      0,
                                                   mensajes_no_leidos_whatsapp: 0,
                                                   config_whatsapp_other_id:    miData.config_whatsapp_other_id,
                                                   data: nuevo_arreglo,
                                                   ultimo_mensaje: "Attached file",

                                                   id_etapa_conversacion:          id_etapa_conversacion_encontrado,
                                                   nombre_etapa_conversacion:      nombre_etapa_encontrado,
                                                   color_fondo_etapa_conversacion: color_fondo_encontrado,
                                                   color_texto_etapa_conversacion: color_texto_encontrado,
                                                };

                                                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,
                                          "",
                                          info.url, // url
                                          "audio",
                                          "no ocupo el db",
                                          "0",
                                          formattedDate,
                                          file.name,
                                          IMG_NOMBRE_PERFIL,
                                          UUID_generado
                                       ),
                                    );

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

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

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

                                       user_id: STAFF_ID_GLOBAL,
                                       user_img: IMG_NOMBRE_PERFIL,

                                       chat_number_id: id_contacto_seleccionado,

                                       fecha_creacion_original       : info.fecha_creacion_original,  
                                       fecha_creacion_GMT            : info.fecha_creacion_GMT,  
                                    };

                                    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;
                                       

                                       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,
                                                   orden: info.fecha_creacion_unix + "",
                                                   informacion_contacto:        {
                                                      ...miData.informacion_contacto,
                                                      orden: info.fecha_creacion_unix + "",
                                                      ultimo_mensaje: "Attached file",

                                                      id_etapa_conversacion:          id_etapa_conversacion_encontrado,
                                                      nombre_etapa_conversacion:      nombre_etapa_encontrado,
                                                      color_fondo_etapa_conversacion: color_fondo_encontrado,
                                                      color_texto_etapa_conversacion: color_texto_encontrado,
                                                   },
                                                   mensajes_no_leidos:          0,
                                                   mensajes_no_leidos_sms:      0,
                                                   mensajes_no_leidos_whatsapp: 0,
                                                   config_whatsapp_other_id:    miData.config_whatsapp_other_id,
                                                   data: nuevo_arreglo,
                                                   ultimo_mensaje: "Attached file",

                                                   id_etapa_conversacion:          id_etapa_conversacion_encontrado,
                                                   nombre_etapa_conversacion:      nombre_etapa_encontrado,
                                                   color_fondo_etapa_conversacion: color_fondo_encontrado,
                                                   color_texto_etapa_conversacion: color_texto_encontrado,
                                                };

                                                actualizarSinBuscadorInformacionDBLocal(cabecera, tabla_contactos_chat_indexedDb);
                                             }

                                             
                              
                                          }
                                       
                                       });

                                    }
   
                                    chat_mensajes.push(informacion);

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

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

                                 $("#hiddenFileInput").val("");
                              }
                           } catch (error) {
                              Swal.fire({
                                 icon: "error",
                                 title: "Oops...",
                                 text: error,
                              });

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

                           $("#hiddenFileInput").val("");
                        },
                     });
                     
                  }else{
 
                     let datos = {
                        UUID: UUID_generado,
                        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,

                        etapa_id: etapa_id,

                        filename: file.name,
                        tipo_documento: tipo_documento,
                        tipo_archivo: file.type, // no se usa
                        archivo: base64String,
                     };

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

                           desbloquearBotonesMensajes();

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

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

                                 let color_texto_encontrado = "";
                                 let color_fondo_encontrado = "";
                                 let nombre_etapa_encontrado = "";
                                 let id_etapa_conversacion_encontrado = "";
                                 
                                 let mi_etapa = lista_etapa_conversacion.find((element) => element.id == info.etapa_id);

                                 if(mi_etapa)
                                 {
                                    nombre_etapa_encontrado  = mi_etapa.nombre_etapa;
                                    color_fondo_encontrado = mi_etapa.color_fondo_etapa_conversacion;
                                    color_texto_encontrado = mi_etapa.color_texto_etapa_conversacion;
                                    id_etapa_conversacion_encontrado = mi_etapa.id;
                                 }

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

                                 
                                 if(sumar_msj_sin_responder)
                                 {
                                    
                                    sumar_msj_sin_responder.mensajes_no_leidos = 0;
                                    sumar_msj_sin_responder.mensajes_no_leidos_sms = 0;
                                    sumar_msj_sin_responder.mensajes_no_leidos_whatsapp = 0;

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

                                    if (div.length) {

                                       let etapa_conversacion = div.find(".etapa_conversacion");

                                       if(etapa_conversacion.length){
                                       
                                          etapa_conversacion.text(quitarTextoLargo( nombre_etapa_encontrado ));
                                          etapa_conversacion.attr('title', nombre_etapa_encontrado );  

                                          etapa_conversacion.css({
                                          'background': color_fondo_encontrado,    
                                          'color': color_texto_encontrado,          
                                          });
                                       }

                                       let ultimo_mensaje_div = div.find(".ultimo_mensaje_div");

                                       if(ultimo_mensaje_div.length){
                                       
                                          ultimo_mensaje_div.text(quitarTextoLargo("Attached file"));
                                          ultimo_mensaje_div.attr('title', "Attached file");  
                                       }

                                       var badge = div.find(".badge-contactos");

                                       if(badge.length){
                                          badge.text("");
                                          badge.removeClass("badge-colors");
                                       }

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

                                       if(div_fecha_humana.length)
                                       {
                                          div_fecha_humana.text(info.fecha_humana);
                                       }

                                       let fullHtml = div.prop('outerHTML');
               
                                       div.remove();
                                       
                                       $(".mi-bandeja-mensajes-contactos").prepend(
                                          fullHtml,
                                       );


                                       click_only_contactos(id_contacto_seleccionado);
                                    }

                                 }

                                 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: "sms",
                                       error_codigo: "",
                                       error_mensaje: "",
                                       status: info.status,
                                       wam_id: null,
                                       sid: info.sid,
                                       UUID: UUID_generado,
                                       phone_number_id: null,
                                       from: SMS_FROM_GLOBAL,
                                       to: numero_contacto_seleccionado,
                                       mensaje: info.mensaje,
                                       url: info.url,
                                       tipo_mensaje: "document",
                                       db: "no ocupo",
                                       esContacto: "0",
                                       fecha_creacion: formattedDate,
                                       filename: file.name,

                                       user_id: STAFF_ID_GLOBAL,
                                       user_img: IMG_NOMBRE_PERFIL,

                                       url_original: info.url_original,

                                       chat_number_id: id_contacto_seleccionado,

                                       fecha_creacion_original       : info.fecha_creacion_original,  
                                       fecha_creacion_GMT            : info.fecha_creacion_GMT,  
                                    };

                                    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;
                                       
                                       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,
                                                   orden: info.fecha_creacion_unix + "",
                                                   informacion_contacto:        {
                                                      ...miData.informacion_contacto,
                                                      orden: info.fecha_creacion_unix + "",
                                                      ultimo_mensaje: "Attached file",

                                                      id_etapa_conversacion:          id_etapa_conversacion_encontrado,
                                                      nombre_etapa_conversacion:      nombre_etapa_encontrado,
                                                      color_fondo_etapa_conversacion: color_fondo_encontrado,
                                                      color_texto_etapa_conversacion: color_texto_encontrado,
                                                   },
                                                   mensajes_no_leidos:          0,
                                                   mensajes_no_leidos_sms:      0,
                                                   mensajes_no_leidos_whatsapp: 0,
                                                   config_whatsapp_other_id:    miData.config_whatsapp_other_id,
                                                   data: nuevo_arreglo,
                                                   ultimo_mensaje: "Attached file",

                                                   id_etapa_conversacion:          id_etapa_conversacion_encontrado,
                                                   nombre_etapa_conversacion:      nombre_etapa_encontrado,
                                                   color_fondo_etapa_conversacion: color_fondo_encontrado,
                                                   color_texto_etapa_conversacion: color_texto_encontrado,
                                                };

                                                actualizarSinBuscadorInformacionDBLocal(cabecera, tabla_contactos_chat_indexedDb);
                                             }

                                             
                              
                                          }
                                       
                                       });

                                    }
   
                                    chat_mensajes.push(informacion);
 
                                    $(".cuerpo_mensaje").append(
                                       mensaje_documento_sms_usuarios(
                                          informacion.tipo_producto,
                                          informacion.error_codigo,
                                          informacion.status,
                                          informacion.sid,
                                          informacion.mensaje,
                                          informacion.fecha_creacion,
                                          IMG_NOMBRE_PERFIL,
                                          UUID_generado,
                                          informacion,
                                       ),
                                    );
 
                                 }

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

                                    let informacion = {
                                       id: info.id_chat_social,
                                       tipo_producto: "sms",
                                       error_codigo: "",
                                       error_mensaje: "",
                                       status:info.status,
                                       wam_id: null,
                                       sid: info.sid,
                                       UUID:UUID_generado,
                                       phone_number_id: PHONE_NUMBER_ID_GLOBAL,
                                       from: FROM_GLOBAL,
                                       to: numero_contacto_seleccionado,
                                       mensaje: info.mensaje,
                                       url: info.url,
                                       tipo_mensaje: "audio",
                                       db: "no ocupo",
                                       esContacto: "0",
                                       fecha_creacion: formattedDate,
                                       filename: file.name,

                                       user_id: STAFF_ID_GLOBAL,
                                       user_img: IMG_NOMBRE_PERFIL,

                                       chat_number_id: id_contacto_seleccionado,

                                       fecha_creacion_original       : info.fecha_creacion_original,  
                                       fecha_creacion_GMT            : info.fecha_creacion_GMT,  
                                    };

                                    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;
                                       

                                       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,
                                                   orden: info.fecha_creacion_unix + "",
                                                   informacion_contacto:        {
                                                      ...miData.informacion_contacto,
                                                      orden: info.fecha_creacion_unix + "",
                                                      ultimo_mensaje: "Attached file",

                                                      id_etapa_conversacion:          id_etapa_conversacion_encontrado,
                                                      nombre_etapa_conversacion:      nombre_etapa_encontrado,
                                                      color_fondo_etapa_conversacion: color_fondo_encontrado,
                                                      color_texto_etapa_conversacion: color_texto_encontrado,
                                                   },
                                                   mensajes_no_leidos:          0,
                                                   mensajes_no_leidos_sms:      0,
                                                   mensajes_no_leidos_whatsapp: 0,
                                                   config_whatsapp_other_id:    miData.config_whatsapp_other_id,
                                                   data: nuevo_arreglo,
                                                   ultimo_mensaje: "Attached file",

                                                   id_etapa_conversacion:          id_etapa_conversacion_encontrado,
                                                   nombre_etapa_conversacion:      nombre_etapa_encontrado,
                                                   color_fondo_etapa_conversacion: color_fondo_encontrado,
                                                   color_texto_etapa_conversacion: color_texto_encontrado,
                                                };

                                                actualizarSinBuscadorInformacionDBLocal(cabecera, tabla_contactos_chat_indexedDb);
                                             }

                                             
                              
                                          }
                                       
                                       });

                                    }
   
                                    chat_mensajes.push(informacion);

 
                                    $(".cuerpo_mensaje").append(
                                       mensaje_audio_sms_usuarios_socket(
                                          informacion.tipo_producto,
                                          informacion.error_codigo,
                                          informacion.status,
                                          informacion.sid,
                                          informacion.mensaje,
                                          informacion.fecha_creacion,
                                          IMG_NOMBRE_PERFIL,
                                          UUID_generado,
                                          informacion,
                                       ),
                                    );
 
                                    sleep(1000).then(() => {
                                       var div = $(".cuerpo_mensaje").find(
                                          '[data-uuid="' + UUID_generado + '"]',
                                       );

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

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

                                    let informacion = {
                                       id: info.id_chat_social,
                                       tipo_producto: "sms",
                                       error_codigo: "",
                                       error_mensaje: "",
                                       status:info.status,
                                       wam_id: null,
                                       sid: info.sid,
                                       UUID:UUID_generado,
                                       phone_number_id: PHONE_NUMBER_ID_GLOBAL,
                                       from: FROM_GLOBAL,
                                       to: numero_contacto_seleccionado,
                                       mensaje: info.mensaje,
                                       url: info.url,
                                       tipo_mensaje: "video",
                                       db: "no ocupo",
                                       esContacto: "0",
                                       fecha_creacion: formattedDate,
                                       filename: file.name,

                                       user_id: STAFF_ID_GLOBAL,
                                       user_img: IMG_NOMBRE_PERFIL,

                                       chat_number_id: id_contacto_seleccionado,

                                       fecha_creacion_original       : info.fecha_creacion_original,  
                                       fecha_creacion_GMT            : info.fecha_creacion_GMT,  
                                    };

                                    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;
                                       

                                       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,
                                                   orden: info.fecha_creacion_unix + "",
                                                   informacion_contacto:        {
                                                      ...miData.informacion_contacto,
                                                      orden: info.fecha_creacion_unix + "",
                                                      ultimo_mensaje: "Attached file",

                                                      id_etapa_conversacion:          id_etapa_conversacion_encontrado,
                                                      nombre_etapa_conversacion:      nombre_etapa_encontrado,
                                                      color_fondo_etapa_conversacion: color_fondo_encontrado,
                                                      color_texto_etapa_conversacion: color_texto_encontrado,
                                                   },
                                                   mensajes_no_leidos:          0,
                                                   mensajes_no_leidos_sms:      0,
                                                   mensajes_no_leidos_whatsapp: 0,
                                                   config_whatsapp_other_id:    miData.config_whatsapp_other_id,
                                                   data: nuevo_arreglo,
                                                   ultimo_mensaje: "Attached file",

                                                   id_etapa_conversacion:          id_etapa_conversacion_encontrado,
                                                   nombre_etapa_conversacion:      nombre_etapa_encontrado,
                                                   color_fondo_etapa_conversacion: color_fondo_encontrado,
                                                   color_texto_etapa_conversacion: color_texto_encontrado,
                                                };

                                                actualizarSinBuscadorInformacionDBLocal(cabecera, tabla_contactos_chat_indexedDb);
                                             }

                                             
                              
                                          }
                                       
                                       });

                                    }
   
                                    chat_mensajes.push(informacion);
 

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

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

                                       if (div.length > 0) {
                                          var audioElement = div.find("video")[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("");

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

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


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

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

                           $("#hiddenFileInput").val("");
                        },
                     });

                  }

                   
               };

               reader.readAsDataURL(file);
         });

         
         function click_contactos() {

            $(".item-contactos").off("click");

            $(".item-contactos").on("click", async function () {

               $('.cargando_mensajes_chat_interno').fadeOut(300);
                
               // Obtener los valores de los atributos data
               const idContacto = $(this).data("id_contacto");
               const numeroContacto = $(this).data("numero-contacto");
               const nombreContacto = $(this).data("nombre-contacto");
               const nombre = $(this).data("nombre");

               NOMBRE_CONTACTO_SELECCIONADO = $(this).data("nombre");

               numero_contacto_seleccionado = numeroContacto;
               id_contacto_seleccionado = idContacto;

               operacionClickContacto(idContacto, 
                                      numeroContacto, 
                                      nombreContacto, 
                                      NOMBRE_CONTACTO_SELECCIONADO,
                                      $(this),
                                      nombre
                                      );  
                

               //
            });
         }

         function click_only_contactos(idContacto)
         {
            $(".item-contactos[data-id_contacto='" + idContacto + "']").off("click");

            $(".item-contactos[data-id_contacto='" + idContacto + "']").on("click", async function () {
               
               $('.cargando_mensajes_chat_interno').fadeOut(300);
                
               // Obtener los valores de los atributos data
               const idContacto = $(this).data("id_contacto");
               const numeroContacto = $(this).data("numero-contacto");
               const nombre = $(this).data("nombre");
               const nombreContacto = $(this).data("nombre-contacto");

               NOMBRE_CONTACTO_SELECCIONADO = $(this).data("nombre");

               numero_contacto_seleccionado = numeroContacto;
               id_contacto_seleccionado = idContacto;

               operacionClickContacto(idContacto, 
                                      numeroContacto, 
                                      nombreContacto, 
                                      NOMBRE_CONTACTO_SELECCIONADO,
                                      $(this),
                                      nombre
                                      );  
              
            });
         }

         async function operacionClickContacto(
            id_contacto_seleccionado,
            numero_contacto_seleccionado,
            nombre_contacto_seleccionado,
            nombre_seleccionado,
            $this,
            nombre = ""
            
         ) {

            const idContacto =  id_contacto_seleccionado;
            const numeroContacto = numero_contacto_seleccionado;
            const nombreContacto = nombre_contacto_seleccionado;
            NOMBRE_CONTACTO_SELECCIONADO = nombre_seleccionado;

            numero_contacto_seleccionado = numeroContacto;
            id_contacto_seleccionado = idContacto;

            numero_contacto_seleccionado

            FECHA_ULTIMO_MENSAJE_PLANTILLA = null;

            let mi_n = String(numero_contacto_seleccionado).replace("+", "");
            
            cambiarSelectMedioMensaje(mi_n);

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

            //evento para activar el las conversaciones new Lead, payment, discarted
            seleccion_etapa_conversacion();

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

            chat_mensajes = [];
 
             $(".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");
            //});

            $(".item-contactos").removeClass("item-contacto-seleccionado");

            //$(this).css("background-color", "#f5f5f5");
            $this.addClass("item-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(idContacto, tabla_contactos_chat_indexedDb);

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

                  /*
                  let informacion_etapa_encontrada = lista_etapa_conversacion.find((element) => element.mostrarEtapa == 1 && element.activo == 1 && element.id == miData.id_etapa_conversacion);
 
                  if(informacion_etapa_encontrada)
                  {
                     $(".tenerEtapaConversacionSelect").val(miData.id_etapa_conversacion);
                  }else{
                     $(".tenerEtapaConversacionSelect").val("");
                  }
                  */

                  if(miData.data.length != 0)
                  {
                     chat_mensajes = [...(miData.data || []) ]; 
                  } 
               }
                   
            }

            let esMiMensaje = chat_mensajes.filter((data) => data.chat_number_id == idContacto);

            let ultimo_id_mensaje = "";

            if(esMiMensaje.length != 0)
            {
               ultimo_id_mensaje = esMiMensaje[esMiMensaje.length - 1]["id"];
               //console.log("El ultimo id de mi mensaje");
               //console.log(ultimo_id_mensaje);
            }

            let respuesta = 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,
               ultimo_id_mensaje,
               idContacto,
            );

            //console.log("respuesta de cargar_listado_chat_contactos_api");
            //console.log(respuesta);

            if(respuesta.type == "success")
            {
               let data_respuesta = respuesta.data || [];
               let data_etapa_conversacion_id = respuesta.etapa_conversacion_id || "";
               FECHA_ULTIMO_MENSAJE_PLANTILLA = respuesta.fecha_ultima_mensaje_whatsapp || "";
                

               $(".tenerEtapaConversacionSelect").val(data_etapa_conversacion_id);

               let arreglo_res_localdb = [];

               arreglo_res_localdb = [...data_respuesta];

               let miData = await obtenerInformacionDBLocal(idContacto, tabla_contactos_chat_indexedDb);

               if (miData) {

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

                     nuevo_arreglo.push(...data_respuesta);
                     arreglo_res_localdb = [...nuevo_arreglo];

                     let cabecera = {
                        chat_number_id: miData.chat_number_id,
                        orden: miData.orden + "",
                        informacion_contacto: {
                           ...miData.informacion_contacto,

                           id_etapa_conversacion:          miData.id_etapa_conversacion,
                           nombre_etapa_conversacion:      miData.nombre_etapa_conversacion,
                           color_fondo_etapa_conversacion: miData.color_fondo_etapa_conversacion,
                           color_texto_etapa_conversacion: miData.color_texto_etapa_conversacion,
                        
                        },

                        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,
                        config_whatsapp_other_id:    miData.config_whatsapp_other_id,
                        ultimo_mensaje: miData.ultimo_mensaje,

                        id_etapa_conversacion:          miData.id_etapa_conversacion,
                        nombre_etapa_conversacion:      miData.nombre_etapa_conversacion,
                        color_fondo_etapa_conversacion: miData.color_fondo_etapa_conversacion,
                        color_texto_etapa_conversacion: miData.color_texto_etapa_conversacion,

                        data: nuevo_arreglo,
                     };

                     actualizarSinBuscadorInformacionDBLocal(cabecera, tabla_contactos_chat_indexedDb);
                  }
         
               }

               chat_mensajes_dbLocal_temporal = [...arreglo_res_localdb];
               chat_mensajes = [...chat_mensajes_dbLocal_temporal.splice(-10)];
               se_cargo_por_base_datos_local = true;

            }else{

               $(".ocultar_opciones_enviar_mensajes_comentarios ").css("display", "none");  
               $(".ocultar_mostrar_medio_mensaje").css("display", "");
               $("#mi-comentario-mensaje-texto",).val("");
               $("#mi-mensaje-texto",).val("");
               $(".ocultar_opciones_menu_mensajes").css("display", "");
               $(".ocultar_opciones_enviar_mensajes_comentarios").css("display", "none");
               $(".enviar_plantilla_whatsapp").css("display", "none");
               $(".enviar_plantilla_whatsapp_cron").css("display", "none");

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

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

               if(tipo_producto_seleccionado == "sms")
               {
                  bloquearBotonesPlantillaWhatsapp();
               }else{
                  verificarSiCumpleFechaPlantillaWhatsapp();
               }  

               return;   
               
            }

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

            console.log("comenzando chat_mensajes");
            console.log(chat_mensajes);
 
            esMiMensaje = chat_mensajes.filter((data) => data.chat_number_id == idContacto);

            console.log("esMiMensaje");
            console.log(esMiMensaje);

            $(".ocultar_opciones_enviar_mensajes_comentarios ").css("display", "none");  
            $(".ocultar_mostrar_medio_mensaje").css("display", "");
            $("#mi-comentario-mensaje-texto",).val("");
            $("#mi-mensaje-texto",).val("");
            $(".ocultar_opciones_menu_mensajes").css("display", "");
            $(".ocultar_opciones_enviar_mensajes_comentarios").css("display", "none");
            $(".enviar_plantilla_whatsapp").css("display", "none");
            $(".enviar_plantilla_whatsapp_cron").css("display", "none");

              
            if(esMiMensaje.length == 0)
            {

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

               if (isEnabledWhatsapp == 1 || isEnabledWhatsapp == "1") {
                 verificarSiCumpleFechaPlantillaWhatsapp();
               } else if (isEnabledSMS == 1 || isEnabledSMS == "1") {
                 bloquearBotonesPlantillaWhatsapp();
               }

               /*
               let tipo_producto_seleccionado = $("#seleccionar_medio_mensaje").val();    

               if(tipo_producto_seleccionado == "sms")
               {
                  bloquearBotonesPlantillaWhatsapp();
               }else{
                  verificarSiCumpleFechaPlantillaWhatsapp();
               }  
               */

              return;   
            }

            //console.log("JEJEJE ES MAYOR A 0");
 
            //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) 
            {

               let tener_mensaje_reales = chat_mensajes
                  .filter((data) => data.chat_number_id == idContacto && (data.tipo_mensaje != "comentario" && data.tipo_mensaje != "etapa_conversacion" ) ) || [];
                   
               if(tener_mensaje_reales.length != 0)
               {
                  //dependiendo el ultimo mensaje cargamos
                  let tipo_p = tener_mensaje_reales[tener_mensaje_reales.length - 1];

                  if(tipo_p["tipo_producto"] == "whatsapp" || tipo_p["tipo_producto"] == "sms")
                  {
                     $("#seleccionar_medio_mensaje").val(tipo_p["tipo_producto"]).trigger('change');;
                  }else{
                      if (isEnabledWhatsapp == 1 || isEnabledWhatsapp == "1") {
                        $("#seleccionar_medio_mensaje").val("whatsapp").trigger('change');
                     } else if (isEnabledSMS == 1 || isEnabledSMS == "1") {
                        $("#seleccionar_medio_mensaje").val("sms").trigger('change');
                     }
                  }

                  console.log(tipo_p["tipo_producto"]);

               }else{
                  
                  //console.log("no hay mensajes reales ------------");

                  if (isEnabledWhatsapp == 1 || isEnabledWhatsapp == "1") {
                     $("#seleccionar_medio_mensaje").val("whatsapp").trigger('change');
                  } else if (isEnabledSMS == 1 || isEnabledSMS == "1") {
                     $("#seleccionar_medio_mensaje").val("sms").trigger('change');
                  }
               }
 
            }

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

            //console.log("-- tipo_producto_seleccionado");
            //console.log(tipo_producto_seleccionado);
      
            if(tipo_producto_seleccionado == "whatsapp")
            {

               let mostrar_plantilla_whatsapp = false;

               if(isEnabledWhatsapp == 1 || isEnabledWhatsapp == true)
               {

                  let fecha_creacion_original = FECHA_ULTIMO_MENSAJE_PLANTILLA;

                  if(isEmpty(fecha_creacion_original) == true)
                  {
                     mostrar_plantilla_whatsapp = true;
                  }else{
                     mostrar_plantilla_whatsapp = validarRangoFechas(fecha_creacion_original, ZONA_HORARIA_CONFIGURACION_WHATSAPP_SMS);

                     FECHA_ULTIMO_MENSAJE_PLANTILLA = fecha_creacion_original;
                  }

                  /*
                  //los mensajes reales son cualquiera a excepcion de etapas y comentarios
                  let tener_mensaje_reales = chat_mensajes
                  .filter((data) => data.chat_number_id == idContacto && (data.tipo_mensaje != "comentario" && data.tipo_mensaje != "etapa_conversacion" ) )
                  .filter((data_1) => data_1.tipo_producto == "whatsapp"  )
                  .filter((data_1) => data_1.esContacto == "1" || data_1.esContacto == true )  || [];

                  if(tener_mensaje_reales.length != 0)
                  {
                     let ultimo_mensaje_whatsapp = tener_mensaje_reales[tener_mensaje_reales.length - 1];

                     let fecha_creacion_original = ultimo_mensaje_whatsapp.fecha_creacion_original;

                     if(isEmpty(fecha_creacion_original) == true)
                     {
                        mostrar_plantilla_whatsapp = true;
                     }else{
                        mostrar_plantilla_whatsapp = validarRangoFechas(fecha_creacion_original, ZONA_HORARIA_CONFIGURACION_WHATSAPP_SMS);

                        FECHA_ULTIMO_MENSAJE_PLANTILLA = fecha_creacion_original;
                     }
   
                     //console.log("fecha_creacion_original");
                     //console.log(fecha_creacion_original);

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

                  }else{
                     mostrar_plantilla_whatsapp = true;
                  }
                  */

                  if(mostrar_plantilla_whatsapp == true)
                  {
                     desbloquearBotonesPlantillaWhatsapp();
                  }else{
                     bloquearBotonesPlantillaWhatsapp();
                  }

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

               }

            }else{
               
               //console.log("es sms");
               bloquearBotonesPlantillaWhatsapp();
            }

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

            const condicion = cargarFooterClickContacto(idContacto);
 
            if(condicion)
            {
               return;
            }

            if (chat_mensajes.length == 0) {
               $('.cargando_mensajes_chat_interno').fadeOut(300);
               return;
            }

            id_chat_mensajes = chat_mensajes[0]["id"];
            UUID_chat_mensajes = chat_mensajes[0]["UUID"];
            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");

            const elemento = $(".cuerpo_mensaje");

            if (elemento.length > 0) {

               // Mover el scroll al final sin animación
               elemento.scrollTop(elemento[0].scrollHeight);

               const container = $(".cuerpo_mensaje");

               container.off("scroll");

               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)
                        {
                           $('.cargando_mensajes_chat_interno').fadeOut(300);

                           if(chat_mensajes_dbLocal_temporal.length != 0){

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

                              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]["UUID"]) == false)
                              {
                                 //
                                 var targetId = UUID_chat_mensajes;

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

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

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

                                    $targetDiv[0].scrollIntoView();

                                 }

                                 UUID_chat_mensajes = quitarElementos[0]["UUID"];
 
                              }

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

                        }else{


                           if (chat_mensajes.length == 0){
                               $('.cargando_mensajes_chat_interno').fadeOut(300);
                              return;
                           }

                           $('.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"];
                           UUID_chat_mensajes = chat_mensajes[0]["UUID"];

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

                           const esMiMensaje = arreglo_nuevo.filter((data) => data.chat_number_id == idContacto);

                           if(esMiMensaje.length == 0)
                           {
                                $('.cargando_mensajes_chat_interno').fadeOut(300);
                              return;   
                           }

                           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(idContacto, 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,
                                          orden: miData.orden + "",
                                          informacion_contacto: {
                                             ...miData.informacion_contacto,

                                             id_etapa_conversacion:          miData.id_etapa_conversacion,
                                             nombre_etapa_conversacion:      miData.nombre_etapa_conversacion,
                                             color_fondo_etapa_conversacion: miData.color_fondo_etapa_conversacion,
                                             color_texto_etapa_conversacion: miData.color_texto_etapa_conversacion,
                                          
                                          },

                                          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,
                                          config_whatsapp_other_id:    miData.config_whatsapp_other_id,
                                          ultimo_mensaje: miData.ultimo_mensaje,

                                          id_etapa_conversacion:          miData.id_etapa_conversacion,
                                          nombre_etapa_conversacion:      miData.nombre_etapa_conversacion,
                                          color_fondo_etapa_conversacion: miData.color_fondo_etapa_conversacion,
                                          color_texto_etapa_conversacion: miData.color_texto_etapa_conversacion,

                                          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]["UUID"]) == false)
                              {
                                    //
                                    var targetId = UUID_chat_mensajes;

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

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

                                    }

                                    /*
                                    if(
                                       isEmpty(UUID_chat_mensajes[0]["UUID"]) == true  
                                    )
                                    {

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

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

                                       console.log("targetId sid");
                                       console.log(arreglo_nuevo[0]["sid"]);
                                    }
                                    */

                                    console.log("mensaje UUID");
                                    console.log(UUID_chat_mensajes[0]["UUID"]);
 
                              }

                              //
 
 
                           }

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

               

 
            }

            /*
            scroll_abajo().then((result) => {
               if (result == true) {
                   
               }
            });
            */



         }

         function cambiarSelectMedioMensaje(numero_telefono = "")
         {

            //isEnabledWhatsapp = enableWhatsapp;
            //isEnabledSMS = enableTwilio;

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

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

            // Agregar opción de WhatsApp si está habilitado
            if (isEnabledSMS == 1 || isEnabledSMS == "1") {

               let URL_IMAGEN_SMS = $("#URL_IMAGEN_SMS").val();

               opciones += '<option value="sms" data-icon="' + URL_IMAGEN_SMS  + '" class="seleccionar_medio_sms">Reply by SMS to: +' + numero_telefono + '</option>';
            }

            // Agregar opción de SMS si está habilitado
            if (isEnabledWhatsapp == 1 || isEnabledWhatsapp == "1") {
               
               let URL_IMAGEN_WHATSAPP = $("#URL_IMAGEN_WHATSAPP").val();

               opciones += '<option value="whatsapp" data-icon="' + URL_IMAGEN_WHATSAPP  + '" class="seleccionar_medio_whatsapp">Reply by WhatsApp to: +' + numero_telefono + ' </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 (isEnabledWhatsapp == 1 || isEnabledWhatsapp == "1") {
               $("#seleccionar_medio_mensaje").val("whatsapp").trigger('change');
            } else if (isEnabledSMS == 1 || isEnabledSMS == "1") {
               $("#seleccionar_medio_mensaje").val("sms").trigger('change');
            }

            //let icono_sms = $("#seleccionar_medio_mensaje option[value='sms']").attr("data-icon");
            //let icono_whatsapp = $("#seleccionar_medio_mensaje option[value='whatsapp']").attr("data-icon");

            //$("#seleccionar_medio_mensaje").html(`
            //   <option value="whatsapp" data-icon="${icono_whatsapp}" class="seleccionar_medio_whatsapp">Reply by WhatsApp to: +${mi_n}</option>
            //   <option value="sms" data-icon="${icono_sms}" class="seleccionar_medio_sms">Reply by SMS to: +${mi_n}</option>
            //`);
         }

         function validarRangoFechas(dateString = "", timeZone = "America/Tegucigalpa")
         {

            if(isEmpty(dateString) == true)
            {
               return false;
            }

            // Zona horaria
            //const timeZone = 'America/Tegucigalpa';

            // Fecha proporcionada (en texto)
            //const providedDateString = "2025-05-31 08:14:00";
            const providedDateString = dateString;

            // Convertir la fecha proporcionada a un objeto Date en base a la zona horaria
            const parts = providedDateString.split(/[- :]/); // [2025, 05, 31, 10, 00, 00]
            const providedDate = new Date(Date.UTC(parts[0], parts[1] - 1, parts[2], parts[3], parts[4], parts[5]));

            // Obtener la fecha actual en America/Tegucigalpa
            const now = new Date();
            const formatter = new Intl.DateTimeFormat('en-US', {
              timeZone,
              year: 'numeric', month: '2-digit', day: '2-digit',
              hour: '2-digit', minute: '2-digit', second: '2-digit',
              hour12: false
            });

            const formattedNowParts = formatter.formatToParts(now);
            const dateParts = {};

            formattedNowParts.forEach(({ type, value }) => {
              if (type !== 'literal') dateParts[type] = value;
            });

            const currentDate = new Date(
              Date.UTC(
                dateParts.year,
                dateParts.month - 1,
                dateParts.day,
                dateParts.hour,
                dateParts.minute,
                dateParts.second
              )
            );

            // Calcular diferencia en segundos
            const diffSeconds = Math.abs((providedDate - currentDate) / 1000);

            // Limite de 23h 59m 59s
            const timeLimitSeconds = 23 * 3600 + 59 * 60 + 59;

            // Comparar
            if (diffSeconds <= timeLimitSeconds) {
              //console.log("no ha pasado del horario");
              return false;
            } else {
              //console.log("ya pasó del horario");
              return true;
            }

            // Debug
            //console.log("providedDate UTC:", providedDate.toISOString());
            //console.log("currentDate UTC-6:", currentDate.toISOString());
            //console.log("Diferencia (segundos):", diffSeconds);


         }


         function cargarFooterClickContacto(idContacto)
         {

            $('.cargando_mensajes_chat_interno').fadeOut(300);
            $(".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 == idContacto,
            );

            if (!tener_contacto) {
               return true;
            }
 

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

            */


            return false;

         }

         //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( (miData) => {

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

               if (miData.estado == 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["fullname"]; 
                     modificar_contacto.username_staff = data_staff["username"];
                     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",
                        );

                        if(contacto_nombre_contacto.length)
                        {
                           let maxLength = 15;  
                           let nombre = data_customer["account"] || "";
                           let nombre_whatsapp = data_customer["nombre_whatsapp"] || "";

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

                           contacto_nombre_contacto.text(nombre);

                           div.attr('data-nombre', data_customer["account"]);
                           //nombre_whatsapp

                           let nombre_original = nombre;
                           let nombre_temporal = nombre;

                           let nuevo_nombre = "";
                           let nuevo_titulo_nombre = "";

                           let nombre_whatsapp_original = nombre_whatsapp || "";

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

                           let nuevo_estilo_nombre = "mi-texto-normal";

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

                           if (nombre == "Desconocido") {
                              nuevo_nombre =
                                 isEmpty(nombre_whatsapp) == true ? "Desconocido" : nombre_whatsapp;

                              nuevo_titulo_nombre =
                                 isEmpty(nombre_whatsapp) == true
                                    ? "Desconocido"
                                    : nombre_whatsapp_original;

                              nuevo_estilo_nombre =
                                 isEmpty(nombre_whatsapp) == true
                                    ? "mi-texto-normal"
                                    : "mi-texto-cursivo";
                           } else {

                              nuevo_nombre = nombre;
                              nuevo_titulo_nombre = nombre_original;

                              nuevo_estilo_nombre = "mi-texto-normal";
                           }
 
                           contacto_nombre_contacto.removeClass("mi-texto-cursivo");
                           contacto_nombre_contacto.removeClass("mi-texto-normal");
                           contacto_nombre_contacto.addClass(nuevo_estilo_nombre);

                           contacto_nombre_contacto.attr("title", nuevo_nombre);
                           contacto_nombre_contacto.text(nuevo_nombre);
 
                           //if (contacto_nombre_contacto.hasClass("mi-texto-cursivo")) {
                           //   contacto_nombre_contacto.removeClass("mi-texto-cursivo");
                           //}

                           //contacto_nombre_contacto.addClass("mi-texto-normal");
                        }


                     }else{

                        //console.log("no hay data_customer");

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

                        if(contacto_nombre_contacto.length)
                        {

                           let maxLength = 15;  
                           let nombre =  miData.data_personal.nombre;
                           let nombre_whatsapp = miData.data_personal.nombre_whatsapp || "";

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

                           contacto_nombre_contacto.text(nombre);

                           let nombre_original = nombre;
                           let nombre_temporal = nombre;

                           let nuevo_nombre = "";
                           let nuevo_titulo_nombre = "";

                           let nombre_whatsapp_original = nombre_whatsapp || "";

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

                           let nuevo_estilo_nombre = "mi-texto-normal";

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

                           nuevo_nombre =
                                 isEmpty(nombre_whatsapp) == true ? "Desconocido" : nombre_whatsapp;

                           nuevo_titulo_nombre =
                              isEmpty(nombre_whatsapp) == true
                                 ? "Desconocido"
                                 : nombre_whatsapp_original;

                           nuevo_estilo_nombre =
                              isEmpty(nombre_whatsapp) == true
                                 ? "mi-texto-normal"
                                 : "mi-texto-cursivo";
 
                           contacto_nombre_contacto.removeClass("mi-texto-cursivo");
                           contacto_nombre_contacto.removeClass("mi-texto-normal");
                           contacto_nombre_contacto.addClass(nuevo_estilo_nombre);

                           contacto_nombre_contacto.attr("title", nuevo_nombre);
                           contacto_nombre_contacto.text(nuevo_nombre);

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

                        }

                         

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

                        let words = (data_staff["fullname"] || "").split(" "); 

                        contacto_fullname_staff.attr("title", data_staff["fullname"]);

                        let nombre_abreviado = words[0].charAt(0).toUpperCase(); 

                        if (words.length > 1) {
                           nombre_abreviado += words[1].charAt(0).toUpperCase();
                        }

                        contacto_fullname_staff.text(nombre_abreviado);

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

                        //Unassigned staff
                        contacto_fullname_staff.text("N/A");

                        contacto_fullname_staff.attr("title", "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("");

                     }
 
                  }

                  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 informacion_c = {
                              ...miData.informacion_contacto,
                              
                              custumer_id: modificar_contacto.custumer_id,
                              staff_id: modificar_contacto.staff_id,

                              nombre: modificar_contacto.nombre,
                              email_custumers: modificar_contacto.email_custumers,
                              phone_custumers: modificar_contacto.phone_custumers,
                              company_custumers: modificar_contacto.company_custumers,
                              address_custumers: modificar_contacto.address_custumers,

                              fullname_staff: modificar_contacto.fullname_staff,
                              username_staff: modificar_contacto.username_staff,
                              user_type_staff: modificar_contacto.phonenumber,
                              phonenumber: modificar_contacto.user_type_staff,
      
                              nombre_actual: modificar_contacto.nombre,

                              id_etapa_conversacion:          miData.id_etapa_conversacion,
                              nombre_etapa_conversacion:      miData.nombre_etapa_conversacion,
                              color_fondo_etapa_conversacion: miData.color_fondo_etapa_conversacion,
                              color_texto_etapa_conversacion: miData.color_texto_etapa_conversacion,
                           };
      
                           let cabecera = {
                              chat_number_id:              miData.chat_number_id + "",
                              orden:                       miData.orden + "",
                              informacion_contacto:        informacion_c,
                              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,
                              config_whatsapp_other_id:    miData.config_whatsapp_other_id,
                              ultimo_mensaje:              miData.ultimo_mensaje,
                              data: miData.data,

                              id_etapa_conversacion:          miData.id_etapa_conversacion,
                              nombre_etapa_conversacion:      miData.nombre_etapa_conversacion,
                              color_fondo_etapa_conversacion: miData.color_fondo_etapa_conversacion,
                              color_texto_etapa_conversacion: miData.color_texto_etapa_conversacion,
                           };
      

                           actualizarSinBuscadorInformacionDBLocal(cabecera, tabla_contactos_chat_indexedDb);

      
                        }
         
                     } 

                  });

               }
            });

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

            addPhoneDB();

             
         });

         $("#numero_telefono").on("keydown", function (e) {
            if (e.key === "Enter") {
               e.preventDefault();  

                
               addPhoneDB();
               
            }
         });
          //esta sera para agregar contactos nuevos

          /*
         $("#submit_addPhone").click(function (e) {

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

            addPhoneDB();

             
         });
         */

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

            e.preventDefault();
            
            //console.log("submit_addCerrarConversacion click");

            guardarCierreConversacion();
             
         });

         $("#submit_addCerrarConversacion").on("keydown", function (e) {
            if (e.key === "Enter") {
               e.preventDefault();  
               
               //console.log("submit_addCerrarConversacion keydown");

               guardarCierreConversacion();

            }
         });

         function guardarCierreConversacion()
         {
            

            /*
            let contacto_encontrado = lista_contactos.find(
               (elemento) =>
                  elemento.id == id_contacto_seleccionado,
            );

            if(isEmpty(contacto_encontrado) == true)
            {
               Swal.fire("Contact not found.");
               return;
            }
            

            if(isEmpty(contacto_encontrado["custumer_id"]) == true)
            {
               Swal.fire("Customer not assigned.");
               return;
            }

            return;
            */

            let motivos_conversacion_cierre = $("#motivos_conversacion_cierre").val();
 
            if (isEmpty(motivos_conversacion_cierre) == true) {
               Swal.fire("Reason for the conversation is required.");
               return;
            }

            let producto_interes_cierre = $("#producto_interes_cierre").val();
 
            if (isEmpty(producto_interes_cierre) == true) {
               Swal.fire("Product of interest is required.");
               return;
            }

            let fecha_contacto_cierre = $("#fecha_contacto_cierre").val();
 
            if (isEmpty(fecha_contacto_cierre) == true) {
               //Swal.fire("Suggest next date contact is required.");
               //return;

               fecha_contacto_cierre = null;
            }

            let estado_conversacion = $("#estado_conversacion").val();
 
            if (isEmpty(estado_conversacion) == true) {
               Swal.fire("Conversation status is required.");
               return;
            }

            let data_producto = lista_productos.find(
               (data) => data.id == producto_interes_cierre,
            );

            let nombre_producto = "";

            if(data_producto)
            {
               nombre_producto = data_producto.name;
            }

            let UUID_generado = generadorUUID();

            let informacion_armada = {
               UUID: UUID_generado,
               chat_number_id: id_contacto_seleccionado,

               to: numero_contacto_seleccionado,
               from: FROM_GLOBAL,
               staff_id: STAFF_ID_GLOBAL, //admin es default
               configuracion_whatsapp_sms_id: TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID,

               motivos_conversacion_cierre: motivos_conversacion_cierre,
               producto_interes_cierre: producto_interes_cierre,
               producto_interes_nombre_cierre: nombre_producto,
               fecha_contacto_cierre: fecha_contacto_cierre,
               etapa_id: estado_conversacion,
               //custumer_id: contacto_encontrado["custumer_id"],
            }; 
 
            console.log("informacion_armada");
            console.log(informacion_armada);
            
            $("#submit_addCerrarConversacion").prop("disabled", true);

            $("#mensaje_advertencia").text("Please wait while the process completes...");

            $.ajax({
                  type: "POST",
                  url: URL_BASE + "social/cerrar-etapa-conversacion",
                  data: JSON.stringify(informacion_armada), // Convertir datos a formato JSON
                  contentType: "application/json", // Tipo de contenido JSON
                  success: function (response) {

                     $("#mensaje_advertencia").text("");

                     //console.log("Respuesta del servidor:", response);
 
                     $("#submit_addCerrarConversacion").prop("disabled", false);
                     
                     try {
                        let info = JSON.parse(response);

                        if (info.type == "success") {
 
                           const formattedDate = info.fecha_creacion;

                           let informacion = {
                              id: info.id_chat_social,
                              tipo_producto: "ninguno",
                              error_codigo: "",
                              error_mensaje: "",
                              status: "send",
                              wam_id: null,
                              UUID: UUID_generado,
                              phone_number_id: PHONE_NUMBER_ID_GLOBAL,
                              from: FROM_GLOBAL,
                              to: numero_contacto_seleccionado,
                              mensaje: info.message,
                              url: "",
                              tipo_mensaje: "etapa_conversacion",
                              db: "no ocupo",
                              esContacto: "0",
                              fecha_creacion: info.fecha_creacion,

                              user_id: STAFF_ID_GLOBAL,
                              user_img: IMG_NOMBRE_PERFIL,

                              chat_number_id: id_contacto_seleccionado,

                              fecha_creacion_original       : info.fecha_creacion_original,  
                              fecha_creacion_GMT            : info.fecha_creacion_GMT,  
                           };

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

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

                              if (div.length) {

                                 let etapa_conversacion = div.find(".etapa_conversacion");

                                 if(etapa_conversacion.length){
                                   
                                    etapa_conversacion.text(quitarTextoLargo( info.nombre_etapa ));
                                    etapa_conversacion.attr('title', info.nombre_etapa );  

                                    etapa_conversacion.css({
                                       'background-color': info.color_fondo_etapa_conversacion, 
                                       'color': info.color_texto_etapa_conversacion,  
                                    });
                                 }
 
                              }  

                              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 existe_registro = (miData.data || []).find((item) => item.UUID == UUID_generado);

                                       if(!existe_registro)
                                       {
                                          let nuevo_arreglo = [...miData.data];

                                          nuevo_arreglo.push(informacion);
         
                                          let cabecera = {
                                             chat_number_id:              miData.chat_number_id,
                                             orden:                       miData.orden + "",
                                             informacion_contacto:        {
                                                ...miData.informacion_contacto,
                                                orden: miData.orden + "",
                                                ultimo_mensaje:              miData.ultimo_mensaje,

                                                id_etapa_conversacion:          info.etapa_id,
                                                nombre_etapa_conversacion:      info.nombre_etapa,
                                                color_fondo_etapa_conversacion: info.color_fondo_etapa_conversacion,
                                                color_texto_etapa_conversacion: info.color_texto_etapa_conversacion,
                                             },
                                             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,
                                             config_whatsapp_other_id:    miData.config_whatsapp_other_id,
                                             data: nuevo_arreglo,
                                             ultimo_mensaje:              miData.ultimo_mensaje,

                                             id_etapa_conversacion:          info.etapa_id,
                                             nombre_etapa_conversacion:      info.nombre_etapa,
                                             color_fondo_etapa_conversacion: info.color_fondo_etapa_conversacion,
                                             color_texto_etapa_conversacion: info.color_texto_etapa_conversacion,
                                          };

                                          actualizarSinBuscadorInformacionDBLocal(cabecera, tabla_contactos_chat_indexedDb);
                                       }

                                        
                                    }
                                     
                     
                                 }
                              
                              });

                              
                           }
  
                           /*
                           const div_mensaje = $(".cuerpo_mensaje").find(`div[data-uuid="${UUID_generado}"]`);
  
                           if (div_mensaje.length == 0) 
                           {
                               let estructura_etapa = {
                                 wam_id: "",
                                 mensaje: info.message,
                                 fecha_creacion: info.fecha_creacion,
                                 UUID: UUID_generado,
                              }

                              console.log("api UUID_generado");
                              console.log(UUID_generado);

                              $(".cuerpo_mensaje").append(
                                 mensaje_etapa_conversacion_whatsapp_usuarios(
                                    estructura_etapa
                                 ),
                              );
                           }  

                           scroll_abajo();

                           chat_mensajes.push(informacion);
                           */

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

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

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

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

                           $("#scrollButton").css("display", "none");
            
                           chat_mensajes = [];

                           $(".mi-bandeja-mensajes-contactos .item-contacto-seleccionado").removeClass("item-contacto-seleccionado");

                           $('#modalCerrarConversacion').modal('hide');

                           // ------------- 
                           $("#motivos_conversacion_cierre").val("");
                           $("#producto_interes_cierre").val("");
                           $("#fecha_contacto_cierre").val("");
                           $("#estado_conversacion").val("");
   
  
                            
                        } 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,
                     });

                     $("#mensaje_advertencia").text("");
                  },
            });


         }

         function addPhoneDB()
         {

            const isDisabled = $('#submit_addPhone').prop('disabled');

            if (isDisabled)
            {
               return;
            }

            let codigo_pais = $("#codigo_pais").val();
 
            if (isEmpty(codigo_pais) == true) {
               Swal.fire("The country code is required");
               return;
            }

            //console.log(codigo_pais);
            //console.log("return"); 
            //return;

            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: codigo_pais + 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,
                           mensajes_no_leidos_sms: 0,
                           mensajes_no_leidos_whatsapp: 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,
                           fecha_humana: info.fecha_humana,
                        };

                              //console.log(add_contacto_desconocido);

                              lista_contactos.push(add_contacto_desconocido);

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

                              click_only_contactos(info.chat_number_id);
                               

                              let data_guardar = {
                                 chat_number_id: info.chat_number_id + "",
                                 data: [],
                                 mensajes_no_leidos: 0,
                                 mensajes_no_leidos_sms: 0,
                                 mensajes_no_leidos_whatsapp: 0,
                                 orden: 0,
                                 config_whatsapp_other_id:
                                    TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID,

                                 ultimo_mensaje: info.ultimo_mensaje,

                                 informacion_contacto : {
                                    address_custumers: address_custumers,
                                    company_custumers: company_custumers,
                                    config_whatsapp_other_id: TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID,
                                    created_at: created_at,
                                    custumer_id: custumer_id,
                                    email_custumers: email_custumers,
                                    fecha_humana: info.fecha_humana,
                                    fecha_humana_enviado: "",
                                    fecha_ultimo_mensaje_enviado_unix: "",
                                    fecha_ultimo_mensaje_recibido_unix: "",
                                    fullname_staff: fullname_staff,
                                    id: id,
                                    mensajes_no_leidos: 0,
                                    mensajes_no_leidos_sms: 0,
                                    mensajes_no_leidos_whatsapp: 0,
                                    nombre: nombre,
                                    nombre_actual: "",
                                    nombre_whatsapp: "",
                                    number: number,
                                    orden: 0,
                                    phone_custumers: phone_custumers,
                                    phonenumber: phonenumber,
                                    staff_id: staff_id,
                                    sys_users_config_whatsapp_other_id: sys_users_config_whatsapp_other_id,
                                    user_type_staff: user_type_staff,
                                    username_staff: username_staff,

                                    ultimo_mensaje: info.ultimo_mensaje,
                                 },
                              };

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

                           cambiar_badge_id_contacto(
                              id_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,
                                       orden: miData.orden + "",
                                       informacion_contacto:        {
                                          ...miData.informacion_contacto,

                                          id_etapa_conversacion:          miData.id_etapa_conversacion,
                                          nombre_etapa_conversacion:      miData.nombre_etapa_conversacion,
                                          color_fondo_etapa_conversacion: miData.color_fondo_etapa_conversacion,
                                          color_texto_etapa_conversacion: miData.color_texto_etapa_conversacion,
                                       
                                       },
                                       mensajes_no_leidos:          0,
                                       mensajes_no_leidos_sms:      0,
                                       mensajes_no_leidos_whatsapp: 0,
                                       config_whatsapp_other_id:    miData.config_whatsapp_other_id,
                                       ultimo_mensaje:              miData.ultimo_mensaje,

                                       data: miData.data,

                                       id_etapa_conversacion:          miData.id_etapa_conversacion,
                                       nombre_etapa_conversacion:      miData.nombre_etapa_conversacion,
                                       color_fondo_etapa_conversacion: miData.color_fondo_etapa_conversacion,
                                       color_texto_etapa_conversacion: miData.color_texto_etapa_conversacion,
                                    };

                                    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")
            .off("click")
            .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");
 
               chat_mensajes = [];

               $(".mi-bandeja-mensajes-contactos .item-contacto-seleccionado").removeClass("item-contacto-seleccionado");

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

            $("#abrirEstadoConversacion")
            .off("click")
            .on("click", function () {

               $("#motivos_conversacion_cierre").val("");
               $(".tener_producto_interes_cierre ").val("");
               $("#fecha_contacto_cierre").val("");
               $("#estado_conversacion").val("");

               $("#modalCerrarConversacion").modal("show");
                
            });

            $(".mostrarIngresosClientes")
            .off("click")
            .on("click", function () {

               console.log("mostrarIngresosClientes funcional");

               $(".card_seguro_desea_crear_usuario").css("display", "none");
               $(".card_mostrar_informacion").css("display", "none");
               $(".detalle_ingreso_clientes").css("display", "");
               $(".historial_cambio_clientes").css("display", "none");

               $("#saldo_facturado_ingresos_clientes").val("");
               $("#saldo_pendiente_ingresos_clientes").val("");
               $(".tbody_detalle_ingresos_clientes").html("");


               $(".offcanvas_titulo").text("Revenue per customer");

               start = moment().subtract(29, 'days');
               end = moment();

               startDate = moment();
               endDate = moment();

               var $reportrange = $("#reportrange");

               var translations = {
                  today: "Today",
                  yesterday: "Yesterday",
                  last7Days: "Last 7 Days",
                  last30Days: "Last 30 Days",
                  thisMonth: "This Month",
                  lastMonth: "Last Month"
               };

               $reportrange.daterangepicker({
                  startDate: start,
                  endDate: end,
                  ranges: {
                     [translations.today]: [moment(), moment()],
                     [translations.yesterday]: [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                     [translations.last7Days]: [moment().subtract(6, 'days'), moment()],
                     [translations.last30Days]: [moment().subtract(29, 'days'), moment()],
                     [translations.thisMonth]: [moment().startOf('month'), moment().endOf('month')],
                     [translations.lastMonth]: [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                  },
                  locale: {
                     format: 'YYYY/MM/DD'
                  }
               }, cb);

               cb(start, end);
              
            });
 
            $(".mostrarInformacionContacto")
            .off("click")
            .on("click", function () {

               console.log("mostrarInformacionContacto funcional");

               //$(".card_seguro_desea_crear_usuario").css("display", "none");
               //$(".card_mostrar_informacion").css("display", "none");
               //$(".detalle_ingreso_clientes").css("display", "none");

               funcionMostraInformacionContactosSetting();
              
            });

            $(".yes_crear_usuario_crm")
            .off("click")
            .on("click", function () {

               //console.log("yes_crear_usuario_crm");

               //console.log(numero_contacto_seleccionado);

               var div_contacto = $(
                  '.mi-bandeja-mensajes-contactos a[data-id_contacto="' +
                     id_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");
              
            });

            $(".no_crear_usuario_crm")
            .off("click")
            .on("click", function () {

               //console.log("no_crear_usuario_crm");

               $(".card_seguro_desea_crear_usuario").css("display", "none");
               $(".card_mostrar_informacion").css("display", "");

                
              
            });


            $(".select_new_staff")
            .off("click")
            .on("click", function () {

               //console.log("select_new_staff ");
               
               $(".tbody_asignar_staff").html("");
               $('#btn_filtro_buscador_staff').prop('disabled', false);

               $(".buscador_asignar_staff").val("");

               $(".ocultar_buscador_y_tabla").css("display", "none");
               $(".cargando_login_staff").css("display", "");

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

               let informacion = {
                  filtro: "",
                  configuracion_whatsapp_sms_id: TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID,
               };

               console.log("informacion");
               console.log(informacion);

               $.ajax({
                  type: "POST",
                  url: URL_BASE + "social/filtra-listado-staff",
                  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
                     try {
                        let info = JSON.parse(response);
                        if (info.type == "success") {
                           
                           let data = info.data || [];
                           console.log("data");
                           console.log(data);
                           
                           $(".tbody_asignar_staff").html(tabla_html_staff(data));
                           
                           add_evento_select_staff_contactos();

                           $(".ocultar_buscador_y_tabla").css("display", "");
                           $(".cargando_login_staff").css("display", "none");
                           
                        } else if (info.type == "error") {
                           Swal.fire({
                              icon: "error",
                              title: "Oops...",
                              text: info.message,
                           });
                        }
                     } catch (error) {
                        Swal.fire({
                           icon: "error",
                           title: "Oops...",
                           text: error,
                        });

                        $(".ocultar_buscador_y_tabla").css("display", "");
                        $(".cargando_login_staff").css("display", "none");

                     }
                  },
                  error: function (xhr, status, error) {
                     console.error("Error en la solicitud:", error);
                     // Manejar errores aquí
                     Swal.fire({
                        icon: "error",
                        title: "Oops...",
                        text: error,
                     });
                     $('#btn_filtro_buscador_staff').prop('disabled', false);
                  },
               });
              
            });
 
            $(".select_new_customers  ")
            .off("click")
            .on("click", function () {

               console.log("select_new_customers  ");

               $(".tbody_asignar_clientes").html("");
               $('#btn_filtro_buscador_clientes').prop('disabled', false);

               $(".buscador_asignar_clientes").val("");

               $("#modal_asignar_clientes_contactos").modal("show");
              
            });

            $(".deselect_staff")
            .off("click")
            .on("click", function () {

               console.log("deselect_staff  ");

 

               $(".titulo_modal_confirmar").text("You are sure?");
               $(".mensaje_modal_confirmar").text("You want to remove the staff for this contact?");
               $(".mensaje_espera_moda_confirmacion").text("");
               $(".tipo_modal_confirmar").val("eliminar_staff_contacto");

               

               $('#btn_aplicar_ventana_confirmacion').prop('disabled', false);
               $('#btn_close_ventana_confirmacion').prop('disabled', false);
               $('#btn_cerrar_ventana_confirmacion').prop('disabled', false);
                

               $('#btn_cerrar_ventana_confirmacion').css({
                  'background-color': '#001b3b',
                  'color': 'white'
               });

               $('#btn_aplicar_ventana_confirmacion').css({
                  'background-color': 'red',
                  'color': 'white'
               });

               $("#ventana_confirmacion").modal("show");
 
               
            });

            $(".deselect_customers")
            .off("click")
            .on("click", function () {

               console.log("deselect_customers  ");

               $(".titulo_modal_confirmar").text("You are sure?");
               $(".mensaje_modal_confirmar").text("You want to remove the customers for this contact?");
               $(".mensaje_espera_moda_confirmacion").text("");
               $(".tipo_modal_confirmar").val("eliminar_customers_contacto");


               $('#btn_aplicar_ventana_confirmacion').prop('disabled', false);
               $('#btn_close_ventana_confirmacion').prop('disabled', false);
               $('#btn_cerrar_ventana_confirmacion').prop('disabled', false);
                

               $('#btn_cerrar_ventana_confirmacion').css({
                  'background-color': '#001b3b',
                  'color': 'white'
               });

               $('#btn_aplicar_ventana_confirmacion').css({
                  'background-color': 'red',
                  'color': 'white'
               });

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

               
              
            });

            $(".filtrar_detalle_ingresos_clientes")
            .off("click")
            .on("click", function () {

               //console.log("filtrar_detalle_ingresos_clientes  ");

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

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

               if(tener_contacto)
               {

                  if(isEmpty(tener_contacto.custumer_id) == true)
                  {
                     Swal.fire("There is no customer assigned to this contact.");
                     return;
                  }

                  let informacion = {                 
                     fecha_desde: startDate.format('YYYY-MM-DD'),
                     fecha_hasta: endDate.format('YYYY-MM-DD'),
                     custumer_id: tener_contacto.custumer_id,
                  };

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

                  $.ajax({
                     type: "POST",
                     url: URL_BASE + "social/filtra-listado-customers-ingresos-clientes",
                     data: JSON.stringify(informacion), // Convertir datos a formato JSON
                     contentType: "application/json", // Tipo de contenido JSON
                     success: function (response) {
                        
                        $(".filtrar_detalle_ingresos_clientes").prop("disabled", false);
   
                        try {
                           let info = JSON.parse(response);

                           if (info.type == "success") {
   
                              let {
                                 total_factura = "",
                                 total_pendiente = "",
                                 items = [],
                              } = info.data || {}; 

                              console.log("items");
                              console.log(items);

                              $("#saldo_pendiente_ingresos_clientes").val(total_pendiente);
                              $("#saldo_facturado_ingresos_clientes").val(total_factura);

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

                        $(".filtrar_detalle_ingresos_clientes").prop("disabled", false);
                     },
                  });
 
   
                  console.log("informacion");
                  console.log(informacion);

               } 
            
             

               
              
            });

            $(".mostrarHistorialConversacionesClientes")
            .off("click")
            .on("click", function () {

               console.log("mostrarHistorialConversacionesClientes  ");

               $(".card_seguro_desea_crear_usuario").css("display", "none");
               $(".card_mostrar_informacion").css("display", "none");
               $(".detalle_ingreso_clientes").css("display", "none");
               $(".historial_cambio_clientes").css("display", "");

               $(".imprimir_card_hcc").html("");

               $(".offcanvas_titulo").text("Customer change history");

               start = moment().subtract(29, 'days');
               end = moment();

               startDate = moment();
               endDate = moment();

               var $reportrange = $("#reportrange_hhc");

               var translations = {
                  today: "Today",
                  yesterday: "Yesterday",
                  last7Days: "Last 7 Days",
                  last30Days: "Last 30 Days",
                  thisMonth: "This Month",
                  lastMonth: "Last Month"
               };

               $reportrange.daterangepicker({
                  startDate: start,
                  endDate: end,
                  ranges: {
                     [translations.today]: [moment(), moment()],
                     [translations.yesterday]: [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                     [translations.last7Days]: [moment().subtract(6, 'days'), moment()],
                     [translations.last30Days]: [moment().subtract(29, 'days'), moment()],
                     [translations.thisMonth]: [moment().startOf('month'), moment().endOf('month')],
                     [translations.lastMonth]: [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                  },
                  locale: {
                     format: 'YYYY/MM/DD'
                  }
               }, cb);

               cb(start, end);
              
            });

            $(".filtrar_hhc")
            .off("click")
            .on("click", function () {

               console.log("filtrar_hhc");

               let informacion = {                 
                  fecha_desde: startDate.format('YYYY-MM-DD'),
                  fecha_hasta: endDate.format('YYYY-MM-DD'),
                  chat_number_id: id_contacto_seleccionado,
               };

               console.log(informacion);
               //console.log("informacion");
               //return;

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

               $.ajax({
                  type: "POST",
                  url: URL_BASE + "social/filtra-listado-conversaciones",
                  data: JSON.stringify(informacion), // Convertir datos a formato JSON
                  contentType: "application/json", // Tipo de contenido JSON
                  success: function (response) {
                     
                     $(".filtrar_hhc").prop("disabled", false);
   
                     try {
                        let info = JSON.parse(response);

                        if (info.type == "success") {
   
                           let data = info.data || [];

                           console.log("data");
                           console.log(data);
 
                           $(".imprimir_card_hcc").html(html_card_conversaciones(data));
                           
                        } 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);
                  
                     Swal.fire({
                        icon: "error",
                        title: "Oops...",
                        text: error,
                     });

                     $(".filtrar_hhc").prop("disabled", false);
                  },
               });
 
   

            
             

               
              
            });


    

         }
         

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

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

                           if (miData) {

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

                              if(Object.keys(miData).length != 0){
      
                                 let informacion_c = {
                                    ...miData.informacion_contacto,
                                    
                                    custumer_id: custumer_id,
                                    staff_id: staff_id,

                                    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,
            
                                    nombre_actual: nombre,

                                    id_etapa_conversacion:          miData.id_etapa_conversacion,
                                    nombre_etapa_conversacion:      miData.nombre_etapa_conversacion,
                                    color_fondo_etapa_conversacion: miData.color_fondo_etapa_conversacion,
                                    color_texto_etapa_conversacion: miData.color_texto_etapa_conversacion,
                                 };

 
                                 let cabecera = {
                                    chat_number_id:              miData.chat_number_id + "",
                                    orden:                       miData.orden + "",
                                    informacion_contacto:        informacion_c,
                                    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,
                                    config_whatsapp_other_id:    miData.config_whatsapp_other_id,
                                    ultimo_mensaje:              miData.ultimo_mensaje,
                                    data: miData.data,


                                    id_etapa_conversacion:          miData.id_etapa_conversacion,
                                    nombre_etapa_conversacion:      miData.nombre_etapa_conversacion,
                                    color_fondo_etapa_conversacion: miData.color_fondo_etapa_conversacion,
                                    color_texto_etapa_conversacion: miData.color_texto_etapa_conversacion,
                                 };
            

                                 actualizarSinBuscadorInformacionDBLocal(cabecera, tabla_contactos_chat_indexedDb);

            
                              }
               
                           } 
                        });


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

                        NOMBRE_CONTACTO_SELECCIONADO = nombre;

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

                           if(contacto_nombre_contacto.length)
                           {
                              let maxLength = 15;  
                              let nombre_copia = nombre;

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

                              let nuevo_estilo_nombre = "mi-texto-normal";
   
                              contacto_nombre_contacto.removeClass("mi-texto-cursivo");
                              contacto_nombre_contacto.removeClass("mi-texto-normal");
                              contacto_nombre_contacto.addClass(nuevo_estilo_nombre);

                              contacto_nombre_contacto.attr("title", nombre);
                              contacto_nombre_contacto.text(nombre_copia);
                        
                           }


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

                           //--------------------------------

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

                           if (contacto_fullname_staff.length)
                           {

                              contacto_fullname_staff.attr("title", fullname_staff );

                              let words = (fullname_staff || "").split(" "); 

                              let nombre_abreviado = words[0].charAt(0).toUpperCase(); 

                              if (words.length > 1) {
                                 nombre_abreviado += words[1].charAt(0).toUpperCase();
                              }

                              contacto_fullname_staff.text(nombre_abreviado);

                              contacto_fullname_staff
                                 .removeClass("staff-sin-asignar")
                                 .addClass("staff-asignado-a ");

                           }

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

                            
                        }

                        /*
                        var div_numero_contacto = $(
                           '.mi-bandeja-mensajes-contactos a[data-id_contacto="' +
                              id_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(numero_contacto_seleccionado, nombre, html_listado_etapa_conversacion_select),
                        );

                        seleccion_etapa_conversacion();

                        funcion_modal_abrir_contacto();

                        //esta funcion me permite abrir el menu de opciones para que seleccione un staff y cliente al chat
                        setting_offcanvas();
 
                        listado_custumers.push({
                           id: custumer_id,
                           account: nombre,
                           email: email_custumers,
                           phone: phone_custumers,
                           company: company_custumers,
                           address: address_custumers,
                        });

                        let html_listado_custumers =
                           cargar_select_custumers(listado_custumers);

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

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

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

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

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

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

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

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

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

                        var $offcanvasMenu = $("#offcanvas-menu");
                        var $offcanvasBackdrop = $("#offcanvas-backdrop");
                        var $offcanvasClose = $(".btn-close-offcanvas");

                        $offcanvasMenu.removeClass("offcanvas-show");
                        $offcanvasBackdrop.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,
                                 //);

                                 cambiar_badge_id_contacto(
                                    id_contacto_seleccionado,
                                    "0",
                                 );

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

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

            let mi_arreglo_indexdb = [];

            let filtrar_id = "";

            if(TIPO_DE_PLATAFORMA == "whatsapp-sms")
            {
               let miData = await consultarIdContactosInformacionDBLocal(tabla_contactos_chat_indexedDb);  

               if (miData.type == "success") {
                  mi_arreglo_indexdb = miData.data || [];

                  filtrar_id = mi_arreglo_indexdb.map((element) => element.chat_number_id ).join(",");
               }
            }
    
            let informacion = {
               tipo: "admin",
               canal: TIPO_DE_PLATAFORMA,
               configuracion_whatsapp_other_id: TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID,
               filtrar_id: filtrar_id,
               //filtrar_id: "56,31,37,39,60",
               //filtrar_id: mi_arreglo_indexdb.map((element) => element.chat_number_id ).join(","),
            };

            console.log(informacion);
            //return;

            let data__backend_lista_contactos =
               (await cargar_listado_contactos_api_post(
                  URL_BASE,
                 informacion
               )) || [];

            console.log("data__backend_lista_contactos");
            console.log(data__backend_lista_contactos);

            let existe_data = data__backend_lista_contactos;

            if(TIPO_DE_PLATAFORMA == "whatsapp-sms")
            {
               if(existe_data.length != 0)
               {
               
                  let miArrListaContactosTemporal = [];

                  mi_arreglo_indexdb.forEach((element_lvl2) => {
                              

                     element_lvl2.mensajes_no_leidos = "0";
                     element_lvl2.mensajes_no_leidos_whatsapp = "0";
                     element_lvl2.mensajes_no_leidos_sms = "0";
                     //element_lvl2.orden = "";

                     if(Object.keys(element_lvl2).length != 0)
                     {
                           element_lvl2.informacion_contacto = {
                                       orden: element_lvl2.informacion_contacto.orden,
                                       id: element_lvl2.informacion_contacto.id,
                                       number: element_lvl2.informacion_contacto.number,
                                       custumer_id: element_lvl2.informacion_contacto.custumer_id,
                                       staff_id: element_lvl2.informacion_contacto.staff_id,
                                       created_at: element_lvl2.informacion_contacto.created_at,
                                       nombre: element_lvl2.informacion_contacto.nombre,
                                       email_custumers: element_lvl2.informacion_contacto.email_custumers,
                                       phone_custumers: element_lvl2.informacion_contacto.phone_custumers,
                                       company_custumers: element_lvl2.informacion_contacto.company_custumers,
                                       address_custumers: element_lvl2.informacion_contacto.address_custumers,
                                       fullname_staff: element_lvl2.informacion_contacto.fullname_staff,
                                       username_staff: element_lvl2.informacion_contacto.username_staff,
                                       user_type_staff: element_lvl2.informacion_contacto.user_type_staff,
                                       phonenumber: element_lvl2.informacion_contacto.phonenumber,
                                       sys_users_config_whatsapp_other_id: element_lvl2.informacion_contacto.sys_users_config_whatsapp_other_id,
                                       config_whatsapp_other_id: element_lvl2.informacion_contacto.config_whatsapp_other_id,
                                       nombre_actual: element_lvl2.informacion_contacto.nombre_actual,
                                       fecha_humana: element_lvl2.informacion_contacto.fecha_humana,
                                       fecha_humana_enviado: element_lvl2.informacion_contacto.fecha_humana_enviado,
                                       fecha_ultimo_mensaje_recibido_unix: element_lvl2.informacion_contacto.fecha_ultimo_mensaje_recibido_unix,
                                       fecha_ultimo_mensaje_enviado_unix: element_lvl2.informacion_contacto.fecha_ultimo_mensaje_enviado_unix,
                                       nombre_whatsapp: element_lvl2.informacion_contacto.nombre_whatsapp,
                                       mensajes_no_leidos_sms: '0',
                                       mensajes_no_leidos_whatsapp: '0',
                                       mensajes_no_leidos: '0',
                                    };

                        element_lvl2.config_whatsapp_other_id = element_lvl2.informacion_contacto.config_whatsapp_other_id;


                                    
                     }else{
                                    
                                    element_lvl2.informacion_contacto =  {};
                     }

                     let encontre_registro = existe_data.find((item) => item.id == element_lvl2.chat_number_id);

                     if(encontre_registro)
                     {

                                    let {
                                       orden,
                                       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,
                                       config_whatsapp_other_id,
                                       nombre_actual,
                                       fecha_humana,
                                       fecha_humana_enviado,
                                       fecha_ultimo_mensaje_recibido_unix,
                                       fecha_ultimo_mensaje_enviado_unix,
                                       nombre_whatsapp,
                                       chat_con_mensaje_whatsapp,
                                       mensajes_no_leidos_sms,
                                       mensajes_no_leidos_whatsapp,
                                       mensajes_no_leidos,

                                    } = encontre_registro;

                                    element_lvl2.informacion_contacto = {
                                          orden,
                                          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,
                                          config_whatsapp_other_id,
                                          nombre_actual,
                                          fecha_humana,
                                          fecha_humana_enviado,
                                          fecha_ultimo_mensaje_recibido_unix,
                                          fecha_ultimo_mensaje_enviado_unix,
                                          nombre_whatsapp,
                                          mensajes_no_leidos_sms,
                                          mensajes_no_leidos_whatsapp,
                                          mensajes_no_leidos,
                                    };

                                    element_lvl2.config_whatsapp_other_id = config_whatsapp_other_id;


      
                                    element_lvl2.mensajes_no_leidos = mensajes_no_leidos;
                                    element_lvl2.mensajes_no_leidos_whatsapp = mensajes_no_leidos_whatsapp;
                                    element_lvl2.mensajes_no_leidos_sms = mensajes_no_leidos_sms;

                                    miArrListaContactosTemporal.push(element_lvl2.informacion_contacto); 

                     }else{

                                    miArrListaContactosTemporal.push(element_lvl2.informacion_contacto); 

                     }

      
                  });

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

                  //return;

                  let listado_id_temporal = miArrListaContactosTemporal.map((element) => element.id);
                  let elementos_sin_conversaciones_nuevos = existe_data.filter((data) => !listado_id_temporal.includes(data.id) );  

                  //console.log("existe_data xd");
                  //console.log(existe_data);
                  //console.log("listado_id_temporal");
                  //console.log(listado_id_temporal);
                  //console.log("elementos_sin_conversaciones_nuevos");
                  //console.log(elementos_sin_conversaciones_nuevos);

                  elementos_sin_conversaciones_nuevos.forEach((element) => {

                     miArrListaContactosTemporal.push(element); 
                  
                  });

                  lista_contactos = miArrListaContactosTemporal.sort((a, b) => {
                     return Number(b.orden) - Number(a.orden);
                  });

 
                  //console.log("lista_contactos xd");
                  //console.log(lista_contactos);
                  //console.log("caimos en un return aqui abajo mi dog");
                  //return;


               }
            }else{
               lista_contactos = data__backend_lista_contactos;
            }

             
 
            //console.log("lista_contactos db");
            //console.log(lista_contactos);
            //console.log("ahi un return aqui abajo");
            //return;

            //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) => {
               
              
               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 + "",
                           orden: element.orden + "",
                           informacion_contacto: element,
                           mensajes_no_leidos: procesarVariable(element.mensajes_no_leidos),
                           mensajes_no_leidos_sms: procesarVariable(element.mensajes_no_leidos_sms),
                           mensajes_no_leidos_whatsapp: procesarVariable(element.mensajes_no_leidos_whatsapp),
                           config_whatsapp_other_id: element.config_whatsapp_other_id,
                           ultimo_mensaje:              element.ultimo_mensaje,
                           data: [],

                           id_etapa_conversacion:          element.id_etapa_conversacion,
                           nombre_etapa_conversacion:      element.nombre_etapa_conversacion,
                           color_fondo_etapa_conversacion: element.color_fondo_etapa_conversacion,
                           color_texto_etapa_conversacion: element.color_texto_etapa_conversacion,
                        };

                         

                        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 + "",
                           orden: element.orden + "",
                           informacion_contacto: element,
                           mensajes_no_leidos: procesarVariable(element.mensajes_no_leidos),
                           mensajes_no_leidos_sms: procesarVariable(element.mensajes_no_leidos_sms),
                           mensajes_no_leidos_whatsapp: procesarVariable(element.mensajes_no_leidos_whatsapp),
                           config_whatsapp_other_id: element.config_whatsapp_other_id,
                           data: informacionObtenida.data,

                           id_etapa_conversacion:          element.id_etapa_conversacion,
                           nombre_etapa_conversacion:      element.nombre_etapa_conversacion,
                           color_fondo_etapa_conversacion: element.color_fondo_etapa_conversacion,
                           color_texto_etapa_conversacion: element.color_texto_etapa_conversacion,
                        };

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

                        actualizarSinBuscadorInformacionDBLocal(data_guardar, tabla_contactos_chat_indexedDb);

                     }



                  }
               });
                

               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,
                  orden: miData.orden + "",
                  informacion_contacto: {
                     ...miData.informacion_contacto,

                     id_etapa_conversacion:          miData.id_etapa_conversacion,
                     nombre_etapa_conversacion:      miData.nombre_etapa_conversacion,
                     color_fondo_etapa_conversacion: miData.color_fondo_etapa_conversacion,
                     color_texto_etapa_conversacion: miData.color_texto_etapa_conversacion,
                  
                  },

                  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,
                  config_whatsapp_other_id:    miData.config_whatsapp_other_id,
                  ultimo_mensaje:              miData.ultimo_mensaje,

                  data: [],

                  id_etapa_conversacion:          miData.id_etapa_conversacion,
                  nombre_etapa_conversacion:      miData.nombre_etapa_conversacion,
                  color_fondo_etapa_conversacion: miData.color_fondo_etapa_conversacion,
                  color_texto_etapa_conversacion: miData.color_texto_etapa_conversacion,
               };
 
               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").trigger('change');;
               $(".btn_microfono").css("color", "#434343");
               $(".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).trigger('change');;

               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", "#434343");
                  $(".btn_microfono").prop("disabled", false);
                  $(".btn_microfono").html('<i class="fa fa-microphone"></i>');
               }
            }

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

          

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

            let bloquear = estadoBotonesMensajes();

            if(bloquear == true)
            {
               return;
            }

            let etapa_id = $(".tenerEtapaConversacionSelect ").val();

            if (isEmpty(etapa_id) == true) {
               Swal.fire("Select a conversation stage");
               return;
            }

            let tipo_plantilla_enviar = $("#tipo_plantilla_enviar").val();

            if (isEmpty(tipo_plantilla_enviar) == true) {
               Swal.fire("Required configuration on the template type");
               return;
            }

            let input_fecha_configuracion_mensaje = $("#input_fecha_configuracion_mensaje").val();
            let input_hora_configuracion_mensaje  = $("#input_hora_configuracion_mensaje").val();

            if(tipo_plantilla_enviar == "2")
            {
               if (isEmpty(input_fecha_configuracion_mensaje) == true)
               {
                  $("#input_fecha_configuracion_mensaje").addClass("color-error");
               }else{
                  $("#input_fecha_configuracion_mensaje").removeClass("color-error");
               }

               if (isEmpty(input_hora_configuracion_mensaje) == true){
                  $("#input_hora_configuracion_mensaje").addClass("color-error");
               }else{
                  $("#input_hora_configuracion_mensaje").removeClass("color-error");
               }

               if (isEmpty(input_fecha_configuracion_mensaje) == true) {
                  Swal.fire('The "Send template time settings" section, the "Date" field is required');
                  $("#input_fecha_configuracion_mensaje").addClass("color-error");
                  return;
               }else{
                  $("#input_fecha_configuracion_mensaje").removeClass("color-error");
               }

               if (isEmpty(input_hora_configuracion_mensaje) == true) {
                  Swal.fire('The "Send template time settings" section, the "Hour" field is required');
                  $("#input_hora_configuracion_mensaje").addClass("color-error");
                  return;
               }else{
                  $("#input_hora_configuracion_mensaje").removeClass("color-error");
               }

               // Combine date and time into a single Date object
               const dateTimeString = `${input_fecha_configuracion_mensaje}T${input_hora_configuracion_mensaje}:00`;
               const inputDateTime = new Date(dateTimeString);

               if (isNaN(inputDateTime.getTime())) {
                  Swal.fire('Invalid date or time format');
                  return; // Validation fails if the date is invalid
               }

               const now = new Date();
               const minFutureTime = new Date(now.getTime() + 0 * 60 * 1000);

               if (inputDateTime < now) {
                  Swal.fire('Date-time is in the past, skipping validation');
                  return;
               }

               if (inputDateTime >= minFutureTime) {
                   
               } else {
                  
                  Swal.fire('Date-time is too soon (within 1 minutes from now)');
                  return;
               }

            }

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

               let UUID_generado = generadorUUID();

               enviar_informacion.UUID = UUID_generado;
               enviar_informacion.etapa_id = etapa_id;

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

               bloquearBotonesMensajes();

               // si es igual a 1 es porque es normal el envio de plantillas
               if(tipo_plantilla_enviar == "1")
               {
                  console.log(JSON.stringify(enviar_informacion));

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

                        desbloquearBotonesMensajes();

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

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

                              let color_texto_encontrado = "";
                              let color_fondo_encontrado = "";
                              let nombre_etapa_encontrado = "";
                              let id_etapa_conversacion_encontrado = "";
                              
                              let mi_etapa = lista_etapa_conversacion.find((element) => element.id == info.etapa_id);

                              if(mi_etapa)
                              {
                                 nombre_etapa_encontrado  = mi_etapa.nombre_etapa;
                                 color_fondo_encontrado = mi_etapa.color_fondo_etapa_conversacion;
                                 color_texto_encontrado = mi_etapa.color_texto_etapa_conversacion;
                                 id_etapa_conversacion_encontrado = mi_etapa.id;
                              }

                              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.id == id_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;

                                 sumar_msj_sin_responder.mensajes_no_leidos = 0;
                                 sumar_msj_sin_responder.mensajes_no_leidos_sms = 0;
                                 sumar_msj_sin_responder.mensajes_no_leidos_whatsapp = 0;

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

                                 if (div.length) {

                                    let etapa_conversacion = div.find(".etapa_conversacion");

                                    if(etapa_conversacion.length){
                                    
                                       etapa_conversacion.text(quitarTextoLargo( nombre_etapa_encontrado ));
                                       etapa_conversacion.attr('title', nombre_etapa_encontrado );  

                                       etapa_conversacion.css({
                                       'background': color_fondo_encontrado,    
                                       'color': color_texto_encontrado,          
                                       });
                                    }

                                    let ultimo_mensaje_div = div.find(".ultimo_mensaje_div");

                                    if(ultimo_mensaje_div.length){
                                    
                                       ultimo_mensaje_div.text(quitarTextoLargo("Template sent"));
                                       ultimo_mensaje_div.attr('title', "Template sent");  
                                    }

                                    var badge = div.find(".badge-contactos");

                                    if(badge.length){
                                       badge.text("");
                                       badge.removeClass("badge-colors");
                                    }

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

                                    if(div_fecha_humana.length)
                                    {
                                       div_fecha_humana.text(info.fecha_humana);
                                    }

                                    let fullHtml = div.prop('outerHTML');
               
                                    div.remove();
                                    
                                    $(".mi-bandeja-mensajes-contactos").prepend(
                                       fullHtml,
                                    );


                                    click_only_contactos(id_contacto_seleccionado);
                                 }

                                 
                              }
   

                              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,
                                    UUID:UUID_generado,
                                    phone_number_id: PHONE_NUMBER_ID_GLOBAL,
                                    from: FROM_GLOBAL,
                                    to: numero_contacto_seleccionado,
                                    mensaje: $("#mi-mensaje-texto").val(),
                                    url: "",
                                    url_original: "",
                                    filename: "",
                                    tipo_mensaje: "template",
                                    db: "no ocupo",
                                    esContacto: "0",
                                    fecha_creacion: formattedDate,

                                    user_id: STAFF_ID_GLOBAL,
                                    user_img: IMG_NOMBRE_PERFIL,

                                    chat_number_id: id_contacto_seleccionado,

                                    template_original: info.plantilla_original,
                                    template_data: info.template_data,

                                    fecha_creacion_original       : info.fecha_creacion_original,  
                                    fecha_creacion_GMT            : info.fecha_creacion_GMT,  
   
                                 };
                                 
                                 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,
                                                orden: info.fecha_creacion_unix + "",
                                                informacion_contacto:        {
                                                   ...miData.informacion_contacto,
                                                   orden: info.fecha_creacion_unix + "",
                                                   ultimo_mensaje:              "Template sent",

                                                   id_etapa_conversacion:          id_etapa_conversacion_encontrado,
                                                   nombre_etapa_conversacion:      nombre_etapa_encontrado,
                                                   color_fondo_etapa_conversacion: color_fondo_encontrado,
                                                   color_texto_etapa_conversacion: color_texto_encontrado,
                                                },
                                                mensajes_no_leidos:          0,
                                                mensajes_no_leidos_sms:      0,
                                                mensajes_no_leidos_whatsapp: 0,
                                                config_whatsapp_other_id:    miData.config_whatsapp_other_id,
                                                data: nuevo_arreglo,
                                                ultimo_mensaje:              "Template sent",

                                                id_etapa_conversacion:          id_etapa_conversacion_encontrado,
                                                nombre_etapa_conversacion:      nombre_etapa_encontrado,
                                                color_fondo_etapa_conversacion: color_fondo_encontrado,
                                                color_texto_etapa_conversacion: color_texto_encontrado,
                                             };

                                             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,
                                       UUID_generado,
                                    ),
                                 );
                              } else {
                                 let informacion = {
                                    id:info.id_chat_social,
                                    tipo_producto: "whatsapp",
                                    error_codigo: "",
                                    error_mensaje: "",
                                    status: "wait",
                                    wam_id: info.wam_id,
                                    UUID:UUID_generado,
                                    phone_number_id: PHONE_NUMBER_ID_GLOBAL,
                                    from: FROM_GLOBAL,
                                    to: numero_contacto_seleccionado,
                                    mensaje: $("#mi-mensaje-texto").val(),
                                    url: "",
                                    url_original: "",
                                    filename: "",
                                    tipo_mensaje: "template",
                                    db: "no ocupo",
                                    esContacto: "0",
                                    fecha_creacion: formattedDate,

                                    user_id: STAFF_ID_GLOBAL,
                                    user_img: IMG_NOMBRE_PERFIL,

                                    chat_number_id: id_contacto_seleccionado,

                                    template_original: info.plantilla_original,
                                    template_data: info.template_data,

                                    fecha_creacion_original       : info.fecha_creacion_original,  
                                    fecha_creacion_GMT            : info.fecha_creacion_GMT,  
                                 };

                                 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,
                                                orden: info.fecha_creacion_unix + "",
                                                informacion_contacto:        {
                                                   ...miData.informacion_contacto,
                                                   orden: info.fecha_creacion_unix + "",
                                                   ultimo_mensaje:              "Template sent",

                                                   id_etapa_conversacion:          id_etapa_conversacion_encontrado,
                                                   nombre_etapa_conversacion:      nombre_etapa_encontrado,
                                                   color_fondo_etapa_conversacion: color_fondo_encontrado,
                                                   color_texto_etapa_conversacion: color_texto_encontrado,
                                                },
                                                mensajes_no_leidos:          0,
                                                mensajes_no_leidos_sms:      0,
                                                mensajes_no_leidos_whatsapp: 0,
                                                config_whatsapp_other_id:    miData.config_whatsapp_other_id,
                                                data: nuevo_arreglo,
                                                ultimo_mensaje:              "Template sent",

                                                id_etapa_conversacion:          id_etapa_conversacion_encontrado,
                                                nombre_etapa_conversacion:      nombre_etapa_encontrado,
                                                color_fondo_etapa_conversacion: color_fondo_encontrado,
                                                color_texto_etapa_conversacion: color_texto_encontrado,
                                             };

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

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

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

                        desbloquearBotonesMensajes();
                     },
                  });
               }else{

                  enviar_informacion.fecha_configuracion_mensaje = input_fecha_configuracion_mensaje;
                  enviar_informacion.hora_configuracion_mensaje = input_hora_configuracion_mensaje;
                  enviar_informacion.chat_number_id = id_contacto_seleccionado;

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

                  $.ajax({
                     type: "POST",
                     url: URL_BASE + "social/enviar-mensaje-plantilla-programable-whatsapp",
                     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);

                        desbloquearBotonesMensajes();

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

                           if (info.type == "success") {
 
                              Swal.fire(info.message);
               
                           } 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");

                        desbloquearBotonesMensajes();
                     },
                  });
               }

                
            }
         });

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

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

         $("#btn_search_contacto_2").click(async function () {
 
            $("#btn_search_contacto").show();
            $(".mostrar_conjunto_botones").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;
            }

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

            //return;

            let resultados = listado_custumers.filter(function (element = {}) {
               let {
                  id = "",
                  account = "",
                  email = "",
                  phone = "",
                  company = "",
                  address = "",
               } = element;

               return (
                  (account || "").toLowerCase().includes(filtro_customer.toLowerCase()) ||
                  (email || "").toLowerCase().includes(filtro_customer.toLowerCase()) ||
                  (phone || "").toLowerCase().includes(filtro_customer.toLowerCase())
               );
            });


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

            add_customers_chat();
         });

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

            console.log("btn_filtro_buscador_staff");

            let filtro = $(".buscador_asignar_staff").val() || "";

            if (isEmpty(filtro) == true) {
               Swal.fire("the search is empty!");
               return;
            }

            if (isEmpty(TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID) == true) {
               Swal.fire("WhatsApp/SMS configuration is required!");
               return;
            }

            let filtro_staff = filtro.toLowerCase();

            let informacion = {
               filtro: filtro_staff,
               configuracion_whatsapp_sms_id: TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID,
            };

            console.log("informacion");
            console.log(informacion);

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

            $.ajax({
               type: "POST",
               url: URL_BASE + "social/filtra-listado-staff",
               data: JSON.stringify(informacion), // Convertir datos a formato JSON
               contentType: "application/json", // Tipo de contenido JSON
               success: function (response) {

                  $('#btn_filtro_buscador_staff').prop('disabled', false);
                  
                  //console.log("Respuesta del servidor:", response);
                  // Hacer algo con la respuesta del servidor

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

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

                        let data = info.data || [];

                        console.log("data");
                        console.log(data);
                        
                        $(".tbody_asignar_staff").html(tabla_html_staff(data));
                        
                        add_evento_select_staff_contactos();

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

                  $('#btn_filtro_buscador_staff').prop('disabled', false);

               },
            });
      
           
         });

         $("#btn_filtro_buscador_clientes").click(async function () {
            
            console.log("btn_filtro_buscador_clientes");

            let filtro = $(".buscador_asignar_clientes").val() || "";

            if (isEmpty(filtro) == true) {
               Swal.fire("the search is empty!");
               return;
            }

            let filtro_staff = filtro.toLowerCase();

            let informacion = {
               filtro: filtro_staff,
            };

            console.log("informacion");
            console.log(informacion);

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

            $.ajax({
                  type: "POST",
                  url: URL_BASE + "social/filtra-listado-customers",
                  data: JSON.stringify(informacion), // Convertir datos a formato JSON
                  contentType: "application/json", // Tipo de contenido JSON
                  success: function (response) {

                     $('#btn_filtro_buscador_clientes').prop('disabled', false);
                     
                     //console.log("Respuesta del servidor:", response);
                     // Hacer algo con la respuesta del servidor

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

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

                           let data = info.data || [];

                           console.log("data");
                           console.log(data);
                           
                           $(".tbody_asignar_clientes").html(tabla_html_customers(data));
                           
                           add_evento_select_cliente_contactos();

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

                     $('#btn_filtro_buscador_clientes').prop('disabled', false);

                  },
               });
      
           
         });

         function add_evento_select_cliente_contactos()
         {
            $(".btn_add_cliente_contacts")
            .off("click")
            .on("click", function () {

               let {

                  cliente_id,

               } = $(this).data();

               console.log("cliente_id");
               console.log(cliente_id);  
 
               var datos = {
                  chat_number_id: id_contacto_seleccionado,
                  custumers_id: cliente_id,
                  config_whatsapp_other_id: TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID,
               };

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

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

               $.ajax({
                  type: "POST",
                  url: URL_BASE + "social/asignar-clientes-contactos",
                  data: JSON.stringify(datos), // Convertir datos a formato JSON
                  contentType: "application/json", // Tipo de contenido JSON
                  success: function (response) {
                      
                     $(".btn_add_cliente_contacts").prop("disabled", false);

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

                        if (info.type == "success") {
                          
                           let $offcanvasMenu = $("#offcanvas-menu");
                           let $offcanvasBackdrop = $("#offcanvas-backdrop");

                           $offcanvasMenu.removeClass("offcanvas-show");
                           $offcanvasBackdrop.hide();
 
                           let {
                              config_whatsapp_other_id = "",
                              id = "",
                              number = "",
                              custumer_id = "",
                              staff_id = "",
                              created_at = "",
                              mensajes_no_leidos = "",
                              nombre = "",
                              email_custumers = "",
                              phone_custumers = "",
                              company_custumers = "",
                              address_custumers = "",
                              fullname_staff = "",
                              username_staff = "",
                              user_type_staff = "",
                              phonenumber = "",
                              nombre_whatsapp = "",
                              accion = "",
                              db = "",
                           } = info.data_personal || {};

                           if(isEmpty(nombre) == true)
                           {
                              nombre = "Desconocido";
                           }
 
                           var div = $(
                              '.mi-bandeja-mensajes-contactos a[data-id_contacto="' +
                                 id_contacto_seleccionado +
                                 '"]',
                           );

                           if (div.length) {

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

                              if(contacto_nombre_contacto.length)
                              {
                                 let maxLength = 15;  

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

                                 contacto_nombre_contacto.text(nombre);

                                 //importante
                                 div.attr('data-nombre', nombre_original);

                                 let nuevo_nombre = "";
                                 let nuevo_titulo_nombre = "";

                                 let nombre_whatsapp_original = nombre_whatsapp || "";

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

                                 let nuevo_estilo_nombre = "mi-texto-normal";

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

                                 if (nombre == "Desconocido") {
                                    nuevo_nombre =
                                       isEmpty(nombre_whatsapp) == true ? "Desconocido" : nombre_whatsapp;

                                    nuevo_titulo_nombre =
                                       isEmpty(nombre_whatsapp) == true
                                          ? "Desconocido"
                                          : nombre_whatsapp_original;

                                    nuevo_estilo_nombre =
                                       isEmpty(nombre_whatsapp) == true
                                          ? "mi-texto-normal"
                                          : "mi-texto-cursivo";
                                 } else {

                                    nuevo_nombre = nombre;
                                    nuevo_titulo_nombre = nombre_original;

                                    nuevo_estilo_nombre = "mi-texto-normal";
                                 }
      
                                 contacto_nombre_contacto.removeClass("mi-texto-cursivo");
                                 contacto_nombre_contacto.removeClass("mi-texto-normal");
                                 contacto_nombre_contacto.addClass(nuevo_estilo_nombre);

                                 contacto_nombre_contacto.attr("title", nuevo_nombre);
                                 contacto_nombre_contacto.text(nuevo_nombre);
 
                              }

                              //cambio staff -----------------------------------
                              let contacto_fullname_staff = div.find(
                                 ".contacto_fullname_staff ",
                              );

                              contacto_fullname_staff.attr("title", fullname_staff);

                              if(fullname_staff ==  "Unassigned staff")
                              {
                                 contacto_fullname_staff.text("N/A");
                              }else{
                                 let words = (fullname_staff || "").split(" "); 

                                 let nombre_abreviado = words[0].charAt(0).toUpperCase(); 

                                 if (words.length > 1) {
                                    nombre_abreviado += words[1].charAt(0).toUpperCase();
                                 }

                                 contacto_fullname_staff.text(nombre_abreviado);
                              }
 
                              // Eliminar la clase 'staff-sin-asignar' y agregar la clase 'ejemplo'
                              contacto_fullname_staff
                                 .removeClass("staff-sin-asignar")
                                 .addClass("staff-asignado-a ");
                              
                           }  
                           
                      
                           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 miInformacionNuevaContacto = {
                                       id: id,
                                       number: number,
                                       custumer_id: custumer_id,
                                       staff_id: staff_id,
                                       created_at: created_at,
                                       nombre: nombre,
                                       nombre_actual: 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,
                                       config_whatsapp_other_id:    config_whatsapp_other_id,

                                       id_etapa_conversacion:          miData.id_etapa_conversacion,
                                       nombre_etapa_conversacion:      miData.nombre_etapa_conversacion,
                                       color_fondo_etapa_conversacion: miData.color_fondo_etapa_conversacion,
                                       color_texto_etapa_conversacion: miData.color_texto_etapa_conversacion,
                                    };
      
                                    let cabecera = {
                                       chat_number_id:              miData.chat_number_id,
                                       ultimo_mensaje:              miData.ultimo_mensaje,
                                       orden:                       miData.orden + "",

                                       informacion_contacto:        {
                                          ...miData.informacion_contacto,
                                          ...miInformacionNuevaContacto,
                                       },

                                       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,
                                       config_whatsapp_other_id:    miData.config_whatsapp_other_id,
                                       data:                        miData.data,

                                       id_etapa_conversacion:          miData.id_etapa_conversacion,
                                       nombre_etapa_conversacion:      miData.nombre_etapa_conversacion,
                                       color_fondo_etapa_conversacion: miData.color_fondo_etapa_conversacion,
                                       color_texto_etapa_conversacion: miData.color_texto_etapa_conversacion,
                                    };
 
                                    actualizarSinBuscadorInformacionDBLocal(cabecera, tabla_contactos_chat_indexedDb);
                                 }
                                  
                     
                              }
                           
                           });
                       
                           $("#modal_asignar_clientes_contactos").modal("hide");

                           Swal.fire({
                              icon: "success",
                              title: "Assigned customer",
                              text: "The customer was assigned to the contact successfully.",
                              confirmButtonText: "OK",
                              confirmButtonColor: '#001B3B',
                              confirmButtonTextColor: 'white'
                           });
 
                        } else {
                           
                           Swal.fire({
                              icon: "error",
                              title: "Oops...",
                              text: info.message,
                           });
                          
                        }
                     } catch (error) {
                       
                        Swal.fire({
                           icon: "error",
                           title: "Oops...",
                           text: error,
                        });

                     }
                  },
                  error: function (xhr, status, error) {
                      
                     $(".btn_add_cliente_contacts").prop("disabled", false);

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

         function add_evento_select_staff_contactos()
         {
            $(".btn_add_staff_contacts")
            .off("click")
            .on("click", function () {

               let {

                  staff_id,

               } = $(this).data();

               console.log("staff_id");
               console.log(staff_id);  
 
               var datos = {
                  chat_number_id: id_contacto_seleccionado,
                  staff_id: staff_id,
                  config_whatsapp_other_id: TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID,
               };

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

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

               $.ajax({
                  type: "POST",
                  url: URL_BASE + "social/asignar-staff-contactos",
                  data: JSON.stringify(datos), // Convertir datos a formato JSON
                  contentType: "application/json", // Tipo de contenido JSON
                  success: function (response) {
                      
                     $(".btn_add_staff_contacts").prop("disabled", false);

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

                        if (info.type == "success") {
                          
                           let $offcanvasMenu = $("#offcanvas-menu");
                           let $offcanvasBackdrop = $("#offcanvas-backdrop");

                           $offcanvasMenu.removeClass("offcanvas-show");
                           $offcanvasBackdrop.hide();
 
                           let {
                              config_whatsapp_other_id = "",
                              id = "",
                              number = "",
                              custumer_id = "",
                              staff_id = "",
                              created_at = "",
                              mensajes_no_leidos = "",
                              nombre = "",
                              email_custumers = "",
                              phone_custumers = "",
                              company_custumers = "",
                              address_custumers = "",
                              fullname_staff = "",
                              username_staff = "",
                              user_type_staff = "",
                              phonenumber = "",
                              nombre_whatsapp = "",
                              accion = "",
                              db = "",
                           } = info.data_personal || {};

                           if(isEmpty(nombre) == true)
                           {
                              nombre = "Desconocido";
                           }
 
                           var div = $(
                              '.mi-bandeja-mensajes-contactos a[data-id_contacto="' +
                                 id_contacto_seleccionado +
                                 '"]',
                           );

                           if (div.length) {

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

                              if(contacto_nombre_contacto.length)
                              {
                                 let maxLength = 15;  

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

                                 contacto_nombre_contacto.text(nombre);

                                 //importante
                                 div.attr('data-nombre', nombre_original);

                                 let nuevo_nombre = "";
                                 let nuevo_titulo_nombre = "";

                                 let nombre_whatsapp_original = nombre_whatsapp || "";

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

                                 let nuevo_estilo_nombre = "mi-texto-normal";

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

                                 if (nombre == "Desconocido") {
                                    nuevo_nombre =
                                       isEmpty(nombre_whatsapp) == true ? "Desconocido" : nombre_whatsapp;

                                    nuevo_titulo_nombre =
                                       isEmpty(nombre_whatsapp) == true
                                          ? "Desconocido"
                                          : nombre_whatsapp_original;

                                    nuevo_estilo_nombre =
                                       isEmpty(nombre_whatsapp) == true
                                          ? "mi-texto-normal"
                                          : "mi-texto-cursivo";
                                 } else {

                                    nuevo_nombre = nombre;
                                    nuevo_titulo_nombre = nombre_original;

                                    nuevo_estilo_nombre = "mi-texto-normal";
                                 }
      
                                 contacto_nombre_contacto.removeClass("mi-texto-cursivo");
                                 contacto_nombre_contacto.removeClass("mi-texto-normal");
                                 contacto_nombre_contacto.addClass(nuevo_estilo_nombre);

                                 contacto_nombre_contacto.attr("title", nuevo_nombre);
                                 contacto_nombre_contacto.text(nuevo_nombre);
 
                              }

                              //cambio staff -----------------------------------
                              let contacto_fullname_staff = div.find(
                                 ".contacto_fullname_staff ",
                              );

                              contacto_fullname_staff.attr("title", fullname_staff);

                              if(fullname_staff ==  "Unassigned staff")
                              {
                                 contacto_fullname_staff.text("N/A");
                              }else{
                                 let words = (fullname_staff || "").split(" "); 

                                 let nombre_abreviado = words[0].charAt(0).toUpperCase(); 

                                 if (words.length > 1) {
                                    nombre_abreviado += words[1].charAt(0).toUpperCase();
                                 }

                                 contacto_fullname_staff.text(nombre_abreviado);
                              }
 
                              // Eliminar la clase 'staff-sin-asignar' y agregar la clase 'ejemplo'
                              contacto_fullname_staff
                                 .removeClass("staff-sin-asignar")
                                 .addClass("staff-asignado-a ");
                              
                           }  
                           
                      
                           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 miInformacionNuevaContacto = {
                                       id: id,
                                       number: number,
                                       custumer_id: custumer_id,
                                       staff_id: staff_id,
                                       created_at: created_at,
                                       nombre: nombre,
                                       nombre_actual: 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,
                                       config_whatsapp_other_id:    config_whatsapp_other_id,

                                       id_etapa_conversacion:          miData.id_etapa_conversacion,
                                       nombre_etapa_conversacion:      miData.nombre_etapa_conversacion,
                                       color_fondo_etapa_conversacion: miData.color_fondo_etapa_conversacion,
                                       color_texto_etapa_conversacion: miData.color_texto_etapa_conversacion,
                                    };
      
                                    let cabecera = {
                                       chat_number_id:              miData.chat_number_id,
                                       ultimo_mensaje:              miData.ultimo_mensaje,
                                       orden:                       miData.orden + "",

                                       informacion_contacto:        {
                                          ...miData.informacion_contacto,
                                          ...miInformacionNuevaContacto,
                                       },

                                       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,
                                       config_whatsapp_other_id:    miData.config_whatsapp_other_id,
                                       data:                        miData.data,

                                       id_etapa_conversacion:          miData.id_etapa_conversacion,
                                       nombre_etapa_conversacion:      miData.nombre_etapa_conversacion,
                                       color_fondo_etapa_conversacion: miData.color_fondo_etapa_conversacion,
                                       color_texto_etapa_conversacion: miData.color_texto_etapa_conversacion,
                                    };
 
                                    actualizarSinBuscadorInformacionDBLocal(cabecera, tabla_contactos_chat_indexedDb);
                                 }
                                  
                     
                              }
                           
                           });
                       

                           $('#modal_asignar_staff_contactos').modal('hide');

                           Swal.fire({
                              icon: "success",
                              title: "Assigned staff",
                              text: "The staff was assigned to the contact successfully.",
                              confirmButtonText: "OK",
                              confirmButtonColor: '#001B3B',
                              confirmButtonTextColor: 'white'
                           });
 
                        } else {
                           
                           Swal.fire({
                              icon: "error",
                              title: "Oops...",
                              text: info.message,
                           });
                          
                        }
                     } catch (error) {
                       
                        Swal.fire({
                           icon: "error",
                           title: "Oops...",
                           text: error,
                        });

                     }
                  },
                  error: function (xhr, status, error) {
                      
                     $(".btn_add_staff_contacts").prop("disabled", false);

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

                              //console.log(add_contacto_desconocido);

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

 
                              let data_guardar = {
                                 chat_number_id: info.chat_number_id + "",
                                 data: [],
                                 mensajes_no_leidos: 0,
                                 mensajes_no_leidos_sms: 0,
                                 mensajes_no_leidos_whatsapp: 0,
                                 orden: 0,
                                 config_whatsapp_other_id:
                                    TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID,

                                 ultimo_mensaje:              info.ultimo_mensaje,

                                 informacion_contacto : {
                                    address_custumers: address_custumers,
                                    company_custumers: company_custumers,
                                    config_whatsapp_other_id: TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID,
                                    created_at: created_at,
                                    custumer_id: custumer_id,
                                    email_custumers: email_custumers,
                                    fecha_humana: info.fecha_humana,
                                    fecha_humana_enviado: "",
                                    fecha_ultimo_mensaje_enviado_unix: "",
                                    fecha_ultimo_mensaje_recibido_unix: "",
                                    fullname_staff: fullname_staff,
                                    id: id,
                                    mensajes_no_leidos: 0,
                                    mensajes_no_leidos_sms: 0,
                                    mensajes_no_leidos_whatsapp: 0,
                                    nombre: nombre,
                                    nombre_actual: "",
                                    nombre_whatsapp: "",
                                    number: number,
                                    orden: 0,
                                    phone_custumers: phone_custumers,
                                    phonenumber: phonenumber,
                                    staff_id: staff_id,
                                    sys_users_config_whatsapp_other_id: sys_users_config_whatsapp_other_id,
                                    user_type_staff: user_type_staff,
                                    username_staff: username_staff,

                                    ultimo_mensaje:              info.ultimo_mensaje,
                                 },
                              };
                       

                              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();
                              click_only_contactos(info.chat_number_id );

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

         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 {
               UUID,
               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,
               url,
               url_original,
            } = data;
 

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

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

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

               $("#seleccionar_medio_mensaje").val(tipo_producto).trigger('change');

               //Aqui estaba el status para cambiar mensajes leidos

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

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

               if (tipo_mensaje == "image") {
                  let plantilla = mensaje_image_sms_clientes(
                     tipo_producto,
                     sid,
                     mensaje,
                     fecha_creacion,
                     UUID,
                     data,
                  );

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

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

               }

               if (tipo_mensaje == "document") {
                  let plantilla = mensaje_document_sms_clientes(
                     tipo_producto,
                     sid,
                     mensaje,
                     fecha_creacion,
                     UUID,
                     data,
                  );

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

               if (tipo_mensaje == "video") {
                  let plantilla = mensaje_video_sms_clientes(
                     tipo_producto,
                     sid,
                     mensaje,
                     fecha_creacion,
                     UUID,
                     data,
                  );

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

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

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

               if (tipo_mensaje == "audio") {
                  let plantilla = mensaje_audio_sms_clientes(
                     tipo_producto,
                     sid,
                     mensaje,
                     fecha_creacion,
                     UUID,
                     data,
                  );

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

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

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

            } else {
               //si es aqui son mensajes de nostros

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

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

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

                  if (div.length == 0) {
                     $(".cuerpo_mensaje").append(plantilla);
                     scroll_abajo();
                     return;
                  }

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

               if (tipo_mensaje == "image") 
               {
                   
                  var plantilla = mensaje_image_sms_usuarios(
                     tipo_producto,
                     error_codigo,
                     status,
                     sid,
                     mensaje,
                     fecha_creacion,
                     user_img,
                     UUID,
                     data,
                  );
 
                  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;
                  }

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

            //console.log("no exise se procedera a crear plantilla_tipo_whatsapp"); 

            $(".btn_microfono").css("color", "#434343");
            $(".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,
               UUID,
               sid,
               phone_number_id,
               from,
               to,
               mensaje,
               url,
               url_original,
               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,

               fechaActual_unix,
               UUID,
               ultimo_mensaje,
               etapa_conversacion_id,
               nombre_etapa,
               color_fondo_etapa_conversacion,
               color_texto_etapa_conversacion,
               fecha_creacion_original,
               fecha_creacion_GMT,

            } = 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(id_contacto_seleccionado == id_chat_number)
               {
                  FECHA_ULTIMO_MENSAJE_PLANTILLA = fecha_creacion_original;

                  verificarSiCumpleFechaPlantillaWhatsapp();
               }


               //if (TIPO_DE_PLATAFORMA == "whatsapp-sms") {
               //   $("#seleccionar_medio_mensaje").val(tipo_producto).trigger('change');
               //}
 
               $("#seleccionar_medio_mensaje").val(tipo_producto).trigger('change');

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

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

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

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

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

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

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

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

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

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

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

                  let plantilla =
                     mensaje_video_whatsapp_usuarios_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,
                        UUID,
                     );

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

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

                  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 = estadoBotonesMensajes();
            //let estaDeshabilitado = $(this).prop("disabled");

            //console.log(estaDeshabilitado);

            if(estaDeshabilitado == true)
            {
               return;
            }

            let etapa_id = $(".tenerEtapaConversacionSelect ").val();

            if (isEmpty(etapa_id) == true) {
               Swal.fire("Select a conversation stage");
               return;
            }

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

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

            bloquearBotonesMensajes();

            let UUID_generado = generadorUUID();

            if (tipo_medio == "sms") {
               let datos = {
                  UUID: UUID_generado,
                  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,

                  etapa_id: etapa_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", "#434343");
                     $(".enviar_mensaje").prop("disabled", false);
                     $("#mi-mensaje-texto").prop("disabled", false);

                     desbloquearBotonesMensajes();

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

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

                           let color_texto_encontrado = "";
                           let color_fondo_encontrado = "";
                           let nombre_etapa_encontrado = "";
                           let id_etapa_conversacion_encontrado = "";
                            
                           let mi_etapa = lista_etapa_conversacion.find((element) => element.id == info.etapa_id);

                           if(mi_etapa)
                           {
                              nombre_etapa_encontrado  = mi_etapa.nombre_etapa;
                              color_fondo_encontrado = mi_etapa.color_fondo_etapa_conversacion;
                              color_texto_encontrado = mi_etapa.color_texto_etapa_conversacion;
                              id_etapa_conversacion_encontrado = mi_etapa.id;
                           }

                           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,
                              UUID: UUID_generado,
                              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,

                              user_id: STAFF_ID_GLOBAL,
                              user_img: IMG_NOMBRE_PERFIL,

                              chat_number_id: id_contacto_seleccionado,

                              fecha_creacion_original       : info.fecha_creacion_original,  
                              fecha_creacion_GMT            : info.fecha_creacion_GMT,  
                           };


                           let sumar_msj_sin_responder = lista_contactos.find(
                              (elemento) =>
                                 elemento.id == id_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;

                              sumar_msj_sin_responder.mensajes_no_leidos = 0;
                              sumar_msj_sin_responder.mensajes_no_leidos_sms = 0;
                              sumar_msj_sin_responder.mensajes_no_leidos_whatsapp = 0;

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

                              if (div.length) {

                                 let etapa_conversacion = div.find(".etapa_conversacion");

                                 if(etapa_conversacion.length){
                                   
                                    etapa_conversacion.text(quitarTextoLargo( nombre_etapa_encontrado ));
                                    etapa_conversacion.attr('title', nombre_etapa_encontrado );  

                                    etapa_conversacion.css({
                                      'background': color_fondo_encontrado,    
                                      'color': color_texto_encontrado,          
                                    });
                                 }

                                 let ultimo_mensaje_div = div.find(".ultimo_mensaje_div");

                                 if(ultimo_mensaje_div.length){
                                   
                                    ultimo_mensaje_div.text(quitarTextoLargo(info.mensaje));
                                    ultimo_mensaje_div.attr('title', info.mensaje);  
                                 }

                                 var badge = div.find(".badge-contactos");

                                 if(badge.length){
                                    badge.text("");
                                    badge.removeClass("badge-colors");
                                 }

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

                                 if(div_fecha_humana.length)
                                 {
                                    div_fecha_humana.text(info.fecha_humana);
                                 }

                                 // 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_only_contactos(id_contacto_seleccionado);
                              } 
                               
                              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,
                                          orden: info.fecha_creacion_unix + "",
                                          informacion_contacto:        {
                                             ...miData.informacion_contacto,
                                             orden: info.fecha_creacion_unix + "",
                                             ultimo_mensaje:              info.mensaje,

                                             id_etapa_conversacion:          id_etapa_conversacion_encontrado,
                                             nombre_etapa_conversacion:      nombre_etapa_encontrado,
                                             color_fondo_etapa_conversacion: color_fondo_encontrado,
                                             color_texto_etapa_conversacion: color_texto_encontrado,
                                          },
                                          mensajes_no_leidos:          0,
                                          mensajes_no_leidos_sms:      0,
                                          mensajes_no_leidos_whatsapp: 0,
                                          config_whatsapp_other_id:    miData.config_whatsapp_other_id,
                                          data: nuevo_arreglo,
                                          ultimo_mensaje:              info.mensaje,

                                          id_etapa_conversacion:          id_etapa_conversacion_encontrado,
                                          nombre_etapa_conversacion:      nombre_etapa_encontrado,
                                          color_fondo_etapa_conversacion: color_fondo_encontrado,
                                          color_texto_etapa_conversacion: color_texto_encontrado,
                                       };

                                       console.log("cabecera");
                                       console.log(cabecera);

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

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

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

                     desbloquearBotonesMensajes();
                  },
               });
            }

            if (tipo_medio == "whatsapp") {
               let datos = {
                  UUID: UUID_generado,
                  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,

                  etapa_id: etapa_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", "#434343");

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

                     desbloquearBotonesMensajes();

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

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

                           let color_texto_encontrado = "";
                           let color_fondo_encontrado = "";
                           let nombre_etapa_encontrado = "";
                           let id_etapa_conversacion_encontrado = "";
                            
                           let mi_etapa = lista_etapa_conversacion.find((element) => element.id == info.etapa_id);

                           if(mi_etapa)
                           {
                              nombre_etapa_encontrado  = mi_etapa.nombre_etapa;
                              color_fondo_encontrado = mi_etapa.color_fondo_etapa_conversacion;
                              color_texto_encontrado = mi_etapa.color_texto_etapa_conversacion;
                              id_etapa_conversacion_encontrado = mi_etapa.id;
                           }

                           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,
                              UUID: UUID_generado,
                              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,
                              user_id: STAFF_ID_GLOBAL,
                              user_img: IMG_NOMBRE_PERFIL,
                              chat_number_id: id_contacto_seleccionado,

                              fecha_creacion_original       : info.fecha_creacion_original,  
                              fecha_creacion_GMT            : info.fecha_creacion_GMT,  
                           };

                           let sumar_msj_sin_responder = lista_contactos.find(
                              (elemento) =>
                                 elemento.id == id_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;

                              sumar_msj_sin_responder.mensajes_no_leidos = 0;
                              sumar_msj_sin_responder.mensajes_no_leidos_sms = 0;
                              sumar_msj_sin_responder.mensajes_no_leidos_whatsapp = 0;

                              //cambiar_badge_id_contacto(
                              //  id_contacto_seleccionado,
                              //  "0",
                              //);

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

                              if (div.length) {

                                 let etapa_conversacion = div.find(".etapa_conversacion");

                                 if(etapa_conversacion.length){
                                   
                                    etapa_conversacion.text(quitarTextoLargo( nombre_etapa_encontrado ));
                                    etapa_conversacion.attr('title', nombre_etapa_encontrado );  

                                    etapa_conversacion.css({
                                      'background': color_fondo_encontrado,    
                                      'color': color_texto_encontrado,          
                                    });
                                 }
 

                                 let ultimo_mensaje_div = div.find(".ultimo_mensaje_div");

                                 if(ultimo_mensaje_div.length){
                                   
                                    //console.log("quitarTextoLargo(mensaje)");

                                    ultimo_mensaje_div.text(quitarTextoLargo($("#mi-mensaje-texto").val()));
                                    ultimo_mensaje_div.attr('title', $("#mi-mensaje-texto").val());  
                                 }

                                 var badge = div.find(".badge-contactos");

                                 if(badge.length){
                                    badge.text("");
                                    badge.removeClass("badge-colors");
                                 }

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

                                 if(div_fecha_humana.length)
                                 {
                                    div_fecha_humana.text(info.fecha_humana);
                                 }

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

                              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,
                                          orden: info.fecha_creacion_unix + "",
                                          informacion_contacto:        {
                                             ...miData.informacion_contacto,
                                             orden: info.fecha_creacion_unix + "",
                                             ultimo_mensaje:              $("#mi-mensaje-texto").val(),

                                             id_etapa_conversacion:          id_etapa_conversacion_encontrado,
                                             nombre_etapa_conversacion:      nombre_etapa_encontrado,
                                             color_fondo_etapa_conversacion: color_fondo_encontrado,
                                             color_texto_etapa_conversacion: color_texto_encontrado,
                                          },
                                          mensajes_no_leidos:          0,
                                          mensajes_no_leidos_sms:      0,
                                          mensajes_no_leidos_whatsapp: 0,
                                          config_whatsapp_other_id:    miData.config_whatsapp_other_id,
                                          data: nuevo_arreglo,
                                          ultimo_mensaje:              $("#mi-mensaje-texto").val(),

                                          id_etapa_conversacion:          id_etapa_conversacion_encontrado,
                                          nombre_etapa_conversacion:      nombre_etapa_encontrado,
                                          color_fondo_etapa_conversacion: color_fondo_encontrado,
                                          color_texto_etapa_conversacion: color_texto_encontrado,
                                       };

                                       actualizarSinBuscadorInformacionDBLocal(cabecera, tabla_contactos_chat_indexedDb);
                                    }
                     
                                 }
                              
                              });
                              
                           }
 
                           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,
                                 UUID_generado
                              ),
                           );

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

                     desbloquearBotonesMensajes();
                  },
               });
            }
      }

      document.getElementById("mi-comentario-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-comentario-mensaje-texto").value;
            funcionEnviarComentarios(texto); // Llama a la función con el texto como argumento
         }
      });


      function funcionEnviarComentarios(texto = "")
      {
         let estaDeshabilitado = estadoBotonesMensajes();
         //let estaDeshabilitado = $(this).prop("disabled");

         //console.log(estaDeshabilitado);

         if(estaDeshabilitado == true)
         {
            return;
         }

         console.log("abrir enviar_mensaje_comentario");

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

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

         if (isEmpty(TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID) == true) {
            Swal.fire("Select a WhatsApp/SMS configuration account");
            return;
         }

         let etapa_id = $(".tenerEtapaConversacionSelect ").val();

         if (isEmpty(etapa_id) == true) {
            Swal.fire("Select a conversation stage");
            return;
         }

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


         if (isEmpty(mi_comentario_mensaje_text) == true) {
            Swal.fire("Write a comment");
            return;
         }

         let UUID_generado = generadorUUID();


         let datos = {
            UUID: UUID_generado,
            to: numero_contacto_seleccionado,
            from: FROM_GLOBAL,
            staff_id: STAFF_ID_GLOBAL, //admin es default
            configuracion_whatsapp_sms_id: TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID,
            chat_number_id: id_contacto_seleccionado,
            mensaje: mi_comentario_mensaje_text,
            tipo_producto: "whatsapp",
            etapa_id: etapa_id,
            phone_number_id: PHONE_NUMBER_ID_GLOBAL,
         };

         console.log("datos");
         console.log(datos);

         $(".enviar_mensaje_comentario").css("color", "#434343");
         $(".enviar_mensaje_comentario").prop("disabled", true);     
         $("#mi-comentario-mensaje-texto").prop("disabled", true);

         bloquearBotonesMensajes();

         $.ajax({
            type: "POST",
            url: URL_BASE + "social/guardar-comentario-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

               desbloquearBotonesMensajes();

               $(".enviar_mensaje_comentario").css("color", "#434343");
               $(".enviar_mensaje_comentario").prop("disabled", false);
              
               $("#mi-comentario-mensaje-texto").prop("disabled", false);

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

                  if (info.type == "success") {
 
                     const formattedDate = info.fecha_creacion;
 
                     let informacion = {
                        id: info.id_chat_social,
                        tipo_producto: "ninguno",
                        error_codigo: "",
                        error_mensaje: "",
                        status: "send",
                        wam_id: null,
                        UUID: UUID_generado,
                        phone_number_id: PHONE_NUMBER_ID_GLOBAL,
                        from: FROM_GLOBAL,
                        to: numero_contacto_seleccionado,
                        mensaje: info.message,
                        url: "",
                        tipo_mensaje: info.tipo_mensaje,
                        db: "no ocupo",
                        esContacto: "0",
                        fecha_creacion: info.fecha_creacion,

                        user_id: STAFF_ID_GLOBAL,
                        user_img: IMG_NOMBRE_PERFIL,

                        chat_number_id: id_contacto_seleccionado,

                        fecha_creacion_original       : info.fecha_creacion_original,  
                        fecha_creacion_GMT            : info.fecha_creacion_GMT,  
                     };

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

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

                        if (div.length) {

                           let etapa_conversacion = div.find(".etapa_conversacion");

                           if(etapa_conversacion.length){
                             
                              etapa_conversacion.text(quitarTextoLargo( info.nombre_etapa ));
                              etapa_conversacion.attr('title', info.nombre_etapa );  

                              etapa_conversacion.css({
                                 'background-color': info.color_fondo_etapa_conversacion, 
                                 'color': info.color_texto_etapa_conversacion,  
                              });
                           }
 
                        }  

                        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 existe_registro = (miData.data || []).find((item) => item.UUID == UUID_generado);

                                 if(!existe_registro)
                                 {
                                    let nuevo_arreglo = [...miData.data];

                                    nuevo_arreglo.push(informacion);
      
                                    let cabecera = {
                                       chat_number_id:              miData.chat_number_id,
                                       orden:                       miData.orden + "",
                                       informacion_contacto:        {
                                          ...miData.informacion_contacto,
                                          orden: miData.orden + "",
                                          ultimo_mensaje:                 miData.ultimo_mensaje,

                                          id_etapa_conversacion:          info.etapa_id,
                                          nombre_etapa_conversacion:      info.nombre_etapa,
                                          color_fondo_etapa_conversacion: info.color_fondo_etapa_conversacion,
                                          color_texto_etapa_conversacion: info.color_texto_etapa_conversacion,
                                       },
                                       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,
                                       config_whatsapp_other_id:    miData.config_whatsapp_other_id,
                                       data: nuevo_arreglo,
                                       ultimo_mensaje:              miData.ultimo_mensaje,

                                       id_etapa_conversacion:          info.etapa_id,
                                       nombre_etapa_conversacion:      info.nombre_etapa,
                                       color_fondo_etapa_conversacion: info.color_fondo_etapa_conversacion,
                                       color_texto_etapa_conversacion: info.color_texto_etapa_conversacion,
                                    };

                                    actualizarSinBuscadorInformacionDBLocal(cabecera, tabla_contactos_chat_indexedDb);
                                 }

                                  
                              }
                               
               
                           }
                        
                        });

                        
                     }
 
                     chat_mensajes.push(informacion);
 
                     const div_mensaje = $(".cuerpo_mensaje").find(`div[data-uuid="${UUID_generado}"]`);
  
                     if (div_mensaje.length == 0) 
                     {
                         let estructura_etapa = {
                           wam_id: "",
                           mensaje: mensaje,
                           fecha_creacion: fecha_creacion,
                           UUID: UUID,
                           user_id: STAFF_ID_GLOBAL,
                           user_img: IMG_NOMBRE_PERFIL,
                        };

                        console.log("api UUID_generado");
                        console.log(UUID_generado);

                        $(".cuerpo_mensaje").append(  
                           mensaje_etapa_conversacion_whatsapp_usuarios(
                              estructura_etapa
                           ),
                        ); 
                     }  

                     scroll_abajo();

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

               $(".enviar_mensaje_comentario").css("color", "#434343");
               $(".enviar_mensaje_comentario").prop("disabled", false);
              
               $("#mi-comentario-mensaje-texto").prop("disabled", false);

               desbloquearBotonesMensajes();

            },
         });
      }

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

         let url_modulo_api_direccion_smarty =  $(".url_modulo_api_direccion_smarty").val();
         let key_modulo_api_direccion_smarty =  $(".key_modulo_api_direccion_smarty").val();
         let host_modulo_api_direccion_smarty =  $(".host_modulo_api_direccion_smarty").val();
         let referer_modulo_api_direccion_smarty =  $(".referer_modulo_api_direccion_smarty").val();
      
         //console.log("url_modulo_api_direccion_smarty");
         //console.log(url_modulo_api_direccion_smarty);
         //console.log("key_modulo_api_direccion_smarty");
         //console.log(key_modulo_api_direccion_smarty);
         //console.log("host_modulo_api_direccion_smarty");
         //console.log(host_modulo_api_direccion_smarty);
         //console.log("referer_modulo_api_direccion_smarty");
         //console.log(referer_modulo_api_direccion_smarty);
      
         if(isEmpty(url_modulo_api_direccion_smarty) == true || 
            isEmpty(key_modulo_api_direccion_smarty) == true ||  
            isEmpty(host_modulo_api_direccion_smarty) == true || isEmpty(referer_modulo_api_direccion_smarty) == true)
         {
            return;
         }

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

         //console.log(address);

            let x=address.trim();
            if (x.length > 2 && country === "United States") {
               var settings = {
                  "url": url_modulo_api_direccion_smarty + "/lookup?key=" + key_modulo_api_direccion_smarty + "&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"
                     "Host": host_modulo_api_direccion_smarty,
                     "Referer": referer_modulo_api_direccion_smarty
                  },
            };

               $('#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)
      {
 
 
            var {
               id,
               tipo_producto,
               error_codigo,
               error_mensaje,
               status,
               wam_id,
               sid,
               UUID,
               phone_number_id,
               from,
               to,
               mensaje,
               url,
               url_original,
               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,
                  
               user_id=null,
 
               fecha_humana,
               nombre_whatsapp,
               config_whatsapp_other_id,

               fechaActual_unix,
               ultimo_mensaje ,
               etapa_conversacion_id,
               color_fondo_etapa_conversacion,
               color_texto_etapa_conversacion,
               nombre_etapa,

               fecha_creacion_GMT,
               fecha_creacion_original,

            } = data;

            let etapa_encontrada = lista_etapa_conversacion.find((element) => element.id == etapa_conversacion_id);

            let nombre_etapa_encontrada = "";
            let color_fondo_etapa_conversacion_encontrada = "#434343";
            let color_texto_etapa_conversacion_encontrada = "white";

            if(etapa_encontrada)
            {
               nombre_etapa_encontrada = etapa_encontrada.nombre_etapa;
               color_fondo_etapa_conversacion_encontrada = etapa_encontrada.color_fondo_etapa_conversacion;
               color_texto_etapa_conversacion_encontrada = etapa_encontrada.color_texto_etapa_conversacion;
            }
 
            //VALIDACION PARA VER SI EL CONTACTO ES NUEVO
            let contacto_desconocido = lista_contactos.find(
               (elemento) => 
                           elemento.id == id_chat_number && 
                           elemento.config_whatsapp_other_id == config_whatsapp_other_id,
            );


            if(!contacto_desconocido)
            {

               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,
                  mensajes_no_leidos_sms: 0,
                  mensajes_no_leidos_whatsapp: 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,

                  config_whatsapp_other_id: config_whatsapp_other_id,
                  nombre_etapa_conversacion: nombre_etapa_encontrada,
                  color_fondo_etapa_conversacion: color_fondo_etapa_conversacion_encontrada,
                  color_texto_etapa_conversacion: color_texto_etapa_conversacion_encontrada,
                  nombre_actual: nombre,
                  ultimo_mensaje: ultimo_mensaje,
                  chat_conversaciones_id: "",
               };

               //estos campos faltan pero no los veo necesarios
               //"fecha_humana_enviado": "Yesterday",
               //"fecha_ultimo_mensaje_recibido_unix": null,
               //"fecha_ultimo_mensaje_enviado_unix": "1749253356",
               //"fecha_ultimo_mensaje_recibido": null,
               //"fecha_ultimo_mensaje_enviado": "2025-06-06 17:42:36",
               //"fecha_ultimo_mensaje": "2025-06-06 17:42:36",
               //"fecha_ultimo_mensaje_unix": "1749253356",

               lista_contactos.push(add_contacto_desconocido);

               //En caso de que este seleccionado un empresa se agrega
               if (
                  TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID == config_whatsapp_other_id
               ){
 
                  $(".mi-bandeja-mensajes-contactos").prepend(
                     contactos(add_contacto_desconocido),
                  );
   
                  click_only_contactos(id_chat_number);
               }
                
            }
            
            //En caso de que tengamos seleccionado una empresa
            if (
               TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID == config_whatsapp_other_id
            ) {

               let sumar_msj_sin_responder = lista_contactos.find(
                  (elemento) => 

                  elemento.id == id_chat_number && 
                  elemento.config_whatsapp_other_id == config_whatsapp_other_id,
               );

               if (sumar_msj_sin_responder)
               {
                  
                  //Aqui cambiamos la fecha y nombre de whatsapp
                  var div = $(
                     '.mi-bandeja-mensajes-contactos a[data-id_contacto="' +
                        id_chat_number +
                        '"]',
                  );

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


                     if(etapa_encontrada)
                     {
                        let etapa_conversacion = div.find(".etapa_conversacion");

                        if(etapa_conversacion.length){
                           
                           etapa_conversacion.text(quitarTextoLargo( etapa_encontrada.nombre_etapa ));
                           etapa_conversacion.attr('title', etapa_encontrada.nombre_etapa );  

                           etapa_conversacion.css({
                              'background': etapa_encontrada.color_fondo_etapa_conversacion,    
                              'color': etapa_encontrada.color_texto_etapa_conversacion,          
                           });
                        }

                     }

                     let ultimo_mensaje_div = div.find(".ultimo_mensaje_div");

                     if(ultimo_mensaje_div.length){
                       
                        ultimo_mensaje_div.text(quitarTextoLargo( ultimo_mensaje ));
                        ultimo_mensaje_div.attr('title', ultimo_mensaje  );  
                     }

                     var badge = div.find(".badge-contactos");

                     if (badge.length){

                        if (tipo_producto == "whatsapp")
                        {
                           
                           //status deliveri sumar badge
                           if (status == "delivered") {
                              
                              if (sumar_msj_sin_responder) {

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

                                 sumar_msj_sin_responder.mensajes_no_leidos_whatsapp =
                                    parseInt(sumar_msj_sin_responder.mensajes_no_leidos_whatsapp) + 1;

                                 badge.text(sumar_msj_sin_responder.mensajes_no_leidos);

                                 if (!badge.hasClass("badge-colors")) {
                                    badge.addClass("badge-colors");
                                 }

                                  

                              }
                              //FIN busquedad arreglo lista_contactos

                           }
                           //FIn estatus delivered
                        
                        }
                         
                        if (tipo_producto == "sms") 
                        {
                           //status received sumar badge: VALIDACION SUMA DE MENSAJES NO LEIDAS
                           if (status == "received") {

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

                              sumar_msj_sin_responder.mensajes_no_leidos_sms =
                                 parseInt(sumar_msj_sin_responder.mensajes_no_leidos_sms) + 1;

                              badge.text(sumar_msj_sin_responder.mensajes_no_leidos);

                              if (!badge.hasClass("badge-colors")) {
                                 badge.addClass("badge-colors");
                              }


                           }
                           //FIN DE VALIDACION PARA SUMAR MENSAJES NO LEIDOS
                        }
                         
                     }

                     //let data_nombre = div.data("nombre");

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

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

                     //Si es whatsapp colocamos su nombre
                     if (tipo_producto == "whatsapp" && nombre == "Desconocido")
                     {
                         
                        if(div_nombre_whatsapp.length)
                        {
                           if(isEmpty(nombre_whatsapp) == false)
                           {
                              
                              let maxLength = 15;

                              let nombre_whatsapp_original = nombre_whatsapp || "";

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

                              div_nombre_whatsapp.text(nombre_whatsapp);
                              div_nombre_whatsapp.attr("title", nombre_whatsapp_original);

                              div_nombre_whatsapp.addClass("mi-texto-cursivo");
 
                           }
                        } 
                     }else{

                        if(div_nombre_whatsapp.length){
                           div_nombre_whatsapp.addClass("mi-texto-normal");
                        }

                     }

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

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

                     //una ves agregando todo tomamos el HTML para ponerlo de primero
                     let fullHtml = div.prop('outerHTML');
   
                     div.remove();
                     
                     $(".mi-bandeja-mensajes-contactos").prepend(
                        fullHtml,
                     );

                     click_only_contactos(id_chat_number);
               
               
                  }
                  //FIN busquedad div

               }

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

               //aqui creamos el mensaje
               let mi_objeto_mensaje = {
                  id,
                  wam_id,
                  sid,
                  UUID,
                  chat_number_id:id_chat_number,
                  from,
                  to,
                  mensaje,
                  url,
                  url_original,
                  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,

                  fechaActual_unix,
                  ultimo_mensaje,

                  fecha_creacion_GMT,
                  fecha_creacion_original,

               };

               let contacto_desconocido = lista_contactos.find(
                  (elemento) => 
                              elemento.id == id_chat_number && 
                              elemento.config_whatsapp_other_id == config_whatsapp_other_id,
               );

               let mensajes_no_leidos = 0;
               let mensajes_no_leidos_sms = 0;
               let mensajes_no_leidos_whatsapp = 0;

               if(contacto_desconocido)
               {
                  mensajes_no_leidos = procesarVariable(contacto_desconocido.mensajes_no_leidos);
                  mensajes_no_leidos_sms = procesarVariable(contacto_desconocido.mensajes_no_leidos_sms);
                  mensajes_no_leidos_whatsapp = procesarVariable(contacto_desconocido.mensajes_no_leidos_whatsapp);
               }

 
               if (miData) {

                  //console.log("registro encontrado DBL Soy socket");
                  //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;
                     }
 
                     //cambiar_badge_id_contacto(
                     //   id_chat_number,
                     //   procesarVariable(miData.mensajes_no_leidos) + 1,
                     //);

                     let cabecera = {
                        chat_number_id:              miData.chat_number_id + "",
                        orden: fechaActual_unix + "",
                        informacion_contacto:        {
                           ...miData.informacion_contacto,
                           orden: fechaActual_unix + "",

                           id_etapa_conversacion:          etapa_conversacion_id,
                           nombre_etapa_conversacion:      nombre_etapa_encontrada,
                           color_fondo_etapa_conversacion: color_fondo_etapa_conversacion_encontrada,
                           color_texto_etapa_conversacion: color_texto_etapa_conversacion_encontrada,
                        },
                        
                        //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,
                        
                        mensajes_no_leidos:            mensajes_no_leidos,
                        mensajes_no_leidos_sms:        mensajes_no_leidos_sms,
                        mensajes_no_leidos_whatsapp:   mensajes_no_leidos_whatsapp,
                        
                        config_whatsapp_other_id:    miData.config_whatsapp_other_id,
                        ultimo_mensaje:              ultimo_mensaje,
                        data: nuevo_arreglo,

                        id_etapa_conversacion:          etapa_conversacion_id,
                        nombre_etapa_conversacion:      nombre_etapa_encontrada,
                        color_fondo_etapa_conversacion: color_fondo_etapa_conversacion_encontrada,
                        color_texto_etapa_conversacion: color_texto_etapa_conversacion_encontrada,
                     };

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

                  //console.log("modificar 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 informacion_c = {
                     address_custumers: address_custumers,
                     company_custumers: company_custumers,
                     config_whatsapp_other_id: config_whatsapp_other_id,
                     created_at: formatDateTime(new Date()),
                     custumer_id: custumer_id,
                     email_custumers: email_custumers,
                     fecha_humana: fecha_humana,
                     fecha_humana_enviado: "",
                     fecha_ultimo_mensaje_enviado_unix: "",
                     fecha_ultimo_mensaje_recibido_unix: "",
                     fullname_staff: "Unassigned staff",
                     id: id_chat_number + "",
                     mensajes_no_leidos: 0,
                     mensajes_no_leidos_sms: 0,
                     mensajes_no_leidos_whatsapp: 0,
                     nombre: nombre,
                     nombre_actual: nombre,
                     nombre_whatsapp: nombre_whatsapp,
                     number: to,
                     orden: fechaActual_unix + "",
                     phone_custumers: phone_custumers,
                     phonenumber: null,
                     staff_id: null,
                     sys_users_config_whatsapp_other_id: null,
                     user_type_staff: null,
                     username_staff: null,

                     id_etapa_conversacion:          etapa_conversacion_id,
                     nombre_etapa_conversacion:      nombre_etapa_encontrada,
                     color_fondo_etapa_conversacion: color_fondo_etapa_conversacion_encontrada,
                     color_texto_etapa_conversacion: color_texto_etapa_conversacion_encontrada,
                  };

                  let cabecera = {
                     chat_number_id:              id_chat_number + "",
                     orden: fechaActual_unix,
                     informacion_contacto:        informacion_c,
 
                     mensajes_no_leidos:            mensajes_no_leidos,
                     mensajes_no_leidos_sms:        mensajes_no_leidos_sms,
                     mensajes_no_leidos_whatsapp:   mensajes_no_leidos_whatsapp,

                     ultimo_mensaje:                ultimo_mensaje,

                     config_whatsapp_other_id: config_whatsapp_other_id,
                     data: nuevo_arreglo,

                     id_etapa_conversacion:          etapa_conversacion_id,
                     nombre_etapa_conversacion:      nombre_etapa_encontrada,
                     color_fondo_etapa_conversacion: color_fondo_etapa_conversacion_encontrada,
                     color_texto_etapa_conversacion: color_texto_etapa_conversacion_encontrada,
                  };

                  agregarInformacionDBLocal(cabecera, tabla_contactos_chat_indexedDb);

               }

            });
             

      }
      
      function actualizarMensajeDBLocalContactosSocket(data)
      {
 
            var {
               id,
               tipo_producto,
               error_codigo,
               error_mensaje,
               status,
               wam_id,
               sid,
               phone_number_id,
               from,
               to,
               mensaje,
               url,
               url_original,
               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,
               fullname_staff,
               username_staff,
               user_type_staff,
               phonenumber_staff,

               donde_estamos,

               user_img,
               user_fullname,
                  
               user_id=null,
 
               fecha_humana,
               nombre_whatsapp,
               config_whatsapp_other_id,

               fechaActual_unix,
               sys_users_config_whatsapp_other_id,

               fecha_humana_enviado,
               fecha_ultimo_mensaje_recibido_unix,
               fecha_ultimo_mensaje_enviado_unix,
               fecha_ultimo_mensaje_recibido,
               fecha_ultimo_mensaje_enviado,
               fecha_ultimo_mensaje,
               fecha_ultimo_mensaje_unix,
               UUID,
               ultimo_mensaje,

               etapa_conversacion_id,
               nombre_etapa,
               color_fondo_etapa_conversacion = "#434343",
               color_texto_etapa_conversacion = "white",

               fecha_creacion_GMT,
               fecha_creacion_original,

            } = data;
 
 
            //VALIDACION PARA VER SI EL CONTACTO ES NUEVO
            let contacto_desconocido = lista_contactos.find(
               (elemento) => 
                           elemento.id == id_chat_number && 
                           elemento.config_whatsapp_other_id == config_whatsapp_other_id,
            );

            if(contacto_desconocido)
            {
 
               contacto_desconocido.mensajes_no_leidos = 0;
               contacto_desconocido.mensajes_no_leidos_sms = 0;
               contacto_desconocido.mensajes_no_leidos_whatsapp = 0;

            }

            if (
               TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID == config_whatsapp_other_id
            ){

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

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

                  let etapa_conversacion = div.find(".etapa_conversacion");

                  if(etapa_conversacion.length){
                    
                     etapa_conversacion.text(quitarTextoLargo( nombre_etapa ));
                     etapa_conversacion.attr('title', nombre_etapa );  

                     etapa_conversacion.css({
                       'background': color_fondo_etapa_conversacion,    
                       'color': color_texto_etapa_conversacion,          
                     });
                  }
 

                  let ultimo_mensaje_div = div.find(".ultimo_mensaje_div");

                  if(ultimo_mensaje_div.length){
                    
                     ultimo_mensaje_div.text(quitarTextoLargo( ultimo_mensaje ));
                     ultimo_mensaje_div.attr('title', ultimo_mensaje  );  
                  }

                  var badge = div.find(".badge-contactos");

                  if (badge.length)
                  {
                     badge.text("");
                     badge.removeClass("badge-colors");
                  }

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

                  //Si es whatsapp colocamos su nombre
                  if (tipo_producto == "whatsapp" && nombre == "Desconocido")
                  {
                      
                     if(div_nombre_whatsapp.length)
                     {
                        if(isEmpty(nombre_whatsapp) == false)
                        {
                           
                           let maxLength = 15;

                           let nombre_whatsapp_original = nombre_whatsapp || "";

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

                           div_nombre_whatsapp.text(nombre_whatsapp);
                           div_nombre_whatsapp.attr("title", nombre_whatsapp_original);

                           div_nombre_whatsapp.addClass("mi-texto-cursivo");
 
                        }
                     } 
                  }else{

                     if(div_nombre_whatsapp.length){
                        div_nombre_whatsapp.addClass("mi-texto-normal");
                     }

                  }


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

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

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

                  let maxLength = 15;  
                  let nombre_cambiar = nombre || "Desconocido";

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

                  if(contacto_nombre_contacto.length){
                     contacto_nombre_contacto.text(nombre_cambiar);
                  }

                  let copia = nombre || "Desconocido";

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

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

                  //STAFF

                  let fullname_staff_original = fullname_staff || "";

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

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

                        //contacto_fullname_staff.text("Unassigned staff");

                        contacto_fullname_staff.text("N/A");
                        contacto_fullname_staff.attr("title", "Unassigned staff");
                     }
                     else
                     {
                        
                        if(isEmpty(fullname_staff) == true)
                        {
                           
                           contacto_fullname_staff
                              .removeClass("staff-asignado-a ")
                              .addClass("staff-sin-asignar ");

                           //contacto_fullname_staff.text("Unassigned staff");
                           
                           contacto_fullname_staff.text("N/A");
                           contacto_fullname_staff.attr("title", "Unassigned staff");

                        }else{

                           contacto_fullname_staff
                           .removeClass("staff-sin-asignar")
                           .addClass("staff-asignado-a ");

                           //contacto_fullname_staff.text(fullname_staff_original);

                           let words = (fullname_staff_original || "").split(" "); 

                           contacto_fullname_staff.attr("title", fullname_staff_original);

                           let nombre_abreviado = words[0].charAt(0).toUpperCase(); 

                           if (words.length > 1) {
                              nombre_abreviado += words[1].charAt(0).toUpperCase();
                           }

                           contacto_fullname_staff.text(nombre_abreviado);

                        }

                     
                     }
                  }


                  let fullHtml = div.prop('outerHTML');
                  
                  div.remove();
                  
                  $(".mi-bandeja-mensajes-contactos").prepend(
                     fullHtml,
                  );

                  click_only_contactos(id_chat_number);
   
   
               }


            }

             

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

               let contacto_desconocido = lista_contactos.find(
                  (elemento) => 
                              elemento.id == id_chat_number && 
                              elemento.config_whatsapp_other_id == config_whatsapp_other_id,
               );

               let mensajes_no_leidos = 0;
               let mensajes_no_leidos_sms = 0;
               let mensajes_no_leidos_whatsapp = 0;

               if(contacto_desconocido)
               {
                  mensajes_no_leidos = procesarVariable(contacto_desconocido.mensajes_no_leidos);
                  mensajes_no_leidos_sms = procesarVariable(contacto_desconocido.mensajes_no_leidos_sms);
                  mensajes_no_leidos_whatsapp = procesarVariable(contacto_desconocido.mensajes_no_leidos_whatsapp);
               }

               let mi_objeto_mensaje = {
                  id,
                  wam_id,
                  UUID,
                  sid,
                  chat_number_id:id_chat_number,
                  from,
                  to,
                  mensaje,
                  url,
                  url_original,
                  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,

                  fecha_ultimo_mensaje_unix,

                  fecha_creacion_GMT,
                  fecha_creacion_original,


               };

               if (miData) {

                  console.log("HEY VAMOS A MODIFICARTE ATENTO AQUI");

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

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

                    let mensajes_no_leidos = 0;
                    let mensajes_no_leidos_sms = 0;
                    let mensajes_no_leidos_whatsapp = 0;


                     if(tipo_producto == "sms")
                     {
                        let data_encontrada = nuevo_arreglo.find((item) => item.sid == sid && item.tipo_producto == "sms");

                        if(data_encontrada)
                        {
                           data_encontrada.status = status;
                        }else{
                           nuevo_arreglo.push(mi_objeto_mensaje);
                        }

                        if(status == "sent" || status == "failed" )
                        {
                           mensajes_no_leidos = 0;
                           mensajes_no_leidos_sms = 0;
                           mensajes_no_leidos_whatsapp = 0;
                        }else{

                           mensajes_no_leidos = procesarVariable(miData.mensajes_no_leidos);
                           mensajes_no_leidos_sms = procesarVariable(miData.mensajes_no_leidos_sms);
                           mensajes_no_leidos_whatsapp = procesarVariable(miData.mensajes_no_leidos_whatsapp);

                        }

                     }

                     if(tipo_producto == "whatsapp")
                     {
                        let data_encontrada = nuevo_arreglo.find((item) => item.wam_id == wam_id && item.tipo_producto == "whatsapp" );

                        if(data_encontrada)
                        {
                           data_encontrada.status = status;
 
                        }else{
                           nuevo_arreglo.push(mi_objeto_mensaje);
                        }

                        if(status == "sent" || status == "failed" )
                        {
                           mensajes_no_leidos = 0;
                           mensajes_no_leidos_sms = 0;
                           mensajes_no_leidos_whatsapp = 0;
                        }else{

                           mensajes_no_leidos = procesarVariable(miData.mensajes_no_leidos);
                           mensajes_no_leidos_sms = procesarVariable(miData.mensajes_no_leidos_sms);
                           mensajes_no_leidos_whatsapp = procesarVariable(miData.mensajes_no_leidos_whatsapp);

                        }

                         

                     }

                     let informacion_c = {
                        ...miData.informacion_contacto,
                        orden: fecha_ultimo_mensaje_unix + "",
                        id:id_chat_number,
                        number: to,
                        custumer_id: custumer_id,
                        staff_id: staff_id,
                        created_at: formatDateTime(new Date()),
                        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_staff,

                        sys_users_config_whatsapp_other_id: sys_users_config_whatsapp_other_id,
                        config_whatsapp_other_id: config_whatsapp_other_id,
                        nombre_actual: nombre,

                        fecha_humana: fecha_humana,
   
                        fecha_humana_enviado: fecha_humana_enviado,
                        fecha_ultimo_mensaje_recibido_unix: fecha_ultimo_mensaje_recibido_unix,
                        fecha_ultimo_mensaje_enviado_unix: fecha_ultimo_mensaje_enviado_unix,

                        fecha_ultimo_mensaje_recibido: fecha_ultimo_mensaje_recibido,
                        fecha_ultimo_mensaje_enviado: fecha_ultimo_mensaje_enviado,
                        fecha_ultimo_mensaje: fecha_ultimo_mensaje,
                        fecha_ultimo_mensaje_unix: fecha_ultimo_mensaje_unix,
                        
                        nombre_whatsapp: nombre_whatsapp,
                        mensajes_no_leidos_sms: '0',
                        mensajes_no_leidos_whatsapp: '0',
                        mensajes_no_leidos: '0',
                        ultimo_mensaje: ultimo_mensaje,

                        id_etapa_conversacion: etapa_conversacion_id,
                        nombre_etapa_conversacion: nombre_etapa,
                        color_fondo_etapa_conversacion,
                        color_texto_etapa_conversacion,
                     };
 
 
                     let cabecera = {
                        chat_number_id:              miData.chat_number_id + "",
                        orden:                       fecha_ultimo_mensaje_unix + "",
                        informacion_contacto:        informacion_c,

                        //mensajes_no_leidos:          mensajes_no_leidos,
                        //mensajes_no_leidos_sms:      mensajes_no_leidos_sms,
                        //mensajes_no_leidos_whatsapp: mensajes_no_leidos_whatsapp,

                        mensajes_no_leidos:            mensajes_no_leidos,
                        mensajes_no_leidos_sms:        mensajes_no_leidos_sms,
                        mensajes_no_leidos_whatsapp:   mensajes_no_leidos_whatsapp,

                        config_whatsapp_other_id:    miData.config_whatsapp_other_id,
                        data: nuevo_arreglo,
                        ultimo_mensaje:             ultimo_mensaje,

                        id_etapa_conversacion:          etapa_conversacion_id,
                        nombre_etapa_conversacion:      nombre_etapa,
                        color_fondo_etapa_conversacion: color_fondo_etapa_conversacion,
                        color_texto_etapa_conversacion: color_texto_etapa_conversacion,
                     };
 
                     actualizarSinBuscadorInformacionDBLocal(cabecera, tabla_contactos_chat_indexedDb);

 
                  }
   
               }else{

                  console.log("HEY VAMOS A CREARTE ATENTO AQUI");
 
                  let informacion_c = {
                     orden: fecha_ultimo_mensaje_unix + "",
                     id:id_chat_number,
                     number: to,
                     custumer_id: custumer_id,
                     staff_id: staff_id,
                     created_at: formatDateTime(new Date()),
                     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_staff,

                     sys_users_config_whatsapp_other_id: sys_users_config_whatsapp_other_id,
                     config_whatsapp_other_id: config_whatsapp_other_id,
                     nombre_actual: nombre,

                     fecha_humana: fecha_humana,
 
                     fecha_humana_enviado: fecha_humana_enviado,
                     fecha_ultimo_mensaje_recibido_unix: fecha_ultimo_mensaje_recibido_unix,
                     fecha_ultimo_mensaje_enviado_unix: fecha_ultimo_mensaje_enviado_unix,

                     fecha_ultimo_mensaje_recibido: fecha_ultimo_mensaje_recibido,
                     fecha_ultimo_mensaje_enviado: fecha_ultimo_mensaje_enviado,
                     fecha_ultimo_mensaje: fecha_ultimo_mensaje,
                     fecha_ultimo_mensaje_unix: fecha_ultimo_mensaje_unix,
                     
                     nombre_whatsapp: nombre_whatsapp,
                     mensajes_no_leidos_sms: 0,
                     mensajes_no_leidos_whatsapp: 0,
                     mensajes_no_leidos: 0,
                     ultimo_mensaje: ultimo_mensaje,

                     id_etapa_conversacion: etapa_conversacion_id,
                     nombre_etapa_conversacion: nombre_etapa,
                     color_fondo_etapa_conversacion,
                     color_texto_etapa_conversacion,
                  };


                  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 =  0;
                  }else{
                     suma_mensajes_no_leidos_sms = 0;
                  }
 

                  let cabecera = {
                     chat_number_id:              id_chat_number + "",
                     orden: fecha_ultimo_mensaje_unix,
                     informacion_contacto:        informacion_c,
                     //mensajes_no_leidos:          0,
                     //mensajes_no_leidos_sms:      suma_mensajes_no_leidos_sms,
                     //mensajes_no_leidos_whatsapp: suma_mensajes_no_leidos_whatsapp,

                     mensajes_no_leidos:            mensajes_no_leidos,
                     mensajes_no_leidos_sms:        mensajes_no_leidos_sms,
                     mensajes_no_leidos_whatsapp:   mensajes_no_leidos_whatsapp,
                     ultimo_mensaje:                ultimo_mensaje,
                     data: nuevo_arreglo,

                     id_etapa_conversacion:          etapa_conversacion_id,
                     nombre_etapa_conversacion:      nombre_etapa,
                     color_fondo_etapa_conversacion: color_fondo_etapa_conversacion,
                     color_texto_etapa_conversacion: color_texto_etapa_conversacion,
                  };

                  agregarInformacionDBLocal(cabecera, tabla_contactos_chat_indexedDb);


               }

            });

             

      }

      function actualizarOtrosMensajesDBLocal(data)
      {
 
            var {
               id,
               configuracion_whatsapp_sms_id,
               etapa_id,
               id_chat_number,
               tipo_producto,
               status,
               UUID,
               from,
               to,
               staff_id,
               mensaje,
               tipo_mensaje,
               fecha_creacion,
               color_fondo_etapa_conversacion,
               color_texto_etapa_conversacion,
               nombre_etapa,
               db,
               fecha_creacion_GMT,
               fecha_creacion_original,

            } = data;

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

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

                  fecha_ultimo_mensaje_unix: null,
                  
                  fecha_creacion_GMT,
                  fecha_creacion_original,

               };

               if (miData) {

                  //console.log("encontre un registro local vamos a modifiicar xd");
                  //console.log(miData);
                  
                  if(Object.keys(miData).length != 0){

                    let existe_registro = (miData.data || []).find((item) => item.UUID == UUID);

                    if(!existe_registro)
                    {
                        let nuevo_arreglo = [...miData.data];

                        nuevo_arreglo.push(mi_objeto_mensaje);
      
                        let cabecera = {
                           chat_number_id:              miData.chat_number_id + "",
                           orden:                       miData.orden + "",
                           informacion_contacto:        {  
                              ...miData.informacion_contacto,
                              id_etapa_conversacion:          etapa_id,
                              nombre_etapa_conversacion:      nombre_etapa,
                              color_fondo_etapa_conversacion: color_fondo_etapa_conversacion,
                              color_texto_etapa_conversacion: color_texto_etapa_conversacion,  
                           },
                                                         
                           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,

                           config_whatsapp_other_id:    miData.config_whatsapp_other_id,
                           data: nuevo_arreglo,
                           ultimo_mensaje:             miData.ultimo_mensaje,

                           id_etapa_conversacion:          etapa_id,
                           nombre_etapa_conversacion:      nombre_etapa,
                           color_fondo_etapa_conversacion: color_fondo_etapa_conversacion,
                           color_texto_etapa_conversacion: color_texto_etapa_conversacion,
                        };
 
      
                        actualizarSinBuscadorInformacionDBLocal(cabecera, tabla_contactos_chat_indexedDb);

                    }
 
                  }
   
               } 

            });

             

      }

      function procesarVariable(variable) 
      {
         // Si es null, undefined, string vacío o NaN, devolver 0
         if (
            variable === null ||
            variable === undefined ||
            variable === '' ||
            (typeof variable === 'number' && isNaN(variable))
         ) {
            return 0;
         }

         // Si es string, intentar convertirlo a número
         if (typeof variable === 'string') {
            const numero = parseInt(variable);
            return isNaN(numero) ? 0 : numero;
         }

         // Si es número pero no NaN
         if (typeof variable === 'number') {
            return variable;
         }

         // Si llega aquí, es otro tipo (por ejemplo: objeto, array, etc.), devuelve 0
         return 0;
      }

      function generadorUUID() {
         return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx-xxxx-xxxx-xxxxxx'.replace(
            /[xy]/g,
            (c) => {
            const r = (Math.random() * 16) | 0;
            const v = c === 'x' ? r : (r & 0x3) | 0x8;
            return v.toString(16);
            }
         );
      }

      function quitarTextoLargo(ultimo_mensaje = "") {

         if(isEmpty(ultimo_mensaje) == true)
         {
            ultimo_mensaje = "";  
         }

         let maxLength_26 = 20;

         if (ultimo_mensaje.length >= maxLength_26) {
            ultimo_mensaje = ultimo_mensaje.substring(0, maxLength_26) + "...";
         }

         return ultimo_mensaje;
      }

      function plantilla_option_select_etapa(value, text) {
         return '<option value="' + value + '">' + text + "</option>";
      }

      function plantilla_option_select_selected(value, text, disabled = false) {

         if(disabled == true)
         {
            return '<option value="' + value + '" selected disabled>' + text + "</option>";
         }else{
            return '<option value="' + value + '" selected>' + text + "</option>";
         }

      }

      function seleccion_etapa_conversacion()
      {
         $(".tenerEtapaConversacionSelect ").on('change', function() {
            // Obtener el valor seleccionado
            let valorSeleccionado = $(this).val();
            
            
            // Obtener el texto seleccionado
            let textoSeleccionado = $(this).find('option:selected').text();
            
            // Si es un select múltiple, obtendrás un array
            console.log('Valor seleccionado:', valorSeleccionado);
            console.log('Texto seleccionado:', textoSeleccionado);
 

            let etapa_id = $(".tenerEtapaConversacionSelect ").val();

            if (isEmpty(etapa_id) == true) {
               Swal.fire("Select a conversation stage");
               return;
            }

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

            if (isEmpty(TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID) == true) {
               Swal.fire("Select a WhatsApp/SMS configuration account");
               return;
            }

            let UUID_generado = generadorUUID();

            let datos = {
               UUID: UUID_generado,
               to: numero_contacto_seleccionado,
               from: FROM_GLOBAL,
               staff_id: STAFF_ID_GLOBAL, //admin es default
               configuracion_whatsapp_sms_id: TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID,
               etapa_id: etapa_id,
               chat_number_id: id_contacto_seleccionado,
            };

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

            $.ajax({
                  type: "POST",
                  url: URL_BASE + "social/cambiar-estado-etapa-conversacion",
                  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", "#434343");
                     $(".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 formattedDate = info.fecha_creacion;

                           let informacion = {
                              id: info.id_chat_social,
                              tipo_producto: "ninguno",
                              error_codigo: "",
                              error_mensaje: "",
                              status: "send",
                              wam_id: null,
                              UUID: UUID_generado,
                              phone_number_id: PHONE_NUMBER_ID_GLOBAL,
                              from: FROM_GLOBAL,
                              to: numero_contacto_seleccionado,
                              mensaje: info.message,
                              url: "",
                              tipo_mensaje: "etapa_conversacion",
                              db: "no ocupo",
                              esContacto: "0",
                              fecha_creacion: info.fecha_creacion,

                              user_id: STAFF_ID_GLOBAL,
                              user_img: IMG_NOMBRE_PERFIL,

                              chat_number_id: id_contacto_seleccionado,

                              fecha_creacion_original       : info.fecha_creacion_original,  
                              fecha_creacion_GMT            : info.fecha_creacion_GMT,  
                           };

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

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

                              if (div.length) {

                                 let etapa_conversacion = div.find(".etapa_conversacion");

                                 if(etapa_conversacion.length){
                                   
                                    etapa_conversacion.text(quitarTextoLargo( info.nombre_etapa ));
                                    etapa_conversacion.attr('title', info.nombre_etapa );  

                                    etapa_conversacion.css({
                                       'background-color': info.color_fondo_etapa_conversacion, 
                                       'color': info.color_texto_etapa_conversacion,  
                                    });
                                 }
 
                              }  

                              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 existe_registro = (miData.data || []).find((item) => item.UUID == UUID_generado);

                                       if(!existe_registro)
                                       {
                                          let nuevo_arreglo = [...miData.data];

                                          nuevo_arreglo.push(informacion);
         
                                          let cabecera = {
                                             chat_number_id:              miData.chat_number_id,
                                             orden:                       miData.orden + "",
                                             informacion_contacto:        {
                                                ...miData.informacion_contacto,
                                                orden: miData.orden + "",
                                                ultimo_mensaje:              miData.ultimo_mensaje,

                                                id_etapa_conversacion:          info.etapa_id,
                                                nombre_etapa_conversacion:      info.nombre_etapa,
                                                color_fondo_etapa_conversacion: info.color_fondo_etapa_conversacion,
                                                color_texto_etapa_conversacion: info.color_texto_etapa_conversacion,
                                             },
                                             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,
                                             config_whatsapp_other_id:    miData.config_whatsapp_other_id,
                                             data: nuevo_arreglo,
                                             ultimo_mensaje:              miData.ultimo_mensaje,

                                             id_etapa_conversacion:          info.etapa_id,
                                             nombre_etapa_conversacion:      info.nombre_etapa,
                                             color_fondo_etapa_conversacion: info.color_fondo_etapa_conversacion,
                                             color_texto_etapa_conversacion: info.color_texto_etapa_conversacion,
                                          };

                                          actualizarSinBuscadorInformacionDBLocal(cabecera, tabla_contactos_chat_indexedDb);
                                       }

                                        
                                    }
                                     
                     
                                 }
                              
                              });

                              
                           }
 
                           chat_mensajes.push(informacion);
 

                           const div_mensaje = $(".cuerpo_mensaje").find(`div[data-uuid="${UUID_generado}"]`);
  
                           if (div_mensaje.length == 0) 
                           {
                               let estructura_etapa = {
                                 wam_id: "",
                                 mensaje: info.message,
                                 fecha_creacion: info.fecha_creacion,
                                 UUID: UUID_generado,
                              }

                              console.log("api UUID_generado");
                              console.log(UUID_generado);

                              $(".cuerpo_mensaje").append(
                                 mensaje_etapa_conversacion_whatsapp_usuarios(
                                    estructura_etapa
                                 ),
                              );
                           }  

                           scroll_abajo();
 
                            
                        } 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 setting_offcanvas(
 
      ) {
         var $offcanvasMenu = $("#offcanvas-menu");
         var $offcanvasBackdrop = $("#offcanvas-backdrop");
         var $offcanvasClose = $(".btn-close-offcanvas");

         $("#setting-offcanvas")
         .off("click")
         .on("click", function () {
            $offcanvasMenu.toggleClass("offcanvas-show");
            $offcanvasBackdrop.toggle();
            var offcanvasElement = document.getElementById("offcanvasRight");

            console.log("se abrio el modal");

            funcionMostraInformacionContactosSetting();

            //id_contacto_seleccionado
            
         });

         $offcanvasBackdrop
         .off("click")
         .on("click", function () {
            $offcanvasMenu.removeClass("offcanvas-show");
            $offcanvasBackdrop.hide();

            $(".custumers_div").html("");
            $(".staff_div").html("");
            $(".select_staff").val("");
            $(".select_custumers").val("");
         });

         $offcanvasClose
         .off("click")
         .on("click", function () {
            $offcanvasMenu.removeClass("offcanvas-show");
            $offcanvasBackdrop.hide();

            $(".custumers_div").html("");
            $(".staff_div").html("");
            $(".select_staff").val(null).trigger("change");
            $(".select_custumers").val(null).trigger("change");
         });
      }

      function evento_ventana_confirmacion()
      {
         $("#btn_cerrar_ventana_confirmacion").off("click")
         .on("click", function () {

            console.log("cerrar ventana");
            
            $('#btn_aplicar_ventana_confirmacion').prop('disabled', false);
            $('#btn_close_ventana_confirmacion').prop('disabled', false);
            $('#btn_cerrar_ventana_confirmacion').prop('disabled', false);
            $("#ventana_confirmacion").modal("hide");
          
         });

         $("#btn_aplicar_ventana_confirmacion").off("click")
         .on("click", function () {

            console.log("se dio click");

               $('#btn_aplicar_ventana_confirmacion').prop('disabled', true);
               $('#btn_close_ventana_confirmacion').prop('disabled', true);
               $('#btn_cerrar_ventana_confirmacion').prop('disabled', true);

               $(".mensaje_espera_moda_confirmacion").text("Please wait while the process finishes...");
                

               let opcion_predefinida = $(".tipo_modal_confirmar").val();

               if(opcion_predefinida == "eliminar_staff_contacto")
               {
                  quitarStaffContactos();
               }

               if(opcion_predefinida == "eliminar_customers_contacto")
               {
                  quitarCustomersContactos();
               }
          
         });

         $("#btn_close_ventana_confirmacion").off("click")
         .on("click", function () {

 
            $('#btn_aplicar_ventana_confirmacion').prop('disabled', false);
            $('#btn_close_ventana_confirmacion').prop('disabled', false);
            $('#btn_cerrar_ventana_confirmacion').prop('disabled', false);
            
            $("#ventana_confirmacion").modal("hide");
          
         });
      }

      function quitarStaffContactos()
      {

         var datos = {
            chat_number_id: id_contacto_seleccionado,
            config_whatsapp_other_id: TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID,
         };

         console.log("datos");
         console.log(datos);

         $.ajax({
            type: "POST",
            url: URL_BASE + "social/quitar-staff-contactos",
            data: JSON.stringify(datos), // Convertir datos a formato JSON
            contentType: "application/json", // Tipo de contenido JSON
            success: function (response) {

               //para habilitar
               $('#btn_aplicar_ventana_confirmacion').prop('disabled', false);
               $('#btn_close_ventana_confirmacion').prop('disabled', false);
               $('#btn_cerrar_ventana_confirmacion').prop('disabled', false);
               
               $(".mensaje_espera_moda_confirmacion").text("");


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

                  if (info.type == "success") {
                  
                     let $offcanvasMenu = $("#offcanvas-menu");
                     let $offcanvasBackdrop = $("#offcanvas-backdrop");

                     $offcanvasMenu.removeClass("offcanvas-show");
                     $offcanvasBackdrop.hide();
      
                     let {
                        config_whatsapp_other_id = "",
                        id = "",
                        number = "",
                        custumer_id = "",
                        staff_id = "",
                        created_at = "",
                        mensajes_no_leidos = "",
                        nombre = "",
                        email_custumers = "",
                        phone_custumers = "",
                        company_custumers = "",
                        address_custumers = "",
                        fullname_staff = "",
                        username_staff = "",
                        user_type_staff = "",
                        phonenumber = "",
                        nombre_whatsapp = "",
                        accion = "",
                        db = "",
                     } = info.data_personal || {};

                     if(isEmpty(nombre) == true)
                     {
                        nombre = "Desconocido";
                     }
      
                     var div = $(
                        '.mi-bandeja-mensajes-contactos a[data-id_contacto="' +
                           id_contacto_seleccionado +
                           '"]',
                     );

                     if (div.length) {

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

                        if(contacto_nombre_contacto.length)
                        {
                           let maxLength = 15;  

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

                           contacto_nombre_contacto.text(nombre);

                           //importante
                           div.attr('data-nombre', nombre_original);

                           let nuevo_nombre = "";
                           let nuevo_titulo_nombre = "";

                           let nombre_whatsapp_original = nombre_whatsapp || "";

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

                           let nuevo_estilo_nombre = "mi-texto-normal";

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

                           if (nombre == "Desconocido") {
                              nuevo_nombre =
                                 isEmpty(nombre_whatsapp) == true ? "Desconocido" : nombre_whatsapp;

                              nuevo_titulo_nombre =
                                 isEmpty(nombre_whatsapp) == true
                                    ? "Desconocido"
                                    : nombre_whatsapp_original;

                              nuevo_estilo_nombre =
                                 isEmpty(nombre_whatsapp) == true
                                    ? "mi-texto-normal"
                                    : "mi-texto-cursivo";
                           } else {

                              nuevo_nombre = nombre;
                              nuevo_titulo_nombre = nombre_original;

                              nuevo_estilo_nombre = "mi-texto-normal";
                           }
         
                           contacto_nombre_contacto.removeClass("mi-texto-cursivo");
                           contacto_nombre_contacto.removeClass("mi-texto-normal");
                           contacto_nombre_contacto.addClass(nuevo_estilo_nombre);

                           contacto_nombre_contacto.attr("title", nuevo_nombre);
                           contacto_nombre_contacto.text(nuevo_nombre);
      
                        }

                        //cambio staff -----------------------------------
                        let contacto_fullname_staff = div.find(
                           ".contacto_fullname_staff ",
                        );

                        contacto_fullname_staff.attr("title", fullname_staff);

                        if(fullname_staff = "Unassigned staff")
                        {
                           contacto_fullname_staff.text("N/A");
                        }else{
                           let words = (fullname_staff || "").split(" "); 

                           let nombre_abreviado = words[0].charAt(0).toUpperCase(); 

                           if (words.length > 1) {
                              nombre_abreviado += words[1].charAt(0).toUpperCase();
                           }

                           contacto_fullname_staff.text(nombre_abreviado);
                        }

                         

                        // Eliminar la clase 'staff-sin-asignar' y agregar la clase 'ejemplo'
                        contacto_fullname_staff
                           .removeClass("staff-sin-asignar")
                           .addClass("staff-asignado-a ");
                        
                     }  
                        
                     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 miInformacionNuevaContacto = {
                                 id: id,
                                 number: number,
                                 custumer_id: custumer_id,
                                 staff_id: staff_id,
                                 created_at: created_at,
                                 nombre: nombre,
                                 nombre_actual: 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,
                                 config_whatsapp_other_id:    config_whatsapp_other_id,

                                 id_etapa_conversacion:          miData.id_etapa_conversacion,
                                 nombre_etapa_conversacion:      miData.nombre_etapa_conversacion,
                                 color_fondo_etapa_conversacion: miData.color_fondo_etapa_conversacion,
                                 color_texto_etapa_conversacion: miData.color_texto_etapa_conversacion,
                              };
         
                              let cabecera = {
                                 chat_number_id:              miData.chat_number_id,
                                 ultimo_mensaje:              miData.ultimo_mensaje,
                                 orden:                       miData.orden + "",

                                 informacion_contacto:        {
                                    ...miData.informacion_contacto,
                                    ...miInformacionNuevaContacto,
                                 },

                                 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,
                                 config_whatsapp_other_id:    miData.config_whatsapp_other_id,
                                 data:                        miData.data,

                                 id_etapa_conversacion:          miData.id_etapa_conversacion,
                                 nombre_etapa_conversacion:      miData.nombre_etapa_conversacion,
                                 color_fondo_etapa_conversacion: miData.color_fondo_etapa_conversacion,
                                 color_texto_etapa_conversacion: miData.color_texto_etapa_conversacion,
                              };
      
                              actualizarSinBuscadorInformacionDBLocal(cabecera, tabla_contactos_chat_indexedDb);
                           }
                           
               
                        }
                     
                     });

                     Swal.fire({
                        icon: "success",
                        title: "Staff removido",
                        text: "The staff was successfully removed from contact.",
                        confirmButtonText: "OK",
                        confirmButtonColor: '#001B3B',
                        confirmButtonTextColor: 'white'
                     });


                     $("#ventana_confirmacion").modal("hide");
      
                  } else {
                     
                     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,
               });

               //para habilitar
               $('#btn_aplicar_ventana_confirmacion').prop('disabled', false);
               $('#btn_close_ventana_confirmacion').prop('disabled', false);
               $('#btn_cerrar_ventana_confirmacion').prop('disabled', false);
               $(".mensaje_espera_moda_confirmacion").text("");
         
            },
         }); 

          
      }

      function quitarCustomersContactos()
      {

         var datos = {
            chat_number_id: id_contacto_seleccionado,
            config_whatsapp_other_id: TIPO_DE_CONFIGURACION_WHATSAPP_SMS_ID,
         };

         console.log("datos");
         console.log(datos);

         //return;

         $.ajax({
            type: "POST",
            url: URL_BASE + "social/quitar-clientes-contactos",
            data: JSON.stringify(datos), // Convertir datos a formato JSON
            contentType: "application/json", // Tipo de contenido JSON
            success: function (response) {

               //para habilitar
               $('#btn_aplicar_ventana_confirmacion').prop('disabled', false);
               $('#btn_close_ventana_confirmacion').prop('disabled', false);
               $('#btn_cerrar_ventana_confirmacion').prop('disabled', false);
               
               $(".mensaje_espera_moda_confirmacion").text("");

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

                  if (info.type == "success") {
                  
                     let $offcanvasMenu = $("#offcanvas-menu");
                     let $offcanvasBackdrop = $("#offcanvas-backdrop");

                     $offcanvasMenu.removeClass("offcanvas-show");
                     $offcanvasBackdrop.hide();
      
                     let {
                        config_whatsapp_other_id = "",
                        id = "",
                        number = "",
                        custumer_id = "",
                        staff_id = "",
                        created_at = "",
                        mensajes_no_leidos = "",
                        nombre = "",
                        email_custumers = "",
                        phone_custumers = "",
                        company_custumers = "",
                        address_custumers = "",
                        fullname_staff = "",
                        username_staff = "",
                        user_type_staff = "",
                        phonenumber = "",
                        nombre_whatsapp = "",
                        accion = "",
                        db = "",
                     } = info.data_personal || {};

                     if(isEmpty(nombre) == true)
                     {
                        nombre = "Desconocido";
                     }
      
                     var div = $(
                        '.mi-bandeja-mensajes-contactos a[data-id_contacto="' +
                           id_contacto_seleccionado +
                           '"]',
                     );

                     if (div.length) {

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

                        if(contacto_nombre_contacto.length)
                        {
                           let maxLength = 15;  

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

                           contacto_nombre_contacto.text(nombre);

                           //importante
                           div.attr('data-nombre', nombre_original);

                           let nuevo_nombre = "";
                           let nuevo_titulo_nombre = "";

                           let nombre_whatsapp_original = nombre_whatsapp || "";

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

                           let nuevo_estilo_nombre = "mi-texto-normal";

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

                           if (nombre == "Desconocido") {
                              nuevo_nombre =
                                 isEmpty(nombre_whatsapp) == true ? "Desconocido" : nombre_whatsapp;

                              nuevo_titulo_nombre =
                                 isEmpty(nombre_whatsapp) == true
                                    ? "Desconocido"
                                    : nombre_whatsapp_original;

                              nuevo_estilo_nombre =
                                 isEmpty(nombre_whatsapp) == true
                                    ? "mi-texto-normal"
                                    : "mi-texto-cursivo";
                           } else {

                              nuevo_nombre = nombre;
                              nuevo_titulo_nombre = nombre_original;

                              nuevo_estilo_nombre = "mi-texto-normal";
                           }
         
                           contacto_nombre_contacto.removeClass("mi-texto-cursivo");
                           contacto_nombre_contacto.removeClass("mi-texto-normal");
                           contacto_nombre_contacto.addClass(nuevo_estilo_nombre);

                           contacto_nombre_contacto.attr("title", nuevo_nombre);
                           contacto_nombre_contacto.text(nuevo_nombre);
      
                        }

                        //cambio staff -----------------------------------
                        let contacto_fullname_staff = div.find(
                           ".contacto_fullname_staff ",
                        );

                        contacto_fullname_staff.attr("title", fullname_staff);

                        if(fullname_staff = "Unassigned staff")
                        {
                           contacto_fullname_staff.text("N/A");
                        }else{
                           let words = (fullname_staff || "").split(" "); 

                           let nombre_abreviado = words[0].charAt(0).toUpperCase(); 

                           if (words.length > 1) {
                              nombre_abreviado += words[1].charAt(0).toUpperCase();
                           }

                           contacto_fullname_staff.text(nombre_abreviado);
                        }

                        // Eliminar la clase 'staff-sin-asignar' y agregar la clase 'ejemplo'
                        contacto_fullname_staff
                           .removeClass("staff-sin-asignar")
                           .addClass("staff-asignado-a ");
                        
                     }  
                        
                     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 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,
                                 config_whatsapp_other_id:    config_whatsapp_other_id,

                                 id_etapa_conversacion:          miData.id_etapa_conversacion,
                                 nombre_etapa_conversacion:      miData.nombre_etapa_conversacion,
                                 color_fondo_etapa_conversacion: miData.color_fondo_etapa_conversacion,
                                 color_texto_etapa_conversacion: miData.color_texto_etapa_conversacion,
                              };
         
                              let cabecera = {
                                 chat_number_id:              miData.chat_number_id,
                                 ultimo_mensaje:              miData.ultimo_mensaje,
                                 orden:                       miData.orden + "",

                                 informacion_contacto:        {
                                    ...miData.informacion_contacto,
                                    ...miInformacionNuevaContacto,
                                 },

                                 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,
                                 config_whatsapp_other_id:    miData.config_whatsapp_other_id,
                                 data:                        miData.data,

                                 id_etapa_conversacion:          miData.id_etapa_conversacion,
                                 nombre_etapa_conversacion:      miData.nombre_etapa_conversacion,
                                 color_fondo_etapa_conversacion: miData.color_fondo_etapa_conversacion,
                                 color_texto_etapa_conversacion: miData.color_texto_etapa_conversacion,
                              };
      
                              actualizarSinBuscadorInformacionDBLocal(cabecera, tabla_contactos_chat_indexedDb);
                           }
                           
               
                        }
                     
                     });

                     Swal.fire({
                        icon: "success",
                        title: "Customers removido",
                        text: "The customers was successfully removed from contact.",
                        confirmButtonText: "OK",
                        confirmButtonColor: '#001B3B',
                        confirmButtonTextColor: 'white'
                     });


                     $("#ventana_confirmacion").modal("hide");
      
                  } else {
                     
                     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,
               });

               //para habilitar
               $('#btn_aplicar_ventana_confirmacion').prop('disabled', false);
               $('#btn_close_ventana_confirmacion').prop('disabled', false);
               $('#btn_cerrar_ventana_confirmacion').prop('disabled', false);
               $(".mensaje_espera_moda_confirmacion").text("");
         
            },
         }); 

          
      }

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

         if (div.length)
         {
            let dataNombre = div.attr('data-nombre');

            $(".detalle_ingreso_clientes").css("display", "none");
            $(".historial_cambio_clientes").css("display", "none");
 
            $(".offcanvas_titulo").text("Contacts Settings");

            if(dataNombre == "Desconocido")
            {
               //$('.abrirModalAgregarContacto').prop('disabled', false);
               $('.mostrarIngresosClientes').prop('disabled', true);

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

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

            }else{
               //$('.abrirModalAgregarContacto').prop('disabled', true);
               $('.mostrarIngresosClientes').prop('disabled', false);
               $(".card_seguro_desea_crear_usuario").css("display", "none");

               $(".card_mostrar_informacion").css("display", "");
            }
 

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

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

            $(".General_STAFF").html(html_plantilla_descripcion_staff(""));
            $(".General_CUSTOMERS").html(html_plantilla_descripcion_custumer(""));

            if (!tener_contacto) {

               return true;
            }
 
            $(".ocultar_mostrar_btn_deselect_customers").css("display", "none");
            $(".ocultar_mostrar_btn_deselect_staff").css("display", "none");

            if(isEmpty(tener_contacto.custumer_id) == false)
            {

               //console.log("tengo cliente");
               //console.log(listado_custumers);

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

               if (data_customer) {
                  $(".General_CUSTOMERS").html(html_plantilla_descripcion_custumer(data_customer));

                  $(".ocultar_mostrar_btn_deselect_customers").css("display", "");
               }

            }
 
            if(isEmpty(tener_contacto.staff_id) == false)
            {

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

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

               if (data_staff) {
 
                  $(".General_STAFF").html(html_plantilla_descripcion_staff(data_staff));

                  $(".ocultar_mostrar_btn_deselect_staff").css("display", "");
               }

            }

 
         }
      } 

      function cb(start, end) {
          $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
          startDate = start;
          endDate = end;
      }

       
      function bloquearBotonesMensajes()
      {
         $("#enviar_mensaje").prop("disabled", true);
         $("#abrir_plantillas").prop("disabled", true);
         $("#abrir_plantillas_cron").prop("disabled", true);
         $("#input_document").prop("disabled", true);
         $("#enviar_comentarios").prop("disabled", true);
         $("#selectPhotos").prop("disabled", true);
         $("#enviar_mensaje_comentario").prop("disabled", true);
      
         let color = "#959595";

         $("#enviar_mensaje").css("color", color);
         $("#abrir_plantillas").css("color", color);
         $("#abrir_plantillas_cron").css("color", color);
         $("#input_document").css("color", color);
         $("#enviar_comentarios").css("color", color);
         $("#selectPhotos").css("color", color);
         $("#enviar_mensaje_comentario").css("color", color);

      }
      

      function desbloquearBotonesMensajes()
      {

         let color = "#434343";

         $("#enviar_mensaje").prop("disabled", false);
         $("#abrir_plantillas").prop("disabled", false);
         $("#abrir_plantillas_cron").prop("disabled", false);
         $("#input_document").prop("disabled", false);
         $("#enviar_comentarios").prop("disabled", false);
         $("#selectPhotos").prop("disabled", false);
         $("#enviar_mensaje_comentario").prop("disabled", false);

         $("#enviar_mensaje").css("color", color);
         $("#abrir_plantillas").css("color", color);
         $("#abrir_plantillas_cron").css("color", color);
         $("#input_document").css("color", color);
         $("#enviar_comentarios").css("color", color);
         $("#selectPhotos").css("color", color);
         $("#enviar_mensaje_comentario").css("color", color);
      
      }

      function estadoBotonesMensajes() {
         let enviar_mensaje = $("#enviar_mensaje").prop("disabled");
         let abrir_plantillas = $("#abrir_plantillas").prop("disabled");
         let input_document = $("#input_document").prop("disabled");
         let enviar_comentarios = $("#enviar_comentarios").prop("disabled");
         let selectPhotos = $("#selectPhotos").prop("disabled");
         let enviar_mensaje_comentario = $("#enviar_mensaje_comentario").prop("disabled");

         if (enviar_mensaje === true || 
            abrir_plantillas === true || 
            input_document === true || 
            enviar_comentarios === true || 
            selectPhotos === true ||
            enviar_mensaje_comentario === true) {
            return true; // si es true es porque está bloqueado
         } else {
            return false; // si es false es porque está desbloqueado
         }
      }
 
</script>
{/literal}

{/block}