@extends('frontend.layout.master')

@section('content')
<div id="uploadimageModal" class="modal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Upload & Crop Image</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12 text-center multiple-image-div">
                        <div id="image_demo" class="image_demo" style="width:350px; margin-top:30px"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-success crop_image">Crop & Upload Image</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<div class="bg-white border-bottom">
			<div class="container">
				<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>
</div>

<div class="container">
<div class="app-content  my-3 my-md-5">
					<div class="side-app">
						
						<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="">
											<img src="{{ asset('upload/property/thumb400/'.$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>

								<span><h5 id="multipiccheck" style="color: red">  </h5></span>

							<div class="card-options">
								<form class="pull-right" action="{{ route('front.mainPicUpdate', base64_encode($data->id)) }}" method="post" enctype="multipart/form-data" id="mainPicForm" onsubmit="return mainPicFun()" class="pull-right">
											{{csrf_field()}}
											<h5 id="mainpiccheck" style="color: red">  </h5>
											<label for="galpic">
												
												<input type="file" name="galpic" id="mainpic">

												<textarea name="galpics"  id="galpics" style="display: none;" ></textarea>

										<div id="uploaded_image"></div>
												

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

								
								<!-- <div class="card-options">
									<a href="#" class="card-options-collapse" data-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
									
								</div> -->
							</div>
							</div>
							
							@if(!$allPic->isEmpty())
							<div class="card-body">
								<div class="list-gallery">
									<ul id="" class="">
										@foreach($allPic as $val)
											<li class="" data-responsive="{{ asset('upload/property/thumb400/'.$val->prop_pic) }}" data-src="{{ asset('upload/property/thumb400/'.$val->prop_pic) }}" >
												<a href="javascript:void(0)">
													<img class="img-responsive" src="{{ asset('upload/property/thumb400/'.$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>
</div>
@endsection


@section('scripts')
<script type="text/javascript">
	function mainPicFun() {

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

				return false;
			}
		else
		{
			return true;
		}
	}

</script>

<script>
     $(document).ready(function () {

     var image_crop = $('#image_demo').croppie({
            enableExif: true,
            viewport: {
                width: 400,
                height: 400,
                type: 'square' //circle
            },
            boundary: {
                width: 300,
                height: 300
            }
        });

        $('#mainpic').on('change', function () {
            var reader = new FileReader();
            reader.onload = function (event) {
                image_crop.croppie('bind', {
                    url: event.target.result
                }).then(function () {
                    console.log('jQuery bind complete');
                });
            }
            console.log(this.files[0]);
            reader.readAsDataURL(this.files[0]);
            $('#uploadimageModal').modal('show');
        });

        $('.crop_image').click(function (event) {
            image_crop.croppie('result', {
                type: 'canvas',
                size: 'viewport'
            }).then(function (response) {
            	$('#galpics').html(response);
            	$('#uploadimageModal').modal('hide');
                // alert(response);
                
        });
    });

});

                            
</script>
@endsection