@extends('layout.admin_app')
@section('content')
@if($memberId == '0')
{{Form::open(['url'=>'/admin/member/insert','enctype' => 'multipart/form-data','id'=>'memberForm'])}}

<section class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1 class="m-0 text-dark">Members</h1>
      </div><!-- /.col -->
      <div class="col-sm-6">
        <div class="form-group">
            <button class="btn btn-secondary btn-md float-sm-right" type="submit"><i class="fa fa-save"></i> Add Member</button>
        </div>
      </div>
    </div>
  </div>
</section>
<section class="content">
    <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <div class="card">
        	  	<div class="card-body">
                 <h4>Add New</h4>
        	  			@include('admin.member.member_form')
      	  		</div>
      	  	</div>
      	  </div>
      	</div>
  	</div>
</section>
{{Form::close()}}
@else
{{Form::model($member, ['url'=>'/admin/member/update','enctype' => 'multipart/form-data'])}}
<section class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1 class="m-0 text-dark">Members</h1>
      </div><!-- /.col -->
      <div class="col-sm-6">
       <div class="form-group">
          <button class="btn btn-secondary btn-md float-sm-right" type="submit"><i class="fa fa-save"></i> Update Member</button>
        </div>
      </div>
    </div>
  </div>
</section>
<section class="content">
    <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <div class="card">
          	  	<div class="card-body">
                 <h4>Edit details</h4>
        	  			@include('admin.member.member_form')
      	  		</div>
      	  	</div>
      	  </div>
      	</div>
  	</div>
</section>
{{Form::close()}}
@endif
@endsection
@section('js_assets')
<script type="text/javascript">

   //Date range picker
  $('#datepicker').datetimepicker({
     format:'YYYY-MM-DD HH:mm:ss',
      pickDate: true,
      pickSeconds: true,
      pick12HourFormat: true
  });


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

		$.ajax({

	        url: '{!!url('admin/member/edit/deletePhoto')!!}',

	        type: 'POST',

	        data: {

	        	photo_id: photoId,
                id: member_id,


	        },
            dataType: "json",

	        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();
                    // $(".border-additional").hide();

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



	    })

	    .fail(function() {

	            alert( "error" );

	    });
	}

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

        //var photo = clickedElement.value;
        var formData = new FormData($('#memberForm')[0]);
        formData.append('mem_id', memberid);

    // var data = {
    //     additionalphoto: photo,
    //                mem_id: memberid,
    //     }
		$.ajax({

	        url: '{!!url('admin/member/edit/addPhotos')!!}',

	        type: 'POST',

	        data: formData,
            //dataType: "json",

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


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

	        },
            dataType: "json",
            async: true,
            cache: false,
            processData: false,
            contentType: false,
        })
	    .fail(function() {

	            alert( "error" );

	    });
	}


</script>
@endsection