@extends("layouts.app")

@section("page-title")
    {{__("Sahla-website - Index")}}
@endSection

@section("content")
    <div id="carouselExampleControls " class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active ">
                <img src="{{asset('img/3220361.jpg')}}" class="d-block w-100" alt="...">
{{--                <div class="centered" style="color:#6B2E92; font-weight: bolder; font-size:100px;font-family:'Rage Italic'">All In</div>--}}
                <a href="{{route('web.index')}}#booking">
                <div class="fixed-btn active" id="myDIV">
                     <p>Book your car tires here!</p>
                </div>
                </a>
            </div>
            <div class="carousel-item">
                <img src="{{asset('img/car.jpg')}}" class="d-block w-100" alt="...">
{{--                <div class="centered" style="color:#F27405; font-weight: bolder; font-size:100px;font-family:'Rage Italic'">Welcome to Tires Website</div>--}}
                <a href="{{route('web.index')}}#booking">
                <div class="fixed-btn" id="myDIV">
                   <p>Book your car tires here!</p>
                </div>
                </a>
            </div>
            <div class="carousel-item">
                <img src="{{asset('img/snow-tyres-1.jpg')}}" class="d-block w-100" alt="...">
{{--                <div class="centered" style="color:#F27405; font-weight: bolder; font-size:100px;font-family:'Rage Italic'">Welcome to Tires Website</div>--}}
                <a href="{{route('web.index')}}#booking">
                <div class="fixed-btn" id="myDIV">
                <p>Book your car tires here!</p>
                </div>
                </a>
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
    <script>  $('.carousel').carousel({
    interval: 2000
    });
    </script>


  <br>
  <br>
  <br>

