<!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">
</head>

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

    <div class="container-fluid">
        <div class="row d-flex justify-content-center text-center flex-md-row flex-column">
            <div class="col-lg-8 facuality-content">
                <div class="">
                    
                </div>
                <div class="pro-bar">
                    <div class="longcrs-form">
                        <div class="progress-form">

                        <h2>Courses List</h3>
                            <div class="progress-header d-none d-sm-block">
                                <div class="header_title active">
                                    <div class="title">Courses List</div>
                                    <div class="circle_container">
                                        <div class="left-line-hidden"></div>
                                        <div class="circle"></div>
                                        <div class="right-line "></div>
                                    </div>
                                </div>
                                <div class="header_title">
                                    <div class="title">Contact Information</div>
                                    <div class="circle_container">
                                        <div class="left-line"></div>
                                        <div class="circle"></div>
                                        <div class="right-line"></div>
                                    </div>
                                </div>
                                <div class="header_title">
                                    <div class="title">Courses</div>
                                    <div class="circle_container">
                                        <div class="left-line"></div>
                                        <div class="circle"></div>
                                        <div class="right-line"></div>
                                    </div>
                                </div>
                                <div class="header_title">
                                    <div class="title">Cost</div>
                                    <div class="circle_container">
                                        <div class="left-line"></div>
                                        <div class="circle"></div>
                                        <div class="right-line"></div>
                                    </div>
                                </div>
                                <div class="header_title">
                                    <div class="title">Notes</div>
                                    <div class="circle_container">
                                        <div class="left-line"></div>
                                        <div class="circle"></div>
                                        <div class="right-line"></div>
                                    </div>
                                </div>
                                <div class="header_title">
                                    <div class="title">Review</div>
                                    <div class="circle_container">
                                        <div class="left-line"></div>
                                        <div class="circle"></div>
                                        <div class="right-line-hidden"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="progress-content">

                                <div class="progress_item fade-in" id="0">
                                    <div class="row">
                                        <div class="col-12 col-md-12">
                                            <div class="floating-form mb-3">
                                                <div class="styled-select class-margin-area">
                                                    <select class=" form-control select-cource-tex">
                                                                <option>Choose a Course*</option>
                                                                <option>India </option>
                                                                <option>UAE</option>
                                                                <option>Saudi Arabia</option>
                                                            </select>

                                                </div>
                                                <label for="cntry"></label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="progress_item hide" id="1">

                                    <div class="row">
                                        <div class="col-12 col-md-6">
                                            <div class="floating-form mb-3">
                                                <input type="text" class="form-control" id="name" autocomplete="off" required />
                                                <label for="name">Contact Person/Applicant Name*</label>
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-6">
                                            <div class="floating-form mb-3">
                                                <input type="text" class="form-control" id="name" autocomplete="off" required />
                                                <label for="name">Nation ID / Iqama*</label>
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-6">
                                            <div class="floating-form mb-3">
                                                <input type="text" class="form-control" id="name" autocomplete="off" required />
                                                <label for="name">Company Name*</label>
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-6">
                                            <div class="floating-form mb-3">
                                                <input type="text" class="form-control" id="name" autocomplete="off" required />
                                                <label for="name">Company Website</label>
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-6">
                                            <div class="floating-form mb-3">
                                                <input type="text" class="form-control" id="name" autocomplete="off" required />
                                                <label for="name">Email*</label>
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-6">
                                            <div class="floating-form mb-3">
                                                <input type="text" class="form-control" id="name" autocomplete="off" required />
                                                <label for="name">Mobile Number*</label>
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-6">
                                            <div class="floating-form mb-3">
                                                <input type="text" class="form-control" id="name" autocomplete="off" required />
                                                <label for="name">Office Phone Number</label>
                                            </div>
                                        </div>

                                    </div>

                                </div>



                                <div class="progress_item hide" id="2">


                                    <div class="row">
                                        <div class="col-lg-6">
                                            <h3 class="course-clas">Solar Courses*</h3>
                                            <label class="check-items-text" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                                                <input type="checkbox">&ensp;Solar PV designer
                                              </label>

                                            <div id="collapseOne" aria-expanded="false" class="collapse bg-of-collaps">
                                                <div class="well info-text">
                                                    <h3>Solar PV designer required prerequisites:</h3>
                                                    <p>- Bachelor in electrical or electronics (or equivalent) engineering.</p>
                                                    <p>- 1-2 years experience in energy or electrical system design / engineering in the last 7 years.</p>
                                                    <p>- Proof of English Language proficiency.</p>
                                                </div>
                                            </div>


                                            <div class="checkbox">
                                                <label class="check-items-text" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
                                              <input type="checkbox">&ensp;Solar PV Installation
                                            </label>
                                            </div>

                                            <div id="collapseTwo" aria-expanded="true" class="collapse in bg-of-collaps">
                                                <div class="well info-text">
                                                    <h3>Solar PV designer required prerequisites:</h3>
                                                    <p>- Electrical or electronics (or equivalent) technical degree.</p>
                                                    <p>- 2-4 years experience in electrical system installation in the last 7 years.</p>
                                                    <p>- Proof of English Language proficiency.</p>
                                                </div>
                                            </div>
                                        </div>


                                        <div class="col-lg-6">
                                            <h3 class="course-clas">Training Center*</h3>
                                            <label class="check-items-text" data-toggle="collapse" data-target="#collapse3" aria-expanded="false" aria-controls="collapseOne">
                                                <input type="checkbox">&ensp;BTC - Baish Training Center
                                              </label>

                                            <div id="collapse3" aria-expanded="false" class="collapse bg-of-collaps">
                                                <div class="well info-text">
                                                    <h3>Baish Solar Designer Training Courses*</h3>
                                                    <p>Available Dates</p>

                                                    <div class="floating-form select-box-col">
                                                        <div class="styled-select">
                                                            <select class=" form-control">
                                                            <option>Comingsoon</option>

                                                        </select>

                                                        </div>
                                                        <label for="cntry"></label>
                                                    </div>

                                                    <h3>Baish Solar Installer Training Courses*</h3>
                                                    <p>Available Dates</p>

                                                    <div class="floating-form select-box-col">
                                                        <div class="styled-select">
                                                            <select class=" form-control">
                                                            <option>Comingsoon</option>

                                                        </select>

                                                        </div>
                                                        <label for="cntry"></label>
                                                    </div>
                                                </div>
                                            </div>


                                            <div class="checkbox">
                                                <label class="check-items-text" data-toggle="collapse" data-target="#collapse4" aria-expanded="true" aria-controls="collapseTwo">
                                              <input type="checkbox">&ensp;RTC - Riyadh Training Center
                                            </label>
                                            </div>

                                            <div id="collapse4" aria-expanded="true" class="collapse in bg-of-collaps">
                                                <div class="well info-text">
                                                    <h3>Baish Solar Designer Training Courses*</h3>
                                                    <p>Available Dates</p>

                                                    <div class="floating-form select-box-col">
                                                        <div class="styled-select">
                                                            <select class=" form-control">
                                                            <option>Comingsoon</option>

                                                        </select>

                                                        </div>
                                                        <label for="cntry"></label>
                                                    </div>

                                                    <h3>Riyadh Solar Installer Training Courses*</p>
                                                        <p>Available Dates</p>

                                                        <div class="floating-form select-box-col">
                                                            <div class="styled-select">
                                                                <select class=" form-control">
                                                            <option>Comingsoon</option>

                                                        </select>

                                                            </div>
                                                            <label for="cntry"></label>
                                                        </div>
                                                </div>
                                            </div>


                                            <div class="checkbox">
                                                <label class="check-items-text" data-toggle="collapse" data-target="#collapse5" aria-expanded="true" aria-controls="collapseTwo">
                                              <input type="checkbox">&ensp;JTC - Juaymah Training Center
                                            </label>
                                            </div>

                                            <div id="collapse5" aria-expanded="true" class="collapse in bg-of-collaps">
                                                <div class="well info-text">
                                                    <h3>Juaymah Solar Designer Training Courses*</h3>
                                                    <p>Available Dates</p>

                                                    <div class="floating-form select-box-col">
                                                        <div class="styled-select">
                                                            <select class=" form-control">
                                                            <option>Comingsoon</option>

                                                        </select>

                                                        </div>
                                                        <label for="cntry"></label>
                                                    </div>

                                                    <h3>Juaymah Solar Installer Training Courses*</h3>
                                                    <p>Available Dates</p>

                                                    <div class="floating-form select-box-col">
                                                        <div class="styled-select">
                                                            <select class=" form-control">
                                                            <option>Comingsoon</option>

                                                        </select>

                                                        </div>
                                                        <label for="cntry"></label>
                                                    </div>
                                                </div>
                                            </div>


                                            <div class="checkbox">
                                                <label class="check-items-text" data-toggle="collapse" data-target="#collapse6" aria-expanded="true" aria-controls="collapseTwo">
                                              <input type="checkbox">&ensp;KAUST - Jeddah
                                            </label>
                                            </div>

                                            <div id="collapse6" aria-expanded="true" class="collapse in bg-of-collaps">
                                                <div class="well info-text">
                                                    <h3>KAUST Solar Designer Training Courses*</h3>

                                                    <div class="floating-form select-box-col">
                                                        <div class="styled-select">
                                                            <select class=" form-control">
                                                            <option>Comingsoon</option>

                                                        </select>

                                                        </div>
                                                        <label for="cntry"></label>
                                                    </div>
                                                </div>
                                            </div>


                                        </div>
                                    </div>






                                </div>
                                <div class="progress_item  hide" id="3">
                                    <div class="box-cost">
                                        <h2 class="head-of-cource">BTC - Solar PV Designer Course</h2>
                                        <h4 class="crs">Course Cost : 4,000 SAR VAT 15% :600 SAR </h4>
                                        <hr class="line-of-cost">
                                        <div class="d-flex align-items-center justify-content-center sec-pad-number">
                                            <h5 class="prc">Price: <span>SAR 4,600.00</span></h5>

                                            <h4 class="qty">Quantity:</h4>
                                            <input class="butt" type="number" id="quantity" name="quantity" value="1">

                                        </div>
                                        <hr class="line-of-cost">
                                        <h3 class="tot">Total Cost:<span class="sar"> SAR 9,200.00</span></h3>
                                    </div>





                                </div>


                            </div>
                            <div class="progress_item hide" id="4">

                                <h3 class="course-class">Notes</h3>
                                <p class="discription-of-notes">If you need further clarification regarding anything related to the registration
                                </p>
                                <textarea id="nots-review" name="notreview" rows="4" cols="50"></textarea>


                            </div>
                            <div class="progress_item hide" id="5">


                                <table class="table-bordered table-class">
                                    <tr>
                                        <th>Choose a Course</th>
                                        <td>Solar PV</td>
                                    </tr>
                                    <tr>
                                        <th>Contact Person/Applicant Name
                                        </th>
                                        <td>Nasim pp
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>Nation ID / Iqama</th>
                                        <td>5858523547</td>
                                    </tr>
                                    <tr>
                                        <th>Company Name</th>
                                        <td>Techmom</td>
                                    </tr>
                                    <tr>
                                        <th>Email</th>
                                        <td>nasimklmn@gmail.com</td>

                                    </tr>
                                    <tr>
                                        <th>Mobile Number</th>
                                        <td>7894561230</td>
                                    </tr>
                                    <tr>
                                        <th>Solar Courses</th>
                                        <td>Solar PV Designer</td>
                                    </tr>
                                    <tr>
                                        <th>Training Center</th>
                                        <td>BTC - Baish Training Center <br> RTC - Riyadh Training Center
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>Baish Solar Designer Training Courses</th>
                                        <td>Coming Soon</td>
                                    </tr>
                                    <tr>
                                        <th>Riyadh Solar Designer Training Courses</th>
                                        <td>12 Dec - 16 Dec</td>
                                    </tr>
                                    <tr>
                                        <th>Notes</th>
                                        <td>your notes</td>
                                    </tr>
                                </table>

                                <h3 class="course-class space-table">Order</h3>
                                <table class="table-class">
                                    <tr class="txt-bg">
                                        <th>Product</th>
                                        <th class="text-center">Qty</th>
                                        <th>Unit Price</th>
                                        <th>Price</th>
                                    </tr>
                                    <tr>
                                        <td class="txt-clr">RTC - Solar PV Designer Course
                                        </td>
                                        <td class="text-center">1</td>
                                        <td>SAR 4,600.00</td>
                                        <td>SAR 4,600.00</td>

                                    </tr>
                                    <tr>
                                        <td class="txt-clr">BTC - Solar PV Designer Course
                                        </td>
                                        <td class="text-center">1</td>
                                        <td>SAR 4,600.00</td>
                                        <td>SAR 4,600.00</td>

                                    </tr>
                                    <tr>
                                        <td colspan="2"></td>
                                        <th>Sub Total</th>
                                        <th>SAR 9,200.00
                                        </th>
                                    </tr>
                                    <tr>
                                        <td colspan="2"></td>
                                        <th>Total</th>
                                        <th>SAR 9,200.00
                                        </th>
                                    </tr>
                                </table>
                                <p class="text-right vat-text">Course Cost : 4,000 SAR | VAT 15% : 600 SAR

                                </p>

                            </div>
                        </div>
                        <div class="progress-footer">
                            <button class="btn btn-previous tp-0" onclick="previousSection()" disabled id="previous_btn">Previous</button>
                            <button class="btn btn-next tp-0" onclick="nextSection()" id="next_finish_btn">Next</button>
                        </div>
                    </div>
                </div>

                <div class="pro-bar step2" style="display: none;">
                    <h6>STEP 2 OF 2 - REGISTRATION FORM</h6>
                    <div class="progress progress-striped active">
                        <div role="progressbar " style="width: 100%;" class="progress-bar "><span>100%</span></div>
                    </div>
                    <div class="longcrs-form">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="floating-form mb-40">
                                    <input type="text" class="form-control" id="name" autocomplete="off" required="" placeholder="Name" disabled>
                                    <label for="name">Name</label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="floating-form mb-40">
                                    <input type="text" class="form-control" id="name" autocomplete="off" required="" placeholder="Name@GMAIL.COM" disabled>
                                    <label for="name">Email</label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="floating-form mb-25">
                                    <input type="text" class="form-control" id="name" autocomplete="off" required="" placeholder="9988776655" disabled>
                                    <label for="name">Phone</label>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="floating-form mb-25">
                                    <input type="date" class="form-control" id="name" autocomplete="off" required="" placeholder="2016-10-10" disabled>
                                    <label for="name">Date of Birth</label>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="floating-form mb-25">
                                    <input type="text" class="form-control" id="name" autocomplete="off" required="" placeholder="12345" disabled>
                                    <label for="name">National ID</label>
                                </div>
                            </div>
                            <div class="col-md-12 radio-lbl text-left">
                                <label for="">Your diploma major in :</label>
                                <div class="form-check-inline">
                                    <label class="form-check-label">
                                          <input type="radio" class="form-check-input" name="optradio" checked>Electrical
                                        </label>
                                </div>
                                <div class="form-check-inline">
                                    <label class="form-check-label">
                                          <input type="radio" class="form-check-input" name="optradio" disabled>Mechanical
                                        </label>
                                </div>
                                <div class="form-check-inline disabled">
                                    <label class="form-check-label">
                                          <input type="radio" class="form-check-input" name="optradio" disabled>Renewable Energy
                                        </label>
                                </div>
                            </div>
                            <div class="col-md-12 mt-5">
                                <a href="#" class="pre-btn pre mr-1" id="pre">Previous</a>
                                <a class="next-btn" data-toggle="modal" href="#ignismyModal">Submit</a>
                            </div>
                        </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>Your submission is received and we will contact you soon</p>
                        <a class="next-btn" href="index.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="js/script.js"></script>

</body>

</html>