{% extends 'memberapp_users/layout.html' %}
{% block head %}  
{% endblock %}
{% block title %}User Attachment{% endblock %} 

{% block style %}
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropper/4.1.0/cropper.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">
{% endblock %}
{% block content %} 

<div class="modal" id="myModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content ">
            <!-- Modal Header -->
            <div class="modal-header text-center">
                <h4 class="modal-title ">Crop Image To Upload</h4>
               
            </div>
            <!-- Modal body -->
            <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: 150px;width: 200px;">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-10"></div>
                    <div class="col-md-1">
                        <button class="btn btn-success float-right" id="upload-button" onclick ="apply_btn({{Helper.AttachTypeId.get(society_key)}})">Apply</button>  
                    </div>                        
                    <div class="col-md-1"> 
                      <button type="button" id="district_btn" class="btn btn-danger float-right" data-dismiss="modal">Discard</button>                      
                    </div>
                </div>                                     
            </div>
        </div>
    </div>
</div>

<form  method="POST"  id="user_attachment" action="{{url_for('member.postStep',user_id=encrypt_user_id,society_id=society_id,society_key=society_key)}}">
    {% 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 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|safe }}</h4>
    </div>
    {% endfor %}
    <input type="hidden" id="user_id" name="user_id" value="{{user_id}}">
    <input type="hidden" id="society_id" name="society_id" value="{{society_id}}">
    <input type="hidden" id="society_key" name="society_key" value="{{society_key}}">
    <input type="hidden" id="cur_step" name="cur_step" value="{{cur_step}}">
    <input type="hidden" id="pre_step" name="pre_step" value="{{pre_step}}">
    <input type="hidden" id="nxt_step" name="nxt_step" value="{{nxt_step}}">
    <div class="row ">
        <div class="col-md-12 text-center">
            <label><h2 class="font-weight-bold">USER ATTACHMENT</h2></label>
        </div>
    </div>
    {% if society_id == 18 :%}
    <div class="row">
        <div class="col-md-12">
            <label class="alert alert-info border border-info">
            Only post graduates are eligible for life membership.  If you dont have a Post graduate degree certificate please go back to the first screen and apply for Associate Membership.  You can change your associate membership to life membership at a later date after submitting your PG degree certificate.
        </label>
        </div>
    </div><br>
    {% endif %}
    <div class="row">
        {% for data in datas %}
        <div class="col-md-3 mb-4 ">
            <div class="card user_attach_card text-white text-center bg-primary mb-3" >
                <div class="card-header">{{data.label_name|safe}}<br>[ {{data.attach_extension}} ]</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}}" {% if data.attach_type_id == Helper.AttachTypeId.get(society_key) and data.attach_file_name %} style="display:block;"  {% else %} style="display:{{ image_display }}" {% endif %} >
                        {% 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 %}
                        {% if data.attach_type == Helper.AttachType %}
                            <img src="{{ src}}" id="img_{{data.attach_type_id}}" alt="{{data.attach_type}}" width="100%" height="auto" style="max-height: 150px;display: {{ img_hide }}">
                        {% else %}
                            <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>
                        {% endif %}
                                                           
                    </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>
                            {% if data.attach_type == Helper.AttachType %}
                            <input type="file"  id="file_{{data.attach_type_id}}" name="file_{{data.attach_type_id}}" data-toggle="modal" data-target="#myModal" target="_blank" onchange="image_upload('{{data.attach_type_id}}')">
                        {% else %} 
                            <input type="file"  id="file_{{data.attach_type_id}}" name="file_{{data.attach_type_id}}" onchange="uploaduser_attachment('{{data.attach_type_id}}')"/>
                        {% endif %}
                        
                            <!--<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>
                    <label id="file_{{data.attach_type_id}}-error" class="error d-none" for="file_{{data.attach_type_id}}" ></label>
                    <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>
    <div class="row">
        <div class="col-md-12">
            <a class="btn btn-lg btn-secondary" href="{{ url_for('member.getStep',user_id=encrypt_user_id,step_no=pre_step,society_id=society_id,society_key=society_key)}}">Previous</a>
            <input type="submit" value="Next" name="submit_update" id="submit" class="btn btn-lg btn-primary float-right form-input">
        </div>
    </div>
