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

   <link href="{$theme}default/css/grupo.css?v={$config['version']}" rel="stylesheet">
   <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.dataTables.min.css" />

 

{/block}

{block name="content"}

<style type="text/css">

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

    .tener_producto + .select2-container {
         /*  width: 300px !important; Cambia el ancho a 300px (ajusta según necesites) */
      }

      /* Ajustar el alto del contenedor de selección */
      .tener_producto + .select2-container .select2-selection--single {
         height: 42.59px !important; /* Cambia el alto a 40px */
         line-height: 42.59px !important; /* Alinea el texto verticalmente */
      }

      /* Ajustar el texto dentro del select */
      .tener_producto + .select2-container .select2-selection__rendered {
         line-height: 42.59px !important; /* Alinea el texto con el alto */
         font-size: 16px !important; /* Cambia el tamaño de fuente si lo deseas */
      }

      /* Ajustar la flecha del select */
      .tener_producto + .select2-container .select2-selection__arrow {
         height: 42.59px !important; /* Asegura que la flecha esté alineada con el alto */
      }

     
      /* Ajustar el alto del contenedor de selección */
      .tener_staff + .select2-container .select2-selection--single {
         height: 42.59px !important; /* Cambia el alto a 40px */
         line-height: 42.59px !important; /* Alinea el texto verticalmente */
      }

      /* Ajustar el texto dentro del select */
      .tener_staff + .select2-container .select2-selection__rendered {
         line-height: 42.59px !important; /* Alinea el texto con el alto */
         font-size: 16px !important; /* Cambia el tamaño de fuente si lo deseas */
      }

      /* Ajustar la flecha del select */
      .tener_staff + .select2-container .select2-selection__arrow {
         height: 42.59px !important; /* Asegura que la flecha esté alineada con el alto */
      }

      table.estilosTabla > :not(caption) > * > * {
        /*
        padding-top: 5px !important;
        padding-bottom: 5px !important;
        */
    }

    .quitar_borde_puntos_suspencivos{
        border: none;
        background: transparent;
    }

    .quitar_borde_puntos_suspencivos.dropdown-toggle::after {
        display: none;
    }

    table.estilosTabla > :not(caption) > tr {
        border-bottom: 1px solid #dee2e6; /* Bootstrap's default border color */
    }

    table.estilosTabla > :not(caption) > * > * {
        border-bottom: 1px solid #dee2e6; /* Bootstrap's default border color */
        
    }
      

