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 nav_btn_gray" value="2" onclick="jump_step(2)">Step 2</button>
  </li>
  <li class="nav-item p-2">
    <button type="button" class="nav-link nav_btn_gray" value="3" onclick="jump_step(3)">Step 3</button>
  </li>
  <li class="nav-item p-2">
    <button type="button" class="nav-link active" value="4" >Step 4</button>
  </li>
  
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active p-2 rounded" role="tabpanel">
    <form method="POST" action="{{url_for('main.Mail',user_id=data.user_id,abs_id=abs_id,abs_type=abs_type,conf_id=conf_id,conf_key=conf_key)}}" id="form_s4">
      <h3 class="text-center font-weight-bold text-danger mt-2">Verify Your Abstract before submission</h3>
      <h4 class="alert alert-primary text-center">
        Please review the details provided by you before submitting.<br />
        Changes cannot be made once submitted.
      </h4>
      <!-- step 1 -->
      <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-12 form-group">
          <label class="font-weight-bold">Chief Author Membership Number</label>
          <div>{{data.membership_no or 'Non-Member'}}</div>
        </div>
        <hr />
        <div class="col-lg-6 col-md-6 col-sm-12 form-group">
          <label class="font-weight-bold">Chief Author Name</label>
          <div>{{data.full_name or ''}}</div>
        </div>
      </div>
      <div class="row">
        <div class="col form-group">
          <label class="font-weight-bold">Presenting Author:</label>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="table-responsive mobile-responsive">
            <table class="table table-bordered">
              <thead  class="thead-dark text-center">
                <th scope="Membership no">Membership no</th>
                <th scope="Authors name">Authors name</th>
                <th scope="Email">Email</th>
                <th scope="Mobile">Mobile</th>
              </thead>
              <tbody>
                {% if data2 %}
                <tr>
                  <td data-label="Membership no">{{data2.membership_no or 'Non-Member'}}</td>
                  <td data-label="Author name">{{data2.full_name or ''}}</td>
                  <td data-label="EMAIL">{{data2.email or ''}}</td>
                  <td data-label="MOBILE">{{data2.mobile or ''}}</td>
                </tr>
                {% endif %}
              </tbody>
            </table>
          </div>
        </div>
      </div>
      
      
      <!-- end step 1 -->
      <!-- step 2 -->
      <br>
      <div class="row tiles">
        <div class="col">
          <label class=""><b>Title of the Video </b> </label>
        </div>
      </div>
      <div class="row">
        <div class="col form-group">
          <textarea name="title" id="title" disabled class="form-control" placeholder="Title of paper" value="">{{data.title or ''}}</textarea>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <label><b>Synopsis</b></label>
          <span id="chars1" style="color: blue;"></span>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <textarea name="synopsis" id="synopsis" disabled class="form-control" cols="50" rows="5" placeholder="Synopsis" value="">{{data.synopsis or ''}}</textarea>
        </div>
      </div><br>
    {% if img: %}
      <div class="row ">
        <div class="col-md-6 offset-md-3 mb-4" id="video_upload">
            <div class="card text-white text-center user_attach_card mb-3" >
                <div class="card-header">Video<br>[Format : MP4 ]<br></div>
                <div class="card-body">
                     {% set img=img[0] %}
                    {% if img.path : %}
                        {% set image_display = "block" %}
                    {% else %}
                        {% set image_display = "none" %}    
                    {% endif %}

                    <div id="show_img" style="display:{{ image_display }}" >
                        {% if img.path : %} 
                            {% set  src= img.path+img.file_name %}
                            {% set img_hide = "block" %}
                        {% else %}
                            {% set  src= "" %}
                        {% endif %}
                        
                        <video id="video_file" width="100%" height="auto" controls autoplay controlsList="nodownload">                                    
                            <source id="video" src="{{ src}}" type="video/mp4">
                        </video>
                            <!-- <img src="{{ src}}" id="img" alt="Proof" width="100%" height="auto" style="max-height: 150px;">                                    -->
                    </div>
                        <div class="progress" style="display:none;">
                            <div class="progress-bar " max="100" value="0"> </div>
                        </div>
                        <button type="button" style="display:none;" class="progress_btn btn btn-danger" id="cancel_upload">Cancel Upload</button>
                    
                    <div class=" btn btn-primary file-field-vide1 btn-block" style="display:none;"></div>
                    
                    
            </div>
        </div>
    </div>
