Sindbad~EG File Manager

<ul class="nav nav-tabs" id="myTab" role="tablist">
         <li class="nav-item p-2">
            <button type="button" class="nav-link nav_btn_gray " value="1" onclick="jump_step(1)" aria-selected="true">Step 1</button>
        </li>
        <li class="nav-item p-2">
            <button type="button" class="nav-link active " value="2">Step 2</button>
        </li>
        <li class="nav-item p-2">
            <button type="button" class="nav-link nav_btn_gray" value="3" onclick="{% if data.cur_step >= 2 %}jump_step(3){% endif %}">Step 3</button>
        </li>
        <li class="nav-item p-2">
            <button type="button" class="nav-link nav_btn_gray" value="4" onclick="{% if data.cur_step >= 3 %}jump_step(4){% endif %}">Step 4</button>
        </li>
        <li class="nav-item p-2">
            <button type="button" class="nav-link nav_btn_gray" value="5" onclick="{% if data.cur_step >= 4 %}jump_step(5){% endif %}">Step 5</button>
        </li>
    </ul>

<div class="container">
    <form action="{{url_for('main.StepPost_2',abs_type=abs_type,conf_id=conf_id,conf_key=conf_key)}}" id="form_s2" method="POST">
       
        <!--<div class="row">-->
        <!--    <div class="col">-->
        <!--        <div><label class="font-weight-bold">Upload Image: </label></div>-->
        <!--        <div {% if data.path %} style="display: none;" {% endif %} id="Upload_btn_div" ><button type="button" class="btn btn-link photo_upload" id="photo_upload">( Please Upload Your image )</button></div>-->
        <!--        <div {% if not data.path %} style="display: none;" {% endif %} class="img_div">-->
        <!--            <img src="{{ data.path or '' }}{{ data.file_name }}" width="100px" id="uploaded_img">-->
        <!--            <button type="button" class="btn btn-primary photo_upload" id="photo_upload">Change</button>-->
        <!--            <button type="button" class="btn btn-danger photo_delete" id="photo_upload">Remove</button>-->
        <!--        </div>-->
        <!--    </div>-->
        <!--</div>-->
        <div class="row tiles">
            <div class="col">
                <label class="font-weight-bold">Title of the Paper (not exceeding 200 characters)<span class="text-danger">*</span></label>
                <span id="chars" class="text-primary ml-2"></span>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <textarea name="title" id="title" class="form-control" placeholder="Title of the Paper" value="">{{data.title or ''}}</textarea>
            </div>
        </div>
        <br />
        <div class="row">
            <div class="col">
                <label class="font-weight-bold">Aims and Objectives (not exceeding 1000 characters) <span class="text-danger">*</span></label><span id="chars1" class="text-primary ml-2"></span><br><span class="text-danger">To help fair evaluation of your, please do not reveal your personal / hospital / Institution / Organisation identity.  Revealing the identity may lead to rejection of your abstract automatically.</span>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <textarea name="synopsis" id="synopsis" class="form-control" cols="50" rows="5" placeholder="Aims and Objectives" value="">{{data.synopsis or ''}}</textarea>
            </div>
        </div>
        <br>
        <div class="row">
            <div class="col">
                <label class="font-weight-bold">Materials and Methods (not exceeding 1500 characters) <span class="text-danger">*</span> </label><span id="chars2" class="text-primary ml-2"></span><br><span class="text-danger">To help fair evaluation of your, please do not reveal your personal / hospital / Institution / Organisation identity.  Revealing the identity may lead to rejection of your abstract automatically.</span>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <textarea name="methods" id="methods" class="form-control" cols="50" rows="5" placeholder="Materials and Methods" value="">{{data.methods or ''}}</textarea>
            </div>
        </div>
        <br>
        <div class="row">
            <div class="col">
                <label class="font-weight-bold">Results and Conclusions (not exceeding 1000 characters) <span class="text-danger">*</span>  </label><span id="chars3" class="text-primary ml-2"></span>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <textarea name="results" id="results" class="form-control" cols="50" rows="5" placeholder="Results and conclusions" value="">{{data.results or ''}}</textarea>
            </div>
        </div>
        <div class="row py-2">
            <div class="col">
                 <input type="button" name="Previous" id="Previous" class="btn btn-primary" value="Previous" onclick="move(2,0)" />
            </div>
            <div class="col">
                 <input type="button" name="next" id="next" class="btn btn-primary float-right" value="Next" onclick="move(2,1)" />
            </div>
        </div>
        <input type="hidden" name="user_id" id="user_id" value="{{user_id}}" />
        <input type="hidden" name="abs_id" id="abs_id" value="{{abs_id}}" />
        <input type="hidden" name="cur_step" id="cur_step" value="{{ data.cur_step or 0 }}">
        <input type="hidden" name="abs_type" id="abs_type" value="{{data.abs_type}}" />
        <input type="hidden" name="step" id="step" value="2">
        <input type="hidden" name="is_next" id="is_next" value="1">
    </form>
