<?php
session_start();
require_once('../conexion.php');
require_once('../include/sesiones.php');
?>
<table class="table table-bordered table-striped">     
    <thead>
        <tr>               
            <th width="5%">IMAGEN</th>
            <th width="8%">NOMBRE</th>  
            <th width="8%">URL</th> 
            <th width="5%">UBICACION</th>  
            <th width="5%"></th>                
        </tr>
    </thead>    
    <?php
        $registros=mysqli_query($con,"SELECT * from slider where empresa='$empresa' order by  sli_ubicacion desc ") or die(mysqli_error($con));
        while ($reg=mysqli_fetch_array($registros)){

            $sli_id=$reg['sli_id']
    ?>
        <tr>
            <td class="description"> <?php
                        $files = glob("../shop/img/slider/$sli_id.jpg");
                        if(count($files) > 0) 
                        { 
                            foreach($files as $file) 
                            { 
                        ?>
                       
                            <?php $nu=rand(1,1000); $nu; ?>
                            <a href="shop/img/slider/<?php echo $sli_id.'.jpg?' .$nu .''; ?>" class="ui-lightbox">
                             <center><div class="contenedor"> <img  class="marca" src="shop/img/slider/<?php echo $sli_id.'.jpg?' .$nu .''; ?>" alt=""/></div></center>
                            </a>
                       
                        <?php } } else { ?>
                        
                            <a href="shop/img/slider/sin_imagen.jpg" class="ui-lightbox">
                           <center><div class="contenedor"><img class="marca" src="shop/img/slider/sin_imagen.jpg" alt=""/></div></center>
                            </a>
                       
                        <?php } ?></td>
            <td class="description">  <?php echo  $reg['sli_nombre']; ?></td>
            <td class="description">  <?php echo  $reg['sli_url']; ?></td>
            <td class="description">  <?php echo  $reg['sli_ubicacion']; ?></td>
            <td >
                 <a href="#" data-id="<?php echo $reg['sli_id'];?>" title="Modificar" class="btn btn-detalle btn-xs btn-warning"><i class="btn-icon-only icon-edit"></i></a>

             <!--   <a href="#" id="del-<?php echo $reg["sli_id"];?>"  title="Eliminar" class="btn btn-xs btn-danger"> <i class="btn-icon-only icon-remove"></i></a>
               
            </td>
            <script>
            $("#del-"+<?php echo $reg["sli_id"];?>).click(function(e){
              e.preventDefault();
              p = confirm("Estas seguro?");
              if(p){
                $.get("./php_pagina_online/eliminar_imagen.php","sli_id="+<?php echo $reg["sli_id"];?>,function(data){
                  loadTablaslider();
                });
              }
            });
            </script> -->
        </tr>
    <?php }?>
</table>

<script type="text/javascript">

    $(".btn-detalle").click(function(){
      id = $(this).data("id");
      $.get("./php_pagina_online/form_modificar_imagen.php","id="+id,function(data){
        $("#form-detalle").html(data);
      });
      $('#Modaldetalle').modal('show');
    });

</script>

<div class="modal fade" id="Modaldetalle" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">MODIFICAR</h4>
            </div>
            <div class="modal-body">
                <div id="form-detalle"></div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


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

</style>
