@extends('app')

@section('content')

<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
        @if (session('status'))
        <div class="alert alert-success">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            {{ session('status') }}
        </div>
        @endif
    </div>
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>Listado de productos</h2>
                <ul class="nav navbar-right panel_toolbox">
                    <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></li>
                </ul>
                <div class="clearfix"></div>
            </div>
            <div class="x_content">
                <products :data='{!! @json_encode($products) !!}'/>
            </div>
            <div class="text-right">
                {{$products->links()}}    
            </div>
        </div>
    </div>
</div>

@endsection
@push('styles')
<style>
.pagination {
    float: right;
}
.pagination>.active>span{
    background-color: #0C2340;
    border-color: #0C2340;
}
.label-info {
    background-color: #F2A900;
}
.jambo_table tbody tr:hover td {
    background: #fff1d0;
    border-top: 1px solid #ffdc8c;
    border-bottom: 1px solid #ffc848
}
.pagination>.active>span:hover {
    background-color: #0C2340;
    border-color: #0C2340;
}
</style>
@endpush