<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <!-- For Resposive Device -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title> <%= settings["WebsiteName"].Value %> || <%= title %></title>

    <!-- Favicon -->
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon.ico">
    <link rel="stylesheet" type="text/css" href="/css/timer.css">
    <!-- Main style sheet -->
    <link rel="stylesheet" type="text/css" href="/css/style.css">

    <!-- responsive style sheet -->
    <link rel="stylesheet" type="text/css" href="/css/responsive.css">

    <!-- Animate -->
    <link rel="stylesheet" type="text/css" href="/vendor/animate.css">

    <!-- Foundation -->
    <link rel="stylesheet" type="text/css" href="/vendor/foundation.min.css">

    <!-- Other -->
    <link rel="stylesheet" type="text/css" href="/stylesheets/style.css">


</head>

<body>

<div class="main-page-wrapper">
    <section style="margin-bottom: 20px" id="contact-section">
        <div class="container send-message">
            <form id="ApplicationForm2" method="post" enctype="multipart/form-data">
                <!--Personal-->
                <div class="box">
                    <div class="row">
                        <div style="margin-right: auto; margin-left: auto" class="small-12 medium-12 large-12">
                            <h4>Personal Info</h4>
                        </div>
                    </div>
                    <!-- Personal Questions-->
                    <!--Name-->
                    <div class="row">
                        <div class="columns small-12 medium-12 large-12">
                            <label for="fullName">Your Full Name <span style="color:#ff0022;">*</span></label>
                            <div class="relative input-wrap">
                                <input id="fullName" type="text" name="name" placeholder="Full Name*">

                                <span class="icon validation small success hide">
									<span class="fa fa-check"></span>
								</span>
                                <span class="icon validation small error hide">
									<span class="fa fa-remove"></span>
								</span>
                            </div>
                            <div class="is-helpful" data-helper="Ex: John Smith"
                                 data-error="Please enter your full name."></div>
                        </div>
                    </div>
                    <!--Email-->
                    <div class="row">
                        <div class="small-12 medium-12 large-12">
                            <div class="columns small-12 medium-12 large-12">
                                <label for="email">Your Email<span style="color:#ff0022;">*</span></label>
                                <div class="relative input-wrap">
                                    <input id="email" type="email" name="email" placeholder="Email *">

                                    <span class="icon validation small success hide">
											<span class="fa fa-check"></span>
										</span>
                                    <span class="icon validation small error hide">
											<span class="fa fa-remove"></span>
										</span>
                                </div>
                                <div class="is-helpful" data-helper="Ex: a@b.c"
                                     data-error="Please enter your email."></div>
                            </div>
                        </div>
                    </div>
                    <!--Phone -->
                    <div class="row">
                        <div class="columns small-12 medium-6 large-6">
                            <label for="phone">Your Phone Number<span style="color:#ff0022;">*</span></label>
                            <div class="relative input-wrap">
                                <input type="tel" name="phone" id="phone" placeholder="Phone Number*">

                                <span class="icon validation small success hide">
									<span class="fa fa-check"></span>
								</span>
                                <span class="icon validation small error hide">
									<span class="fa fa-remove"></span>
								</span>
                            </div>
                            <div class="is-helpful" data-helper="Ex: 01xxxxxxxxx"
                                 data-error="Please enter a valid phone number."></div>
                        </div>
                    </div>
                    <!--Age-->
                    <div class="row">
                        <div class="columns small-12 medium-6 large-6">
                            <label for="age">Your Age<span style="color:#ff0022;">*</span></label>
                            <div class="relative input-wrap">
                                <input type="number" min="15" max="32" name="age" id="age" placeholder="Age*">

                                <span class="icon validation small success hide">
									<span class="fa fa-check"></span>
								</span>
                                <span class="icon validation small error hide">
									<span class="fa fa-remove"></span>
								</span>
                            </div>
                            <div class="is-helpful" data-helper="Ex: 18"
                                 data-error="Please enter a valid age."></div>
                        </div>
                    </div>
                    <!--Cairo Student-->
                    <div class="row">
                        <div class="columns">
                            <div class="small-12 medium-12 large-12">
                                <label for="custudent">Are you a Cairo University Student? *</label>
                                <div class="relative input-wrap">
                                    <select name="custudent" id="custudent">
                                        <option value="">--- Please select ---</option>
                                        <option value="Yes">Yes</option>
                                        <option value="No">No</option>
                                    </select>

                                    <span class="icon validation small success hide">
										<span class="fa fa-check"></span>
									</span>
                                    <span class="icon validation small error hide">
										<span class="fa fa-remove"></span>
									</span>
                                </div>
                                <div class="is-helpful" data-error="Please Select One"></div>
                            </div><!-- /col-24 -->
                        </div><!-- /columns -->
                    </div>
                    <!--Faculty-->
                    <div class="row">
                        <div class="columns small-12 medium-12 large-12">
                            <label for="faculty">Your Faculty <span style="color:#ff0022;">*</span></label>
                            <div class="relative input-wrap">
                                <input id="faculty" type="text" name="faculty" placeholder="Faculty*">

                                <span class="icon validation small success hide">
									<span class="fa fa-check"></span>
								</span>
                                <span class="icon validation small error hide">
									<span class="fa fa-remove"></span>
								</span>
                            </div>
                            <div class="is-helpful" data-helper="Ex: Business, Pharmacy, Law etc."
                                 data-error="Please enter your faculty."></div>
                        </div>
                    </div>
                    <!--Academic Level-->
                    <div class="row">
                        <div class="columns">
                            <div class="small-12 medium-12 large-12">
                                <label for="academic">Academic Level *</label>
                                <div class="relative input-wrap">
                                    <select name="academic" id="academic">
                                        <option value="">--- Please select ---</option>
                                        <option value="1st">1st</option>
                                        <option value="2nd">2nd</option>
                                        <option value="3rd">3rd</option>
                                        <option value="4th">4th</option>
                                        <option value="5th">5th</option>
                                        <option value="6th">6th</option>
                                    </select>

                                    <span class="icon validation small success hide">
										<span class="fa fa-check"></span>
									</span>
                                    <span class="icon validation small error hide">
										<span class="fa fa-remove"></span>
									</span>
                                </div>
                                <div class="is-helpful" data-error="Please Select One"></div>
                            </div><!-- /col-24 -->
                        </div><!-- /columns -->
                    </div>
                    <!--Major-->
                    <div class="row">
                        <div class="columns small-12 medium-12 large-12">
                            <label for="major">Major<span style="color:#ff0022;">*</span></label>
                            <div class="relative input-wrap ">
                                <input id="major" type="text" name="major" placeholder="Major*">

                                <span class="icon validation small success hide">
									<span class="fa fa-check"></span>
								</span>
                                <span class="icon validation small error hide">
									<span class="fa fa-remove"></span>
								</span>
                            </div>
                            <div class="is-helpful" data-helper="Your Major"
                                 data-error="Please enter your Major."></div>
                        </div>
                    </div>
                    <!--Minor-->
                    <div class="row">
                        <div class="columns small-12 medium-12 large-12">
                            <label for="minor">Minor (If Applicable)</label>
                            <div class="relative input-wrap">
                                <input id="minor" type="text" name="minor" placeholder="Minor">

                                <span class="icon validation small success hide">
									<span class="fa fa-check"></span>
								</span>
                                <span class="icon validation small error hide">
									<span class="fa fa-remove"></span>
								</span>
                            </div>
                            <div class="is-helpful" data-helper="Your Minor"
                                 data-error="Please enter your Minor."></div>
                        </div>
                    </div>
                    <!--English Level-->
                    <div class="row">
                        <div class="columns">
                            <div class="small-12 medium-12 large-12">
                                <label for="english">English Level *</label>
                                <div class="relative input-wrap ">
                                    <select name="english" id="english">
                                        <option value="">--- Please select ---</option>
                                        <option value="Good">Good</option>
                                        <option value="Very Good">Very Good</option>
                                        <option value="Excellent">Excellent</option>
                                        <option value="Fluent">Fluent</option>
                                    </select>

                                    <span class="icon validation small success hide">
										<span class="fa fa-check"></span>
									</span>
                                    <span class="icon validation small error hide">
										<span class="fa fa-remove"></span>
									</span>
                                </div>
                                <div class="is-helpful" data-error="Please Select One"></div>
                            </div><!-- /col-24 -->
                        </div><!-- /columns -->
                    </div>
                    <!--Workshops&Courses-->
                    <div class="row">
                        <div class="columns">
                            <div class="small-12 medium-12 large-12">
                                <label for="courses">Courses & Workshops Attended</label>
                                <div class="relative input-wrap">
                                    <textarea id="courses" name="courses"></textarea>
                                    <span class="icon validation small success hide">
										<span class="fa fa-check"></span>
									</span>
                                    <span class="icon validation small error hide">
										<span class="fa fa-remove"></span>
									</span>
                                </div>
                            </div>
                        </div><!-- /columns -->
                    </div>
                    <!--Activities-->
                    <div class="row">
                        <div class="columns">
                            <div class="small-12 medium-12 large-12">
                                <label for="excur">Extra-Curricular Activities</label>
                                <div class="relative input-wrap">
                                    <textarea id="excur" name="excur"></textarea>
                                    <span class="icon validation small success hide">
										<span class="fa fa-check"></span>
									</span>
                                    <span class="icon validation small error hide">
										<span class="fa fa-remove"></span>
									</span>
                                </div>
                            </div>
                        </div><!-- /columns -->
                    </div>
                </div>
                <!--Team-->
                <% let choiceCount = 1 %>
                <div class="box">
                    <div class="row">
                        <div style="margin-right: auto; margin-left: auto" class="small-12 medium-12 large-12">
                            <h4>Team Preferences</h4>
                            <p style="color: #666; font-size: 12px">Attempt all team-related questions, if no questions
                                appear after selecting your team preferences, please refresh the page or use a different
                                browser.</p>
                        </div>
                    </div>
                    <!--Short Answer Questions-->
                    <div class="row">
                        <div class="columns">
                            <div class="small-12 medium-12 large-12">
                                <label for="first">1st Preference *</label>
                                <div class="relative input-wrap">
                                    <select name="first" id="first" class="teamchoice">
                                        <option disabled selected value="">--- Please select ---</option>
                                        <% choices.forEach(choice => { %>
                                            <option value="<%= choice.Name %>"><%= choice.DisplayName %>
                                                - <%= choice.Directorate.DisplayName %> Directorate
                                            </option>
                                        <% }) %>
                                    </select>

                                    <span class="icon validation small success hide">
										<span class="fa fa-check"></span>
									</span>
                                    <span class="icon validation small error hide">
										<span class="fa fa-remove"></span>
									</span>
                                </div>
                                <div class="is-helpful" data-error="Please Select One"></div>
                            </div><!-- /col-24 -->
                        </div><!-- /columns -->
                    </div>
                    <div id="change1">
                    </div>
                    <div class="row">
                        <div class="columns">
                            <div class="small-12 medium-12 large-12">
                                <label for="second">2nd Preference *</label>
                                <div class="relative input-wrap">
                                    <select name="second" id="second" class="teamchoice">
                                        <option disabled selected value="">--- Please select ---</option>
                                        <% choices.forEach(choice => { %>
                                            <option value="<%= choice.Name %>"><%= choice.DisplayName %>
                                                - <%= choice.Directorate.DisplayName %> Directorate
                                            </option>
                                        <% }) %>
                                    </select>

                                    <span class="icon validation small success hide">
										<span class="fa fa-check"></span>
									</span>
                                    <span class="icon validation small error hide">
										<span class="fa fa-remove"></span>
									</span>
                                </div>
                                <div class="is-helpful" data-error="Please Select One"></div>
                            </div><!-- /col-24 -->
                        </div><!-- /columns -->
                    </div>
                    <div id="change2">
                    </div>
                </div>
                <% let i = 1 %>
                <% if(questions["General"]) { %>
                    <!-- General-->
                    <div class="box">
                        <div class="row">
                            <div style="margin-right: auto; margin-left: auto" class="small-12 medium-12 large-12">
                                <h4>General Questions</h4>
                            </div>
                        </div>
                        <!--Questions-->

                        <% questions["General"].forEach((question) => { %>
                        <% if(question.Type === "textarea") { %>
                            <div class="row">
                                <div class="columns">
                                    <div class="small-12 medium-12 large-12">
                                        <label for="G<%= i %>"><%= question.Text %></label>
                                        <div class="relative input-wrap">
                                            <textarea id="G<%= i %>" name="Gen[]"></textarea>
                                            <span class="icon validation small success hide">
										<span class="fa fa-check"></span>
									</span>
                                            <span class="icon validation small error hide">
										<span class="fa fa-remove"></span>
									</span>
                                        </div>
                                    </div>
                                </div><!-- /columns -->
                            </div>
                        <% } else if (question.Type === 'choice' && question.Extra){ %>
                            <%
                                let cont = true
                                let Extra = JSON.parse(question.Extra)
                            %>
                            <% if (cont) { %>
                                <div class="row">
                                    <div class="columns">
                                        <div class="small-12 medium-12 large-12">
                                            <label for="G<%= i %>"><%= question.Text %></label>

                                            <div id="G<%= i %>">
                                                <% Extra.choices.forEach(choice=>{ %>
                                                    <div>
                                                        <input type="radio" name="choice-<%= question.id %>"
                                                               id="choice<%= choiceCount %>"
                                                               value="<%= choice %>">
                                                        <label for="choice<%= choiceCount %>"><%= choice %></label>
                                                    </div>
                                                    <% choiceCount += 1 %>
                                                <% }) %>
                                                <% choiceCount += 1 %>
                                                <% if(Extra['custom'] === '1'){ %>

                                                    <div>
                                                        <input type="radio" name="choice-<%= question.id %>"
                                                               id="choice<%= question.id %>"
                                                               value="Other">
                                                        <label for="choice<%= question.id %>">Other</label>

                                                        <div class="reveal-if-active">
                                                            <input type="text" disabled class="disable-if-inactive"
                                                                   name="choice-<%= question.id %>"
                                                                   placeholder="Please Specify"
                                                                   data-disable-pair="#choice<%= question.id %>">
                                                            <span class="icon validation small success hide">
                                                                     <span class="fa fa-check"></span>
                                                                </span>
                                                            <span class="icon validation small error hide">
                                                                    <span class="fa fa-remove"></span>
                                                                </span>
                                                        </div>
                                                    </div>
                                                <% } %>
                                            </div>
                                        </div>
                                    </div><!-- /columns -->
                                </div>
                            <% } %>
                        <% } %>
                        <% i += 1 %>
                        <% }) %>
                    </div>
                <% } %>
                <% if(questions["Situational"]) { %>
                    <% let x = 1 %>
                    <!--Situational-->
                    <div class="box">
                        <div class="row">
                            <div style="margin-right: auto; margin-left: auto" class="small-12 medium-12 large-12">
                                <h4>Situational Questions</h4>

                            </div>
                        </div>
                        <!--Questions-->

                        <% questions["Situational"].forEach((question) => { %>
                            <% if(question.Type === "textarea"){ %>
                                <div class="row">
                                    <div class="columns">
                                        <div class="small-12 medium-12 large-12">
                                            <label for="S<%= x %>"><%= question.Text %></label>
                                            <div class="relative input-wrap">
                                                <textarea id="S<%= x %>" name="sit[]"></textarea>
                                                <span class="icon validation small success hide">
										<span class="fa fa-check"></span>
									</span>
                                                <span class="icon validation small error hide">
										<span class="fa fa-remove"></span>
									</span>
                                            </div>
                                        </div>
                                    </div><!-- /columns -->
                                </div>
                            <% } else if (question.Type === 'choice' && question.Extra){ %>
                                <%
                                    let cont = true
                                    let Extra = JSON.parse(question.Extra)
                                %>
                                <% if (cont) { %>
                                    <div class="row">
                                        <div class="columns">
                                            <div class="small-12 medium-12 large-12">
                                                <label for="S<%= x %>"><%= question.Text %></label>
                                                <div id="S<%= x %>">
                                                    <% Extra.choices.forEach(choice=>{ %>
                                                        <div>
                                                            <input type="radio" name="choice-<%= question.id %>"
                                                                   id="choice<%= choiceCount %>"
                                                                   value="<%= choice %>">
                                                            <label for="choice<%= choiceCount %>"><%= choice %></label>
                                                        </div>
                                                        <% choiceCount += 1 %>
                                                    <% }) %>
                                                    <% choiceCount += 1 %>
                                                    <% if(Extra['custom'] === '1'){ %>

                                                        <div>
                                                            <input type="radio" name="choice-<%= question.id %>"
                                                                   id="choice<%= question.id %>"
                                                                   value="Other">
                                                            <label for="choice<%= question.id %>">Other</label>

                                                            <div class="reveal-if-active">
                                                                <input type="text" disabled class="disable-if-inactive"
                                                                       name="choice-<%= question.id %>"
                                                                       placeholder="Please Specify"
                                                                       data-disable-pair="#choice<%= question.id %>">
                                                                <span class="icon validation small success hide">
                                                                     <span class="fa fa-check"></span>
                                                                </span>
                                                                <span class="icon validation small error hide">
                                                                    <span class="fa fa-remove"></span>
                                                                </span>
                                                            </div>
                                                        </div>
                                                    <% } %>
                                                </div>
                                            </div>
                                        </div><!-- /columns -->
                                    </div>
                                <% } %>
                            <% } %>
                            <% x += 1 %>
                        <% }) %>

                    </div>
                <% } %>
                <div class="box">
                    <div class="row">
                        <div class="columns" style="text-align: center">
                            <div class="small-12 medium-12 large-12">
                                <input type="hidden" name="token" id="token" value="<%= token %>">
                                <button type="submit" id="submit" class="btn hvr-bounce-to-right"
                                        style="margin-left: auto; margin-right: auto; font-size: 18px; border-radius: 2px; border-width: 2px;">
                                    Submit
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <!--End-->
            </form>
        </div>
    </section>
