@extends('common.dashboard')

@section('title','Add New Doctor')
@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 Registration</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 active">Doctors form</li>
	                </ol>
	            </div>
	            
	        </div>
	    </div>
	</div>    
	<!-- <div > -->
		<form method="post" class="row" enctype="multipart/form-data">
		@include('common.doctor.doctor_form')
		@include('common.doctor.chamber_form')
		</form>
	<!-- </div> -->
<style type="text/css">
	label {font-weight: normal; color: #8e8e8e;}
	.multi_option{padding:4px 0px;border-bottom:1px solid silver;}
</style>


<div id="uploadimageModal" class="modal" role="dialog">
	<div class="modal-dialog">
		<div class="modal-content">
      		<div class="modal-body">
        		<div class="row">
  					<div class="col-md-12 text-center">
						<div id="image_demo"></div>
						<button type="button" class="btn btn-success crop_image">Crop & Upload Image</button>
  					</div>
				</div>
      		</div>
    	</div>
    </div>
</div>


<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	var url = $('#base_url').val();

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

    $('#upload_image').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');
          });
        }
        reader.readAsDataURL(this.files[0]);
        $('#uploadimageModal').modal('show');
    });

    $('.crop_image').click(function(event){
        $image_crop.croppie('result', {
          type: 'canvas',size: 'viewport'
        }).then(function(response){
          	$.ajax({
			    type: "POST",
			    url: url+ "/common/upload-photo",
			    data: {photo:$('[name=photo]').val(),"image": response, _token: '{{csrf_token()}}' },
			    success: function (response) {
			        $('#uploadimageModal').modal('hide');
              		$('#uploaded_image').html(response);
			    },
			    error: function (data, textStatus, errorThrown) {
			        console.log(response);
			    },
			});
        })
    });
});  
</script>
<script type="text/javascript">
$(function(){
    //get district to sub-districts
    $('.district').change(function(){
        if ($(this).val().length >0) {
          	$.ajax({
	            type:'get', url: '/common/dis-id-sub_districts',
	            data: {id: $(this).val()},
	            success: function (response) { $('.district_result').html(response);},
	            error: function () {
	                $('.district_result').html('<option value="">No data found</option>');
	            },
	        });
        }
    });

    //checkbox for hospital selection
   	$('#is_hospital').click(function(){
        if($(this).prop("checked") == true){
            $('.hospitals').prop('disabled',false);
            $('.hospitals').prop('required',true);
            $(this).val(1);
        }
        else if($(this).prop("checked") == false){
           $('.hospitals').prop('disabled',true);
           $('.hospitals').prop('required',false);
           $('.select2-selection__rendered').text(''); $(this).val(0);
        }
    });
})
</script>
@endsection