<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
    .subsel{background: blue; color: #f7f7f7;}
  </style>
</head>
<body>
<?php
  require_once("models/config.php");
  if(isUserLoggedIn()) { 
    
  }else{
    header("Location: index.php"); die(); 
  }

$mysqli = new mysqli("localhost", "bdicentralserver_sc", "Myl-PGfSbzcf", "bdicentralserver_sc");
              $result_pro = $mysqli->query("SELECT DISTINCT ci.id,ci.nombre, count(pf.id) as total FROM categorias_mx ci INNER JOIN pricefile_mx pf ON pf.id_subcategoria = ci.id WHERE ci.parent_id = ".$_GET["id"]."  AND pf.id_marca IN (SELECT manufacturer_id_xref FROM manufacturer_xref_user_mx WHERE user_id = ".$loggedInUser->user_id.") group by ci.id");
              if ($result_pro->num_rows==0) {
                  echo '<script>$("#productos_por_seleccionar").load("productos-disponibles.php?id='.$_GET["id"].'");</script>';
              }
?> 
        
            <?php 
            
            echo "<h3>Subcategorias</h3><hr><select style=\"width: 100%;\" id=\"subcategoria_seleccionada\" multiple size=\"20\">";
            while ($row = $result_pro->fetch_assoc()) {
                $rs0 = $mysqli->query("SELECT * FROM category_xref_user_mx WHERE user_id = ".$loggedInUser->user_id." AND category_id = ".$row["id"]);

                     if ($rs0->num_rows==0) {
                        echo "<option value=\"".$row["id"]."\">(".$row["total"].") ".utf8_encode($row["nombre"])."</option>";
                      }else{
                        echo "<option class=\"subsel\"  value=\"".$row["id"]."\">(".$row["total"].") ".utf8_encode($row["nombre"])."</option>";
                      }
                
            }
            echo "</select>";
         ?>
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.9.0/feather.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
  $( document ).ready(function() {

     $("#subcategoria_seleccionada").dblclick(function( event ) {
      $.post( "unset-category.php", { id: $(this).val() } );
      $("#subcategoria_seleccionada option:selected").removeClass("subsel");
      
     });
     $("#subcategoria_seleccionada").click(function( event ) {
      $.post( "set-category.php", { id: $(this).val() } );
      $("#subcategoria_seleccionada option:selected").addClass("subsel");

    $("#mis-productos").load("count-selected.php", function() {
      var cuantos = $("#mis-productos").html();
      
    });      
     });

     $("#subcategoria_seleccionada").change(function( event ) {
     	$("#productos_por_seleccionar").html("<p>cargando...</p>");
      $("#productos_por_seleccionar").load("productos-disponibles.php?id="+$(this).val());
     });

    
   });
</script>        
</body>
</html>