{% extends 'badge/badge_layout.html' %}

	<title>{% block title %}Photo Upload{% endblock %}Edit Data</title>


{% block style %}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.5.1/croppie.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.5.1/croppie.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.4/cropper.min.css" />
<link href="https://cdn.jsdelivr.net/npm/jquery-jcrop@0.9.15/css/jquery.Jcrop.min.css" rel="stylesheet" />
<link rel='stylesheet' type='text/css' media='screen' href='/static/css/webcam-demo.css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


<style type="text/css">
   .loader {
        position: absolute;
        z-index: 10000;
        background: #fff;
        width: 100%;
        height: 100vh;
        top: 0;
    }
    
    .loader-text
    {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>
{% endblock %}
	
{% block content %}

	 {% for mesg in get_flashed_messages(category_filter=["successMsg"]) %} 

	<div class=" text-center" id="successMsg" >
	 	<h6 class="alert alert-success  alert-dismissible">
	 	<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>{{ mesg }}</h6>
	</div>

	{% endfor %} 
	{% for mesg in get_flashed_messages(category_filter=["errorMsg"]) %} 
		<div class="text-center" id="successMsg" >
			<h6 class="alert alert-danger  alert-dismissible">
			 <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>{{ mesg }}</h6>
		</div>
					
	{% endfor %}    

<div class="loader" style="display:none;"><h4 class="text-center text-danger loader-text" >Please wait..</h4></div>
 
<!-- <form   id="edit_data" enctype="multipart/form-data"> -->
<form id="delegate_badge"  action="{{url_for('badge.DelegateBatchPrintSpot')}}" method="POST" target="_blank">


    <input type="hidden" class="form-control" name="badge_type" id="badge_type"  value="Delegate Badge" >
    <!-- <input type="hidden" class="form-control" name="badge_type" id="badge_type"  value="Delegate Badge" >
    <input type="hidden" class="form-control" name="badge_type" id="badge_type"  value="Delegate Badge" >
 -->

<div class="container">	
<div class="row">
	<div class="col-lg-2">
		
	</div>

	<div class="col-lg-8">
		
	<br>
	<div   class="alert alert-success text-center alert-dismissible successMessage" id="addMsg" style="display:none;">
       <p class="close close_id"  aria-label="close">&times;</p>
       <img src="/static/images/right.png" width="21px" height="21px">
       <span id="addmsg"></span>
    </div>

    <div   class="alert alert-danger text-center alert-dismissible successMessage" id="ErrorMsg" style="display:none;">
       <p class="close close_id"  aria-label="close">&times;</p>
       <img src="/static/images/wrong_img.png" width="21px" height="21px">
       <span id="errormsg"></span>
    </div>

    <br>
	<h4 style="text-align:center;">Spot Print</h4>
			<div class="card">
				<div class="card-body">
					<input type="text" class="form-control" name="conf_key" id="conf_key"  value="{{conf_key}}" hidden>
   					<input type="text" class="form-control" name="conf_id" id="conf_id"  value="{{conf_id}}" hidden>
                    <input type="hidden" name="del_table_name" value="{{del_table_name}}">
					<input type="hidden" name="image_data" id="image_data" value="">
								<div >
                                    <h4>Delegate Details </h4>
                                    <p style="color:red;font-size: 15px;">(If you want to update the delegate details, please use the input fields below)</p>

									<div class="row">
									   <div class="col-sm-6">
									       <label>Name   :  
                                            <input type="text" name="full_name" id ="full_name" class="form-control" value="">
                                           <br>
									       <label>Email  : 
                                            <input type="text" name="email" id ="email" value="" class="form-control">
                                            <!-- <span id="email"></span></label><br> -->
									    </div>
                                        <div class="col-sm-6">  
                                           <label>Mobile : 
                                            <input type="text" name="mobile" id ="mobile" value="" class="form-control">
                                            <br>
									       <label>Role   :  
                                            <select id="role" class="btn btn-light btn-lg form-control "  name="role"  style="text-align: left;">
                                                {% if role %}
                                                   {% for r in role %}
                                                   <option value = "{{r.b_role|lower}}" {% if r.b_role|lower =='delegate' %} selected {% endif %} > {{r.b_role}} </option>
                                                   {% endfor %}
                                                {% else %}
                                                    <option value = "DELEGATE"  selected="selected" > DELEGATE </option>  
                                                {% endif %}
                                             </select>
                                            <br>
									   </div> 

                                       
                                       </div>   	
					                   <div class="col-sm-12">
					                      <h4>Delegate Image</h4>
					                      <div id="Imageupload" >
					                        <input type="hidden" name="file_exists" id="file_exists" value="">
					                        <input type="hidden" name="image_deleted" id="image_deleted" value="">
                                  <div class="row d-flex">
                                    <label for="files" class="btn btn-info">
                                        <i class="fa fa-cloud-upload"></i> Custom Upload
                                    </label>
  					                        <input type="file" class="form-control" autocomplete="off" accept="image/*" id="files" name="files" data-toggle="modal" data-target="#myModal" target="_blank" onchange="image_upload()"  style="display: none;" />
                                     <button type="button" class="btn btn-danger ml-2" onclick="start_camera()">Camera</button>
                                  </div>
					                        </div>  
                                  

					                        <img id="image_container" class="img-thumbnail" >
					                        <div id="ImageRemove"  class="mt-3"> 
					                          <img  id="image_aws" class="img-thumbnail"  src ="">
					                          <button type="button" class="btn btn-danger" onclick="removeImage()" >Change or Remove </button>
					                        </div>  
					                   </div>

					                
								<div class="row">

                                     <div class="col-lg-12 col-md-12 col-sm-12 text-right">
                      
                         <!-- <button type="submit" name="pdf" class="btn btn-md btn-info">Download Badge PDF</button> -->

                            <!-- <button type="submit" name="print" value="print" class="btn btn-md btn-info"><i class="fa fa-light fa-print p-1"> </i>Print Badge</button> -->
    
                        <button type="submit" name="print_spot" value="print_spot" class="btn btn-md btn-primary"><i class="fa fa-light fa-print p-1"> </i>Print Spot Badge</button>
    
    										 <!-- <button type= "button" class="btn btn-md btn-success" name="update_btn" id="update_btn" title="Update" onclick="apply_btn(3)"> Update</button>  -->
                                              
										<a href="{{url_for('badge_user.SpotPrint',conf_id=conf_id ,conf_key=conf_key)}}"  class="btn btn-md btn-danger ">Clear</a>
									</div>
								</div>
							</div>
				</div>
			</div>
		</div>

		<div class="col-lg-3">
		
	</div>
			
</div>  
</div>

</form>



<!-- <div class="modal" id="myModal" tabindex="-1"  aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Crop Image To Upload</h4>
                <button type="button" class="btn-close" data-dismiss="modal"></button>
            </div>
            <div class="modal-body text-center">
                <div class="row">
                    <div class="col-md-12" id="croppie-container">
                        <h5>Preview Image to crop:</h5>
                        <img id="show_image" class="my-image result" style="margin: 10px; height: 200px; width: 200px;" />
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-8"></div>
                    <div class="col-md-2">
                        <button class="btn btn-success float-right" id="upload-button" onclick="apply_btn()">Apply</button>
                    </div>
                    <div class="col-md-2">
                        <button type="button" id="district_btn" class="btn btn-danger float-right" data-dismiss="modal">Discard</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div> -->


<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-dialog-centered">
        <!--Sample Mail  content-->
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Crop Image To Upload</h4>
                <button type="button" class="btn-close" data-dismiss="modal"></button>
            </div>
            <div class="modal-body text-center">
                <div class="row">


                    <!-- changed -->
                        <h5 style="text-align:center;">Preview Image to crop:</h5>
                    <!-- changed -->

                    <div class="col-md-12" id="croppie-container" >
                        <img id="show_image" class="my-image result" style="margin: 10px; height: 200px; width: 200px;display: none;" />
                    </div>
                    <div id="croppie_div" class="demo"></div>
                </div>
                <div class="row">
                    <div class="col-md-8">
                      <button type= "button" class="btn btn-md btn-warning" name="uptade_btn1" id="uptade_btn1" title="Update" onclick="croppie_rotate(-90)"> Rotate Left</button> 
                      <button type= "button" class="btn btn-md btn-warning" name="uptade_btn1" id="uptade_btn1" title="Update" onclick="croppie_rotate(90)"> Rotate Right</button> 
                      
                    </div>
                    <div class="col-md-2">

                        <button class="btn btn-success float-right" id="upload-button" onclick="photo_apply_btn()">Apply</button>
                    </div>
                    <div class="col-md-2">
                        <button type="button" id="district_btn" class="btn btn-danger float-right" data-dismiss="modal">Discard</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


 <main id="webcam-app" style="display: none;">
        <div class="form-control webcam-start" id="webcam-control">
                <label class="form-switch">
                <input type="checkbox" id="webcam-switch">
                <i></i> 
                <span id="webcam-caption">Click to Start Camera</span>
                </label>      
                <button id="cameraFlip" class="btn d-none"><i class="material-icons flip_btn">cameraswitch</i></button> 
               
        </div>
       
        <div class="row">
            <div class="col-4 col-md-4" ></div>
            <div id="successMsg" class="col-4 col-md-4 alert-success text-center d-none">
                  <h2  class="text-center">Selfie Capture Success</h2>
                <button id="closeSuccess" class="btn btn-primary ml-3">OK</button>
            </div>

            <div class="col-4 col-md-4" ></div>

            
        </div>

        
        
        <div id="errorMsg" class="col-12 col-md-6 alert-danger d-none">
            Fail to start camera, please allow permision to access camera. <br/>
            If you are browsing through social media built in browsers, you would need to open the page in Sarafi (iPhone)/ Chrome (Android)
            <button id="closeError" class="btn btn-primary ml-3">OK</button>
        </div>
        <div class="md-modal md-effect-12">
            <div id="app-panel" class="app-panel md-content row p-0 m-0">     
                <div id="webcam-container" class="webcam-container col-12 d-none p-0 m-0">
                    <video id="webcam" autoplay playsinline width="640" height="480"></video>
                    <canvas id="canvas" class="d-none"></canvas>
                    <!--<img src="" id="canvas">-->
                    <canvas id="canvas2" class="d-none"></canvas>
                    <div class="flash"></div>
                    <audio id="snapSound" src="/static/audio/snap.wav" preload = "auto"></audio>
                </div>
                <div id="cameraControls" class="cameraControls">
                    <a href="#" id="exit-app" title="Exit App" class="d-none"><i class="material-icons">exit_to_app</i></a>
                    <a href="#" id="take-photo" title="Take Photo"><i class="material-icons">camera_alt</i></a>
                    <a href="#" id="download-photo" download="selfie.png" target="_blank" title="Download Photo" class="d-none"><i class="material-icons">file_download</i></a>  


                    <!-- <a href="#" id="save-photo"  title="Save Photo" class="d-none"><i class="material-icons">download_done</i></a>  -->
                    

                    <a href="#" id="resume-camera"  title="Resume Camera" class="d-none"><i class="material-icons">camera_front</i></a>
                     
                </div>
            </div>        
        </div>
        <div class="md-overlay"></div>
    </main>

{% endblock %}

{% block bottomscript %}
  <script type="text/javascript">
    var croppie;
  </script>
  <script src="/static/js/webcam-easy.min.js"></script> 
	<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.5.1/croppie.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.5.1/croppie.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/jquery-jcrop@0.9.15/js/jquery.Jcrop.min.js"></script>
  <script type="text/javascript" src='/static/js/app_del.js'></script>
  
	<script type="text/javascript">

    var BaseUrl = document.location.origin;
    var oneMB   = 1048576 
    $(document).ready(function(){

    // function removeradiovalue()
    // {
    //     $("#role").val('');

    // }

        // added
        // added
       
        $("#ImageRemove").hide()


        $("#files").on("click",function(){


            // added
            $("#show_image").attr("src",'');
            $("#show_image").hide();   
            $("#croppie-container").hide();   
            // added

            /* Current this object refer to input element */      
             var $input = $(this);
             var reader = new FileReader();
             reader.onload = function(){
               $("#image_container").show();
               $("#image_container").attr("src", reader.result);
             }
            reader.readAsDataURL($input[0].files[0]);
        })
    });



    $("#files").on("change",function(){
        /* Current this object refer to input element */  
        // added 
        $("#croppie-container").show();   
        // added


        var $input = $(this);
        var reader = new FileReader();

        var ext = $('#files').val().split('.').pop().toLowerCase();
        if($.inArray(ext, ['gif','jpg','jpeg','pdf','png','jfif','tif','tiff']) == -1) 
        {
            clear();
            alert('Invalid file type');
            return false;

        }
        else if($('#files')[0].files[0].size > (oneMB*3))
        {
            alert('File Must less than 3MB');
            clear();
            return false;
        } 
        else
        {
            reader.onload = function(){
               $("#image_container").show();
               $("#image_container").attr("src", reader.result);
               $("#ImageRemove").removeClass('d-none');
               $("#image_aws").attr("src","");
            }
            reader.readAsDataURL($input[0].files[0]);
        }
    });


    function clear() {
		$('input[type=file]').each(function() 
		{
			$(this).val('');
		}); 
		
	}
// --------------------------


    function removeImage()
    {
        $("#file_exists").val('');
        $("#files").val(''); 
        $("#image_container").attr("src",'');
        $("#image_container").hide();
        $("#Imageupload").show();
        $("#Imageupload").removeClass('d-none');


        $("#ImageRemove").addClass('d-none');
        $("#image_deleted").val(1);
        $("#uptade_btn").show();

        // $("#addMsg").hide();
         // $("#addmsg").text('');
         // $("#del_update_btn").hide();
    }
// --------------------------


     $(document).on('click','#exist_btn' ,function(e)
         {
         	clearfields();
            var conf_id         = $("#conf_id").val();
            var conf_key        = $("#conf_key").val();
            var delegate_no     = $("#delegate_no").val();
            
            

            if(delegate_no.length > 0 ){
                
                var url_1 = BaseUrl+"/"+conf_id+"/"+conf_key+"/delegate_batch_print_with_photo?delegate_no="+delegate_no; 
                $("#print_btn").attr("href",url_1);
                    $.ajax({ 
              
                    type: 'POST',
                    data:{'delegate_no':delegate_no},
                    url: BaseUrl+"/"+conf_id+"/"+conf_key+"/check_del_no_exist",             
                    dataType: "html",    
              
                    success: function(data){
                       var data_1 = JSON.parse(data);
                       var msg = data_1.msg;
                       var image = data_1.image;
                       if(data_1.status == 1)
                       {   


                          $("#update_div").show();
                          $("#div_print_and_update").show();
                          $("#exist_btn_div").hide();

                          if (image == null){
                     

                          		$("#delegate_no").prop("readonly", true);
        	                  	$("#Imageupload").show();
        	                  	$("#ImageRemove").hide();
        	                  	$("#image_container").hide();
        	                    $("#image_container").attr("src",'');
        	                    $("#uptade_btn").show();
                                // $("#update_btn").hide();
        	                    $("#full_name").val(data_1['data']['full_name']);
        	                    $("#email").val(data_1['data']['email']);
        	                    $("#mobile").val(data_1['data']['mobile']);
        	                    $("#role").val(data_1['data']['role'].toLowerCase()).attr("selected", "selected");
        	                    
        	                    
                          }
                          else{
                       

                          		$("#delegate_no").prop("readonly", true);
                          		$("#Imageupload").hide();
        	                  	$("#ImageRemove").show();
        	                  	$("#image_container").show();
        	                    $("#image_container").attr("src",data_1.image);
        	                    $("#uptade_btn").hide();
        	                    $("#full_name").val(data_1['data']['full_name']);
        	                    $("#email").val(data_1['data']['email']);
        	                    $("#mobile").val(data_1['data']['mobile']);
        	                    $("#role").val(data_1['data']['role'].toLowerCase()).attr("selected", "selected");
                          }
         
                       }
                        else if(data_1.status == 3) {
                       
                          $("#update_div").hide();
                          $("#exist_btn_div").show();
                          $("#ErrorMsg").show();
                          $("#errormsg").html(data_1.msg); 
                          cleardata();

                       }
                       else
                       {
                       

                          $("#update_div").hide();
                          $("#exist_btn_div").show();
                          $("#ErrorMsg").show();
                          $("#errormsg").html(data_1.msg);
                          cleardata();     
                       }       
                    }
                 });

            }
            else{

                // added
                $("#delegate_no").val('');
                $("#delegate_no").prop("readonly", false);
                alert("Please enter Delegate Number.");
                return false;
                // added
            }
           
        });

// --------------------------
    $(document).on('click','.close_id',function(e)
    {
      e.preventDefault();
      $("#addMsg").hide();
      $("#addmsg").text('');
      $("#ErrorMsg").hide();
      $("#errormsg").text('');

    });
// --------------------------

    function croppie_rotate(degree) {
      croppie.rotate(degree)
    }
  

    function clearfields() {
    	// body...
    	 $("#addMsg").hide();
	     $("#addmsg").text('');
	     $("#ErrorMsg").hide();
         $("#errormsg").text('');
	     $("#successMsg").hide();
	     
	     $("#full_name").text('');
	     $("#email").text('');
	     $("#mobile").text('');
	     $("#role").val('');
    }
    
    function cleardata() {
    	// body...
	     $("#full_name").text('');
	     $("#email").text('');
	     $("#mobile").text('');
	     $("#role").val('');
    }


    
    function image_upload() {

        var user_profile = $("#files")[0].files[0];
        if($('#files')[0].files[0].size > (oneMB*3))
		 {
			alert('File Must less than 3MB');
			clear();
			return false;
		 } 
        var reader = new FileReader();
        reader.onload = function () {
            $("#show_image").show();
            $("#show_image").attr("src", reader.result);
            if (croppie) {
                croppie.destroy();
            }
            // Initialize Croppie
            croppie = new Croppie(document.getElementById("show_image"), {
                viewport: { width: 138, height: 158 },
                boundary: { width: 210, height: 240 },
                enableOrientation: true,
            });
            // Bind Croppie to existing image
            croppie
                .bind({
                    url: $("#show_image").attr("src"),
                    orientation: 1,
                })
                .then(function () {
                    croppie.element.addEventListener("update", function () {
                        croppie.result("base64").then(function (data) {
                            // Create new image element and update the existing one
                            var croppedImage = document.getElementById("cropped-image");
                            if (!croppedImage) {
                                croppedImage = new Image();
                                croppedImage.id = "cropped-image";
                                $("#cropped-image-container").append(croppedImage);
                                $("#show_image").attr("src",'');
                                $("#show_image").hide();
                            }
                            croppedImage.src = data;
                        });
                    });
                });
        };
        reader.readAsDataURL(user_profile);
    }

    function apply_btn(type_id) {
        var file_name   = $("#files").val().split("\\").pop();
        var conf_key    = $("#conf_key").val();
        var conf_id     = $("#conf_id").val();
        var delegate_no = $("#delegate_no").val();
        var full_name   = $("#full_name").val();
        var email       = $("#email").val();
        var mobile      = $("#mobile").val();
        var role        = $("#role").val();

        // alert(full_name)

        $("#upload-button").html("Please Wait..");
        $("#upload-button").attr("disabled",true);
        var url_1 = BaseUrl+"/"+conf_id+"/"+conf_key+"/delegate_batch_print_with_photo?delegate_no="+delegate_no;
         $("#print_btn").attr("href",url_1);
        
        if (type_id == 1){

            $('#myModal').modal('hide')
                 croppie.result("base64").then(function (data) {
                 if (data) {
                         $("#image_container").attr("src", '');
                         $("#image_container").attr("src", data);
                         $("#image_container").show();
                     }
                     else {
                         removeImage()
                     }
              });
        }  
        else if(type_id == 3) {
             var file_name = $("#show_image").val();
             var data      = $("#image_container").attr("src");


             // var badge_photo = $("#badge_photo").val();
             // var badge_size_dim = $("#badge_size").val();

             $.ajax({
                    url: BaseUrl+"/"+conf_id+"/"+conf_key+"/post_photo_upload",
                    method: "POST",
                    data: {
                        'file_name': file_name,
                        'delegate_no': delegate_no,
                        'image_data': data, // base64 encode image data
                        'full_name':full_name,
                        'email':email,
                        'mobile':mobile,
                        'role':role
                    },
                    dataType:"html",
                    success: function (response) {

                      $("#upload-button").html("Apply")
                      $("#upload-button").attr("disabled",false)

                        var responseObject = JSON.parse(response);
                        // console.log(response);
                        $("#myModal").modal('hide');
                        $("#update_div").show();
                        $("#exist_btn_div").hide();
                        $("#addMsg").show();
                        $("#addmsg").html(responseObject.msg);
                        $("#delegate_no").prop("readonly", true);
                        $("#Imageupload").hide();
                        $("#Imageupload").removeClass('d-none');
                        $("#ImageRemove").show();
                        $("#ImageRemove").removeClass('d-none');

                        var image_data = responseObject.image_path+ responseObject.image_name;
                        if (image_data){
                            $("#image_container").attr("src",'');
                            $("#image_container").attr("src",image_data);
                            $("#image_container").show();
                        }
                        else
                        {
                            removeImage()
                        }
                        $("#uptade_btn").hide();
                        var url_1 = BaseUrl+"/"+conf_id+"/"+conf_key+"/delegate_batch_print_with_photo?delegate_no="+delegate_no; 
                        $("#print_btn").attr("href",url_1);

                    },
                    error: function (xhr, status, error) {
                        console.log(xhr);
                        alert("Error saving image: " + error);
                    },
                });
        }      
        else{
            var data = '';
            $.ajax({
                url: BaseUrl+"/"+conf_id+"/"+conf_key+"/post_photo_upload",
                method: "POST",
                data: {
                    'file_name': file_name,
                    'delegate_no': delegate_no,
                    'image_data': data, // base64 encode image data
                    'full_name':full_name,
                    'email':email,
                    'mobile':mobile,
                    'role':role
                },
                dataType:"html",
                success: function (response) {
                    var responseObject = JSON.parse(response);
                    // console.log(response);
                    $("#myModal").modal('hide');
                    $("#update_div").show();
                    $("#exist_btn_div").hide();
                    $("#addMsg").show();
                    $("#addmsg").html(responseObject.msg);
                    $("#delegate_no").prop("readonly", true);
                },
                error: function (xhr, status, error) {
                    console.log(xhr);
                    alert("Error saving image: " + error);
                },
            });
            
        }
    } 

    function photo_apply_btn()
    {
         $('#myModal').modal('hide')
        croppie.result("base64").then(function (data) {
            if (data) {
                $("#image_data").val(data)
                $("#image_container").attr("src", '');
                $("#image_container").attr("src", data);
                $("#image_container").show();
            }
            else {
                removeImage()
            }
        });
    }


$("#district_btn").on("click", function () {
        $("#show_image").attr("src",'');
        $("#show_image").hide();
        $("#cropped-image").hide();


        $("#image_container").attr("src",'');
        $("#file_exists").val('');
        $("#files").val(''); 
        $("#image_data").val('');
        $("#image_container").hide();
        $("#ImageRemove").hide();
        $("#ImageRemove").removeClass('d-none');
        

    });

  </script>
{% endblock %}