</div>

<!---------Footer---------->
<footer>
    <div class="container">
        <a href="/" class="logo"><img src="images/logo/logo.png" alt="Logo"></a>

        <ul>
        <li><a href="<%=settings['Facebook'].Value%>" class="tran3s round-border"><i
                            class="fa fa-facebook" aria-hidden="true"></i></a></li>
            <!--                <li><a href="#" class="tran3s round-border"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>-->
        <li><a href="<%=settings['LinkedIn'].Value%" class="tran3s round-border"><i
                            class="fa fa-linkedin" aria-hidden="true"></i></a></li>
        <li><a href="<%=settings['Instagram'].Value%" class="tran3s round-border"><i
                            class="fa fa-instagram" aria-hidden="true"></i></a></li>
        </ul>
    </div>
</footer>


<!---------Pre Loader---------->
<div id="loader-wrapper">
    <div id="preloader_1">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>


<!-- Timer -->
<!--    <div class="timer tran3s p-color-bg">-->
<!--        <p id="countdown"></p>-->
<!--    </div>-->

<div id="app"></div>
<!-- Js Files -->
<!-- j Query -->
<script src="/javascript/jquery-3.6.0.min.js"></script>
<script src="/javascript/jquery-migrate-3.3.2.min.js"></script>

<!-- Bootstrap JS -->
<script type="text/javascript" src="/vendor/bootstrap/bootstrap.min.js"></script>

