@extends('layout.member_app') 
@section('content')

<div class="main-content container-fluid"> 
	<div class="row breadcrumb-holder">
		<div class="container">
			<nav aria-label="breadcrumb">
			<ol class="breadcrumb">
				<li class="breadcrumb-item"><a href="#">Home</a></li>
				<li class="breadcrumb-item active" aria-current="page">My Photos</li>
			</ol>
			</nav>
		</div>
	</div>
	<div class="row">
	  	<section class="filter-search container-fluid">
		  	<div class="container">
		  	<div class="row">
		  		<div class="col-lg-3 p-0 my-account">
				 	<div>
				        <ul class="nav nav-tabs tabs-left flex-column">
				            <li class="col nav-item">
				                <a class="nav-item nav-link active" href="{{url('/my-account/photos')}}">Photos</a>
				           
				        </ul>
				    </div>
				</div>
		  		<div class="col-lg-9 pl-30 pr-0 search-result">
					<div class="tab-pane container" id="photos">
		  			<div class="row mt-40">
				      	<div class="col-12 p-0">
				      		
							{{Form::open(['url'=>'/my-account/photo/add','enctype' => 'multipart/form-data','class'=>'form-inline upload-multiple-photos file-upload','id' => 'addPhotoForm'])}}
								<div class="file-upload">
									<div class="file-select">
										<div class="file-select-button btn btn-normal" id="fileName">
											<i class="icon"></i>Add Photo
										</div>
										<input type="file" name="additional_photo_url[]" id="additionalPhotoUrl" multiple>
									</div>
								</div>
							 {{Form::close()}}

					        <div class="card card-lite">
					          	<div class="card-body p-20">
					            	<div class="owl-carousel owl-theme  gallery" id="MemberPhotos"> 
					            		@foreach($additionalPhotos as $photo)
										<div class="item">
											<a href="#" data-toggle="modal" data-target="#">
											<img src="{{Storage::disk('public')->url('/'.$photo->photo_url)}}" alt="Member"/>
											</a>
											<button class="btn btn-delete btn-sm" onclick="return deletePhoto('{!!$photo->id!!}', this);">Delete</button>
										</div>
										@endforeach
					              </div>
					            </div>
				                <!-- Photo Modal-->
					           <!--  <div id="Photo01" class="modal fade" role="dialog">
					              <div class="modal-dialog">
					                <div class="modal-content">
					                  <button type="button" class="close" data-dismiss="modal">X</button>
					                  <div class="modal-body">
					                    <img src="{{url('theme_member/img/photo-01.jpg')}}" alt="Member"/>
					                  </div>
					                </div>
					              </div>
					            </div> -->
					            <!-- Photo Modal End-->
				            </div>
				    	</div>
					</div>
				</div>
		  		</div>
		  	</div>
		  </div>
		</section>
	</div>
</div>
@endsection
@section('js_assets')
 <script>

 	$.ajaxSetup({
	      headers: {
	        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') 
	      }
	}); 

  // Member Photos
  $('#MemberPhotos').owlCarousel({
    loop:false,
    nav:true,
    margin:25,
    responsive:{
    0:{
    items:2
    },
    1000:{
    items:3
    },            
    1300:{
    items:4
    }
    }
    });

  $('#additionalPhotoUrl').change(function() { 
	    // select the form and submit
	    $('#addPhotoForm').submit(); 
	});

	function deletePhoto(photoId, clickedElement){
		$.ajax({

	        url: '{!!url('/my-account/photo/delete')!!}',

	        type: 'POST',

	        data: {

	        	photo_id: photoId
	        },

	        success: function (response) {
	        	console.log(response.status);
	        	const Toast = Swal.mixin({
			      toast: true,
			      position: 'top-end',
			      showConfirmButton: false,
			      timer: 6000
			    });
	        	if(response.status == 'success'){
	        		//console.log(response.status);
	        		//Alert sent interest
	        		Toast.fire({
				        icon: 'error',
				        title: '\xa0\xa0\xa0\xa0\xa0' +'Photo Deleted'
				    })
	        		$(clickedElement).closest('.item').fadeOut();


	        	}else{
	        		//Alert warning
	        		Toast.fire({
				        icon: 'error',
				        title: '\xa0\xa0\xa0\xa0\xa0' +'Couldnot delete photo'
				    })
	        	}
	        },

	        dataType: "json",

	    })

	    .fail(function() {

	            alert( "error" );

	    });
	}
</script>
@endsection