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

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

{/block}


{block name="content"}

<style type="text/css">
   .page-content {
      /* padding: 1rem 2em; */
      padding-left: 7px;
      padding-right: 7px;
      background-color:white;
}

</style>

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

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

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

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

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

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

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



            <!-- modal plantillas -->
      <div
         class="modal fade"
         id="modal_elejir_contacto"
         tabindex="-1"
         role="dialog"
         aria-labelledby="myModalLabel"
         aria-hidden="true"
      >
         <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
               <div class="modal-header">
                  <button
                     type="button"
                     class="close btn_cerrar_confirmacion_modal_elejir_contacto"
                     data-dismiss="modal"
                     aria-label="Close"
                  >
                     <span aria-hidden="true">&times;</span>
                  </button>
                  <h4
                     class="modal-title"
                     id="myModalLabel"
                     style="color: black; padding-left: 5px"
                  >
                     Add Contact to <span id="identificador_contacto"></span>
                  </h4>
               </div>
               <div class="modal-body pantalla_modal">
                  <div style="display: flex">
                     <input
                        type="text"
                        placeholder="search"
                        class="form-control form-control-sm buscador_custumers"
                        style="margin-right: 10px"
                     />
                     <button
                        class="btn btn-primary"
                        id="filtro_buscador_customer"
                        type="button"
                     >
                        Search
                     </button>
                  </div>

                  <br />

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

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

      <!-- modal plantillas -->
      <div
         class="modal fade"
         id="myModal"
         tabindex="-1"
         role="dialog"
         aria-labelledby="myModalLabel"
         aria-hidden="true"
      >
         <div class="modal-dialog modal-lg" style="width: 96%">
            <div class="modal-content">
               <div class="modal-header">
                  <button
                     type="button"
                     class="close"
                     data-dismiss="modal"
                     aria-label="Close"
                  >
                     <span aria-hidden="true">&times;</span>
                  </button>
                  <h4
                     class="modal-title"
                     id="myModalLabel"
                     style="color: black; padding-left: 5px"
                  >
                     WhatsApp templates
                  </h4>
               </div>
               <div class="modal-body pantalla_modal" style="min-height: 87vh">
                  <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">
                     <!-- 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 btn-primary"
                              id="filtro_plantillas"
                           >
                              Filter
                           </button>
                        </div>
                     </div>

                     <!-- Table -->
                     <table class="table">
                        <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>
                  <!-- FIN TABLA PLANTILLAS -->

                  <!-- FIN CONFIGURACION PLANTILLAS -->
                  <div class="configuracion_plantilla" style="display: none">
                     <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 plantilla_vista_previa">
                           <div class="plantilla_vista_previa_headers">
                              <p
                                 style="
                                    font-weight: 600;
                                    font-size: 17px;
                                    padding: 16px;
                                    height: 100%;
                                    padding-bottom: 0px;
                                    color: black;
                                 "
                              >
                                 Template preview
                              </p>
                           </div>
                           <div class="plantilla_vista_previa_body">
                              <div class="message-feed media right">
                                 <div
                                    class="media-body media-body-change-display"
                                 >
                                    <div
                                       class="mf-content extender-contenedores"
                                    >
                                       <div class="palomitas">
                                          <div class="izquierda">
                                             <!-- header -->
                                             <div class="plantilla-header">
                                                <!--TEXTO NORMAL-->
                                                <!-- <p id="texto_header_plantilla_previa">
                                                   Hello, World
                                                </p> -->

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

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

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

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

                                             <!-- FOOTER -->
                                             <div class="plantilla-footer">
                                                <span
                                                   id="texto_footer_plantilla_previa"
                                                >
                                                   Soy footer a que si
                                                </span>
                                             </div>
                                             <!-- FIN FOOTER -->
                                          </div>
                                       </div>
                                       <small class="mf-date"
                                          ><div>01-08-2024 12:00 pm</div></small
                                       >
                                       <div class="mensajes_botones">
                                          <div class="div_mensaje_boton">
                                             <img src="{$path_img}telefono.png" />
                                             <a
                                                href=""
                                                class="angotar_mensajes_botones"
                                             >
                                                asass</a
                                             >
                                          </div>
                                          <hr class="class_hr" />
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>

                        <div
                           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>
                  </div>
                  <!-- FIN CONFIGURACION PLANTILLAS -->
               </div>
               <!-- <div class="modal-footer">
                  <button
                     type="button"
                     class="btn btn-default"
                     data-dismiss="modal"
                  >
                     Close
                  </button>
                  <button type="button" class="btn btn-primary">
                     Save changes
                  </button>
               </div> -->
            </div>
         </div>
      </div>
      <!-- FIN modal plantillas -->

         <div class="container bootstrap snippets bootdey mi_contenedor_especial">
         <div class="contenedor_principal chat-app chat-app-loading">
            <div class="cargando">
               <div class="spinnerv1">
                  <i class="fa fa-circle-o-notch fa-spin"></i>
               </div>
               <p style="font-weight: 600">
                  Please wait while it is loading...
               </p>
            </div>
         </div>

         <div class="tile tile-alt chat-app" id="messages-main" style="display: none">
            <div class="ms-menu chat-sidebar">
               
               <h3 class="ms-menu-title">
                  Chats
               </h3>

               <div class="chat-search">
                  <i class="fa fa-search chat-search__icon"></i>
                  <input
                     type="text"
                     id="buscar-contactos"
                     class="chat-search__input"
                     placeholder="Search contacts"
                  />
               </div>

               <div class="p-15" style="display: none">
                  <button
                     type="button"
                     class="btn btn-default borde-boton btn-block"
                     id="btn_elejir_contacto"
                     style="margin-bottom: 4px; display: none"
                  >
                     Choose a user to chat
                  </button>
               </div>

               <div
                  class="list-group lg-alt mi-bandeja-mensajes-contactos chat-contact-list"
               ></div>
            </div>

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

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

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

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

               <!--Sin Mensajes-->
               <div class="sin_mensaje cuerpo_sin_mensajes chat-empty">
                  <div class="pintar_card">
                     <div class="pintar_body_card container">
                        <h4>Let's start a conversation!</h4>
                        <img
                           src="{{APP_URL}}/storage/system/{{$config['logo_default']}}"
                           alt=""
                           style="max-width: 100%; width: 213px"
                        />
                     </div>
                  </div>
               </div>

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

               <!--mensajes chat-->
               <div class="cuerpo_mensaje chat-thread" 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="{$path_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 con textarea -->
               <div class="msb-footer chat-footer" style="display: none">
                  <div class="conjunto-msb-footer">
                     <div class="div_footer_text_area">
                        <textarea
                           placeholder="What's on your mind... "
                           id="mi-mensaje-texto"
                        ></textarea>
                     </div>

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

                           <div class="dropdown" style="width: 100%">
                              <button class="btn dropdown-toggle" type="button" id="opciones_mensajes" data-bs-toggle="dropdown" aria-expanded="false">
                                 <svg class="fill-current" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.9522 14.4422C12.9522 14.452 12.9524 14.4618 12.9527 14.4714V16.1442C12.9527 16.6699 12.5265 17.0961 12.0008 17.0961C11.475 17.0961 11.0488 16.6699 11.0488 16.1442V6.15388C11.0488 5.73966 10.7131 5.40388 10.2988 5.40388C9.88463 5.40388 9.54885 5.73966 9.54885 6.15388V16.1442C9.54885 17.4984 10.6466 18.5961 12.0008 18.5961C13.355 18.5961 14.4527 17.4983 14.4527 16.1442V6.15388C14.4527 6.14308 14.4525 6.13235 14.452 6.12166C14.4347 3.84237 12.5817 2 10.2983 2C8.00416 2 6.14441 3.85976 6.14441 6.15388V14.4422C6.14441 14.4492 6.1445 14.4561 6.14469 14.463V16.1442C6.14469 19.3783 8.76643 22 12.0005 22C15.2346 22 17.8563 19.3783 17.8563 16.1442V9.55775C17.8563 9.14354 17.5205 8.80775 17.1063 8.80775C16.6921 8.80775 16.3563 9.14354 16.3563 9.55775V16.1442C16.3563 18.5498 14.4062 20.5 12.0005 20.5C9.59485 20.5 7.64469 18.5498 7.64469 16.1442V9.55775C7.64469 9.55083 7.6446 9.54393 7.64441 9.53706L7.64441 6.15388C7.64441 4.68818 8.83259 3.5 10.2983 3.5C11.764 3.5 12.9522 4.68818 12.9522 6.15388L12.9522 14.4422Z" fill="#686c78"></path>
                                 </svg>
                              </button>
                              <ul class="dropdown-menu text-center" aria-labelledby="opciones_mensajes" style="border-radius:4px">
                                 <li
                                    role="presentation"
                                    style="cursor: pointer"
                                 >
                                    <a
                                       role="menuitem"
                                       tabindex="-1"
                                       id="selectPhotos"
                                       >Photos</a
                                    >
                                 </li>
                                 <li
                                    role="presentation"
                                    style="cursor: pointer"
                                 >
                                    <a
                                       role="menuitem"
                                       tabindex="-1"
                                       id="input_document"
                                       >Documents</a
                                    >
                                 </li>

                                 <li
                                    role="presentation"
                                    style="cursor: pointer"
                                 >
                                    <a
                                       role="menuitem"
                                       tabindex="-1"
                                       id="input_video"
                                       >Video</a
                                    >
                                 </li>
                              </ul>
                           </div>

