{% extends 'patient/base.html' %}
{% load static %}

{% block header.button %}
    <a class="text-right" href="{% url 'patient' %}"><button class="btn btn-gray gray-icon-notika btn-reco-mg btn-button-mg waves-effect">بازگشت</button></a>
{% endblock %}

{% block content %}
	<!-- Breadcomb area Start-->
	<div class="breadcomb-area">
		<div class="container">
			<div class="row">
				<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
					<div class="breadcomb-list">
						<div class="row">
							<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
								<div class="breadcomb-wp">
									<div class="breadcomb-icon">
										<i class="notika-icon notika-edit"></i>
									</div>
									<div class="breadcomb-ctn">
										<h2>انتخاب و برش</h2>
										<p>در این قسمت میتوانید برای خود تصویر پروفایلی انتخاب نمایید.<span class="bread-ntd"> بهتر است از عکس پرسنلی استفاده نمایید، این عکس برای پزشک شما نمایش داده خواهد شد. </span></p>
									</div>
								</div>
							</div>
							<div class="col-lg-6 col-md-6 col-sm-6 col-xs-3">
								<div class="breadcomb-report">
									<button data-toggle="tooltip" data-placement="left" title="Download Report" class="btn"><i class="notika-icon notika-sent"></i></button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- Breadcomb area End-->
    <!-- Image Cropper area Start-->
    <div class="images-cropper-area">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="image-cropper-wp">
                        <div class="row">
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                <div class="image-crop">
                                    <img src="{% static 'idia_site/patient/img/user.png' %}" alt="">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                <div class="preview-img-pro-ad">
                                    <div class="maincrop-img">
                                        <div class="image-crp-int">
                                            <h4>پیش نمایش</h4>
                                            <div class="img-preview img-preview-custom"></div>
                                        </div>
                                        <div class="image-crp-img">
                                            <h4>ابزار های گرافیکی</h4>
                                            <p>شما میتوانید از این قسمت عکس جدیدی را برای برش آپلود نمایید</p>
                                            <div class="btn-group images-cropper-pro">
                                                <label title="Upload image file" for="inputImage" class="btn btn-primary img-cropper-cp">
														<input type="file" accept="image/*" name="file" id="inputImage" class="hide"> آپلود عکس
													</label>
                                                <label title="Download image" id="download" class="btn btn-primary">دانلود</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="cp-img-anal">
                                        <h4>ابزار ها</h4>
                                        <div class="btn-group images-action-pro">
                                            <button class="btn btn-white" id="zoomIn" type="button">بزرگنمایی</button>
                                            <button class="btn btn-white" id="zoomOut" type="button">کوچکنمایی</button>
                                            <button class="btn btn-white" id="rotateRight" type="button">چرخش به چپ</button>
                                            <button class="btn btn-white" id="rotateLeft" type="button">چرخش به راست</button>
                                            <button class="btn btn-warning img-cropper-cp-t" id="setDrag" type="button">برش جدید</button>
                                            <button class="btn btn-warning img-cropper-cp-t" id="send" type="button">ارسال</button>
                                        </div>
                                    </div>






                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="container">
                                          <br />
                                      <h3 align="center">Image Crop & Upload using JQuery with PHP Ajax</h3>
                                      <br />
                                      <br />
                                            <div class="panel panel-default">
                                                <div class="panel-heading">Select Profile Image</div>
                                                <div class="panel-body" align="center">
                                                    <input type="file" name="upload_image" id="upload_image" />
                                                    <br />
                                                    <div id="uploaded_image"></div>
                                                </div>
                                            </div>
                                        </div>




    <!-- Image Cropper area End-->
{% endblock %}

