{% extends 'memberapp_users/layout.html' %}
{% block head %} 
{% endblock %}
{% block title %}Make Payment Screen{% endblock %} 
{% block content %}
<form  method="POST"  id="user_attachment"  action="{{url_for('member.nonPaymentResponse',user_id=encrypt_user_id,unique_id=unique_id,m_payment_id=payment_content.m_payment_id,society_id=society_id,society_key=society_key,step_no=step_no)}}">
	<input type="hidden" name="user_id" id="user_id" value="{{user_id}}">
	<input type="hidden" name="society_id" id="society_id" value="{{society_id}}">
	<input type="hidden" name="society_key" id="society_key" value="{{society_key}}">
	<input type="hidden" name="unique_id" id="unique_id" value="{{unique_id}}">
	<input type="hidden" name="payment_id" id="payment_id" value="{{payment_id}}">
	{% if payment_content.payment_content: %}
		
		{{ Helper.convert_html_for_payment_screen(payment_content,member)|safe }}
	{% endif %}
	{% for mesg in get_flashed_messages(category_filter=["successMsg"]) %}        
	<div class="alert alert-success text-center alert-dismissible" id="successMessage" >
		<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
		<h4><img src="/static/images/right.png" alt="right" height="21" width="21">{{ mesg|safe }}</h4>
	</div>
	{% endfor %}

	{% for mesg in get_flashed_messages(category_filter=["errorMsg"]) %}
	<div class="alert alert-danger text-center alert-dismissible" id="successMessage" >
		<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
		<h4><img src="/static/images/wrong_img.png" alt="wrong"height="21" width="21">{{ mesg }}</h4>
	</div>
	{% endfor %}
	<div class="row ">
		{% for data in image %}
		<div class="col-md-4 offset-md-4 mb-4">
			<div class="card text-white text-center user_attach_card mb-3" >
				<div class="card-header">{{data.label_name}}</div>
				<div class="card-body">
					<input type="hidden" name="attach_id" id="attach_{{data.attach_type_id}}"value="{{data.attach_id or 0}}">
					<input type="hidden" id="attach_type_{{data.attach_type_id}}" name="attach_type_id" value="{{data.attach_type_id}}"> 
					<input type="hidden" name="attach_extension" id="attach_extension_{{data.attach_type_id}}" value="{{data.attach_extension}}">
                    <input type="hidden" name="attachment_name" id="attachment_name_{{data.attach_type_id}}" value="{{data.attach_type}}">
					{% if data.attach_file_name %}
						{% set image_display = "block" %}
					{% else %}
						{% set image_display = "none" %}    
					{% endif %}

					<div id="show_img_{{data.attach_type_id}}" style="display:{{ image_display }}" >
						{% if data.attach_file_name : %} 
							{% set  src= data.attach_path|string +"/"+data.attach_file_name|string +"?"+Helper.getcurrenttimestamp()|string %}
							{% set iframe_hide = "none" %}
							{% set img_hide = "none" %}
							{% if  ".pdf" in data.attach_file_name :%}
								{% set iframe_hide = "block" %}    
							{% else  %}
								{% set img_hide = "block" %}
							{% endif %}

						{% else %}
							{% set  src= "" %}
						{% endif %}
						
						<img src="{{ src}}" id="img_{{data.attach_type_id}}" alt="{{data.attach_type}}" width="100%" height="auto" style="max-height: 150px;display: {{ img_hide }}">
						<iframe src="{{ src }}" id="iframe_{{data.attach_type_id}}" alt="{{data.attach_type}}"  width="100%" height="auto" allow="encrypted-media" allowfullscreenstyle="max-height: 150px;" style="display: {{ iframe_hide }}"> </iframe>                                   
					</div>
					<div class="btn btn-primary btn-block file-field my-2" id="file-field{{data.attach_type_id}}">
						<span>
							{% if src=="" %}
								Upload
							{% else %}
								Change
							{% endif %}
						</span> 
						<input type="file"  id="file_{{data.attach_type_id}}" name="file_{{data.attach_type_id}}" class='attach_file' onchange="uploadAmazon('{{data.attach_type_id}}')"/>
					</div>
					<!-- <input type="file" class="form-control" id="file_{{data.attach_type_id}}" name="file_{{data.attach_type_id}}"/> -->
					<label id="file_{{data.attach_type_id}}-error" class="error" for="file_{{data.attach_type_id}}"></label><br>
					<!-- <input type="button" value="Upload" name="profile_submit" id="profile_submit" onclick="uploaduser_attachment('{{data.attach_type_id}}')" class="btn btn-warning btn-block  form-input"> -->
					<input type="button" value="Delete" name="delete" style="display: {{ image_display }}" id="delete_{{data.attach_type_id}}" onclick="deleteuser_attachment('{{data.attach_type_id}}')" class="btn btn-danger btn-block  form-input">
				</div>
			</div>
		</div>
		{% endfor %}
	</div>
	{% if payment_type == "UPI" or payment_type == "NEFT / RTGS": %}
	<div class="row ">
		<div class="col-md-4 offset-md-4 mb-4   d-flex align-items-stretch ">
			<label id="utr_number-error" class="error font-weight-bold" for="utr_number"></label>
		</div>
		<div class="col-md-4 offset-md-4 mb-4   d-flex align-items-stretch ">

			<div class="card text-white text-center user_attach_card mb-3" >
				<div class="card-header">Please provide the UTR number *</div>
				<div class="card-body">
					<input type="text" class="form-control" id="utr_number" name="utr_number" value="{{utr_number or ''}}"/> 
				</div>
				
			</div>
		</div>   
	</div>
	{% endif %}
	<br>
	{% if societyData['ms_rejected_status_id'] != userData.status_id : %}
	<div class="row">
		<label class="alert alert-warning border border-warning">Once you click on the "Submit" button, your application shall be forwarded to the Proposer and Seconder you have chosen.<br><br>

		Once the proposer and seconder accepts the application, your application shall be forwarded to the secretariat. 
		
		Typically, it would take about 7 working days from the secretariat to process your application from the date of consent from the proposer or seconder, whoever has provided last.<br><br>
		
		It is not possible to edit the data you provided in your membership application once you click on the submit button.
		
		Once you click on the "submit" button, do not click on the "back" button on the browser or refresh this page. </label>
	</div>   
	{% endif %} 
	<div class="row">
		<div class="col-md-12">
			{% if len_payment_types: %}
			<a class="btn btn-lg btn-secondary"  href="{{ url_for('member.Confirmation',user_id=encrypt_user_id,society_id=society_id,society_key=society_key,step_no=step_no) }}?payment_id={{payment_id}}" class="text-dark">Previous</a>
			{% else %}
				<a class="btn btn-lg btn-secondary"  href="{{ url_for('member.getMakePayment',user_id=encrypt_user_id,society_id=society_id,society_key=society_key,step_no=step_no) }}?payment_id={{payment_id}}" class="text-dark">Previous</a>
			{% endif %}
			<input type="submit" value="Submit" name="submit_update" id="submit" class="btn btn-lg btn-primary float-right form-input">
		</div>
	</div>
