<!DOCTYPE html>
<html lang="en">

<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 class="student-dashboard">

    <nav class="navbar navbar-expand-lg navbar-light student-nav fixed-top">
        <div class="container-fluid">
            <a class="navbar-brand" href="index.php"><img src="images/log.png" alt="" class="logo"></a>

            <div class="dropdown d-inline-block user-dropdown">
                <button type="button" class="btn header-item" id="page-header-user-dropdown" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false">
                    <img class="rounded-circle header-profile-user" src="images/avatar-1.jpeg" alt="Header Avatar">
                    <span class="d-none d-xl-inline-block ms-1" key="t-henry">Henry</span>
                    <i class="fas fa-angle-down"></i>
                </button>
                <div class="dropdown-menu dropdown-menu-end" style="">
                    <a class="dropdown-item" href="#"><i class="bx bx-user font-size-16 align-middle me-1"></i> <span
                            key="t-profile">Profile</span></a>
                    <a class="dropdown-item" href="login.php"><i
                            class="bx bx-power-off font-size-16 align-middle me-1 text-danger"></i> <span
                            key="t-logout">Logout</span></a>
                </div>
            </div>
        </div>
    </nav>

    <h2 class="dashboard-title">Dashboard</h2>
    <div class="dashboard">
        <div class="row">

            <div class="col-md-9">
                <div class="profile-div">
                    <div class="profile-cover"></div>
                    <div class="profile-content">
                        <img src="images/user1.png" alt="" class="student-img">
                        <h2>Ahlam Backer</h2>
                        <div class="pro-content-bottom">
                            <div class="row">
                                <div class="col-md-3">
                                    <label for="">National ID</label>
                                    <div class="pro-content-txt">
                                        <i class="fa-regular fa-address-card"></i>
                                        23856619
                                    </div>
                                </div>
                                <div class="col-md-5">
                                    <label for="">Email ID</label>
                                    <div class="pro-content-txt">
                                        <i class="fa-regular fa-envelope"></i>
                                        ahlambacker@gmail.com
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <label for="">Date of Birth</label>
                                    <div class="pro-content-txt">
                                        <i class="fa-regular fa-calendar"></i>
                                        29-01-2001
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row terms">
                    <div class="col-md-4">
                        <div class="card">
                            <div class="locaton-card">  
                                        <div class="row">
                                            <div class="col-lg-6 px-2">
                                                <h3>Select City</h3>
                                        
                                                <div class="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-lg-6 px-2">
                                                <div style="display: none;" id="riyadh-main">
                                                    <div class=" 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 style="display: none;" id="makkah-main">
                                                    <div class=" 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 style="display: none;" id="medina-main">
                                                    <div class=" 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 style="display: none;" id="eastern-main">
                                                    <div class=" 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 style="display: none;" id="qassim-main">
                                                    <div class=" 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 style="display: none;" id="asir-main">
                                                    <div class=" 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 style="display: none;" id="tabuk-main">
                                                    <div class=" 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 style="display: none;" id="hail-main">
                                                    <div class=" 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 style="display: none;" id="northern-main">
                                                    <div class=" 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 style="display: none;" id="jizan-main">
                                                    <div class=" 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 style="display: none;" id="najran-main">
                                                    <div class=" 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 style="display: none;" id="bahah-main">
                                                    <div class=" 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 style="display: none;" id="jawf-main">
                                                    <div class=" 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>
                                        </div>  
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-body">
                                <div class="w-100 d-flex justify-content-between align-items-center">
                                    <div>
                                        <h3 data-toggle="modal" href="#terms-modal">Terms of Use</h3>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="remember-check">
                                            <label class="form-check-label" for="remember-check">
                                                I Agree
                                            </label>
                                        </div>
                                    </div>
                                    <div class="arrow-div" data-toggle="modal" href="#terms-modal">
                                        <i class="fa-solid fa-arrow-right"></i>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-body">
                                <div class="w-100 d-flex justify-content-between align-items-center">
                                    <div>
                                        <h3 data-toggle="modal" href="#privacy-modal">Privacy Policy</h3>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="remember-check">
                                            <label class="form-check-label" for="remember-check">
                                                I have read
                                            </label>
                                        </div>
                                    </div>
                                    <div class="arrow-div" data-toggle="modal" href="#privacy-modal">
                                        <i class="fa-solid fa-arrow-right"></i>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-body">
                        <table class="table course-tbl">
                            <thead>
                                <tr>
                                    <th>Diploma Type</th>
                                    <th>Semester/Year</th>
                                    <th>Program</th>
                                    <th>Course Title</th>
                                    <th></th>

                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>SESP Courses</td>
                                    <td>Fall</td>
                                    <td>Associate Diploma In Health Safety & Environment</td>
                                    <td>Health Safety And Environment Technology (HSET)</td>
                                    <td class="text-right">
                                        <div class="table-icons">
                                            <i class="fa-solid fa-plus icn1" data-toggle="modal" href="#add-course"></i>
                                            <i class="fa-solid fa-trash icn2 remove-tr"></i>
                                        </div>

                                    </td>
                                </tr>



                            </tbody>
                        </table>

                    </div>
                </div>
                <button class="btn submit-btn mt-3 px-4">Submit Your Application</button>
            </div>
            <div class="col-md-3 payment">
                <div class="card">
                    <div class="card-body">
                        <h3>Payment</h3>
                        <div class="sub-fee">
                            <h5>Semester Fee</h5>
                            <h4>2000 SAR</h4>
                        </div>
                        <div class="sub-fee">
                            <h5>Tution Fee</h5>
                            <h4>200 SAR</h4>
                        </div>
                        <hr>
                        <div class="total-fee">
                            <h5>Total Fee</h5>
                            <h4>2200 SAR</h4>
                        </div>


                    </div>
                </div>
                <div class="card">
                    <div class="card-body">
                        <h3>Payment Method</h3>
                        <div class="payment-method">
                            <div class="single-payment">
                                <div class="form-check">
                                    <input class="form-check-input" name="payment" type="radio" id="radio1">
                                    <label class="form-check-label" for="radio1">
                                        Credit or Debit Card
                                    </label>
                                </div>
                                <img src="images/all-card.jpeg" alt="">
                            </div>
                            <div class="single-payment last">
                                <div class="form-check">
                                    <input class="form-check-input" name="payment" type="radio" id="radio2">
                                    <label class="form-check-label" for="radio2">
                                        Bank Transfer
                                    </label>
                                </div>
                                <img src="images/googlepay.png" alt="" class="pay-img">
                            </div>
                            <div class="bank-details d-none">
                                <ul>
                                    <li><span>IBAN:</span> SA 7165000000257762533001</li>
                                    <li><span>IBAN:</span> SA 0665000000257762533007</li>
                                </ul>
                                <h6><span>Bank Name</span>: The Saudi Investment Bank</h6>
                                <h6><span>Beneficiary Name</span>: Saudi Electric Services Polytechnic</h6>
                            </div>
                            <!-- <div class="single-payment border-b0">
                                <div class="form-check">
                                    <input class="form-check-input" name="payment" type="radio" id="radio3">
                                    <label class="form-check-label" for="radio3">
                                        Bank Transfer
                                    </label>
                                </div>
                                <img src="images/paytm.png" alt="" class="pay-img">
                            </div> -->

                            <button class="btn submit-btn mt-3">Submit</button>
                        </div>
                    </div>
                </div>

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










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

                <div class="modal-body">
                    <div class="term-body">
                        <p>Welcome to Saudi Electric Services Polytechnic, also referred to herein as "SESP". We are
                            committed to
                            protecting the privacy and security of the personal information of our students. This
                            Privacy Policy
                            outlines the types of information we collect through our Online Registration Form, how we
                            use and
                            protect it, and the choices you have about your personal data.</p>
                        <h6>1. Information Collection </h6>
                        <p>When you register for a diploma offered at SESP through our Online Registration Form, we
                            collect the
                            following types of information:</p>
                        <ul>
                            <li>Personal Identification Information: Name, date of birth, and other identifiers.</li>
                            <li>Contact Information: Email address, telephone number, and mailing address.</li>
                            <li>Educational Background: Previous educational history, qualifications, and related
                                information.</li>
                            <li>Payment Information: Credit/debit card details or other payment method information
                                (Note: Payment
                                information is processed by a secure third-party payment processor).</li>
                        </ul>
                        <h6>2. Use of Information</h6>
                        <p>The information you provide is used for the following purposes:</p>
                        <ul>
                            <li>To process your registration and manage your account.</li>
                            <li>To communicate with you about your application, program, or services we offer.</li>
                            <li>To provide support and respond to your inquiries.</li>
                            <li>For internal record keeping and administrative purposes.</li>
                            <li>To comply with legal obligations and to protect against legal claims or disputes.</li>
                        </ul>
                        <h6>3. Data Sharing and Disclosure </h6>
                        <p>SESP does not sell or rent personal information to third parties. We may disclose your
                            information:</p>
                        <ul>
                            <li>To third-party service providers who perform services on our behalf (e.g., payment
                                processing, data
                                analysis).</li>
                            <li>If required by law, such as to comply with a subpoena or similar legal process.</li>
                            <li>To protect the rights, property, or safety of SESP, our students, or others.</li>

                        </ul>
                        <h6>4. Data Security </h6>
                        <p>We implement appropriate technical and organizational measures to protect the personal
                            information
                            we collect and process. However, no internet-based site can be 100% secure, so we cannot
                            guarantee
                            absolute security.</p>
                        <h6>5. Your Rights and Choices </h6>
                        <p>You have certain rights regarding the personal information we hold about you. These may
                            include the
                            right to access, correct, delete, or restrict the use of your personal information, as well
                            as the right to
                            object to certain processing.</p>
                        <h6>6. Changes to This Privacy Policy </h6>
                        <p>SESP reserves the right to modify this Privacy Policy at any time. Any changes will be posted
                            on our
                            website and, where appropriate, notified to you by email.</p>
                        <h6>7. Contact Us </h6>
                        <p>If you have any questions or concerns about this Privacy Policy or your personal information,
                            please
                            contact us through our Contact Us webpage. <br>
                            By submitting your personal information through our Online Registration Form, you agree to
                            the
                            collection, use, and sharing of your information as described in this Privacy Policy.</p>


                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="modal fade" id="terms-modal" role="dialog">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>Terms of Use</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label=""><span>x</span></button>
                </div>

                <div class="modal-body">
                    <div class="term-body">
                        <p>This service is provided by SESP. By using this or any other SESP registration services, you
                            agree to
                            adhere to the terms and conditions outlined here. SESP reserves the right to modify these
                            terms,
                            which
                            will be effective upon your subsequent use of the service. Regularly reviewing this page for
                            updates is
                            advised.</p>
                        <h6>Usage Guidelines for the Online Application</h6>
                        <p>This application is intended solely for electronic submissions to educational institutions.
                            You
                            must
                            provide accurate information and not impersonate others. Your account is secured with a
                            unique
                            username and password, for which you are responsible. In case of lost login credentials,
                            contact
                            our
                            technical support with your full details for assistance. Notify SESP immediately if you
                            suspect
                            unauthorized account access.
                            <br>
                            Adhere to SESP's security standards and refrain from unauthorized system access or
                            information
                            retrieval methods. Any breach may lead to severe consequences, including access termination.
                            <br>
                            Avoid any actions that disrupt the online application system or impose undue burden on SESP
                            systems.</p>
                        <h6>External Links and Third-Party Content</h6>
                        <p>SESP is not responsible for the content or accessibility of external websites linked through
                            our
                            service,
                            nor does it endorse any products or information offered by these external sites.</p>
                        <h6>Your Data</h6>
                        <p>Data entered in your application is accessible to the institution but will only be reviewed
                            upon
                            submission. Once submitted, your application becomes the institution's property and may be
                            modified
                            as per their policies. Your application data will be retained for one year after your last
                            access.</p>
                        <h6>Legal Compliance</h6>
                        <p>Your use of this service must comply with all relevant laws. Unauthorized use is strictly
                            prohibited and
                            punishable under law. These terms are governed by KSA law, and any unenforceable terms do
                            not
                            affect
                            the remainder.</p>
                        <h6>Copyright and Trademark Information</h6>
                        <p>All content is protected under copyright law. Any unauthorized use, including modification,
                            transmission, or creation of derivative works, is prohibited. The HTML code and logos are
                            also
                            protected
                            and should not be duplicated or used without permission.</p>
                        <h6>Liability and Warranty Disclaimer</h6>
                        <p>SESP provides this service "as is" without warranties of any kind. SESP is not liable for any
                            interruptions,
                            errors, or inaccuracies in the service, nor for any damages arising from your use of the
                            service
                            or your
                            conduct related to the service.</p>
                        <h6>Limitation of Liabilities and Indemnification</h6>
                        <p>SESP's liability for any damages is limited to a maximum of SAR 300. You agree to indemnify
                            SESP
                            against
                            any damages arising from your use of the service or content you post. In case of Terms of
                            Use
                            breach,
                            SESP is entitled to equitable relief. <br>
                            SESP will notify you of any legal claims and may assist in your defense at your expense.</p>
                        <h6>Governing Law and Jurisdiction</h6>
                        <p>These Terms of Use are governed by and construed in accordance with the laws of the Kingdom
                            of
                            Saudi
                            Arabia (KSA). Any disputes arising under or in connection with these Terms of Use shall be
                            subject to the
                            exclusive jurisdiction of the KSA courts.</p>
                        <h6>Amendments to Terms of Use</h6>
                        <p>SESP reserves the right to amend these Terms of Use at any time. Such amendments become
                            effective
                            immediately upon posting. Your continued use of the service constitutes acceptance of these
                            changes.
                            We recommend reviewing these terms periodically for any updates or changes.</p>
                        <h6>Contact and Communication</h6>
                        <p>For any queries or concerns regarding these Terms of Use or the online application service,
                            please
                            contact SESP through the designated communication channels provided on our website. SESP is
                            committed to addressing your inquiries promptly and efficiently.</p>
                        <h6>Entire Agreement</h6>
                        <p>These Terms of Use constitute the entire agreement between you and SESP regarding the use of
                            the
                            online application service. They supersede all prior or contemporaneous communications and
                            proposals,
                            whether electronic, oral, or written, between you and SESP.</p>
                        <h6>Acknowledgment and Acceptance of Terms</h6>
                        <p>By accessing and using the SESP online application service, you acknowledge that you have
                            read,
                            understood, and agree to be bound by these Terms of Use. If you do not agree with any part
                            of
                            these
                            terms, you should discontinue access and use of the service immediately.</p>
                        <h6>Effective Date</h6>
                        <p>These Terms of Use are effective as of [Insert Effective Date] and will remain in effect
                            except
                            with
                            respect to any changes in its provisions in the future, which will be in effect immediately
                            after being
                            posted on this page. <br>
                            We thank you for choosing SESP for your educational application needs and look forward to
                            assisting
                            you in your academic journey.</p>

                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="modal fade" id="add-course" role="dialog">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>Add Course</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label=""><span>x</span></button>
                </div>

                <div class="modal-body">

                    <div class="longcrs-form">
                        <div class="row">
                            <div class="col-md-5">
                                <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-4">
                                <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-12">
                                <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-12">
                                <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 class="col-md-12">
                                <button class="next-btn mt-4">Submit</button>
                            </div>

                        </div>

                    </div>

                </div>

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

    <script src="https://kit.fontawesome.com/16b0815225.js" crossorigin="anonymous"></script>
    <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>
        $(".course-tbl").on('click', '.remove-tr', function () {
            $(this).closest('tr').remove();
        });
    </script>

    <script>
         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()
            }
            
        }
    </script>
  <script>
    $(document).ready(function(){
        $(".bank-details").hide();

        $('input[type="radio"]').change(function(){
            if($('#radio2').is(':checked')) {
                $(".bank-details").show();
                $(".bank-details").removeClass("d-none");
            } else {
                $(".bank-details").hide();
            }
        });
    });
</script>
</body>

</html>