</div>
<form id="img_form">
  <div class="modal" id="img_upload">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Oral Presentation</h4>
          <button type="button" class="close close_btn" data-dismiss="modal">&times;</button>
        </div>

        <!-- Modal body -->
        <div class="modal-body container">
          <div class="row">
            <div class="col">
                <label class="text-primary">Please Upload Image</label>
                <input type="file" name="file" id="file" class="form-control" accept="Image/*">
            </div>
        </div>
        </div>

        <!-- Modal footer -->
        <div class="modal-footer">
            <button type="button" class="btn btn-sm btn-success upload_btn">Upload</button>
          <button type="button" class="btn btn-sm btn-danger close_btn" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</form>
{% block script %}
<script type="text/javascript">
    $(document).ready(function () {
        // img_upload functions
        var abs_id    = {{ data.abs_id }};
        var abs_type  = "{{ data.abs_type }}";
        var conf_id   = $("#conf_id").val();
        var conf_key  = $("#conf_key").val();
        $(".photo_upload").click(function() {
            $("#img_upload").show();
        })
        $(".upload_btn").click(function() {
          uploaduser()  
        })
        function uploaduser() {
           var fd = new FormData();
           var img = new FormData($("#img_form")[0]);
           fd.append('file', img);
            ShowProgress();
           $.ajax({
             type: 'POST',
             url: BaseUrl +"/img_upload/"+abs_id+"/"+abs_type+"/"+conf_id+"/"+conf_key,
             data: img,
             contentType: false,
             processData: false,
             cache: false,
             dataType: 'json',
           }).done(function(data, jqXHR) {
            // alert(data)
            StopProgress(); 
            $("#Upload_btn_div").hide();
            $("#img_upload").hide(); 
            $(".img_div").show();
            $("#uploaded_img").attr('src',data["path"]+data["file_name"])
            // $("#asset_data").val(data)
           }).fail(function(data) {
            StopProgress(); 
           });
         }

        $(".photo_delete").click(function() {
            var r = confirm("confirm to delete!");
            if (r == true) {
            ShowProgress();
            $.ajax({
                type: "GET",
                url: BaseUrl +"/remove_img/"+conf_id+"/"+conf_key,
                data: {
                    'abs_id'  : abs_id,
                    'conf_id' : conf_id,
                    },
                dataType: "json",
                success: function (data) {
                StopProgress(); 
                $("#Upload_btn_div").show();
                $(".img_div").hide();
                return true;
              },
          }); 
            } 
            else {
                    
              }
        })

        $(".close_btn").click(function() {
            $('.modal').hide();
        })
        // end of img functionss
        var $title = $("#title");
        var $synopsis = $("#synopsis");
        var $methods = $("#methods");
        var $results = $("#results");
        var $chars = $("#chars");
        var $chars1 = $("#chars1");
        var $chars2 = $("#chars2");
        var $chars3 = $("#chars3");
        var x200 = 200;
        var x1000 = 1000;
        var x1500 = 1500;
        
        $chars.html (x200  + " characters remaining");
        $chars1.html(x1000 + " characters remaining");
        $chars2.html(x1500 + " characters remaining");
        $chars3.html(x1000 + " characters remaining");

        
        $title.on("keyup", countChar);
        $synopsis.on("keyup", countChar1);
        $methods.on("keyup", countChar2);
        $results.on("keyup", countChar3);
        
        countChar();
        countChar1();
        countChar2();
        countChar3();

        function countChar() {
            var textLength = $title.val().length;
            var textRemaining = x200 - textLength;
            if (textRemaining < 0) {
                $chars.attr("class", "text-danger ml-2");
                var textRemaining1 = -textRemaining;
                $chars.html(textRemaining + " characters exceeded");
            } else {
                $chars.attr("class", "text-primary ml-2");
                $chars.html(textRemaining + " characters remaining");
            }
        }
        function countChar1() {
            var textLength = $synopsis.val().length;
            var textRemaining = x1000 - textLength;
            if (textRemaining < 0) {
                $chars1.attr("class", "text-danger ml-2");
                var textRemaining1 = -textRemaining;
                $chars1.html(textRemaining + " characters exceeded");
            } else {
                $chars1.attr("class", "text-primary ml-2");
                $chars1.html(textRemaining + " characters remaining");
            }
        }
        function countChar2() {
            var textLength = $methods.val().length;
            var textRemaining = x1500 - textLength;
            if (textRemaining < 0) {
                $chars2.attr("class", "text-danger ml-2");
                var textRemaining1 = -textRemaining;
                $chars2.html(textRemaining + " characters exceeded");
            } else {
                $chars2.attr("class", "text-primary ml-2");
                $chars2.html(textRemaining + " characters remaining");
            }
        }
        function countChar3() {
            var textLength = $results.val().length;
            var textRemaining = x1000 - textLength;
            if (textRemaining < 0) {
                $chars3.attr("class", "text-danger ml-2");
                var textRemaining1 = -textRemaining;
                $chars3.html(textRemaining + " characters exceeded");
            } else {
                $chars3.attr("class", "text-primary ml-2");
                $chars3.html(textRemaining + " characters remaining");
            }
        }
        // $("#previous").click(function () {
        //     var abs_id = $("#abs_id").val();
        //     var abs_type = $("#abs_type").val();
        //     $.ajax({
        //         type: "GET",
        //         url: BaseUrl + "/pp/step1",
        //         data: {
        //             abs_id: abs_id,
        //             abs_type: abs_type,
        //         },
        //         dataType: "html",
        //         success: function (data) {
        //             if (data == 0) {
        //             } else {
        //                 $("#content").html(" ");
        //                 $("#content").html(data);
        //             }
        //         },
        //     });
        // });
        // $("#next").click(function () {
        //     alert("in next");
        // });
    });
</script>
{% endblock %}