<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="images/fav.png" rel="icon" />
    <title>Sesp</title>
    <link rel="stylesheet" href="css/icons.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
        integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" />

</head>

<body>
    <?php include 'include.php';?>
    <section class="inner-banner d-flex align-items-center">
        <div class="container-fluid">
            <h1>APPLY NOW</h1>
        </div>
    </section>



    <section class="section-sesp pt-80 margin-responsive">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-9 course-apply">

                    <div class="step1">
                        <!-- <h6>STEP 1 OF 3 </h6>
                        <div class="progress progress-striped active">
                            <div role="progressbar " style="width: 30%;" class="progress-bar "><span>30%</span></div>
                        </div> -->
                        <div class="longcrs-form">
                            <h3>Personal Information</h3>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-grp mb-25">
                                    <label for="name">First Name</label>
                                        <input type="text" class="form-control" id="name" autocomplete="off"
                                            required="">
                                     
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-grp mb-25">
                                    <label for="name">Middle Name</label>
                                        <input type="text" class="form-control" id="name" autocomplete="off"
                                            required="">
                                       
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-grp mb-25">
                                    <label for="name">Last Name</label>
                                        <input type="text" class="form-control" id="name" autocomplete="off"
                                            required="">
                                      
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-grp mb-25">
                                    <label for="name">Mobile Number</label>
                                        <input type="text" class="form-control" id="name" autocomplete="off"
                                            required="">
                                      
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-grp">
                                    <label for="name">National ID</label>
                                        <input type="text" class="form-control" id="name" autocomplete="off"
                                            required="">
                                       
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-grp">
                                    <label for="name">Email</label>
                                        <input type="text" class="form-control" id="name" autocomplete="off"
                                            required="">
                                     
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <div class="form-grp">
                                    <label for="name">Date of birth</label>
                                        <input type="date" class="form-control" id="name" autocomplete="off"
                                            required="">
                                       
                                    </div>
                                </div>


                                <!-- <div class="col-md-12 mt-4 d-flex justify-content-center">
                                    <a href="#" class="next-btn nxt" id="nxt">Next</a>
                                </div> -->
                            </div>
                        </div>
                    </div>

                    <div class="step2">
                        <!-- <h6>STEP 2 OF 3</h6>
                        <div class="progress progress-striped active">
                            <div role="progressbar " style="width: 60%;" class="progress-bar "><span>60%</span></div>
                        </div> -->
                        <div class="longcrs-form">
                            <h3>Interest In SESP</h3>
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="mb-25 form-grp">
                                        <label for="diploma-type">Diploma Type</label>
                                        <select class="form-control" id="diploma-type">
                                            <option>SESP Courses</option>
                                            <option>Short Courses</option>
                                            <option>Any New Diploma</option>

                                        </select>

                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="mb-25 form-grp">
                                        <label for="diploma-type">Semester/Year</label>
                                        <select class="form-control" id="diploma-type">
                                            <option>Fall</option>
                                            <option>Spring</option>


                                        </select>

                                    </div>
                                </div>
                                <div class="col-md-7">
                                    <div class="mb-25 form-grp">
                                        <label for="diploma-type">Program</label>
                                        <select class="form-control" id="diploma-type">
                                            <option>Associate Diploma In Health Safety & Environment</option>
                                            <option>Associate Diploma In Operational And Maintenance Engineering
                                                (ADOME)</option>
                                            <option>Associate Diploma In Technology (ADT)</option>

                                        </select>

                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-grp">
                                        <label for="diploma-type">Course Title</label>
                                        <select class="form-control" id="diploma-type">
                                            <option>Health Safety And Environment Technology (HSET)</option>
                                            <option>Health Safety And Environment Technology (HSET)</option>
                                            <option>Health Safety And Environment Technology (HSET)</option>

                                        </select>

                                    </div>
                                </div>
                            </div>
                            <!-- <div class="row d-flex justify-content-center">
                                <div class="mt-4">
                                    <a href="#" class="pre-btn pre mr-1" id="pre">Previous</a>
                                    <a href="#" class="next-btn nxt" id="nxt1">Next</a>
                                </div>
                            </div> -->
                        </div>
                    </div>


                    <div class="step3">
                        <!-- <h6>STEP 3 OF 3</h6>
                        <div class="progress progress-striped active">
                            <div role="progressbar " style="width: 100%;" class="progress-bar "><span>100%</span></div>
                        </div> -->
                        <div class="longcrs-form last-frm">
                            <h3>LOGIN</h3>
                            <div class="row">
                                <div class="col-md-5">
                                    <div class="mb-25 form-grp">
                                        <label for="name">User name</label>
                                        <input type="text" class="form-control" id="name" autocomplete="off"
                                            required="">
                                     
                                    </div>
                                    <div class="mb-25 form-grp">
                                        <label for="name">Password</label>
                                        <input type="password" class="form-control" id="name" autocomplete="off"
                                            required="">
                                      
                                    </div>
                                    <div class="mb-25 form-grp">
                                        <label for="name">Confirm Password</label>
                                        <input type="password" class="form-control" id="name" autocomplete="off"
                                            required="">
                                     
                                    </div>
                                    <div class="mb-25 recaptcha" id="g-recaptcha1"></div>

                                    <div class="checkbox-form">
                                        <input type="checkbox" class="form-control" id="check1" autocomplete="off"
                                            required="">
                                        <label for="check1">I understand that by completing and submitting this form, my
                                            information will be accessible to this
                                            institution.</label>

                                    </div>
                                </div>

                            </div>
                            <div class="row">
                                <div class="col-md-12 mt-4">
                                    <!-- <a href="#" class="pre-btn pre mr-1" id="pre1">Previous</a> -->
                                    <a class="next-btn" data-toggle="modal" href="#ignismyModal">Submit</a>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

    </section>

    <div class="modal fade" id="ignismyModal" role="dialog">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label=""><span>x</span></button>
                </div>

                <div class="modal-body">

                    <div class="thank-you-pop">
                        <!-- <img src="http://goactionstations.co.uk/wp-content/uploads/2017/03/Green-Round-Tick.png" alt=""> -->
                        <i class="far fa-check-circle"></i>
                        <h1>Thank You!</h1>
                        <p>Information received. Verify the email sent to your inbox for email verification.</p>
                        <a class="next-btn" href="login.php">Ok</a>

                    </div>

                </div>

            </div>
        </div>
    </div>





    <div class="sec-pad">
        <?php include("footer.php")?>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"
        integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous">
    </script>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback"></script>

    <script>
        // $('#nxt').click(function () {
        //     $('.step1').hide();
        //     $('.step3').hide();
        //     $('.step2').show();
        // });
        // $('#nxt1').click(function () {
        //     $('.step1').hide();
        //     $('.step2').hide();
        //     $('.step3').show();
        // });
        // $('#pre').click(function () {
        //     $('.step1').show();
        //     $('.step2').hide();
        //     $('.step3').hide();
        // });
        // $('#pre1').click(function () {
        //     $('.step2').show();
        //     $('.step3').hide();
        //     $('.step1').hide();
        // });

        setTimeout(function () {

            $('.recaptcha').each(function () {
                grecaptcha.render(this.id, {
                    'sitekey': '6LdVkwkUAAAAACeeETRX--v9Js0vWyjQOTIZxxeB',
                    "theme": "light"
                });
            });

        }, 2000);
    </script>
</body>

</html>