.nuevo_control{
    min-height: calc(1.47em + .75rem + 2px);
    padding: .375rem .844rem;
    font-size: .75rem;
    border-radius: 8px;
}

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

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

       
        <div class="panel">
            <div class="panel-hdr">
                <h2 style="color: #666; font-weight: 600; "><span></span>List of conversations</h2>
                <input type="text" class=" tener_url_base" value={$url_base} disabled hidden/>
 
                 
            </div>
                                                         
            <div class="panel-container show" id="ibox_form">

                <div class="panel-content">

                    <div class="px-2">
                        
                        <div class="row contenedor" style="padding: 10px">

                           {* formulario *}
                            <div class="col-12 col-sm-6 pt-3">
                                <label for="estatus_conversacion"><span style="color:#666;">Conversation status</span> </label>
                                
                                <select
                                    class="form-select tener_estatus_conversacion nuevo_control"
                                    name="estatus_conversacion"
                                    id="estatus_conversacion"
                                    style="width: 100%"
                                    placeholder="Select a status"
                                >
                                    <option value="" >All</option>
                                    <option value="1" >Open</option>
                                    <option value="2" >Close</option>
                                </select>
                            </div>

                           {* formulario *}
                            <div class="col-12 col-sm-6 pt-3">
                                <label for="category_form"><span style="color:#666;">Conversation stage</span> </label>
                                
                                <select
                                    class="form-select nuevo_control tener_category_form"
                                    name="category_form"
                                    id="category_form"
                                    style="width: 100%"
                                    placeholder="Select a stage"
                                >
                                    <option value="" >All</option>
                                    {foreach $listado_etapas as $ds}
                                        <option value="{$ds['id']}" >{$ds['nombre_etapa']}</option>
                                    {/foreach}
                                </select>
                            </div>

                            {* Servicios de interes *}
                            <div class="col-12 col-sm-6 pt-3">
                                <label for="producto"><span style="color:#666;">Services of interest</span> </label>
                                
                                <select
                                    class="form-select nuevo_control tener_producto"
                                    name="producto"
                                    id="producto"
                                    style="width: 100%"
                                    placeholder="Select a stage"
                                >
                                    <option value="0" >All</option>
                                    {foreach $listado_productos as $ds}
                                        <option value="{$ds['id']}" >{$ds['name']}</option>
                                    {/foreach}
                                </select>
                            </div>

                            {* Assigned Agent *}
                            <div class="col-12 col-sm-6 pt-3">
                                <label for="staff"><span style="color:#666;">Assigned Agent</span> </label>
                                
                                <select
                                    class="form-select nuevo_control tener_staff"
                                    name="staff"
                                    id="staff"
                                    style="width: 100%"
                                    placeholder="Select a staff"
                                >
                                    <option value="0" >All</option>
                                    {foreach $listado_staff as $ds}
                                        <option value="{$ds['id']}" >{$ds['fullname']}</option>
                                    {/foreach}
                                </select>
                            </div>

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

                                 <div class="form-check mt-3"  >
                                     <input class="form-check-input check_fecha_propuesta   "   id="check_fecha_propuesta" type="checkbox"     />
                                     <label class="form-check-label  " for="check_fecha_propuesta"><span  >Enable filter Date proposed Next contact</span></label>
                                 </div>
                            </div>
 
                            {* fecha desde *}
                            <div class="col-12 col-sm-6 ">
                                <label for="fecha_desde"
                                    ><span style="color:#666;">Date From Proposed Next Contact</span>
                                </label>
                                <input
                                    type="date"
                                    id="fecha_desde"
                                    name="fecha_desde"
                                    class="form-control form-control-sm tener_fecha_desde"
                                />
                            </div>

                           {* fecha hasta *}
                            <div class="col-12 col-sm-6 ">
                                <label for="fecha_hasta"
                                    ><span style="color:#666;">Date Until proposed next contact</span>
                                </label>
                                <input
                                    type="date"
                                    id="fecha_hasta"
                                    name="fecha_hasta"
                                    class="form-control form-control-sm tener_fecha_hasta"
                                />
                            </div>
  

                            <div class="col-12 col-sm-12 pt-3">
                                
                                 <div class="form-check mt-3"  >
                                     <input class="form-check-input tiempo_abierto " id="tiempo_abierto" type="checkbox" />
                                     <label class="form-check-label  " for="tiempo_abierto"><span  >Enable open time dates filter</span></label>
                                 </div>
                            </div>

                            {* fecha desde *}
                            <div class="col-12 col-sm-6 ">
                                <label for="fecha_desde_tiempo_abierto"
                                    ><span style="color:#666;">Date from open time</span>
                                </label>
                                <input
                                    type="date"
                                    id="fecha_desde_tiempo_abierto"
                                    name="fecha_desde_tiempo_abierto"
                                    class="form-control form-control-sm tener_fecha_desde_tiempo_abierto"
                                    disabled
                                />
                            </div>
 
                            <div class="col-12 col-sm-6 ">
                                <label for="fecha_hasta_tiempo_abierto"
                                    ><span style="color:#666;">Date until open time</span>
                                </label>
                                <input
                                    type="date"
                                    id="fecha_hasta_tiempo_abierto"
                                    name="fecha_hasta_tiempo_abierto"
                                    class="form-control form-control-sm tener_fecha_hasta_tiempo_abierto"
                                    disabled
                                />
                            </div>
 
 
                            <div class="col-12 col-sm-12 pt-3">
                                <button
                                    type="button"
                                    class="btn btn-default"
                                    id="consultar_filtros"
                                    style="
                                        border-color: #d3cac0;
                                        border: 1px solid #d3cac0;
                                        float: right;
                                    "
                                >
                                    Search
                                </button>
                            </div>

   
                           
                            <br />
                             
                            <div class="col-12 col-sm-12 pt-4">
                            
                            
                                <div class="table-responsive">
                                    <table class="table table-striped table-hover mt-3 estilosTabla"  id="clx_datatable">
                                        <thead>
                                        <tr>
                                            <th class="centrar">Contact</th>
                                            <th class="centrar">Status of the conversation</th>
                                            <th class="centrar">Stage conversation</th>
                                            <th class="centrar">Assigned Agent</th>
                                            <th class="centrar">Service of interest</th>
                                            <th class="centrar">Next Contact</th>
                                            <th class="centrar">Date conversation started</th>
                                            <th class="centrar">Final date of conversation</th>
                                            <th class="centrar">Open time</th>
                                        </tr>
                                        </thead>
                                        <tbody class="tbody_envios">
                                          
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            </div>

                       
                    </div>

                  

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




{/block}

{block name="script"}

<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"></script>