</form>

{% endblock %}
{% block script %}
<script src="https://cdn.jsdelivr.net/npm/aws-sdk/dist/aws-sdk.min.js"></script>
<script type="text/javascript">
	
	var BaseUrl = document.location.origin
	var oneMB   = 1048576  
$(document).ready(function()
{
	$("#submit").click(function() 
	{
		validate_userpayment_form();
		if(!validate_userpayment_form())
		{
			return false  
		}         
	})
	$("#user_attachment").submit(function() {
    $(".attach_file").remove();

    });
})   

$( ".file-field" ).on( "click", function() {
	$(this).find('input[type="file"]')[0].click()
});
function uploaduser_attachment(type_id)
{
	var user_id    = $("#user_id").val();
	var society_id = $("#society_id").val();
	var society_key = $("#society_key").val();

	var ext = $('#file_'+type_id).val().split('.').pop().toLowerCase();
	if($.inArray(ext, ['gif','jpg','jpeg','pdf','png','jfif','tif','tiff']) == -1) 
	{
		clear()
		alert('Invalid file type');
	   
	}
	else if($('#file_'+type_id)[0].files[0].size > (oneMB*3))
	{
		alert('File Must less than 3MB');
	} 
	else
	{
		var fd              = new FormData();
		var user_profile    = $('#file_'+type_id)[0].files[0];
		var input_id        = "file_"+type_id;
		var file_name       = $('#'+input_id).val().split('\\').pop();

		$("#show_img_"+type_id).show();
		$("#delete_"+type_id).show();
		fd.append('file',user_profile);
		fd.append('user_id',$("#user_id").val());
		fd.append('attach_id',$("#attach_"+type_id).val());
		fd.append('attach_type_id',$("#attach_type_"+type_id).val());

			$.ajax({
				type: 'POST', 
				url: BaseUrl+"/post_amzon_upload/"+society_id+"/"+society_key,
				data: fd,
				contentType: false,
				processData: false,
				cache: false,
				dataType: 'json',
				}).done(function(data, textStatus, jqXHR){

					status = data.status
					msg    = data.msg
					attach_id = data.attach_id
					if (status > 0)
					{
						bucketname = data.bucketname;
						foldername = data.foldername;
						file_name  = data.file_name;
						file_extension = data.file_extension;
						if (file_extension != ".pdf")
						{
							var image_url = "https://"+bucketname+".s3-ap-southeast-1.amazonaws.com/"+foldername+"/"+user_id+"/"+file_name;
							$("#attach_"+type_id).val(data['attach_id']);
							$("#img_"+type_id).attr('src', image_url);
							$("#img_"+type_id).show();
							$("#iframe_"+type_id).hide();
						}
						if (file_extension == '.pdf')
						{
							var image_url = "https://"+bucketname+".s3-ap-southeast-1.amazonaws.com/"+foldername+"/"+user_id+"/"+file_name;
							$("#attach_"+type_id).val(data['attach_id']);
							$("#iframe_"+type_id).attr('src', image_url);
							$("#iframe_"+type_id).show();
							$("#img_"+type_id).hide();
						}
						$("#file-field"+type_id+" span").text("Change") 
					}
					else
					{
						alert(msg);
					}
				}).fail(function(data){
				alert('error in upload image. Please try again');
			});
	}        
}
function deleteuser_attachment(type_id)
{   
	var fd = new FormData();
	var society_id = $("#society_id").val();
	var society_key = $("#society_key").val();
	fd.append('attach_id',$("#attach_"+type_id).val());
	fd.append('attach_type_id',$("#attach_type_"+type_id).val());
	var user_id = $("#user_id").val();
	if (confirm("Are you sure to delete?")) {
		$.ajax({
			type: 'POST',
			url: BaseUrl+"/delete_amazon_image/"+society_id+"/"+society_key,
			data: fd,
			contentType: false,
			processData: false,
			cache: false,
			dataType: 'json',
			}).done(function(data, textStatus, jqXHR){
				$("#attach_"+type_id).val(0);
				$("#show_img_"+type_id).hide();
				$("#delete_"+type_id).hide();
				$("#file-field"+type_id+" span").text("Upload");
				clear()
			}).fail(function(data){
				alert('Please try again');
			});
	}
	else {}
}
function  validate_userpayment_form()
{
	if ($("#utr_number").val().length === 0  ) 
	{
	   $("#utr_number-error").text("Please provide UTR number") ;
	   return false;
	}
	else
	{
		return true;
	}
			
}
function clear() {
	$('input[type=file]').each(function() 
	{
		$(this).val('');
	}); 
	
}

