@extends('common.dashboard')

@section('title','Add/update doctor photo')
@section('content')
	<div class="row">
	    <div class="col-12">
	        <div class="page-title-box d-flex align-items-center justify-content-between">
	            <h4 class="mb-0 font-size-18">Doctor photo settings</h4>

	            <div class="page-title-right">
	                <ol class="breadcrumb m-0">
	                    <li class="breadcrumb-item"><a href="javascript: void(0);">Home</a></li>
	                    <li class="breadcrumb-item"><a href="/common/doctors">Doctors</a> </li>
	                    <li class="breadcrumb-item active">Set photo </li>
	                </ol>
	            </div>
	            
	        </div>
	    </div>
	</div>    

	<div class="result"></div>
	<div class="mb-5">
		<div style="width:400px;margin: 0px auto;background: silver">
			<img id="image_demo" src="{{url('/images/doctor/original/'.$doctor->photo)}}" style="max-width: 100%">
			<input type="hidden" name="oldPhoto" value="{{$doctor->photo}}">
		</div>
		<div style="width:400px;margin: 0px auto; text-align: center">
			<button class="btn btn-success crop_image" type="button">Crop & Upload Image</button>
		</div>
	</div>

<script src="{{asset('back/assets/js/jquery.min.js')}}"></script>
<link rel="stylesheet" href="{{ asset('back/croppie/croppie.css')}}" />

<script>  
$(document).ready(function(){
	var url = $('#base_url').val();
	$image_crop = $('#image_demo').croppie({
		enableExif: true,
		viewport: {  width:255, height:255,type:'square'},
		boundary:{ width:300, height:300 }
	});

	$('.crop_image').click(function(event){
		$(this).html('Working ...');
		$image_crop.croppie('result', {
		  type: 'canvas',ize: 'viewport'
		}).then(function(response){
			let imgType = response.split(";")[0];
		   	let img = response.split(";")[1];
		  $.ajax({
			url:url + "/common/crop-doctor-photo/{{$doctor->id}}",
			type: "post",
			data:{oldPhoto:'{{$doctor->photo}}', image_ext:imgType, image: img, _token: '{{csrf_token()}}'},
			success:function(data){
				$('.result').html(data);
				$(this).html('Crop & Upload Image');
			}
		  });
		})
	});

});  
</script>
@endsection