@php
    $nxpage = 12;
    $items = 0;
    $pagina = 1;
@endphp
@foreach($products as $key => $product)
    <div class="col-xs-12 col-sm-6 col-md-3 content-pro pagina" pageid="{{$pagina}}">
        <div class="col-xs-12 item pb15">
            @if($product->offsale == 1)
            <div class="descbox">
                {{ $product->porcentoffsale }}%
            </div>
            @endif
            <a href="{{url('')}}/producto/{{ $product->id }}">
            <div class="box-image">
                <img src="{{ asset($product->image) }}" alt="{{ $product->name }}">
            </div>
            </a>
            <div class="marca">
                {!! $product->marca->name !!}              
            </div>
            <div class="detalle">                                
                {!! str_limit( $product->name , $limit = 40, $end = '...') !!}
            </div>
            @if($product->offsale == 1)
                <div class="price">               
                    <del>${{ number_format($product->price, 0) }}</del><br>
                    ${{ number_format($product->price - ((($product->price * $product->porcentoffsale) / 100)), 0)  }}
                </div>
            @else
                <div class="price mt20">               
                    ${{ number_format($product->price, 0) }}
                </div>
            @endif

            <div class="cartbuttom text-right mt20">
                <img src="{{ asset("img/icon_car_blue.png") }}" onclick="addtocart({{ $product->id }},1)">
            </div>
        </div>
    </div>                
    @php
        $items++;
        if($items == $nxpage){
            $items=0;
            $pagina++;
        }
    @endphp
@endforeach

@if($pagina > 1)

<div class="col-xs-12 text-right">
@php
    $items = 0;
    $pagina = 1;
    $pgid = 1;
@endphp
<nav>
    <ul class="pagination">
        <li class="linkpg" id="pg{{$pgid}}"><a onclick="showpage(1,{{$pgid}})" style="cursor:pointer;">&laquo;</a></li>
        @php $pgid++; @endphp
@foreach($products as $key => $product)
    @php        
        $items++;
        if($items == $nxpage){
            $items=0;
            echo '<li class="linkpg" id="pg'.$pgid.'"><a onclick="showpage('.$pagina.','.$pgid.')" style="cursor:pointer;">'.$pagina.'</a></li>';
            $pagina++;  
            $pgid++;          
        }
    @endphp              
@endforeach
        @php
            $pgid++;
            $pagina--;
        @endphp
        <li class="linkpg" id="pg{{$pgid}}"><a onclick="showpage({{$pagina}},{{$pgid}})" style="cursor:pointer;">&raquo;</a></li>
    </ul>
</nav>
</div>


<script type="text/javascript">    
    function showpage(page,idlink){   
        $( ".linkpg" ).each(function() {
            $( this ).removeClass('active'); 
        }); 
        $( '#pg'+idlink ).addClass("active");
        $( ".pagina" ).each(function() {
            $( this ).show(); 
            id = $( this ).attr("pageid");
            if(id != page){
                $( this ).hide();    
            }
            
        });              
    }    
    $( document ).ready(function() {    
        $( '#pg2' ).addClass("active");  
        $( ".pagina" ).each(function() {
            $( this ).show(); 
            id = $( this ).attr("pageid");
            if(id != 1){
                $( this ).hide();    
            }            
        });  
    });
</script>

@endif

@section('scripts')
    
@stop