{*
                           <div class="dropup" style="width: 100%">
                              <button
                                 type="button"
                                 class="dropdown-toggle btn_footer_opciones"
                                 id="dropdownMenu2"
                                 data-toggle="dropdown"
                                 aria-expanded="true"
                              >
                                 <i class="fa fa-plus"></i>
                              </button>
                              <ul
                                 class="dropdown-menu"
                                 role="menu"
                                 aria-labelledby="dropdownMenu2"
                              >
                                 <li
                                    role="presentation"
                                    style="cursor: pointer"
                                 >
                                    <a
                                       role="menuitem"
                                       tabindex="-1"
                                       id="selectPhotos"
                                       >Photos</a
                                    >
                                 </li>
                                 <li
                                    role="presentation"
                                    style="cursor: pointer"
                                 >
                                    <a
                                       role="menuitem"
                                       tabindex="-1"
                                       id="input_document"
                                       >Documents</a
                                    >
                                 </li>

                                 <li
                                    role="presentation"
                                    style="cursor: pointer"
                                 >
                                    <a
                                       role="menuitem"
                                       tabindex="-1"
                                       id="input_video"
                                       >Video</a
                                    >
                                 </li>
                              </ul>
                           </div>

                           *}
                        </div>

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

                        <div class="footer_text_btn_enviar">
                           <button id="enviar_mensaje" class="btn_footer_enviar">
                           <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                              <path fill-rule="evenodd" clip-rule="evenodd" d="M4.98481 2.44399C3.11333 1.57147 1.15325 3.46979 1.96543 5.36824L3.82086 9.70527C3.90146 9.89367 3.90146 10.1069 3.82086 10.2953L1.96543 14.6323C1.15326 16.5307 3.11332 18.4291 4.98481 17.5565L16.8184 12.0395C18.5508 11.2319 18.5508 8.76865 16.8184 7.961L4.98481 2.44399ZM3.34453 4.77824C3.0738 4.14543 3.72716 3.51266 4.35099 3.80349L16.1846 9.32051C16.762 9.58973 16.762 10.4108 16.1846 10.68L4.35098 16.197C3.72716 16.4879 3.0738 15.8551 3.34453 15.2223L5.19996 10.8853C5.21944 10.8397 5.23735 10.7937 5.2537 10.7473L9.11784 10.7473C9.53206 10.7473 9.86784 10.4115 9.86784 9.99726C9.86784 9.58304 9.53206 9.24726 9.11784 9.24726L5.25157 9.24726C5.2358 9.20287 5.2186 9.15885 5.19996 9.11528L3.34453 4.77824Z" fill="#686c78"></path>
                           </svg>
                           </button>
                        </div>
                     </div>
                  </div>
               </div>
               <!-- FIN de msb-footer -->

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

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

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

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

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

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

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

         <div class="Staff">
            <label for="id_select_staff" class="conf_label"
               >Select a Staff</label
            >
            <select
               class="select_staff"
               name="id_select_staff"
               id="id_select_staff"
               style="width: 100%"
            >
               <option value="AL">Add Custumer</option>
               <option value="WY">Wyoming</option>
            </select>

            <a href="" target="_blank" id="ir_chat_cliente"
               >ver char empleado</a
            >

            <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%"
            >
               <option value="AL">Alabama</option>
               <option value="WY">Wyoming</option>
            </select>

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

         <button
            class="btn btn-primary btn-sm btn_aplicar_custumers_staff"
            style="float: inline-end; margin: 1.6rem 1rem"
         >
            Apply
         </button>
      </div>
      <!--FIN configuracion a la derecha-->
      <div class="offcanvas-backdrop" id="offcanvas-backdrop"></div>

      <!-- Input de archivo oculto -->
      <input type="file" id="fileInput" accept="image/png, image/jpeg" />
      <input type="file" id="hiddenFileInput" name="fileToUpload" />
      <input
         type="file"
         id="hiddenFileInputVideo"
         name="fileToUploadVideo"
         accept="video/*"
      />

      <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/chat_sistema.js?v={{_raid()}}"></script>

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


