<?php
  require_once("models/config.php");
  if(isUserLoggedIn()) { 
    
  }else{
    header("Location: index.php"); die(); 
  }
  
$mysqli = new mysqli("localhost", "bdicentralserver_sc", "Myl-PGfSbzcf", "bdicentralserver_sc");
?>   
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <title>Segmentador</title>


    <!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }

body {
  font-size: .875rem;
}

.feather {
  width: 16px;
  height: 16px;
  vertical-align: text-bottom;
}

/*
 * Sidebar
 */

.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 100; /* Behind the navbar */
  padding: 48px 0 0; /* Height of navbar */
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}

.sidebar-sticky {
  position: relative;
  top: 0;
  height: calc(100vh - 48px);
  padding-top: .5rem;
  overflow-x: hidden;
  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}

@supports ((position: -webkit-sticky) or (position: sticky)) {
  .sidebar-sticky {
    position: -webkit-sticky;
    position: sticky;
  }
}

.sidebar .nav-link {
  font-weight: 500;
  color: #333;
}

.sidebar .nav-link .feather {
  margin-right: 4px;
  color: #999;
}

.sidebar .nav-link.active {
  color: #007bff;
}

.sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather {
  color: inherit;
}

.sidebar-heading {
  font-size: .75rem;
  text-transform: uppercase;
}

/*
 * Content
 */

[role="main"] {
  padding-top: 133px; /* Space for fixed navbar */
}

@media (min-width: 768px) {
  [role="main"] {
    padding-top: 48px; /* Space for fixed navbar */
  }
}

/*
 * Navbar
 */

.navbar-brand {
  padding-top: .75rem;
  padding-bottom: .75rem;
  font-size: 1rem;
  background-color: rgba(0, 0, 0, .25);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}

.navbar .form-control {
  padding: .75rem 1rem;
  border-width: 0;
  border-radius: 0;
}

.form-control-dark {
  color: #fff;
  background-color: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .1);
}

.form-control-dark:focus {
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}      
.labelOn{font-weight: bold;}
.labelOff{font-weight: normal;}
#mis-productos{font-weight: bold;}
    </style>

    
    <!-- Custom styles for this template -->
    <link href="dashboard.css" rel="stylesheet">
  </head>
  <body>
    <nav class="navbar navbar-dark bg-dark flex-md-nowrap p-0 shadow">
  <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="segmentacion.php">Blue Diamond Innovation</a>
  <p style="color: #eeeeee;" >Tu tienda <a target="_blank" style="color: #ffffff;" href="<?php echo $loggedInUser->website; ?>"><?php echo $loggedInUser->website; ?></a></p>
  <ul class="navbar-nav px-3">
    <li class="nav-item text-nowrap">
      <a class="nav-link" href="salir.php">
        Salir
      </a>
    </li>
  </ul>
</nav>

<div class="container-fluid">
  <div class="row">

    <main id="mainsection" role="main" class="col-md-12 col-lg-12">
      <div class="row">
       <!--<div class="col-3">
        <a href="descargar.php" target="_blank" class="btn btn-default"><img src="002-export.png" width="24" /> <span id="mis-productos"></span> Productos seleccionados Activos</a> <?php //echo $loggedInUser->user_id; ?>
       </div>-->
       <div class="col-3">
        <a href="descargar-todos.php" target="_blank" class="btn btn-default"><img src="002-export.png" width="24" /> <span id="mis-productos"></span> Productos seleccionados</a> <?php //echo $loggedInUser->user_id; ?>
       </div> 
       <div class="col-3">
        <a target="_blank" href="<?php echo $loggedInUser->website; ?>/sync.php" class="btn btn-default"> <img src="001-sync.png" width="24" /> Sincronizar con mi tienda</a>
       </div>        
       
      </div>
      <hr>
 <div class="row">

    <div class="col-4">
        <h3>Seleccionar Marcas</h3>
        <hr>    
        <div style="height: 400px; overflow: scroll;">
          <div class="row">
<?php 