function uploadAmazon(type_id) {

    var ext = $('#file_'+type_id).val().split('.').pop().toLowerCase();
    var attach_extension = $("#attach_extension_"+type_id).val()

 const file = $('#file_'+type_id)[0].files[0];


 if (!file) {
     alert('Please select a file to upload.');
 }
 else if($.inArray(ext,['gif','jpg','jpeg','pdf','png','jfif','tif','tiff']) == -1) 
 {
     clear()
     alert('Invalid file type..');
    
 }
 else if($('#file_'+type_id)[0].files[0].size > (oneMB*3))
 {
     alert('File Must less than 3MB');
 } 
 else { 
    $("#show_img_"+type_id).show();
    $("#delete_"+type_id).show();
    var fd              = new FormData();
    var user_profile    = $('#file_'+type_id)[0].files[0];
    var input_id        = "file_"+type_id;
    var file_name       = $('#'+input_id).val().split('\\').pop();
    var user_id         = $("#user_id").val();
    const bucketName = "{{societyData.aws_bucket}}";
    var society_key = "{{societyData.society_key}}"
     
    if (bucketName == 'common-application'){
        foldername = society_key+"/user_attachment"
     }
     else{
        foldername = "user_attachment"
     }
    //  alert(file_name)
    //  const bucketName = 'common-application';
    //  const key = foldername+'/'+user_id+'/'+file_name; // Set the key (path) for the file in the bucket
     // alert(key)
     AWS.config.update({
         accessKeyId: "AKIAIVJULUNYWYOTNLAQ",
         secretAccessKey: "G9kEjx+3MfwYSPxupwRISUNDRecBAaqVhYKfFZp3",
         region: 'ap-southeast-1', // e.g., us-east-1
     });

    var fname = file_name.split('.')[0].toLowerCase();
    var newfname  = $("#attachment_name_"+type_id).val().replace(fname);
    var nfname = newfname.replace(/\s/g, '')
    var file_name = nfname+"."+ext
    const key = foldername+'/'+user_id+'/'+file_name; 
    
    const s3 = new AWS.S3();

    contentType = ''
    switch (ext) {
        case 'pdf':
            contentType = 'application/pdf';
            break;
        case 'jpg':
        case 'jpeg':
            contentType = 'image/jpeg';
            break;
        case 'png':
            contentType = 'image/png';
            break;
        case 'html':
            contentType = 'text/html';
    }

     const params = {
         Bucket: bucketName,
         Key: key,
         Body: file,
         ACL: 'public-read', // Adjust the ACL as needed
         ContentType: contentType
     };

     s3.upload(params, (err, data) => {
         if (err) {
             alert('Error uploading file:', err)
             console.error('Error uploading file:', err);
         } else {
             // console.log('https//'data.)
             console.log('File uploaded successfully:', data.Location);


             insert_file_db(type_id,file_name)

             file_extension = "."+ext

            if (file_extension != ".pdf")
            {
                // var image_url = "https://"+bucketname+".s3-ap-southeast-1.amazonaws.com/"+foldername+"/"+user_id+"/"+file_name;
                // $("#attach_"+type_id).val(data['attach_id']);
                $("#img_"+type_id).attr('src', data.Location);
                $("#img_"+type_id).show();
                $("#iframe_"+type_id).hide();
            }
            if (file_extension == '.pdf')
            {
                // var image_url = "https://"+bucketname+".s3-ap-southeast-1.amazonaws.com/"+foldername+"/"+user_id+"/"+file_name;
                // $("#attach_"+type_id).val(data['attach_id']);
                $("#iframe_"+type_id).attr('src', data.Location);
                $("#iframe_"+type_id).show();
                $("#img_"+type_id).hide();
            }
            $("#file-field"+type_id+" span").text("Change") 
         }
     });
 }
}

function insert_file_db(type_id,file_name) {
    // alert(type_id)
    var fd              = new FormData();
    var user_profile    = $('#file_'+type_id)[0].files[0];
    // var input_id        = "file_"+type_id;
    // var file_name       = $('#'+input_id).val().split('\\').pop();
    var society_id  = $("#society_id").val();
    var society_key = $("#society_key").val();
    

    fd.append('file_name',file_name);
    fd.append('user_id',$("#user_id").val());
    fd.append('attach_id',$("#attach_"+type_id).val());
    fd.append('attach_type_id',$("#attach_type_"+type_id).val());
    // alert($("#attach_type_"+type_id).val())
    $.ajax({
        type: "POST",
        url: BaseUrl +"/post_file_upload_db/"+society_id+"/"+society_key,
        data: fd,
        contentType: false,
        processData: false,
        cache: false,
        dataType: "json",
        success: function (data) {
            // alert(data.max)
            $("#attach_"+type_id).val(data['attach_id']);;
        },
    });
return false;
}
</script>

{% endblock %}