<?php
session_start();
require_once ("../conexion.php");
require_once('../include/sesiones.php'); 
$action = (isset($_REQUEST['action'])&& $_REQUEST['action'] !=NULL)?$_REQUEST['action']:'';
if($action == 'ajax'){
	$q = mysqli_real_escape_string($con,(strip_tags($_REQUEST['q'], ENT_QUOTES)));
	include '../include/pagination.php';
	$page= (isset($_REQUEST['page']) && !empty($_REQUEST['page']))?$_REQUEST['page']:1;
	$per_page= 11; //how much records you want to show
	$adjacents= 4; //gap between pages after number of adjacents
	$offset= ($page - 1) * $per_page;

	$count_query=mysqli_query($con, "SELECT count(*) AS numrows FROM familias where empresa='$empresa' and fam_nombre like '%$q%'");
	$row= mysqli_fetch_array($count_query);
	$numrows = $row['numrows'];
	$total_pages = ceil($numrows/$per_page);
	$reload = '../F_familias.php';
	$sql=mysqli_query($con,"SELECT * FROM familias where empresa='$empresa' and fam_nombre like '%$q%' order by fam_nombre asc LIMIT $offset,$per_page");
	if ($numrows>0)
	{
?>
<div class="table-responsive">
	<table class="table table-bordered table-hover table-striped">
		<thead>
			<tr>
				<th width="15%">LOGO</th>
				<th>NOMBRE</th>
				<th width="20%"></th>
			</tr>
		</thead>
		<tbody>
		<?php
			while ($reg=mysqli_fetch_array($sql)){
			$id=$reg['fam_id'];
        ?>
            <input type="hidden" value="<?php echo $reg['fam_nombre'];?>" id="fam_nombre<?php echo $reg['fam_id'];?>">
			<tr>
				<td> <?php
	                    $files = glob("../img/categorias/$id.jpg");
	                    if(count($files) > 0) 
	                    { 
	                        foreach($files as $file) 
	                        { 
	                    ?>
	                   
	                        <?php $nu=rand(1,1000); $nu; ?>
	                        <a href="img/categorias\<?php echo $id.'.jpg?' .$nu .''; ?>" class="ui-lightbox">
	                         <center><div class="contenedor"> <img  class="categorias" src="img/categorias\<?php echo $id.'.jpg?' .$nu .''; ?>" alt=""/></div></center>
	                        </a>
	                   
	                    <?php } } else { ?>
	                    
	                        <a href="img/categorias/sin_imagen.jpg" class="ui-lightbox">
	                       <center>     <div class="contenedor"><img class="categorias" src="img/categorias/sin_imagen.jpg" alt=""/></div></center>
	                        </a>
	                   
	                    <?php } ?>
	                	</td>
						<td> <?php 
						if ($tienda_online=='si'){
						if ($reg['fam_destacado']=='si') { ?>

							 <a href="#" onclick="estado('<?php echo $reg['fam_id'];?>')"> <img src="img/categorias/destacado.jpg" alt="" style="width: 3%; height: 3%; " /></a>

							<?php } else { ?>

							<a href="#" onclick="estado('<?php echo $reg['fam_id'];?>')"> <img src="img/categorias/no-destacado.jpg" alt="" style="width: 3%; height: 3%; " /></a>

						<?php } } ?>&nbsp;<?php  echo $reg['fam_nombre'];?>

						</td>
						<td>
					<?php
        				if ($reg['fam_nombre']=='SIN FAMILIA' or $reg['fam_nombre']=='SIN CATEGORIA')
       						{ ?>
          					 	<a data-id="<?php echo $reg['fam_id'];?>" class="btn btn-cat btn-xs btn-success"  title="Catalogo"><i class="btn-icon-only icon-print"></i></a>
        				<?php	}
        				else
        					{ 
        				?>
                    		 <a data-id="<?php echo $reg['fam_id'];?>" class="btn btn-cat btn-xs btn-success"  title="Catalogo"><i class="btn-icon-only icon-print"></i></a>
                    		 <a href="#" class='btn btn-xs btn-info' title='Editar' onclick="obtener_datos('<?php echo $reg['fam_id'];?>');" data-toggle="modal" data-target="#modificar_familia"><i class="btn-icon-only icon-edit"></i></a> 
                    		
                    		<!--<a href="libraries/tcpdf/documentos/catalogo.php?fam_id=<?php echo $reg['fam_id'];?>" class='btn btn-xs btn-warning' target="black" title='Catalogo'><i class="btn-icon-only icon-print"></i></a> -->

                    		
           					
           					<a href="#" onclick="eliminar('<?php echo $reg['fam_id'];?>')" title="Eliminar" class="btn btn-xs btn-danger"> <i class="btn-icon-only icon-remove"></i></a>
					<?php } ?>
				</td>
			</tr>
		<?php } ?>
				<tr>
					<td colspan=3>
						<span class="pull-right">
							<?php echo paginate($reload, $page, $total_pages, $adjacents);?>
						</span>
					</td>
				</tr>
			</tbody>
		</table>
		</div>		
<?php
		}
	}
?> 
<script>
function eliminar (fam_id)
{
    if (confirm("Realmente deseas eliminar la categoria")){ 
    $.ajax({
        type: "GET",
        url: "php_familias/eliminar_familia.php",
      	data: "fam_id="+fam_id,
     	beforeSend: function(objeto){
         $('#resultados').html('<center><img src="./img/ajax-loader.gif"> CARGANDO...</center>');
      	},
        success: function(datos){
    	$("#resultados").html(datos);
    	load(1);
    	}
      	});
    }
} 
function obtener_datos(id){
      var fam_nombre = $("#fam_nombre"+id).val();
      $("#id").val(id);
      $("#nombre").val(fam_nombre);
    }


function estado(id) 
{ 
    $.ajax({
        type: "POST",
        url: "php_familias/cambiar_estado.php",
        data: "fam_id="+id,
        success: function(datos){
        $("#resultados").html(datos);
        load(1);
    }
    });
} 

</script>



<script type="text/javascript">
// modal para tarifas del catalogo

$(".btn-cat").click(function(){
      id = $(this).data("id");
      $.get("php_familias/form_tarifa.php","id="+id,function(data){
        $("#form-cat").html(data);
      });
      $('#editModal').modal('show');
    });
</script>

<div class="modal fade" id="editModal" tabindex="-1" role="dialog"  >
   <div class="modal-dialog ">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Catalogo</h4>
            </div>
                <div class="modal-body">
                    <div id="form-cat"></div>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
</div><!-- /.modal -->


</script>

<style type="text/css">
/*Supongamos que nuestro contenedor mide 150px x 150px*/
.contenedor{
  	background-color: white;
  	width:60px;
  	height:30px;
}
/*Aplicamos la propiedad object-fit cover, ajustar su tamaño y no perder la proporcion de nuestra imagen*/
.categorias{
  	object-fit: scale-down;
  	width:100%;
  	height:100%;
}

</style>