<!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>REGISTER INTEREST</h1>
        </div>
    </section>



    <section class="section-sesp pt-80 margin-responsive">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12 ">
                    <div class="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="mb-25 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="mb-25 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="mb-25 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-3">
                                    <div class="form-grp">
                                        <label for="name">Phone 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">Mobile Number</label>
                                        <input type="text" class="form-control" id="name" autocomplete="off"
                                            required="">

                                    </div>
                                </div>


                                <div class="col-md-3">
                                    <div class="mb-25 form-grp">
                                        <label for="main-location-type">Location</label>
                                        <select class="form-control" id="main-location-type" onchange="changeFuncloc();">
                                            <option style="display: none;">Select Provinces</option>
                                            <option value="1">Riyadh</option>
                                            <option value="2">Makkah</option>
                                            <option value="3">Medina</option>
                                            <option value="4">Eastern</option>
                                            <option value="5">Qassim</option>
                                            <option value="6">Asir</option>
                                            <option value="7">Tabuk</option>
                                            <option value="8">Hail</option>
                                            <option value="9">Northern Borders</option>
                                            <option value="10">Jizan</option>
                                            <option value="11">Najran</option>
                                            <option value="12">Al Bahah</option>
                                            <option value="13">Al Jawf</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-3" style="display: none;" id="riyadh-main">
                                    <div class="mb-25 form-grp">
                                        <label for="riyadh-main-city">Riyadh</label>
                                        <select class="form-control" id="riyadh-main-city">
                                            <option style="display: none;">Major Cities</option>
                                            <option value="1">Al-Kharj</option>
                                            <option value="2">Diriyah</option>
                                            <option value="3">Dawadmi</option>
                                            <option value="4">Majma'ah</option>
                                            <option value="5">Al-Quwai'iyah</option>
                                            <option value="6">Al-Duwadimi, Afif</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-3" style="display: none;" id="makkah-main">
                                    <div class="mb-25 form-grp">
                                        <label for="makkah-main-city">Makkah</label>
                                        <select class="form-control" id="makkah-main-city">
                                            <option style="display: none;">Major Cities</option>
                                            <option value="1">Jeddah</option>
                                            <option value="2">Taif</option>
                                            <option value="3">Al Qunfudhah</option>
                                            <option value="4">Al-Lith</option>
                                            <option value="5">Jumum</option>
                                            <option value="6">Rabigh</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-3" style="display: none;" id="medina-main">
                                    <div class="mb-25 form-grp">
                                        <label for="medina-main-city">Medina</label>
                                        <select class="form-control" id="medina-main-city">
                                            <option style="display: none;">Major Cities</option>
                                            <option value="1">Yanbu</option>
                                            <option value="2">Al-Ula</option>
                                            <option value="3">Mahd Al Thahab</option>
                                            <option value="4">Badr</option>
                                            <option value="5">Khayba</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-3" style="display: none;" id="eastern-main">
                                    <div class="mb-25 form-grp">
                                        <label for="eastern-main-city">Eastern</label>
                                        <select class="form-control" id="eastern-main-city">
                                            <option style="display: none;">Major Cities</option>
                                            <option value="1">Khobar</option>
                                            <option value="2">Dhahran</option>
                                            <option value="3">Jubail</option>
                                            <option value="4">Hofuf, Al-Hasa</option>
                                            <option value="5">Qatif</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-3" style="display: none;" id="qassim-main">
                                    <div class="mb-25 form-grp">
                                        <label for="qassim-main-city">Qassim</label>
                                        <select class="form-control" id="qassim-main-city">
                                            <option style="display: none;">Major Cities</option>
                                            <option value="1">Unaizah</option>
                                            <option value="2">Ar Rass</option>
                                            <option value="3">Al-Bukayriyah</option>
                                            <option value="4">Al-Mithnab</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-3" style="display: none;" id="asir-main">
                                    <div class="mb-25 form-grp">
                                        <label for="asir-main-city">Asir</label>
                                        <select class="form-control" id="asir-main-city">
                                            <option style="display: none;">Major Cities</option>
                                            <option value="1">Khamis Mushait</option>
                                            <option value="2">Bisha, Dhahran Al-Janub</option>
                                            <option value="3">Tathleeth</option>
                                            <option value="4">Sarat Abidah</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-3" style="display: none;" id="tabuk-main">
                                    <div class="mb-25 form-grp">
                                        <label for="tabuk-main-city">Tabuk</label>
                                        <select class="form-control" id="tabuk-main-city">
                                            <option style="display: none;">Major Cities</option>
                                            <option value="1">Tayma</option>
                                            <option value="2">Haql</option>
                                            <option value="3">Duba</option>
                                            <option value="4">Al Wajh</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-3" style="display: none;" id="hail-main">
                                    <div class="mb-25 form-grp">
                                        <label for="hail-main-city">Hail</label>
                                        <select class="form-control" id="hail-main-city">
                                            <option style="display: none;">Major Cities</option>
                                            <option value="1">Baqaa</option>
                                            <option value="2">Turayf, Al-Uwayqilah</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-3" style="display: none;" id="northern-main">
                                    <div class="mb-25 form-grp">
                                        <label for="northern-main-city">Northern Borders</label>
                                        <select class="form-control" id="northern-main-city">
                                            <option style="display: none;">Major Cities</option>
                                            <option value="1">Rafha</option>
                                            <option value="2">Turayf,</option>
                                            <option value="3">Al-Uwayqilah</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-3" style="display: none;" id="jizan-main">
                                    <div class="mb-25 form-grp">
                                        <label for="jizan-main-city">Jizan</label>
                                        <select class="form-control" id="jizan-main-city">
                                            <option style="display: none;">Major Cities</option>
                                            <option value="1">Sabya</option>
                                            <option value="2">Abu Arish</option>
                                            <option value="3">Samtah</option>
                                            <option value="4">Farasan Island</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-3" style="display: none;" id="najran-main">
                                    <div class="mb-25 form-grp">
                                        <label for="najran-main-city">Najran</label>
                                        <select class="form-control" id="najran-main-city">
                                            <option style="display: none;">Major Cities</option>
                                            <option value="1">Sharurah</option>
                                            <option value="2">Habuna</option>
                                            <option value="3">Badr Al Janoub</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-3" style="display: none;" id="bahah-main">
                                    <div class="mb-25 form-grp">
                                        <label for="bahah-main-city">Al Bahah</label>
                                        <select class="form-control" id="bahah-main-city">
                                            <option style="display: none;">Major Cities</option>
                                            <option value="1">Baljurashi</option>
                                            <option value="2">Al-Mandaq</option>
                                            <option value="3">Al-Aqiq</option>
                                        </select>
                                    </div>
                                </div>
                                
                                <div class="col-md-3" style="display: none;" id="bahah-main">
                                    <div class="mb-25 form-grp">
                                        <label for="bahah-main-city">Al Jawf</label>
                                        <select class="form-control" id="bahah-main-city">
                                            <option style="display: none;">Major Cities</option>
                                            <option value="1">Al Qurayyat</option>
                                            <option value="2">Dumat Al-Jandal</option>
                                            <option value="3">Tabarjal</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-3" style="display: none;" id="jawf-main">
                                    <div class="mb-25 form-grp">
                                        <label for="jawf-main-city">Al Jawf</label>
                                        <select class="form-control" id="jawf-main-city">
                                            <option style="display: none;">Major Cities</option>
                                            <option value="1">Al Qurayyat</option>
                                            <option value="2">Dumat Al-Jandal</option>
                                            <option value="3">Tabarjal</option>
                                        </select>
                                    </div>
                                </div>

                                
                                <div class="col-md-3">
                                    <div class="mb-25 form-grp">
                                        <label for="main-school-type">Qualification</label>
                                        <select class="form-control" id="main-school-type" onchange="changeFunc();">
                                            <option style="display: none;">Select Qualification</option>
                                            <option value="1">High school</option>
                                            <option value="2">Diploma</option>
                                            <option value="3">Bachelors Degree</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-3" style="display: none;" id="highschool">
                                    <div class="mb-25 form-grp">
                                        <label for="high-school-type">High School</label>
                                        <select class="form-control" id="high-school-type" onchange="changeFunchigh();">                                            
                                            <option value="1">General High school</option>
                                            <option value="2">Vocational High School</option>
                                        </select>
                                    </div>
                                </div>


                               

                                <!-- Diploma -->

                                <div class="col-md-3" style="display: none;" id="main-diploma">
                                    <div class=" form-grp">
                                        <label for="diploma-type">Diploma</label>
                                        <select class="form-control" id="diploma-type" onchange="changeFuncdiploma();">
                                            <option style="display: none;" selected>Select Diploma</option>
                                            <option value="1">Associate Diploma</option>
                                            <option value="2">Intermediate Diploma</option>
                                        </select>
                                    </div>
                                </div>

                                


                                <!-- Bachelors Degree -->

                                <div class="col-md-3" style="display: none;" id="Bachelors-degree">
                                    <div class="form-grp">
                                        <label for="bachlor-type">Bachelors Degree</label>
                                        <select class="form-control" id="bachlor-type" onchange="changeFuncbachlor();">                                            
                                            <option value="1">Scientific</option>
                                            <option value="2">Theoretical</option>
                                        </select>
                                    </div>
                                </div>



                                <div class="col-md-3" style="display: none;" id="Bachelors-degree1">
                                    <div class="form-grp">
                                        <label for="bachlor-sub-degree">Please Specify</label>
                                        <div id="bachlor-sub-degree">
                                            <input type="text" class="form-control" id="name" autocomplete="off"
                                            required="">
                                        </div>                                          
                                            

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

                                <!-- major high -->
                                <div class="col-md-3" style="display: none;" id="high-school-major">
                                    <div class="form-grp">
                                        <label for="high-school-major-type">Majors</label>
                                        <select class="form-control" id="high-school-major-type">
                                            <option style="display: none;">select major</option>
                                            <option value="11">Electrical</option>
                                            <option value="12">Mechanical</option>
                                            <option value="13">Construction</option>
                                            <option value="14">Industrial</option>
                                            <option value="15">Business/Commercial</option>
                                            <option value="16">Computer Sciences</option>
                                            <option value="17">Other</option>
                                        </select>
                                    </div>
                                </div>

                                <!-- major diploma -->
                                <div class="col-md-3" style="display: none;" id="diploma-major">
                                    <div class=" form-grp">
                                        <label for="diploma-type-major">Majors</label>
                                        <select class="form-control" id="diploma-type-major">
                                            <option style="display: none;">select major</option>
                                            <option value="1">Electrical</option>
                                            <option value="2">Mechanical</option>
                                            <option value="4">Construction</option>
                                            <option value="5">Industrial</option>
                                            <option value="6">Business/Commercial</option>
                                            <option value="7">Computer Sciences</option>
                                            <option value="8">Other</option>
                                        </select>
                                    </div>
                                </div>

                                <!-- search -->
                        

                                <div class="col-md-3" style="display: none;" id="other-search">
                                    <div class="form-grp">
                                        <label for="name">Please Specify</label>
                                        <input type="text" 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 last-frm">
                            <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="mb-25 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="checkbox-form mb-40">
                                <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 SESP.</label>

                            </div>
                            <div class="row">
                                <div class="col-md-12 mt-3">

                                    <a class="next-btn nxt"  data-toggle="modal" href="#ignismyModal" id="SUBMIT">SUBMIT</a>
                                </div>
                            </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>×</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="register-interest.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>
        $(document).ready(function () {
            $('#diploma-type-major').change(function () {
                if ($(this).val() == '8') {
                    $('#other-search').show();
                } else {
                    $('#other-search').hide();
                }
            });
            $('#high-school-major-type').change(function () {
                if ($(this).val() == '17') {
                    $('#other-search').show();
                } else {
                    $('#other-search').hide();
                }
            });
        });
    </script>
    <script type="text/javascript">
        function changeFunc() {
            var selectBox = document.getElementById("main-school-type");
            var selectedValue = selectBox.options[selectBox.selectedIndex].value;

            //  highschool
            // v_school
            if (selectedValue == '1') {
                $("#highschool").show()
                $("#main-diploma").hide()
                $("#associate-diploma").hide()
                $("#Bachelors-degree").hide()
                $("#high-school-major").hide()
                $("#Bachelors-degree1").hide()
                $('#other-search').hide();


            } else if (selectedValue == '2') {
                $("#main-diploma").show()
                $("#highschool").hide()
                $("#associate-diploma").show()
                $("#high-school-major").hide()
                $("#associate-diploma").hide()
                $("#Bachelors-degree").hide()
                $("#diploma-major").hide()
                $("#Bachelors-degree1").hide()
                $('#other-search').hide();

            } else if (selectedValue == '3') {
                $("#Bachelors-degree").show()
                $("#highschool").hide()
                $("#high-school-major").hide()
                $("#main-diploma").hide()
                $("#associate-diploma").hide()
                $("#associate-diploma").hide()
                $("#diploma-major").hide()
                $('#other-search').hide();
            }
           

            else {
               $("#Bachelors-degree").show()
                $("#highschool").hide()
                $("#high-school-major").hide()
                $("#main-diploma").hide()
                $("#associate-diploma").hide()
            }
        }
        function changeFunchigh() {
            var selectBox = document.getElementById("high-school-type");
            var selectedValue = selectBox.options[selectBox.selectedIndex].value;
            if (selectedValue == '2') {            

                $("#high-school-major").show()
                $("#main-diploma").hide()
                $("#associate-diploma").hide()
                $("#Bachelors-degree").hide()
            } 
            if (selectedValue == '1') {            

                $("#high-school-major").hide()
                $("#main-diploma").hide()
                $("#associate-diploma").hide()
                $("#Bachelors-degree").hide()
            } 
        }

        function changeFuncdiploma() {
            var selectBox = document.getElementById("diploma-type");
            var selectedValue = selectBox.options[selectBox.selectedIndex].value;
            if (selectedValue) {            

                $("#diploma-major").show()
                $("#associate-diploma").hide()
                $("#Bachelors-degree").hide()
                
            } 
            
        }
        
        function changeFuncloc() {
            var selectBox = document.getElementById("main-location-type");
            var selectedValue = selectBox.options[selectBox.selectedIndex].value;
            if (selectedValue=="1") {            
                $("#riyadh-main").show()
                $("#makkah-main").hide()
                $("#medina-main").hide()
                $("#eastern-main").hide()
                $("#qassim-main").hide()
                $("#asir-main").hide()
                $("#tabuk-main").hide()
                $("#hail-main").hide()
                $("#northern-main").hide()
                $("#jizan-main").hide()
                $("#najran-main").hide()
                $("#bahah-main").hide()
                $("#jawf-main").hide()
            }
            else if (selectedValue=="2") {            
                $("#makkah-main").show()
                $("#riyadh-main").hide()
                $("#medina-main").hide()
                $("#eastern-main").hide()
                $("#qassim-main").hide()
                $("#asir-main").hide()
                $("#tabuk-main").hide()
                $("#hail-main").hide()
                $("#northern-main").hide()
                $("#jizan-main").hide()
                $("#najran-main").hide()
                $("#bahah-main").hide()
                $("#jawf-main").hide()
            }
            else if (selectedValue=="3") {            
                $("#medina-main").show()
                $("#makkah-main").hide()
                $("#riyadh-main").hide()
                $("#eastern-main").hide()
                $("#qassim-main").hide()
                $("#asir-main").hide()
                $("#tabuk-main").hide()
                $("#hail-main").hide()
                $("#northern-main").hide()
                $("#jizan-main").hide()
                $("#najran-main").hide()
                $("#bahah-main").hide()
                $("#jawf-main").hide()
            }
            else if (selectedValue=="4") {            
                $("#eastern-main").show()
                $("#makkah-main").hide()
                $("#medina-main").hide()
                $("#riyadh-main").hide()
                $("#qassim-main").hide()
                $("#asir-main").hide()
                $("#tabuk-main").hide()
                $("#hail-main").hide()
                $("#northern-main").hide()
                $("#jizan-main").hide()
                $("#najran-main").hide()
                $("#bahah-main").hide()
                $("#jawf-main").hide()
            }
            else if (selectedValue=="5") {            
                $("#qassim-main").show()
                $("#riyadh-main").hide()
                $("#makkah-main").hide()
                $("#medina-main").hide()
                $("#eastern-main").hide()
                $("#asir-main").hide()
                $("#tabuk-main").hide()
                $("#hail-main").hide()
                $("#northern-main").hide()
                $("#jizan-main").hide()
                $("#najran-main").hide()
                $("#bahah-main").hide()
                $("#jawf-main").hide()
            }
            else if (selectedValue=="6") {            
                $("#asir-main").show()
                $("#riyadh-main").hide()
                $("#makkah-main").hide()
                $("#medina-main").hide()
                $("#eastern-main").hide()
                $("#qassim-main").hide()
                $("#tabuk-main").hide()
                $("#hail-main").hide()
                $("#northern-main").hide()
                $("#jizan-main").hide()
                $("#najran-main").hide()
                $("#bahah-main").hide()
                $("#jawf-main").hide()
            }
            else if (selectedValue=="7") {            
                $("#tabuk-main").show()
                $("#riyadh-main").hide()
                $("#makkah-main").hide()
                $("#medina-main").hide()
                $("#eastern-main").hide()
                $("#qassim-main").hide()
                $("#asir-main").hide()
                $("#hail-main").hide()
                $("#northern-main").hide()
                $("#jizan-main").hide()
                $("#najran-main").hide()
                $("#bahah-main").hide()
                $("#jawf-main").hide()
            }
            else if (selectedValue=="8") {            
                $("#hail-main").show()
                $("#riyadh-main").hide()
                $("#makkah-main").hide()
                $("#medina-main").hide()
                $("#eastern-main").hide()
                $("#qassim-main").hide()
                $("#asir-main").hide()
                $("#tabuk-main").hide()
                $("#northern-main").hide()
                $("#jizan-main").hide()
                $("#najran-main").hide()
                $("#bahah-main").hide()
                $("#jawf-main").hide()
            }
            else if (selectedValue=="9") {            
                $("#northern-main").show()
                $("#riyadh-main").hide()
                $("#makkah-main").hide()
                $("#medina-main").hide()
                $("#eastern-main").hide()
                $("#qassim-main").hide()
                $("#asir-main").hide()
                $("#tabuk-main").hide()
                $("#hail-main").hide()
                $("#jizan-main").hide()
                $("#najran-main").hide()
                $("#bahah-main").hide()
                $("#jawf-main").hide()
            }
            else if (selectedValue=="10") {            
                $("#jizan-main").show()
                $("#riyadh-main").hide()
                $("#makkah-main").hide()
                $("#medina-main").hide()
                $("#eastern-main").hide()
                $("#qassim-main").hide()
                $("#asir-main").hide()
                $("#tabuk-main").hide()
                $("#hail-main").hide()
                $("#northern-main").hide()
                $("#najran-main").hide()
                $("#bahah-main").hide()
                $("#jawf-main").hide()
            }
            else if (selectedValue=="11") {            
                $("#najran-main").show()
                $("#riyadh-main").hide()
                $("#makkah-main").hide()
                $("#medina-main").hide()
                $("#eastern-main").hide()
                $("#qassim-main").hide()
                $("#asir-main").hide()
                $("#tabuk-main").hide()
                $("#hail-main").hide()
                $("#northern-main").hide()
                $("#jizan-main").hide()
                $("#bahah-main").hide()
                $("#jawf-main").hide()
            }
            else if (selectedValue=="12") {            
                $("#bahah-main").show()
                $("#riyadh-main").hide()
                $("#makkah-main").hide()
                $("#medina-main").hide()
                $("#eastern-main").hide()
                $("#qassim-main").hide()
                $("#asir-main").hide()
                $("#tabuk-main").hide()
                $("#hail-main").hide()
                $("#northern-main").hide()
                $("#jizan-main").hide()
                $("#najran-main").hide()
                $("#jawf-main").hide()
            }
            else if (selectedValue=="13") {            
                $("#jawf-main").show()
                $("#riyadh-main").hide()
                $("#makkah-main").hide()
                $("#medina-main").hide()
                $("#eastern-main").hide()
                $("#qassim-main").hide()
                $("#asir-main").hide()
                $("#tabuk-main").hide()
                $("#hail-main").hide()
                $("#northern-main").hide()
                $("#jizan-main").hide()
                $("#najran-main").hide()
                $("#bahah-main").hide()
            }
            
        }

        

        function changeFuncbachlor() {
            var selectBox = document.getElementById("bachlor-type");
            var selectedValue = selectBox.options[selectBox.selectedIndex].value;
            if (selectedValue) {            

                $("#Bachelors-degree1").show()
                $("#diploma-major").hide()
            } 
            
        }
      
    </script>
</body>

</html>