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

   <link href="{$theme}default/css/chat_empleado.css?v={$config['version']}" rel="stylesheet">


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

{/block}

{block name="content"}

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

</style>

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

      <input
         type="text"
         value="{$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">
            <div class="cargando">
               <div class="spinnerv1">
                  <i class="fa fa-circle-o-notch fa-spin"></i>
               </div>
               <p style="font-weight: 600">
                  Please wait while it is loading...
               </p>
            </div>
         </div>

         <div class="tile tile-alt" id="messages-main" style="display: none">
            <div class="ms-menu">
               <div
                  class="ms-user clearfix"
                  style="padding-left: 6px; padding-right: 6px"
               >
                  <div class="pull-left" style="padding: 0px">
                     <div
                        class="image-container-perfil imagen_cabecera_perfil"
                     ></div>
                  </div>
                  <div>
                     <span class="nombre_cabecera_perfil"></span>
                     <br />
                     <span class="correo_cabecera_perfil"></span>
                  </div>
               </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"
               ></div>
            </div>

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

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

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

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

               <!--Sin Mensajes-->
               <div class="sin_mensaje cuerpo_sin_mensajes">
                  <div class="pintar_card">
                     <div class="pintar_body_card container">
                        <h4>Let's start a conversation!</h4>
                        <br />
                        <img
                           src="{{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"
                  style="display: none"
               >
                  <div class="pintar_card">
                     <div class="pintar_body_card container">
                        <div class="spinner">
                           <i class="fa fa-circle-o-notch fa-spin"></i>
                        </div>
                        <br />
                        <h4>Loading conversations...</h4>
                     </div>
                  </div>
               </div>

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

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

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

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

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

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

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

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

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

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

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

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

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

                  <!-- plantilla para imagenes -->
                  <div
                     class="message-feed media right"
                     data-wam-id="wamid.HBgLNTA0OTc3NDc0NDYVAgARGBIyNDI3QjRGM0MyODBFOEFBQ0MA"
                  >
                     <div class="pull-right">
                        <!-- <img src="{$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 -->
               <div class="msb-footer-sin-enviar-mensajes">
                  <p style="font-weight: 600">
                     <!-- <a href="#" style="text-decoration: underline"
                        >You can choose a user to chat</a
                     > -->
                     You can start chatting. choose your contact above
                  </p>
               </div>

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

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

                           <div class="dropdown" style="width: 100%">
                              <button 
                              class="btn dropdown-toggle" 
                                     type="button" 
                                     id="opciones_mensajes" 
                                     data-bs-toggle="dropdown" 
                                     aria-expanded="false"
                                     style="
                                       height: 64px;
                                     "
                              >
                                <i class="fa fa-plus" style="color: #6b709f; font-size: 20px;"></i>
                              </button>
                              <ul class="dropdown-menu text-center" aria-labelledby="opciones_mensajes" style="border-radius:4px">
                               <li
                                    role="presentation"
                                    style="cursor: pointer"
                                 >
                                    <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"
                           >
                              <i class="fa fa-paper-plane-o"></i>
                           </button>
                        </div>
                     </div>
                  </div>
               </div>
               <!-- FIN de msb-footer -->

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

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

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

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

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

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

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

         });

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

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

         /* socket.on("chat-social", (data) => {
                          console.log("Datos de chat recibidos General:", data);
                       }); */

         socket.on(
            "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}