<!-- Foundation -->
<script type="text/javascript" src="/vendor/foundation.min.js"></script>

<!-- Wow -->
<script type="text/javascript" src="/vendor/wow.min.js"></script>

<!-- Foundation -->
<script type="text/javascript" src="/vendor/foundation.min.js"></script>

<!-- Jquery-UI -->
<script src="/javascript/jquery-ui.min.js"></script>

<!-- AJAXSubmit -->
<script type="text/javascript" src="/vendor/jquery.ajaxSubmit.min.js"></script>

<!-- Validation -->
<script type="text/javascript" src="/js/validation.js"></script>

<!--Form Persist-->
<script type="text/javascript" src="/js/savestorage.min.js"></script>
<!-- Toasts -->
<% include ../partials/toasts.ejs %>

<!-- Main js -->
<script type="text/javascript" src="/js/main.js"></script>

<script>
    let timeout = false;
    let questions = JSON.parse(`<%- TeamQuestions %>`)
    let i = 0
    let questionsHTML
    $(".teamchoice").on('change', function () {
        let val = $(this).val()
        let id = $(this).attr('id')
        let Qdiv
        if (id === "first") {
            Qdiv = `change1`
        } else {
            Qdiv = `change2`
        }
        questionsHTML = ''
        if (questions[val]) {
            for (const question of questions[val]) {
                if (question.Type === 'textarea') {
                    questionsHTML = questionsHTML + `<div class="row">
                            <div class="columns">
                                <div class="small-12 medium-12 large-12">
                                    <label for="T${i}">${question.Text}</label>
                                    <div class="relative input-wrap">
                                        <textarea id="T${i}" name="team[]"></textarea>
                                        <span class="icon validation small success hide">
                                            <span class="fa fa-check"></span>
                                        </span>
                                        <span class="icon validation small error hide">
                                            <span class="fa fa-remove"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>`
                } else if (question.Type === 'image') {
                    questionsHTML = questionsHTML + `
                                <div class="row">
                                    <div class="form-group columns small-12 medium-12 large-12">
                                     <label for="T${i}" class="col-md-12 col-form-label">${question.Text}</label>
                                        <p style="color: #666; font-size: 12px">Only JPG, JPEG, GIF, PNG files are allowed, Max file size: 15MB</p>
                                     <div class="col-ms-12">
                                          <input id="T${i}" type="file" name="${val}/${question.id}" accept="image/jpeg, image/png, image/gif" onchange="SizeCheck(this)"/>
                                     </div>
                                    </div>
                                </div>`
                } else if (question.Type === 'choice') {

                } else if (question.Type === 'voice') {

                }
                i += 1
            }
            document.getElementById(`${Qdiv}`).innerHTML = questionsHTML
        } else {
            document.getElementById(`${Qdiv}`).innerHTML = ''
        }
    })

    function SizeCheck(t) {
        if (t.files[0].size > 15728640) {
            toastr.error("File is too big!");
            t.value = "";
        }
    }

    function format(time) {
        // Hours, minutes and seconds
        let hrs = ~~(time / 3600);
        let mins = ~~((time % 3600) / 60);
        let secs = ~~time % 60;

        // Output like "1:01" or "4:03:59" or "123:03:59"
        let ret = "";
        if (hrs > 0) {
            ret += "" + hrs + ":" + (mins < 10 ? "0" : "");
        }
        ret += "" + mins + ":" + (secs < 10 ? "0" : "");
        ret += "" + secs;
        return ret;
    }

    let remaining = <%= remaining %>;

    // $(document).on('change', '#first', ()=>{
    //     $('#change1q').fadeIn(500).text(questions[$('#first').val()][0]);
    //     $('#change1').slideDown(500).show();
    //
    // })
    // $(document).on('change', '#second', ()=>{
    //     $('#change2q').text(questions[$('#second').val()][0]).fadeIn(500);
    //     $('#change2').slideDown(500).show();
    // });

    // Credit: Mateusz Rybczonec

    const FULL_DASH_ARRAY = 283;
    const WARNING_THRESHOLD = 120;
    const ALERT_THRESHOLD = 30;

    const COLOR_CODES = {
        info: {
            color: "green"
        },
        warning: {
            color: "orange",
            threshold: WARNING_THRESHOLD
        },
        alert: {
            color: "red",
            threshold: ALERT_THRESHOLD
        }
    };

    const TIME_LIMIT = <%= parseInt(settings["FormTime"].Value) + 10 %>;
    let timePassed = TIME_LIMIT - <%= remaining %>;
    let timeLeft = <%= remaining %>;
    let timerInterval = null;
    let remainingPathColor = COLOR_CODES.info.color;

    document.getElementById("app").innerHTML = `
        <div class="base-timer">
          <svg class="base-timer__svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
            <g class="base-timer__circle">
              <circle class="base-timer__path-elapsed" cx="50" cy="50" r="45"></circle>
              <path
                id="base-timer-path-remaining"
                stroke-dasharray="283"
                class="base-timer__path-remaining ${remainingPathColor}"
                d="
                  M 50, 50
                  m -45, 0
                  a 45,45 0 1,0 90,0
                  a 45,45 0 1,0 -90,0
                "
              ></path>
            </g>
          </svg>
          <span id="base-timer-label" class="base-timer__label">${formatTime(
        timeLeft
    )}</span>
        </div>
        `;

    startTimer();

    function onTimesUp() {
        clearInterval(timerInterval);

        toastr.error("The time has ended, you have 60 seconds to submit");
        let pass = 60;
        if (timeLeft < 0) {
            pass = pass + timeLeft
        }

        function timer2() {
            timerInterval = setInterval(() => {
                    pass--;
                    if (pass === 30) {
                        toastr.error("30 seconds Left");
                    }
                    if (pass < 10 && pass > 0) {
                        toastr.error(pass + " seconds Left");
                    }
                    if (pass <= 0) {
                        toastr.error("Timeout");
                        let form = document.getElementById("ApplicationForm2")
                        let data = new FormData(form);
                        $.ajax({
                            type: 'POST',
                            url: '/applicationajax',
                            processData: false,  // do not process the data as url encoded params
                            contentType: false,   // by default jQuery sets this to urlencoded string
                            data: data,
                            success: (res) => {
                                toastr.success(res.msg);
                                $(location).attr('href', '/timeout');
                            },
                            error: () => {
                                    $(location).attr('href', '/tokenerror');
                                }
                            }
                        );
                        clearInterval(timerInterval);
                    }
                }
                , 1000);
        }

        timer2();
    }

    function startTimer() {
        timerInterval = setInterval(() => {
            timePassed = timePassed += 1;
            timeLeft = TIME_LIMIT - timePassed;
            if (timeLeft > 0) {
                document.getElementById("base-timer-label").innerHTML = formatTime(
                    timeLeft
                );

            } else {
                document.getElementById("base-timer-label").innerHTML = formatTime(0);
            }

            setCircleDasharray();
            setRemainingPathColor(timeLeft);

            if (timeLeft <= 0) {
                onTimesUp();
            }
        }, 1000);
    }

    function formatTime(time) {
        const minutes = Math.floor(time / 60);
        let seconds = time % 60;

        if (seconds < 10) {
            seconds = `0${seconds}`;
        }

        return `${minutes}:${seconds}`;
    }

    function setRemainingPathColor(timeLeft) {
        const {alert, warning, info} = COLOR_CODES;
        if (timeLeft <= alert.threshold) {
            document
                .getElementById("base-timer-path-remaining")
                .classList.remove(warning.color);
            document
                .getElementById("base-timer-path-remaining")
                .classList.add(alert.color);
        } else if (timeLeft <= warning.threshold) {
            document
                .getElementById("base-timer-path-remaining")
                .classList.remove(info.color);
            document
                .getElementById("base-timer-path-remaining")
                .classList.add(warning.color);
        }
    }

    function calculateTimeFraction() {
        const rawTimeFraction = timeLeft / TIME_LIMIT;
        return rawTimeFraction - (1 / TIME_LIMIT) * (1 - rawTimeFraction);
    }

    function setCircleDasharray() {
        const circleDasharray = `${(
            calculateTimeFraction() * FULL_DASH_ARRAY
        ).toFixed(0)} 283`;
        document
            .getElementById("base-timer-path-remaining")
            .setAttribute("stroke-dasharray", circleDasharray);
    }

    let VerifyInput = () => {
        let valid = true;
        $("#ApplicationForm2 input").each(function () {
            if (!$(this).parent().hasClass("is-valid") && $(this).parent().hasClass("is-required")) {
                valid = false;
                $(this).trigger("blur");
            }
        });
        $("#ApplicationForm2 textarea").each(function () {
            if (!$(this).parent().hasClass("is-valid") && $(this).parent().hasClass("is-required")) {
                valid = false;
                $(this).trigger("blur");
            }
        });
        return valid;
    }
    // $('#ApplicationForm2').saveStorage({
    //     exclude: ['password','hidden']
    // });
    let OtherOptionHandle = {

        init: function () {
            // kick it off once, in case the radio is already checked when the page loads
            this.applyConditionalRequired();
            this.bindUIActions();
        },

        bindUIActions: function () {
            // when a radio or checkbox changes value, click or otherwise
            $("input[type='radio'], input[type='checkbox']").on("change", this.applyConditionalRequired);
        },

        applyConditionalRequired: function () {
            // find each input that may be hidden or not
            $(".disable-if-inactive").each(function () {
                let el = $(this);
                // find the pairing radio or checkbox
                if ($(el.data("disable-pair")).is(":checked")) {
                    // if its checked, the field should be enabled
                    el.prop("disabled", false);
                } else {
                    // otherwise it should not
                    el.prop("disabled", true);
                }
            });
        }

    };

    OtherOptionHandle.init();
    let timerSyncInterval;

    function timerSync() {
        timerSyncInterval = setInterval(() => {
            let token = document.getElementById("token").value
            $.ajax({
                    type: 'get',
                    url: `/checktime?token=${token}`,
                    success: (res) => {
                        if (res.passed > 0) {
                            timePassed = res.passed
                        }


                    }
                }
            );


        }, 30000);
    }

    timerSync();
</script>


</body>
</html>