@extends('admin/default')

@section('css')
 
 <style type="text/css">
	.my-alert-success h5 {
	    font-size: 16px;
	}
	.alert-danger h5 {
	    font-size: 16px;
	}
	.my-alert-success {
	   color: #28a745;
	   background-color: #d4edda;
    	border-color: #c3e6cb;
	}
 </style>
@endsection

@section('button')
   <a type="button" href="{{ route('admin.portfolios.create') }}" class="btn btn-sm btn-outline-primary ml-3 pr-3 pl-3 add-new">Add New</a>
@endsection

@section('content')
	<section class="content">
		<div class="container-fluid">
			<div class="row">
				<div class="col-12">
					<div class="card card-primary">
						<div class="card-header">
							<h4 class="card-title">Portfolio Gallary with filter tab</h4>
						</div>
						<div class="card-body">
							
							<div>
								<div class="btn-group w-100 mb-2">
									<a class="btn btn-info active" href="javascript:void(0)" data-filter="all"> All images </a>
									<a class="btn btn-info" href="javascript:void(0)" data-filter="commercial"> Commercial </a>
									<a class="btn btn-info" href="javascript:void(0)" data-filter="hospitility"> Hospitility </a>
									<a class="btn btn-info" href="javascript:void(0)" data-filter="residential"> Residential </a>
									<a class="btn btn-info" href="javascript:void(0)" data-filter="retail"> Retail </a>
								</div>
							</div>

							<div>
								<div class="filter-container p-0 row" style="padding: 3px; position: relative; width: 100%; display: flex; flex-wrap: wrap; height: 307px;">
									@if(!empty($portfolios))
										@foreach($portfolios as $portfolio)
											<div class="filtr-item col-sm-2" data-category="{{ $portfolio->category_id }}" data-sort="white sample" style="opacity: 1; transform: scale(1) translate3d(0px, 0px, 0px); backface-visibility: hidden; perspective: 1000px; transform-style: preserve-3d; position: absolute; width: 156.4px; transition: all 0.5s ease-out 0ms, width 1ms ease 0s;">
												<a href="{{ asset($portfolio->main_image) }}" data-toggle="lightbox" data-title="sample 1 - white">
													<img src="{{ asset($portfolio->thumb_image) }}" class="img-fluid mb-2" alt="white sample">
												</a>
											</div>
										@endforeach
									@endif
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
@endsection

@section('js')

<script src="{{ asset('plugins/filterizr/jquery.filterizr.min.js')}}"></script>

<script>
     $(function () {
	    $(document).on('click', '[data-toggle="lightbox"]', function(event) {
	      event.preventDefault();
	      $(this).ekkoLightbox({
	        alwaysShowClose: true
	      });
	    });

	    $('.filter-container').filterizr({gutterPixels: 3});
	    $('.btn[data-filter]').on('click', function() {
	      $('.btn[data-filter]').removeClass('active');
	      $(this).addClass('active');
	    });
	  })

	var slider = (function () {

		var url = "{{url('/')}}"+"/admin/sliders/";

		var swalTitle = 'Really destroy this ?';
		var confirmButtonText = 'Yes';
		var cancelButtonText = 'No';
		var errorAjax = "Something went wrong";
		var title = "Add New";
		
		var onReady = function () {
			$('#progeamme_panel').on('click', 'td a.ajax-edit', function (event) {
				event.preventDefault();
				var that  = $(this);
				var url   = that.attr('href');
				var title = "Slider Edit";
				sbm.loadMultiPartForm(url, $(this), errorAjax, title);
			})
			.on('click', 'td a.ajax-view', function (event) {
				event.preventDefault();
				var that  = $(this);
				// console.log(that); return false;

				var url   = that.attr('href');
				var title = "Service View";
				sbm.loadView(title, event, $(this), url)
			})
			.on('click', 'td a.ajax-delete', function (event) {
				event.preventDefault();
				var url   = $(this).attr('href');
				// console.log(url); return false;
				sbm.destroy(event, $(this), url, swalTitle, confirmButtonText, cancelButtonText, errorAjax)
			});

			// add new Slider
			$(document).on('click', '.add-new', function (event) {
				event.preventDefault();
				var url   = $(this).attr('href');
				sbm.loadMultiPartForm(url, $(this), errorAjax, title);
			});
		}

		return {
			onReady: onReady
		}

	})()

$(document).ready(slider.onReady)

</script>
@endsection