{literal}
<script type="module">

   var WS_NOMBRE_SOCKET = document.getElementById('ws_nombre_socket').value;

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

   var USER_ID = $("#MI_ID_USERS").val();
   var MY_ROL_USER_ID = null;
   var MY_IMG_USER_ID = null;
   var BASE_DE_DATOS_GLOBAL = $("#DB_NAME").val();
   var LISTADO_CONTACTOS = [];
   var CHAT_MENSAJES = [];
   var ID_CONTACTO_SELECCIONADO = null;
   var LOADING_MENSSAGE = false;

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

   LISTADO_CONTACTOS =
               (await cargar_listado_contactos_api(URL_BASE, USER_ID)) || [];

            let mi_informacion = await tener_usuario_sistema_by_id(
               URL_BASE,
               USER_ID,
            );

            if (mi_informacion.type == "success") {
               let {
                  id,
                  username,
                  fullname,
                  phonenumber,
                  user_type,
                  status,
                  img,
                  rol_id,
               } = mi_informacion.data;
               MY_ROL_USER_ID = rol_id;
               MY_IMG_USER_ID = img;

               let verificado =
                        rol_id == "0"
                           ? '<img src="' +
                              MY_IMG_USER_ID +
                              '" alt="" onerror="this.src=\'' +
                              PATH_IMG +
                              'perfil.jpg\'" class="img-avatar" />' +
                              '<img src="' + 
                              PATH_IMG +
                              'icono_verificado.png" alt="" class="img-avatar-small" style="bottom: -3px" />'
                           : '<img src="' +
                              MY_IMG_USER_ID +
                              '" alt="" onerror="this.src=\'' +
                              PATH_IMG +
                              'perfil.jpg\'" class="img-avatar" />';


               fullname = isEmpty(fullname) == true ? "" : fullname;
               username = isEmpty(username) == true ? "" : username;

               if (fullname.length >= 27) {
                  fullname = fullname.substring(0, 27) + "...";
               }

               if (username.length >= 27) {
                  username = username.substring(0, 27) + "...";
               }

               $(".imagen_cabecera_perfil").html(verificado);
               $(".nombre_cabecera_perfil").text(fullname);
               $(".correo_cabecera_perfil").text(username);
            } else {
               Swal.fire("!Error getting user information by id¡");
            }

         console.log(LISTADO_CONTACTOS);

         $(".mi-bandeja-mensajes-contactos").html(
            dibujar_contactos(LISTADO_CONTACTOS),
         );
         //lo coloco aqui abajo de: mi-bandeja-mensajes-contactos para activar el evento de seleccion de contacto
         click_contactos();

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

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


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

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

         socket.emit("join-chat-room", BASE_DE_DATOS_GLOBAL);

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

            socket.emit("join-chat-room", BASE_DE_DATOS_GLOBAL);
         });

         // 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(
            "chat-sistema-oir-chat-leidos-usuarios/" +
               BASE_DE_DATOS_GLOBAL +
               "/" +
               USER_ID,
            (data) => {
               console.log("Datos lista id :", data);

               let { list_id = [] } = data;

               if (list_id.length != 0) {
                  list_id.forEach((ids) => {
                     var div = $(
                        '.cuerpo_mensaje div[data-menssage-id="' + ids + '"]',
                     );

                     if (div.length != 0) {
                        let url_status_img = "read.png";

                        // Cambiar la imagen dentro del div
                        div.find(".fecha_y_palomitas .palomita_texto")
                           .attr("src", PATH_IMG + url_status_img)
                           .attr("width", "18px")
                           .attr("title", "Read");
                     }
                  });
               }
            },
         );

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

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

               let {
                  id,
                  from_user_id,
                  to_user_id,
                  img_to_user,
                  rol_to_user,
                  mensaje,
                  url,
                  filename,
                  tipo_mensaje,
                  fecha_creacion,
                  status,
                  unique_user_id,
                  db,
                  user_id,
               } = data;

               //console.log("-----------------------------------");
               //console.log("id: ", id);
               //console.log("from_user_id: ", from_user_id);
               //console.log("to_user_id: ", to_user_id);
               //console.log("img_to_user: ", img_to_user);
               //console.log("rol_to_user: ", rol_to_user);
               //console.log("mensaje: ", mensaje);
               //console.log("url: ", url);
               //console.log("filename: ", filename);
               //console.log("tipo_mensaje: ", tipo_mensaje);
               //console.log("status: ", status);
               //console.log("unique_user_id: ", unique_user_id);
               //console.log("-----------------------------------");

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

               if (status == "delivered") {
                  let sumar_msj_sin_responder = LISTADO_CONTACTOS.find(
                     (elemento) => elemento.id == from_user_id,
                  );

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

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

               //console.log(
               //   "ID_CONTACTO_SELECCIONADO: ",
               //   ID_CONTACTO_SELECCIONADO,
               //);

               if (ID_CONTACTO_SELECCIONADO != from_user_id) {
                  return;
               }

               plantilla_tipo_whatsapp(data);
            },
         );

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

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

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

            let datos = {
               from_user_id: USER_ID,
               to_user_id: ID_CONTACTO_SELECCIONADO,
               mensaje: mensaje,
            };

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

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

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

                        let sumar_msj_sin_responder = LISTADO_CONTACTOS.find(
                           (data) => data.id == ID_CONTACTO_SELECCIONADO,
                        );

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

                           cambiar_badge(ID_CONTACTO_SELECCIONADO, "0");

                           //console.log(info.wam_id);
                           const now = new Date();
                           const formattedDate = formatDateTime(now);

                           let nuevo_mensaje = {
                              id: info.last_insert_id,
                              unique_user_id:
                                 USER_ID + "" + ID_CONTACTO_SELECCIONADO,
                              from_user_id: USER_ID,
                              to_user_id: ID_CONTACTO_SELECCIONADO,
                              mensaje: mensaje,
                              url: null,
                              filename: null,
                              tipo_mensaje: "text",
                              fecha_creacion: formattedDate,
                              status: "delivered",
                              img_to_user: "",
                              rol_to_user: "",
                              img_from_user: MY_IMG_USER_ID,
                              rol_from_user: MY_ROL_USER_ID,
                           };

                           CHAT_MENSAJES.push(nuevo_mensaje);

                           $(".cuerpo_mensaje").append(
                              mensaje_texto_whatsapp_usuarios(nuevo_mensaje),
                           );

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

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

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

         // Mostrar vista previa de la imagen seleccionada
         document
            .getElementById("fileInput")
            .addEventListener("change", function (event) {
               if (isEmpty(ID_CONTACTO_SELECCIONADO) == true) {
                  Swal.fire("Select a contact");
                  return;
               }

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

                           //console.log(base64WithoutPrefix);

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

                           var datos = {
                              imagen: base64WithoutPrefix,
                              to_user_id: ID_CONTACTO_SELECCIONADO,
                              from_user_id: USER_ID,
                              mensaje: mensaje,
                           };

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

                                 const info = JSON.parse(response);

                                 if (info.type == "success") {
                                    let sumar_msj_sin_responder =
                                       LISTADO_CONTACTOS.find(
                                          (data) =>
                                             data.id ==
                                             ID_CONTACTO_SELECCIONADO,
                                       );

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

                                       cambiar_badge(
                                          ID_CONTACTO_SELECCIONADO,
                                          "0",
                                       );

                                       //console.log(info.wam_id);
                                       const now = new Date();
                                       const formattedDate =
                                          formatDateTime(now);

                                       let nuevo_mensaje = {
                                          id: info.last_insert_id,
                                          unique_user_id:
                                             USER_ID +
                                             "" +
                                             ID_CONTACTO_SELECCIONADO,
                                          from_user_id: USER_ID,
                                          to_user_id: ID_CONTACTO_SELECCIONADO,
                                          mensaje: mensaje,
                                          url: info.url,
                                          filename: null,
                                          tipo_mensaje: "image",
                                          fecha_creacion: formattedDate,
                                          status: "delivered",
                                          img_to_user: "",
                                          rol_to_user: "",
                                          img_from_user: MY_IMG_USER_ID,
                                          rol_from_user: MY_ROL_USER_ID,
                                       };

                                       CHAT_MENSAJES.push(nuevo_mensaje);

                                       $(".cuerpo_mensaje").append(
                                          mensaje_imagen_whatsapp_usuarios(
                                             nuevo_mensaje,
                                          ),
                                       );

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

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

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

                                 //$("#mi-mensaje-texto").val("");
                              },
                              error: function (xhr, status, error) {
                                 console.error("Error en la solicitud:", error);
                                 Swal.fire({
                                    icon: "error",
                                    title: "Oops...",
                                    text: error,
                                 });
                                 // Manejar errores aquí
                              },
                           });
                        })
                        .catch((error) => {
                           console.error(
                              "Error al redimensionar la imagen:",
                              error,
                           );
                        });
                  } else {
                     Swal.fire(
                        "The file exceeds the maximum allowed size of 5 MB.",
                     );
                  }

                  //fin validacion
               }
            });

         //imagenes
         document
            .getElementById("selectPhotos")
            .addEventListener("click", function () {
               if (isEmpty(ID_CONTACTO_SELECCIONADO) == true) {
                  Swal.fire("Select a contact");
                  return;
               }
               document.getElementById("fileInput").click();
            });

         //documentos
         document
            .getElementById("input_document")
            .addEventListener("click", function () {
               if (isEmpty(ID_CONTACTO_SELECCIONADO) == true) {
                  Swal.fire("Select a contact");

                  return;
               }
               document.getElementById("hiddenFileInput").click();
            });

         //funcion para documentos
         document
            .getElementById("hiddenFileInput")
            .addEventListener("change", function (event) {
               if (isEmpty(ID_CONTACTO_SELECCIONADO) == true) {
                  Swal.fire("Select a contact");
                  return;
               }

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

               if (!file) {
                  return;
               }

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

                  return;
               }

               var tipo_documento = "";

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

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

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

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

                  tipo_documento = "document";
               }

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

                  //console.log(file);

                  let datos = {
                     mensaje: mensaje,
                     archivo: base64String,
                     filename: file.name,
                     to_user_id: ID_CONTACTO_SELECCIONADO,
                     from_user_id: USER_ID,
                     tipo_documento: tipo_documento,
                  };
                  //console.log("AQUI ABAJO HAY UN RETURN");
                  //console.log(datos);
                  //return;

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

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

                           if (info.type == "success") {
                              let sumar_msj_sin_responder =
                                 LISTADO_CONTACTOS.find(
                                    (data) =>
                                       data.id == ID_CONTACTO_SELECCIONADO,
                                 );

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

                                 cambiar_badge(ID_CONTACTO_SELECCIONADO, "0");

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

                                 if (info.tipo_documento == "document") {
                                    let nuevo_mensaje = {
                                       id: info.last_insert_id,
                                       unique_user_id:
                                          USER_ID +
                                          "" +
                                          ID_CONTACTO_SELECCIONADO,
                                       from_user_id: USER_ID,
                                       to_user_id: ID_CONTACTO_SELECCIONADO,
                                       mensaje: mensaje,
                                       url: info.url,
                                       filename: file.name,
                                       tipo_mensaje: info.tipo_documento,
                                       fecha_creacion: formattedDate,
                                       status: "delivered",
                                       img_to_user: "",
                                       rol_to_user: "",
                                       img_from_user: MY_IMG_USER_ID,
                                       rol_from_user: MY_ROL_USER_ID,
                                    };

                                    CHAT_MENSAJES.push(nuevo_mensaje);

                                    $(".cuerpo_mensaje").append(
                                       mensaje_documentos_whatsapp_usuarios(
                                          nuevo_mensaje,
                                       ),
                                    );

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

                                    scroll_abajo();
                                 }

                                 if (info.tipo_documento == "audio") {
                                    let nuevo_mensaje = {
                                       id: info.last_insert_id,
                                       unique_user_id:
                                          USER_ID +
                                          "" +
                                          ID_CONTACTO_SELECCIONADO,
                                       from_user_id: USER_ID,
                                       to_user_id: ID_CONTACTO_SELECCIONADO,
                                       mensaje: mensaje,
                                       url: info.url,
                                       filename: file.name,
                                       tipo_mensaje: info.tipo_documento,
                                       fecha_creacion: formattedDate,
                                       status: "delivered",
                                       img_to_user: "",
                                       rol_to_user: "",
                                       img_from_user: MY_IMG_USER_ID,
                                       rol_from_user: MY_ROL_USER_ID,
                                    };

                                    CHAT_MENSAJES.push(nuevo_mensaje);

                                    $(".cuerpo_mensaje").append(
                                       mensaje_audios_whatsapp_usuarios_cargar_socket(
                                          nuevo_mensaje,
                                       ),
                                    );

                                    sleep(1000).then(() => {
                                       var div = $(".cuerpo_mensaje").find(
                                          '[data-menssage-id="' +
                                             info.last_insert_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();
                                          }
                                       }
                                    });
                                 }

                                 $(".signo_existe_mensaje_crm").fadeOut();
                              }

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

               reader.readAsDataURL(file);
            });

         //video
         document
            .getElementById("input_video")
            .addEventListener("click", function () {
               if (isEmpty(ID_CONTACTO_SELECCIONADO) == true) {
                  Swal.fire("Select a contact");

                  return;
               }
               document.getElementById("hiddenFileInputVideo").click();
            });

         //funcion para videos
         document
            .getElementById("hiddenFileInputVideo")
            .addEventListener("change", function (event) {
               if (isEmpty(ID_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;
               }

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

                  //console.log(file);

                  let datos = {
                     mensaje: mensaje,
                     archivo: base64String,
                     filename: file.name,
                     to_user_id: ID_CONTACTO_SELECCIONADO,
                     from_user_id: USER_ID,
                  };
                  //console.log("AQUI ABAJO HAY UN RETURN");
                  //console.log(datos);
                  //return;

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

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

                           if (info.type == "success") {
                              let sumar_msj_sin_responder =
                                 LISTADO_CONTACTOS.find(
                                    (data) =>
                                       data.id == ID_CONTACTO_SELECCIONADO,
                                 );

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

                                 cambiar_badge(ID_CONTACTO_SELECCIONADO, "0");

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

                                 let nuevo_mensaje = {
                                    id: info.last_insert_id,
                                    unique_user_id:
                                       USER_ID + "" + ID_CONTACTO_SELECCIONADO,
                                    from_user_id: USER_ID,
                                    to_user_id: ID_CONTACTO_SELECCIONADO,
                                    mensaje: mensaje,
                                    url: info.url,
                                    filename: file.name,
                                    tipo_mensaje: "video",
                                    fecha_creacion: formattedDate,
                                    status: "delivered",
                                    img_to_user: "",
                                    rol_to_user: "",
                                    img_from_user: MY_IMG_USER_ID,
                                    rol_from_user: MY_ROL_USER_ID,
                                 };

                                 CHAT_MENSAJES.push(nuevo_mensaje);

                                 $(".cuerpo_mensaje").append(
                                    mensaje_video_whatsapp_usuarios_socket(
                                       nuevo_mensaje,
                                    ),
                                 );

                                 sleep(1000).then(() => {
                                    var div = $(".cuerpo_mensaje").find(
                                       '[data-menssage-id="' +
                                          info.last_insert_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();
                                       }
                                    }
                                 });

                                 $(".signo_existe_mensaje_crm").fadeOut();

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

               reader.readAsDataURL(file);
            });

         function click_contactos() {
            $(".item-contactos").on("click", async function () {
               

               // Obtener los valores de los atributos data
               let idContacto = $(this).data("user_id_contact");

               if (ID_CONTACTO_SELECCIONADO == idContacto) {
                  return;
               }

               let informacion_temporal_contacto = LISTADO_CONTACTOS.find(
                  (data) => data.id == idContacto,
               );

               if (!informacion_temporal_contacto) {
                  return;
               }

               CHAT_MENSAJES = [];

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

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

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

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

               $(".cabecera_perfil_contacto").html(
                  cabecera_contacto_seleccionado(
                     informacion_temporal_contacto.fullname,
                     informacion_temporal_contacto.img,
                     informacion_temporal_contacto.rol_id,
                  ),
               );

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

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

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

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

               ID_CONTACTO_SELECCIONADO = idContacto;

               //carga los primeros 30 o N registros
               CHAT_MENSAJES = await cargar_listado_chat_contactos_api(
                  URL_BASE,
                  USER_ID, // viene siendo el from_user_id
                  ID_CONTACTO_SELECCIONADO,
               );

               let existeFromUserId = CHAT_MENSAJES.some(
                  (mensaje) =>
                     mensaje.from_user_id == ID_CONTACTO_SELECCIONADO &&
                     mensaje.status == "delivered",
               );

               if (existeFromUserId == true) {
                  let respuesta_api_marcar_leidos = await api_marcar_leidos(
                     URL_BASE,
                     USER_ID, // viene siendo el from_user_id
                     ID_CONTACTO_SELECCIONADO,
                  );

                  if (respuesta_api_marcar_leidos.type == "success") {
                     informacion_temporal_contacto.mensajes_no_leidos +=
                        -respuesta_api_marcar_leidos.mensajes_no_leidos;
                     cambiar_badge(
                        ID_CONTACTO_SELECCIONADO,
                        informacion_temporal_contacto.mensajes_no_leidos,
                     );

                     $(".signo_existe_mensaje_crm").fadeOut();
                  }
               }

               console.log(CHAT_MENSAJES);

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

               cargar_mensajes_contacto_plantillas(
                  CHAT_MENSAJES,
                  USER_ID,
                  APP_URL,
               );

               await sleep(1000);

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

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

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

               //console.log("AQUI HAY UN RETURN");
               //return;

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

               //await sleep(500);
               const scrollButton = $("#scrollButton");

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

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

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

                        //console.log(scrollTop);

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

                              LOADING_MENSSAGE = false;

                              let data =
                                 (await cargar_listado_chat_contactos_by_last_id_api(
                                    URL_BASE,
                                    ID_CONTACTO_SELECCIONADO,
                                    USER_ID,
                                    id_chat_mensajes,
                                 )) || {
                                    data: [],
                                    cargado: false,
                                 };

                              let arreglo_nuevo = data["data"];

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

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

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

                              //console.log(arraySinCoincidencias);

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

                                 //console.log(id_chat_mensajes);

                                 cargar_mensajes_contacto_plantillas(
                                    arraySinCoincidencias,
                                    USER_ID,
                                    APP_URL,
                                 );

                                 CHAT_MENSAJES.push(...arraySinCoincidencias);

                                 //
                                 var targetId = wam_id_chat_mensajes;

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

                                 //console.log(targetId);
                                 //console.log(id_chat_mensajes);
                                 if ($targetDiv.length) {
                                    $targetDiv[0].scrollIntoView({
                                       behavior: "smooth",
                                       block: "start",
                                    });
                                 }
                                 wam_id_chat_mensajes =
                                    arraySinCoincidencias[0]["id"];
                                 //fin
                                 //LOADING_MENSSAGE = data["cargado"];
                              }
                           }
                           // Perform your action here
                        } else {
                           LOADING_MENSSAGE = true;
                        }

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

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

               //
            });
         }

         function plantilla_tipo_whatsapp(data) {
            let {
               id,
               from_user_id,
               to_user_id,
               img_to_user,
               rol_to_user,
               mensaje,
               url,
               filename,
               tipo_mensaje,
               fecha_creacion,
               status,
               unique_user_id,
               db,
               user_id,
            } = data;

            //Si es el usuario seleccionado
            if (ID_CONTACTO_SELECCIONADO == from_user_id) {
               if (tipo_mensaje == "text") {
                  let plantilla = mensaje_texto_whatsapp_clientes(data);

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

               if (tipo_mensaje == "image") {
                  let plantilla = mensaje_imagen_whatsapp_clientes(data);

                  // 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") {
                  //console.log("AQUI RETURN QUITALO PORFA");
                  //return;
                  let plantilla = mensaje_documentos_whatsapp_cliente(data);

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

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

                  sleep(1000).then(() => {
                     var div = $(".cuerpo_mensaje").find(
                        '[data-menssage-id="' + 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") {
                  //console.log("AQUI RETURN QUITALO PORFA");
                  //return;
                  let plantilla =
                     mensaje_video_whatsapp_cliente_cargar_socket(data);

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

                  sleep(1000).then(() => {
                     var div = $(".cuerpo_mensaje").find(
                        '[data-menssage-id="' + 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;
                        }
                     }
                  });
               }
            }

            //fin if
         }
         //fin

   
</script>
{/literal}

{/block}