<script>

 

   const URL_BASE      = $(".tener_url_base").val();
   const tener_role_id = $(".tener_role_id").val();

   console.log("URL_BASE");
   console.log(URL_BASE);

 
      $("#fecha_desde_tiempo_abierto").prop("disabled", true);
      $("#fecha_hasta_tiempo_abierto").prop("disabled", true);

      $("#fecha_desde_tiempo_abierto").val("");
      $("#fecha_hasta_tiempo_abierto").val("");

      $("#check_fecha_propuesta").prop("checked", true);

    //cargar_usuarios_sistema().then((listado_usuarios_admin) =>{
    //    $(".tener_usuario_id").html(
    //        select_html_usuario_sistema(listado_usuarios_admin),
    //    );
    //});

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

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

   $(document).ready(function() {
        $("#check_fecha_propuesta").on("change", function() {
            let isChecked = $(this).prop("checked");
            if (isChecked) {
                console.log("Checkbox está marcado (true)");
                // Acciones cuando está marcado

               $("#tiempo_abierto").prop("checked", false);
               $("#fecha_desde_tiempo_abierto").prop("disabled", true);
               $("#fecha_hasta_tiempo_abierto").prop("disabled", true);

               $("#fecha_desde_tiempo_abierto").val("");
               $("#fecha_hasta_tiempo_abierto").val("");

               $("#fecha_desde").prop("disabled", false);
               $("#fecha_hasta").prop("disabled", false);


            } else {
                console.log("Checkbox está desmarcado (false)");
                // Acciones cuando está desmarcado
            }
        });

        $("#tiempo_abierto").on("change", function() {
            let isChecked = $(this).prop("checked");
            if (isChecked) {
                console.log("Checkbox está marcado (true)");
                // Acciones cuando está marcado
               
               $("#check_fecha_propuesta").prop("checked", false);

               $("#fecha_desde").prop("disabled", true);
               $("#fecha_hasta").prop("disabled", true);

               $("#fecha_desde").val("");
               $("#fecha_hasta").val("");

               $("#fecha_desde_tiempo_abierto").prop("disabled", false);
               $("#fecha_hasta_tiempo_abierto").prop("disabled", false);
 
            } else {
                console.log("Checkbox está desmarcado (false)");
                // Acciones cuando está desmarcado
            }
        });

         
    });

    

   //let fecha = cargar_fecha();
   //$(".tener_fecha_desde").val(fecha);
   //$(".tener_fecha_hasta").val(fecha);

  
    //$('#clx_datatable').DataTable();
 
 
 
    
         $("#consultar_filtros").click(function () {

 
            let estatus_conversacion = $("#estatus_conversacion").val() || "";
            let category_form        = $("#category_form").val() || "";
            let producto        = $("#producto").val() || "";
            let staff        = $("#staff").val() || "";
            let fecha_desde        = $("#fecha_desde").val() || "";
            let fecha_hasta        = $("#fecha_hasta").val() || "";

            let fecha_desde_tiempo_abierto        = $("#fecha_desde_tiempo_abierto").val() || "";
            let fecha_hasta_tiempo_abierto        = $("#fecha_hasta_tiempo_abierto").val() || "";
       
            //if(isEmpty(fecha_desde) == true)
            //{
            //    toastr.error("!Date from is required¡");
            //    return;
            //}

            

            let enviar_informacion = {
               fecha_desde: fecha_desde,
               fecha_hasta: fecha_hasta,

               fecha_desde_tiempo_abierto: fecha_desde_tiempo_abierto,
               fecha_hasta_tiempo_abierto: fecha_hasta_tiempo_abierto,

               estatus_conversacion: estatus_conversacion,
               category_form: category_form,
               producto: producto == "0" ? "" : producto,
               staff: staff == "0" ? "" : staff,
                
            };

            console.log(enviar_informacion);
            //console.log("aqui abajo ahi un return");
            //return;

            $("#consultar_filtros").prop("disabled", true);

            $.ajax({
               type: "POST",
               url: URL_BASE + "social/filtra-listado-conversaciones-v1",
               data: JSON.stringify(enviar_informacion), // Convertir datos a formato JSON
               contentType: "application/json", // Tipo de contenido JSON
               success: function (response) {

                  $("#consultar_filtros").prop("disabled", false);
                 
                  $(".tbody_envios").html("");

                  try {
                     let info = JSON.parse(response);
                     if (info.type == "success") {
                        let arr = info.data_html;

                        if (arr == "") {
                           $(".tbody_envios").html(
                              '<tr><th colspan="9" class="centrar pt-4"> No information</th></tr>',
                           );
                        } else {
                           $(".tbody_envios").html(arr);

                        }
 
                     } else {
                        alert("Error sending group messages");
                     }
                  } catch (error) {
                     $(".tbody_envios").html("");
                     alert("Error:" + error);
                  }
               },
               error: function (xhr, status, error) {
                  $("#consultar_filtros").prop("disabled", false);
                  $(".tbody_envios").html("");
                  console.error("Error en la solicitud:", error);
               },
            });
         });


         function cargar_fecha() {
            const today = new Date();

            // Formatear la fecha como YYYY-MM-DD
            const year = today.getFullYear();
            const month = String(today.getMonth() + 1).padStart(2, "0"); // Mes de 2 dígitos
            const day = String(today.getDate()).padStart(2, "0"); // Día de 2 dígitos

            const formattedDate = year + "-" + month + "-" + day;
            return formattedDate;
         }

         function select_html_usuario_sistema(arr) {
            if (arr.length == 0) {
               return;
            }

            var html = '<option value="">' + "None" + "</option>";

            arr.forEach((element) => {
               let value = element;

               html +=
                  '<option value="' +
                  value["id"] +
                  '">' +
                  value["fullname"] +
                  "</option>";
            });

            return html;
         }

         function isEmpty(value) {
            // Verificar si es null o undefined
            if (value == null) return true;

            // Verificar si es una cadena vacía
            if (typeof value === "string" && value.trim() === "") return true;

            // Verificar si es un array vacío
            if (Array.isArray(value) && value.length === 0) return true;

            // Verificar si es un objeto vacío
            if (typeof value === "object" && Object.keys(value).length === 0) return true;

            return false;
         }

          
 
    
  

</script>
{/block}