</div>
{% endif %}

      <!-- end step 2-->
      <!-- step 3-->
      {% if data1 %}
      <label class="font-weight-bold mt-2">Following are the Co-Author you have selected :</label>
      <div class="table-responsive mobile-responsive py-2">
        <table class="table table-bordered table-striped">
          <thead  class="thead-dark text-center">
            <th scope="col">Membership no</th>
            <th scope="col">Full name</th>
            <th scope="col">Email</th>
            <th scope="col">Mobile</th>
          </thead>
           {% for i in data1 %}
          <tbody class="text-center">
            <tr>
              <td data-label="Membership no">{{i.membership_no or 'Non-Member'}}</td>
              <td data-label="Full name">{{i.full_name or ''}}</td>
              <td data-label="Email">{{i.email or ''}}</td>
              <td data-label="Mobile">{{i.mobile or ''}}</td>
            </tr>
          </tbody>
          {% endfor %} 
        </table>
      </div>
      {% endif %}
      <!-- end step 3-->
      <div>
        <label class="font-weight-bold">NOTE</label>
        <ul class="ml-4" style="line-height: 25px;">
          <li>Online submission will be taken as signed by the Chief Author</li>
          <li>This presentation may be recorded by the Society & distributed in any form to the Delegates and others.</li>
          <li>Clicking on submit button will submit your abstract for further evaluation. Subsequent to this it will not be possible for you to edit your abstract.</li>
          <li>We declare that myself and Co-authors are involved actively in the above research paper. The work is solely done by myself and the Co-authors.</li>
          <li>We declare that this Paper / Poster / Video was not presented in any other conferences or published in any other journals.</li>
        </ul>
         
        <input type="checkbox" name="checkbox" id="checkbox" value="1" /><label for="checkbox" class="ml-2">I have read & understood the <a target="_blank" href="{{ data.setting_value or '#'}}">Guidelines</a></label><br />
        <label id="checkbox-error" class="error" for="checkbox"></label>
      </div>
      <div class="row py-2">
        <div class="col">
          <input type="hidden" name="abs" id="abs_id" value="{{abs_id}}" />
          <input type="hidden" name="abs_type" id="abs_type" value="{{abs_type}}" />
          <input type="hidden" name="step" id="step" value="4" />
          <input type="hidden" name="cur_step" id="cur_step" value="{{ data.cur_step or 0 }}">
          <input type="hidden" name="is_next" id="is_next" value="1" />
          <input type="button" name="Previous" id="Previous" class="btn btn-primary" value="Previous" onclick="move(4,0)" />
        </div>
        <button class="float-right btn btn-primary" id="submit">Submit</button>
      </div>
    </form>
    {% block script %}
    <script type="text/javascript">
      $("#submit").click(function() {
        validation();
        if ($("form").valid()) {
          submit1();
        }
      });

      function submit1() {
        var r = confirm(
          "It is not possible to edit your abstract after submit. Do you want to submit it ? Click OK to confirm." +
          "\n" +
          "\n" +
          "While submitting, Please do not press ‘Back‘ button or Close the window. Please wait patiently until the submission is complete." +
          "\n"+
          "\n"+
          "After submitting if you want to do the changes in your submission write to support@vrsi.in"
        );
        if (r == false) {
          $("form").submit(function(e) {
            e.preventDefault();
          });
        } else {
          $("form").submit();
        }
      }

      function validation() {
        $("form").validate({
          rules: {
            checkbox: {
              required: true,
            },
          },
          messages: {
            checkbox: "Please, accept Terms & Conditions",
          },
        });
      }

    </script>
    {% endblock %}
  </div>
</div>