</form>
{% endblock %}
{% block script %}

<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/0.8.1/cropper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropper/4.1.0/cropper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-jcrop@0.9.15/js/jquery.Jcrop.min.js"></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  

$("#user_attachment").submit(function() {
   $(".attach_file").remove();

}); 

$( ".file-field" ).on( "click", function() {
 $(this).find('input[type="file"]')[0].click()
});


$( "#district_btn" ).on( "click", function() {
    location.reload(); 
});

function uploaduser_attachment(type_id)
{
    var user_id     = $("#user_id").val();
    var society_id  = $("#society_id").val();
    var society_key = $("#society_key").val();
    if(!validate_userattachment_form(type_id))
    {
        return false;  
    }
    var ext = $('#file_'+type_id).val().split('.').pop().toLowerCase();
    var attach_extension = $("#attach_extension_"+type_id).val()
    if($.inArray(ext,attach_extension.split(',')) == -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!');
            });
    }        
}

var croppie;
function image_upload(type_id){ 

    var ext = $('#file_'+type_id).val().split('.').pop().toLowerCase();
    var attach_extension = $("#attach_extension_"+type_id).val()
    if($.inArray(ext,attach_extension.split(',')) == -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 user_profile    = $('#file_'+type_id)[0].files[0];
        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: 207, height: 267 },
                      boundary: { width: 275, height: 355 }
                    });
                // 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);
                }
                croppedImage.src = data;
              });
            });
          });
            }
        reader.readAsDataURL(user_profile);
       }     
    }


function apply_btn(type_id){

    var input_id        = "file_"+type_id;
    var file_name       = $('#'+input_id).val().split('\\').pop();
    var user_id         = $("#user_id").val();
    var society_id      = $("#society_id").val();
    var society_key     = $("#society_key").val();
    var attach_id       = $("#attach_"+type_id).val();
    var attach_type_id  = $("#attach_type_"+type_id).val();
    if (file_name.length ==0) {
        alert("Please Upload the file.")
        location.reload();
    } 
    else {
     croppie.result('base64').then(function(data) {

      $.ajax({
        url: "/amazon_upload_photograph/"+society_id+"/"+society_key,  
        method: 'POST',
        data: {
          user_id        : user_id,
          society_id     : society_id,
          society_key    : society_key,
          attach_id      : attach_id,
          attach_type_id : attach_type_id,
          file_name      : file_name,  
          image_data     : data
        },
        success: function(response) {
        var responseObject = JSON.parse(response);
          // console.log(response);

          bucketname     = responseObject.bucketname;
          foldername     = responseObject.foldername;
          file_name      = responseObject.file_name;
          file_extension = responseObject.file_extension;
          
         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();
            $("#file-field"+type_id+" span").text("Change")
            $('#myModal').modal('hide');
            location.reload();
        },
        error: function(xhr, status, error) {
          console.log(xhr);
          alert('Error saving image: ' + error);
        }
      });
    });
     }
  }


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('error-del!');
            });
    }
    else {}
}

function  validate_userattachment_form(type_id)
{
    $("#file_"+type_id+"-error").text("")
    if ($("#file_"+type_id).get(0).files.length === 0) {
       $("#file_"+type_id+"-error").text("Please choose your file") 
       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,attach_extension.split(',')) == -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").show();
    // $("#delete").show();
    $("#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();
    // $('.file-field span').html('Uploading ....');

     // alert(file_name)
    //  $("#file_name").val(file_name)
     // return false
     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';
     
     // alert(key)
     AWS.config.update({
         accessKeyId: "AKIAIVJULUNYWYOTNLAQ",
         secretAccessKey: "G9kEjx+3MfwYSPxupwRISUNDRecBAaqVhYKfFZp3",
         region: 'ap-southeast-1', // e.g., us-east-1
     });

    const s3 = new AWS.S3();
    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; // Set the key (path) for the file in the bucket
     
     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 %}