<!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" />
    <link rel="stylesheet" href="css/rtl.css">
</head>

<body class="rtl">
    <?php include 'include-ar.php';?>
    <section class="inner-banner d-flex align-items-center">
        <div class="container-fluid">
            <h1>تسجيل الدورات الطويلة</h1>
        </div>
    </section>



    <section class="section-sesp py-80 margin-responsive">
        <div class="container-fluid">
            <div class="row d-flex justify-content-center text-center">
                <div class="col-lg-8 facuality-content">

                    <div class="pro-bar step1">
                        <h6>الخطوة 1 من 2 - استمارة التسجيل </h6>
                        <div class="progress progress-striped active">
                            <div role="progressbar " style="width: 50%;" class="progress-bar "><span>50%</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="">
                                        <label for="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="">
                                        <label for="name">بريد إلكتروني</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="">
                                        <label for="name">هاتف</label>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class=" mb-25">
                                        <input type="date" class="form-control date-class" id="name" autocomplete="off" required="">
                                        <label class="floating-pad" for="name">تاريخ الميلاد </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="">
                                        <label for="name">الهوية الوطنية</label>
                                    </div>
                                </div>
                                <div class="col-md-12 radio-lbl text-left">
                                    <label for="">تخصصك الدبلوم في :</label>
                                    <div class="form-check-inline">
                                        <label class="form-check-label">
                                          <input type="radio" class="form-check-input" name="optradio">الكهرباء
                                        </label>
                                    </div>
                                    <div class="form-check-inline">
                                        <label class="form-check-label">
                                          <input type="radio" class="form-check-input" name="optradio">ميكانيكي
                                        </label>
                                    </div>
                                    <div class="form-check-inline disabled">
                                        <label class="form-check-label">
                                          <input type="radio" class="form-check-input" name="optradio">طاقة متجددة
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-12 mt-4 d-flex justify-content-center">
                                    <a href="#" class="next-btn nxt" id="nxt">التالي</a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="pro-bar step2" style="display: none;">
                        <h6>الخطوة 2 من 2 - استمارة التسجيل</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">

                            <table class="table table-bordered table-align "style="overflow-x:auto;">
                                <tbody>
                                    <tr>
                                        <th scope="row" class="no-text">1</th>
                                        <th class="width-set">اسم</th>
                                        <td>احمد ابراهيم</td>
                                    </tr>
                                    <tr>
                                        <th scope="row" class="no-text">2</th>
                                        <th>تاريخ الميلاد </th>
                                        <td>07/01/2000</td>
                                    </tr>
                                    <tr>
                                        <th scope="row" class="no-text">3</th>
                                        <th>بريد إلكتروني </th>
                                        <td>ahmadibrahim@hmail.com</td>
                                    </tr>
                                    <tr>
                                        <th scope="row"class="no-text">4</th>
                                        <th>تخصص الدبلوم الخاص بك في: </th>
                                        <td>الكهرباء</td>
                                    </tr>
                                </tbody>
                            </table>
                            <div class="row d-flex justify-content-center">
                                <div class="mt-4">
                                    <a href="#" class="pre-btn pre ml-1" id="pre">سابق</a>
                                    <a class="next-btn" data-toggle="modal" href="#ignismyModal">سابق</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>x</span></button>
                </div>

                <div class="modal-body">

                    <div class="thank-you-pop">
                        <!-- <img src="http://goactionstations.co.uk/wp-content/uploads/2017/03/Green-Round-Tick.png" alt=""> -->
                        <i class="far fa-check-circle"></i>
                        <h1>شكرًا لك !</h1>
                        <p>تم استلام طلبك وسنتواصل معك قريبًا </p>
                        <a class="next-btn" href="index-ar.php">Ok</a>

                    </div>

                </div>

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





    <div class="sec-pad">
        <?php include("footer-ar.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>
        $('.nxt').click(function() {
            $('.step1').hide();
            $('.step2').show();
        });
        $('.pre').click(function() {
            $('.step1').show();
            $('.step2').hide();
        });
    </script>
</body>

</html>