$result = $mysqli->query("SELECT fi.id, fi.marca, mxu.id AS selected FROM manufacturer_mx fi LEFT JOIN manufacturer_xref_user_mx mxu ON mxu.manufacturer_id_xref = fi.id AND mxu.user_id = ".$loggedInUser->user_id." ORDER BY fi.marca ASC");
while ($row = $result->fetch_assoc()) {
if (file_exists("assets/img/marcas/".$row["id"].".png")) {
    //$logo = "<img style=\"display: inline;\" width=\"100\" src=\"assets/img/marcas/".$row["id"].".png\">";
   $logo = utf8_encode($row["marca"]);
} else {
    $logo = utf8_encode($row["marca"]);
}
?>          
     
            <div class="col-4">
               <?php if ($row["selected"]!="") { ?>
               <label class="brand" style="font-size: 12px; display: inline-block; width: 150px; height: 20px;"><input style="display: inline;" data-id="<?php echo $row["id"]; ?>" data-action="set_unselected_manufacturer" class="manufacturer" type="checkbox" name="" checked="checked"><?php echo $logo; ?></label>
               <?php }else{ ?>
                <label class="brand" style="font-size: 12px; display: inline-block; width: 80px; height: 20px;"><input data-id="<?php echo $row["id"]; ?>" data-action="set_selected_manufacturer" class="manufacturer" type="checkbox" name=""><?php echo $logo; ?></label>
               <?php } ?>
              </div>
    
<?php } ?>  
</div>   
</div>   
    </div>
    <div class="col-4">
      <div id="categorias_por_seleccionar"></div>
    </div>
    <div class="col-4">
      <div id="subcategorias_por_seleccionar"></div>
    </div>
    <div class="col-12">
      <div id="productos_por_seleccionar"></div>
    </div>    
  </div>      
      
      

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

<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() {
    
    $("#products_selected").html("cargando...");
    $("#products_selected").load("selected.php");
    
    $("#categorias_por_seleccionar").load("categorias-disponibles-por-marca.php", function() {
    });

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


    $(".manufacturer").click(function( event ) {
      if($(this).is(':checked')) {  
          var action = "insert_manufacturer";
        } else {  
          var action = "remove_manufacturer";
        } 

        
        $.post( "api.php", { action: action, id: $(this).data("id") }, function( data ) {
          $("#products_selected").load("selected.php");
          $("#mis-productos").load("count-selected.php", function() {
            var cuantos = $("#mis-productos").html();
            if (cuantos>0) {$("#publicar").show();}else{$("#publicar").hide();}
          });
          $("#categorias_por_seleccionar").load("categorias-disponibles-por-marca.php", function() {});    
            $("#subcategorias_por_seleccionar").html("");
            $("#productos_por_seleccionar").html("");
          if (data!="no") {alert(data);}
        });

        
     });    
$( "label" ).hover(
  function() {
    $( this ).addClass("labelOn");
  }, function() {
    $( this ).removeClass("labelOn");
  }
);

    $(document).on('keyup', '#myInput', function(){
      var value = $(this).val().toLowerCase();
      $("#myTable tr").filter(function() {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
      });
    });

    $(document).on('click', '.product', function(){
        if($(this).is(':checked')) {  
          var action = "insert";
          var cuantos = $("#mis-productos").html();
          var sumatoria = parseInt(cuantos) + 1;
          $("#mis-productos").html(sumatoria);
          if (sumatoria>0) {$("#publicar").show();}else{$("#publicar").hide();}
        } else {  
          var action = "delete";
          var cuantos = $("#mis-productos").html();
          var sumatoria = parseInt(cuantos) - 1;
          $("#mis-productos").html(sumatoria);
          if (sumatoria>0) {$("#publicar").show();}else{$("#publicar").hide();}
        }        
        $.post( "api.php", { action: action, id: $(this).data("id") } );
    });

    $(document).on('click', '#nuevos', function(){
        $("#mainsection").html("cargando...").load("nuevos.php");
    });

    $(document).on('click', '#por-seleccionar', function(){
        $("#mainsection").html("cargando...").load("por-seleccionar.php");
    });

    $(document).on('click', '#seleccionados', function(){
        $("#mainsection").html("cargando...").load("selected.php");
    });


   });
</script>
</html>
