@extends('frontend.layout.master')

@section('content')

<div class="app-content  my-3 my-md-5">
					<div class="side-app">
						<div class="page-header">
							<h1 class="page-title">Main Picture</h1>
							<ol class="breadcrumb">
								<li class="breadcrumb-item">
									@if(Auth::user())
										<a href="{{route('front.profile')}}">Home</a>
									@else
										<a href="{{route('front.dashboard')}}">Home</a>
									@endif
								</li>
								<li class="breadcrumb-item active" aria-current="page">Listing Gallery</li>
							</ol>
						</div>
						<div class="row">
							<div class="col-md-8 col-sm-6 col-xs-12">
							@if(Session::has('success'))

									<div class="alert alert-primary">
										<p>{{ Session::get('success') }}</p>
									</div>

									@endif

									@if(Session::has('errors'))

										<div class="alert alert-danger">
											<p>{{ Session::get('errors') }}</p>
										</div>

							@endif
							</div>
						</div>
						
						<div class="row">
							<div class="col-md-12 col-sm-6 col-xs-12">
								<div class="card">
									<div class="card-body">
										<div class="image gallery gallery-first">
											<img  src="{{ asset('upload/property/'.$data->picture) }}" alt="image">
											<div class="mask"></div>
										</div>
										
									</div>
							  </div>
							</div>
						</div>


     					<div class="card">
							<div class="card-header">
								<h3 class="card-title">Multiple Image Gallery</h3>
								<form action="{{ route('front.mainPicUpdate', base64_encode($data->id)) }}" method="post" enctype="multipart/form-data" id="mainPicForm" onsubmit="return mainPicFun()">
											{{csrf_field()}}
											<h5 id="mainpiccheck" style="color: red">  </h5>
											<label for="galpic">
												<i class="fa fa-camera"></i>
												<input type="file" name="galpic[]" multiple id="mainpic" style="display:none">
												

											</label>
											<input type="submit" name="submit" value="Update" class="btn btn-success">
											
										</form>

								<span><h5 id="multipiccheck" style="color: red">  </h5></span>
								<div class="card-options">
									<a href="#" class="card-options-collapse" data-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
									
								</div>
							</div>
							
							@if(!$allPic->isEmpty())
							<div class="card-body">
								<div class="demo-gallery">
									<ul id="lightgallery" class="list-unstyled row">
										@foreach($allPic as $val)
											<li class="col-xs-6 col-sm-4 col-md-3" data-responsive="{{ asset('upload/property/'.$val->prop_pic) }}" data-src="{{ asset('upload/property/'.$val->prop_pic) }}" >
												<a href="">
													<img class="img-responsive" src="{{ asset('upload/property/'.$val->prop_pic) }}" alt="Thumb-1">
												</a>
												<a href="#deleteModal{{$val->id}}" title="Delete" data-toggle="modal"class="btn btn-danger btn-sm"><i class="fa fa-trash"></i> Delete</a>
												@include('frontend.partial.gallery_del_modal')
											</li>
										@endforeach							
									</ul>
								</div>
							</div>
							@endif
						</div>
					</div>
			</div>

@endsection




<script type="text/javascript">
	function mainPicFun() {

		var img = $('#mainpic').val();
		
		if(img == '')
			{
				$('#mainpiccheck').html('** Please Select Picture First ') ;
				setTimeout(function(){
					  $('#mainpiccheck').remove();
					}, 2000);

				return false;
			}
		else
		{
			return true;
		}
	}



	function multiPicFun() {

		var img = $('#multiplePic').val();
		
		if(img == '')
			{
				$('#multipiccheck').html('** Please Select Picture First');
				setTimeout(function(){
					  $('#multipiccheck').remove();
					}, 2000);

				return false;
			}
		else
		{
			return true;
		}
	}



	function addmultiPicFun() {

		var img = $('#addmultiplePic').val();
		
		if(img == '')
			{
				$('#addmultipiccheck').html('** Please Select Picture First');
				setTimeout(function(){
					  $('#addmultipiccheck').remove();
					}, 2000);

				return false;
			}
		else
		{
			return true;
		}
	}
</script>