<!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" type="text/css" 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>




    <div class="container-fluid container-short-width">
        <div class="row">
            <div class="col-lg-12">
                <div class="d-flex justify-content-center">
                    <div class="table-margin">
                        <ul class="nav nav-tabs d-flex justify-content-between" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link <?php if($_GET['type'] == 10)  active ?> active" data-toggle="tab" href="#tabs-1" role="tab">المعهد السعودي التقني في الرياض</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link <?php if($_GET['type'] == 20)  active ?> " data-toggle="tab" href="#tabs-2" role="tab">المعهد السعودي التقني في الجعيمة</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link <?php if($_GET['type'] == 30)  active ?> " data-toggle="tab" href="#tabs-3" role="tab">المعهد السعودي التقني في بيش</a>
                            </li>
                        </ul>
                        <!-- Tab panes -->
                    </div>
                </div>
                <div class="tab-content">
                    <!-- First-tab -->
                    <!-- <?php
    print_r($_GET['type']);
    ?> -->
                    <div class="tab-pane <?php if($_GET['type'] == 10)  active ?> active" id="tabs-1" role="tabpanel">
                        <div class="row">
                            <div class="col-lg-3">
                                <div class="contact-info-box">
                                    <img src="images/riyad.jpg" alt="" class="img-fluid">
                                    <div class="details-padd">
                                        <h4>المعهد السعودي التقني في الرياض</h4>
                                        <h5>هاتف: +966 11 4048711</h5>
                                        <h6>بريد إلكتروني: rtc@sesp.edu.sa</h6>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-9 map-view">
                                <iframe src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d1814.2345201148592!2d46.848446!3d24.573004!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sus!4v1670664656013!5m2!1sen!2sus" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                            </div>
                        </div>
                        <h1 class="contact-text">اترك لنا رسالة</h1>
                        <form>
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="floating-form inp-pad1">
                                        <input type="text" class="form-control" id="name" autocomplete="off" required>
                                        <label for="name">الاسم الأول</label>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="floating-form inp-pad1">
                                        <input type="text" class="form-control" id="name" autocomplete="off" required="">
                                        <label for="name">اسم العائلة</label>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="floating-form inp-pad2">
                                        <input type="text" class="form-control" id="name" autocomplete="off" required="">
                                        <label for="name">رقم الهاتف المحمول</label>
                                    </div>

                                </div>
                                <div class="col-lg-6">
                                    <div class="floating-form inp-pad2">
                                        <input type="text" class="form-control" id="name" autocomplete="off" required="">
                                        <label for="name">عنوان البريد الإلكتروني</label>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="floating-form inp-pad2">
                                        <textarea type="Message" class="form-control inp-height" id="name" autocomplete="off" required=""></textarea>
                                        <label for="name">رسالة</label>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex justify-content-center">
                                <button type="button" class="submit-contact">يرسل</button>
                            </div>
                        </form>

                    </div>


                    <div class="tab-pane <?php if($_GET['type'] == 20)  active ?> " id="tabs-2" role="tabpanel">
                        <div class="row">
                            <div class="col-lg-3">
                                <div class="contact-info-box">
                                    <img src="images/Juaymah.jpg" alt="" class="img-fluid">
                                    <div class="details-padd">
                                        <h4>المعهد السعودي التقني في الجعيمة</h4>
                                        <h5>هاتف: +966 11 4048711</h5>
                                        <h6>بريد إلكتروني: jtc@sesp.edu.sa</h6>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-9 map-view">
                                <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1780.9491263453606!2d49.89524145008109!3d26.77951307339636!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3e35f2df9a0c2275%3A0x33d820bb45d51365!2sSaudi%20Technical%20Institute%20for%20the%20electricity%20services!5e0!3m2!1sen!2sus!4v1670666920705!5m2!1sen!2sus"
                                    style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                            </div>
                        </div>
                        <h1 class="contact-text">اترك لنا رسالة</h1>
                        <form>
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="floating-form inp-pad1">
                                        <input type="text" class="form-control" id="name" autocomplete="off" required>
                                        <label for="name">الاسم الأول</label>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="floating-form inp-pad1">
                                        <input type="text" class="form-control" id="name" autocomplete="off" required="">
                                        <label for="name">اسم العائلة</label>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="floating-form inp-pad2">
                                        <input type="text" class="form-control" id="name" autocomplete="off" required="">
                                        <label for="name">رقم الهاتف المحمول</label>
                                    </div>

                                </div>
                                <div class="col-lg-6">
                                    <div class="floating-form inp-pad2">
                                        <input type="text" class="form-control" id="name" autocomplete="off" required="">
                                        <label for="name">عنوان البريد الإلكتروني</label>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="floating-form inp-pad2">
                                        <textarea type="Message" class="form-control inp-height" id="name" autocomplete="off" required=""></textarea>
                                        <label for="name">رسالة</label>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex justify-content-center">
                                <button type="button" class="submit-contact">يرسل</button>
                            </div>
                        </form>
                    </div>
                    <div class="tab-pane <?php if($_GET['type'] == 30)  active ?> " id="tabs-3" role="tabpanel">
                        <div class="row">
                            <div class="col-lg-3">
                                <div class="contact-info-box">
                                    <img src="images/baish.jpg" alt="" class="img-fluid">
                                    <div class="details-padd">
                                        <h4>المعهد السعودي التقني في بيش</h4>
                                        <h5>هاتف: +966 17 340 0091</h5>
                                        <h6>بريد إلكتروني: btc@sesp.edu.sa</h6>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-9 map-view">
                                <iframe src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d3807.709461705437!2d42.479187!3d17.377708!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sus!4v1670667073261!5m2!1sen!2sus" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                            </div>
                        </div>
                        <h1 class="contact-text">اترك لنا رسالة</h1>
                        <form>
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="floating-form inp-pad1">
                                        <input type="text" class="form-control" id="name" autocomplete="off" required>
                                        <label for="name">الاسم الأول</label>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="floating-form inp-pad1">
                                        <input type="text" class="form-control" id="name" autocomplete="off" required="">
                                        <label for="name">اسم العائلة</label>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="floating-form inp-pad2">
                                        <input type="text" class="form-control" id="name" autocomplete="off" required="">
                                        <label for="name">رقم الهاتف المحمول</label>
                                    </div>

                                </div>
                                <div class="col-lg-6">
                                    <div class="floating-form inp-pad2">
                                        <input type="text" class="form-control" id="name" autocomplete="off" required="">
                                        <label for="name">عنوان البريد الإلكتروني</label>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="floating-form inp-pad2">
                                        <textarea type="Message" class="form-control inp-height" id="name" autocomplete="off" required=""></textarea>
                                        <label for="name">رسالة</label>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex justify-content-center">
                                <button type="button" class="submit-contact">يرسل</button>
                            </div>
                        </form>
                    </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>
</body>

</html>