{% block scripts %}
    <!-- jquery
		============================================ -->
    <script src="{% static 'idia_site/patient/js/vendor/jquery-1.12.4.min.js' %}"></script>
    <!-- bootstrap JS
		============================================ -->
    <script src="{% static 'idia_site/patient/js/bootstrap.min.js' %}"></script>
    <!-- wow JS
		============================================ -->
    <script src="{% static 'idia_site/patient/js/wow.min.js' %}"></script>
    <!-- price-slider JS
		============================================ -->
    <script src="{% static 'idia_site/patient/js/jquery-price-slider.js' %}"></script>
    <!-- owl.carousel JS
		============================================ -->
    <script src="{% static 'idia_site/patient/js/owl.carousel.min.js' %}"></script>
    <!-- scrollUp JS
		============================================ -->
    <script src="{% static 'idia_site/patient/js/jquery.scrollUp.min.js' %}"></script>
    <!-- meanmenu JS
		============================================ -->
    <script src="{% static 'idia_site/patient/js/meanmenu/jquery.meanmenu.js' %}"></script>
    <!-- counterup JS
		============================================ -->
    <script src="{% static 'idia_site/patient/js/counterup/jquery.counterup.min.js' %}"></script>
    <script src="{% static 'idia_site/patient/js/counterup/waypoints.min.js' %}"></script>
    <script src="{% static 'idia_site/patient/js/counterup/counterup-active.js' %}"></script>
    <!-- mCustomScrollbar JS
		============================================ -->
    <script src="{% static 'idia_site/patient/js/scrollbar/jquery.mCustomScrollbar.concat.min.js' %}"></script>
    <!-- sparkline JS
		============================================ -->
    <script src="{% static 'idia_site/patient/js/sparkline/jquery.sparkline.min.js' %}"></script>
    <script src="{% static 'idia_site/patient/js/sparkline/sparkline-active.js' %}"></script>
    <!-- flot JS
		============================================ -->
    <script src="{% static 'idia_site/patient/js/flot/jquery.flot.js' %}"></script>
    <script src="{% static 'idia_site/patient/js/flot/jquery.flot.resize.js' %}"></script>
    <script src="{% static 'idia_site/patient/js/flot/flot-active.js' %}"></script>
    <!-- knob JS
		============================================ -->
    <script src="{% static 'idia_site/patient/js/knob/jquery.knob.js' %}"></script>
    <script src="{% static 'idia_site/patient/js/knob/jquery.appear.js' %}"></script>
    <script src="{% static 'idia_site/patient/js/knob/knob-active.js' %}"></script>
    <!-- cropper JS
		============================================ -->
    <script src="{% static 'idia_site/patient/js/cropper/cropper.min.js' %}"></script>
    <script src="{% static 'idia_site/patient/js/cropper/cropper-actice.js' %}"></script>
    <!--  wave JS
		============================================ -->
    <script src="{% static 'idia_site/patient/js/wave/waves.min.js' %}"></script>
    <script src="{% static 'idia_site/patient/js/wave/wave-active.js' %}"></script>
    <!--  Chat JS
		============================================ -->
    <script src="{% static 'idia_site/patient/js/chat/jquery.chat.js' %}"></script>
    <!--  todo JS
		============================================ -->
    <script src="{% static 'idia_site/patient/js/todo/jquery.todo.js' %}"></script>
    <!-- plugins JS
		============================================ -->
    <script src="{% static 'idia_site/patient/js/plugins.js' %}"></script>
    <!-- main JS
		============================================ -->
    <script src="{% static 'idia_site/patient/js/main.js' %}"></script>
{#	<!-- tawk chat JS#}
{#		============================================ -->#}
{#    <script src="{% static 'idia_site/patient/js/tawk-chat.js' %}"></script>#}


{% endblock %}

{% block scripts.out %}
    <script>
        $(document).ready(function(){

            $image_crop = $('#image_demo').cropper({
            enableExif: true,
            viewport: {
              width:200,
              height:200,
              type:'square' //circle
            },
            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({
                url:"upload.php",
                type: "POST",
                data:{"image": response},
                success:function(data)
                {
                  $('#uploadimageModal').modal('hide');
                  $('#uploaded_image').html(data);
                }
              });
            })
          });

        });
        </script>
{% endblock %}