@extends('frontend.layouts.app')

@section('title', app_name() . ' | ' . __('navs.general.home'))

@push('after-styles')
<link rel="stylesheet" type="text/css" href="{{ secure_url('css/dashboard.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ secure_url('vendor/jplist/jplist.styles.css') }}"/>
	
<style>

	

	
	.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  height: 0;
  transition: .5s ease;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 27%, rgba(0, 0, 0, 0.65) 90%);		
  margin-left: 15px;
  margin-right: 15px;
}

.img-box-a:hover .overlay {
  height: 100%;
}

.text-overlay {
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: left;
  width: 100%;
  padding:15px;
}
</style>
@endpush

@section('content')
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card mb-2">
                <div class="card-header">
                    <div class="d-none d-sm-inline m-0 p-0" style="color:#FFFFFF;">
						<i class="fas fa-sliders-h"></i> Filter
					</div>
					<button type="button" data-toggle="collapse" data-target="#collapseFilter" aria-expanded="false" aria-controls="collapseFilter" class="d-inline btn btn-block d-sm-none" style="color: #FFFFFF; text-align: left;">
						<i class="fas fa-sliders-h"></i> @lang('dashboard.general.showfilter')
				    </button>
                </div>
				
					<div
						style="display: none"
						data-jplist-control="hidden-sort"
						data-group="shirts"
						data-path=".seasonorder"
						data-order="desc"
						data-type="number">
					</div>

				
				
                <div class="card-body collapse dont-collapse-sm" id="collapseFilter">
					<label class="filterCat" style="margin-top: 1px;">@lang('dashboard.general.searchtext')</label>
					<input
					 data-jplist-control="textbox-filter"
					 data-group="shirts"
					 data-name="my-filter-1"
					 data-path=".img-box-a"
					 data-id="textfilter"	   
					 type="text"
					 value=""
					 placeholder="@lang('dashboard.general.typetofilter')"
					 class="form-control"
					/>
									
                    
                </div>
            </div><!--card-->
        </div><!--col-->
		<div class="col-md-9">
			<div class="row" data-jplist-group="shirts">
							</div>
			
			<div class="row">
				<div class="col-12">

							<div
									data-jplist-control="pagination"
									data-group="shirts"
									data-items-per-page="12"
									data-current-page="0"
									data-name="pagination1"
								 	data-selected-class="jplist-selected-button"
								 	class="jplist-pagination">

								<button type="button" data-type="first">«</button>
								<button type="button" data-type="prev">‹</button>

								<div class="jplist-holder" data-type="pages">
									<button type="button" data-type="page">{pageNumber}</button>
								</div>

								<button type="button" data-type="next">›</button>
								<button type="button" data-type="last">»</button>
							</div>

				</div>
			</div>
			
        </div><!--col-->
		
    </div><!--row-->



@endsection

@push('after-scripts')
    <script src="{{ secure_url('vendor/jplist/jplist.min.js') }}"></script>
	<script src="{{ secure_url('vendor/lazysizes/lazysizes.min.js') }}" async=""></script>
<script>
    jplist.init({
        storage: 'sessionStorage', //'localStorage', 'sessionStorage' or 'cookies'
        storageName: 'collectionStorage' //the same storage name can be used to share storage between multiple pages
    });
</script>
@endpush