<br>
<!-- ======= About Section ======= -->

    <section class="about" id="about" data-aos="fade-up">
      <div class="container">
        <div class="row">
            <h2 class="text-center" style="color: black; font-weight: bolder;"> About Us </h2>

          <div class="col-lg-6">
            <img src="{{asset('img/42864-tyre-loading.png')}}" class="img-fluid about-pic text-center" alt="">
          </div>
          <div class="col-lg-6 pt-4 pt-lg-4 aboutus">
            <h3>taires is an app initiative founded by all in engineers with the aim of linking service providers with the customer to facilitate maintenance work. Sahla application provides innovative and fast technical solutions through the request of an experienced maintenance technician who provides them with all maintenance services.
              According to high standards
              We aim to change the traditional maintenance concept and move it to a more flexible concept that enables customers to request various maintenance services through an electronic application that provides integrated and smart technical solutions that meet the customer's needs.</h3>
          </div>
        </div>

      </div>
    </section><!-- End About Section -->

    <section class="service-details">
      <div class="container">

        <div class="row">

                   <div class="col-md-6 d-flex align-items-stretch" data-aos="fade-up">
                     <div class="card">
                        <div class="card-img">
                         <img  class="imgplan" src="{{asset('img/plan.jpg')}}" alt="...">
                        </div>-->
                      <div class="card-body">
                         <h5 class="card-title"><a href="#">Our Plan</a></h5>
                        <p class="card-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo</p>-->
                         <div class="read-more"><a href="#"><i class="bi bi-arrow-right"></i> Read More</a></div>-->
                       </div>
                      </div>

                    </div>
          <div class="col-md-6 d-flex align-items-stretch" data-aos="fade-up">
            <div class="card">
              <div class="card-img">
                <img src="{{asset('img/vis.png')}}" alt="...">
              </div>
              <div class="card-body">
                <h5 class="card-title"><a href="#"> Our Vision </a></h5>
                <p class="card-text">Nemo enim ipsam voluptatem quia voluptas sit aut odit aut fugit, sed quia magni dolores eos qui ratione voluptatem sequi nesciunt Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet</p>
                <div class="read-more"><a href="#"><i class="bi bi-arrow-right"></i> Read More</a></div>
              </div>
            </div>
          </div>

        </div>

      </div>
    </section><!-- End Service Details Section -->



    <br>
    <br>
    <br>



    <div class="container" id="app">
    <div class="row">
        <h2 class="text-center" style="color: black; font-weight: bolder;"> All in </h2>
      <div class="col-lg-4 pt-4 pt-lg-4 text-left  aboutus justify-content-between align-items-center">

          <img src="{{asset('img/design-mobApp.png')}}" class="text-right">

      </div>

      <div class="col-lg-8 pt-4 pt-lg-4  align-items-stretch iosgooglepic text-right ">

          <p class="pt-4 " style="color: black; font-size:20px;">Nemo enim ipsam voluptatem quia voluptas sit aut odit aut fugit, sed quia magni dolores eos qui ratione voluptatem sequi nesciunt Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet Sed ut perspiciatis unde omnis iste natus error sit voluptatem doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo </p>

          <h2 class="pt-4" style="color: black; font-weight: bolder;">Download from stores: </h2>

        <div class="storeimage">

        <a href="https://play.google.com/store"> <img src="{{asset('img/google-play.png')}}"   class="img-fluid" style="size:30px;"> </a>
        </div>

        <div class="storeimage">

        <a href="https://apps.apple.com/us/app/apple-store/id375380948"> <img src="{{asset('img/app-store.png')}}"  class="img-fluid "> </a>
      </div>



    </div>

    </div>
  </div>

  <br>
  <br>
  <br>
 <title>All In Booking Form </title>

    <!-- Google font -->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">

    <!-- Bootstrap -->
    <link type="text/css" rel="stylesheet" href="css/bootstrap.min.css" />

    <!-- Custom stlylesheet -->
    <link type="text/css" rel="stylesheet" href="css/style.css" />

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <div id="booking" class="section">
        <div class="section-center">
            <div class="container">
                <div class="row">
                    <div class="booking-form">
                        <div class="form-header">
                            <h1>Booking car tires</h1>
                        </div>
                        <form>
                            <div class="row">
{{--                                <div class="col-sm-6">--}}
                                    <div class="form-group">
                                        <span class="form-label">Name</span>
                                        <input class="form-control" type="text" placeholder="Enter your name">
                                    </div>
{{--                                </div>--}}
{{--                                <div class="col-sm-6">--}}
                                    <div class="form-group">
                                        <span class="form-label">Email</span>
                                        <input class="form-control" type="email" placeholder="Enter your email">
                                    </div>
{{--                                </div>--}}
                            </div>
                            <div class="form-group">
                                <span class="form-label">Phone</span>
                                <input class="form-control" type="tel" placeholder="Enter your phone number">
                            </div>
{{--                            <div class="form-group">--}}
{{--                                <span class="form-label">Pickup Location</span>--}}
{{--                                <input class="form-control" type="text" placeholder="Enter ZIP/Location">--}}
{{--                            </div>--}}
{{--                            <div class="form-group">--}}
{{--                                <span class="form-label">Destination</span>--}}
{{--                                <input class="form-control" type="text" placeholder="Enter ZIP/Location">--}}
{{--                            </div>--}}
                            <div class="row">
                                <div class="col-sm-5">
                                    <div class="form-group">
                                        <span class="form-label">Pickup Date</span>
                                        <input class="form-control" type="date" required>
                                    </div>
                                </div>
                                <div class="col-sm-7">
                                    <div class="row">
                                        <div class="col-sm-4">
                                            <div class="form-group">
                                                <span class="form-label">Hour</span>
                                                <select class="form-control">
                                                    <option>1</option>
                                                    <option>2</option>
                                                    <option>3</option>
                                                    <option>4</option>
                                                    <option>5</option>
                                                    <option>6</option>
                                                    <option>7</option>
                                                    <option>8</option>
                                                    <option>9</option>
                                                    <option>10</option>
                                                    <option>11</option>
                                                    <option>12</option>
                                                </select>
                                                <span class="select-arrow"></span>
                                            </div>
                                        </div>
                                        <div class="col-sm-4">
                                            <div class="form-group">
                                                <span class="form-label">Min</span>
                                                <select class="form-control">
                                                    <option>05</option>
                                                    <option>10</option>
                                                    <option>15</option>
                                                    <option>20</option>
                                                    <option>25</option>
                                                    <option>30</option>
                                                    <option>35</option>
                                                    <option>40</option>
                                                    <option>45</option>
                                                    <option>50</option>
                                                    <option>55</option>
                                                </select>
                                                <span class="select-arrow"></span>
                                            </div>
                                        </div>
                                        <div class="col-sm-4">
                                            <div class="form-group">
                                                <span class="form-label">AM/PM</span>
                                                <select class="form-control">
                                                    <option>AM</option>
                                                    <option>PM</option>
                                                </select>
                                                <span class="select-arrow"></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-btn">
                                <button class="submit-btn">Book Now</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
  <br>




    <main id="main">

        <!-- ======= Contact Section ======= -->


        <section class="contact" data-aos="fade-up" data-aos-easing="ease-in-out" data-aos-duration="500">
            <div class="container " id="Contact">
                <div class="row ">

                    <h2 class="text-center pt-4-lg " style="color: black; font-weight: bolder; padding-top:70px;padding-bottom:70px;"> Contact Us </h2>

                    <div class=" col-md-3 col-sm-3  follow d-flex ">

                        <h2> Follow Us:</h2>

                    </div>


                    <div class="col-md-3 col-sm-3 d-flex justify-content-between align-items-center ">
                        <a href="">
                            <img src="{{asset('img/whatsappicon.png')}}" class="contacticon  img-fluid ">
                        </a>
                    </div>
                    <div class=" col-md-3 col-sm-3  d-flex justify-content-between align-items-center ">
                        <a href="">
                            <img src="{{asset('img/inestaicon.png')}}"  class="contacticon  img-fluid ">
                        </a>
                    </div>

                    <div class=" col-md-3 col-sm-3 d-flex justify-content-between align-items-center ">
                        <a href="https://www.facebook.com/Sahla.iq">
                            <img src="{{asset('img/facbookicon.png')}}" class="contacticon  img-fluid">
                        </a>
                    </div>


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


        <!-- ======= Contact Section ======= -->
{{--        <section class="contact" data-aos="fade-up" data-aos-easing="ease-in-out" data-aos-duration="500">--}}
    <!-- ======= Contact Section ======= -->
        <section class="contact" data-aos="fade-up" data-aos-easing="ease-in-out" data-aos-duration="500">
            <div class="container">

                <div class="row">

                    <div class="col-lg-6">

                        <div class="row">
                            <div class="col-md-12">
                                <div class="info-box">
                                    <i class="bx bx-map"></i>
                                    <h3>Our Address</h3>
                                    <p> Amman-Jordan </p>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="info-box">
                                    <i class="bx bx-envelope"></i>
                                    <h3>Email Us</h3>
                                    <p>all.in@gmail.com<br>contact@all.in@gmail.com</p>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="info-box">
                                    <i class="bx bx-phone-call"></i>
                                    <h3>Call Us</h3>
                                    <p>+964 772 526 3030<br>
                                </div>
                            </div>


                        </div>
                    </div>


                    <div class="col-lg-6">
                        <form action="forms/contact.php" method="post" role="form" class="php-email-form">
                            <div class="row">
                                <div class="col-md-6 form-group">
                                    <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" required>
                                </div>
                                <div class="col-md-6 form-group mt-3 mt-md-0">
                                    <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" required>
                                </div>
                            </div>
                            <div class="form-group mt-3">
                                <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" required>
                            </div>
                            <div class="form-group mt-3">
                                <textarea class="form-control" name="message" rows="5" placeholder="Message" required></textarea>
                            </div>

                            <div class="text-center"><button type="submit">Send Message</button></div>
                        </form>
                    </div>

                </div>

            </div>
        </section>

        <br>
        <br>
{{--        </section><!-- End Contact Section -->--}}



        <!-- ======= Map Section ======= -->


    </main><!-- End #main -->







  @endsection

@section("scripts")
<script src="{{asset('vendor/aos/aos.js')}}"></script>
<script src="{{asset('vendor/bootstrap/js/bootstrap.bundle.min.js')}}"></script>
<script src="{{asset('vendor/glightbox/js/glightbox.min.js')}}"></script>
<script src="{{asset('vendor/isotope-layout/isotope.pkgd.min.js')}}"></script>
<script src="{{asset('vendor/php-email-form/validate.js')}}"></script>
<script src="{{asset('vendor/purecounter/purecounter.js')}}"></script>
<script src="{{asset('vendor/swiper/swiper-bundle.min.js')}}"></script>
<script src="{{asset('vendor/waypoints/noframework.waypoints.js')}}"></script>

<!-- Template Main JS File -->

   <script src="{{asset('js/main.js')}}"></script>
   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
   @endsection