@extends('website.layout.app')
@section('content') 
@include('website.layout.flight-inner-page-header')

  <!--End Header-->
  <!--Main section-->
  <section class="flight-page"  data-aos="fade-up"
  data-aos-anchor-placement="top-bottom"  data-aos-delay="500">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 col-md-12 col-12">
          <div class="row search-button">
            <div class="form-group has-error has-feedback">
              <div class="col-md-6 offset-md-3">
                <div class="input-group mb-3">
                  <input type="text" class="form-control">
                  <button class="btn" type="submit">
                    <img src="{{asset('website/images/search-icon.png')}}">
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-12 col-md-12 col-12"  data-aos="fade-up"
        data-aos-anchor-placement="top-bottom"  data-aos-delay="300">
          <!---->
          <div class="owl-slider">
            <div id="carousel" class="owl-carousel">
              <div class="item">
                <div class="inner-box">
                  <p class="rupees">QAR.2290</p>
                  <p style="font-size:12px;">Tue, 18 Jul</p>
                </div>
              </div>
              <div class="item">
                <div class="inner-box">
                  <p class="rupees">QAR.2290</p>
                  <p style="font-size:12px;">Tue, 18 Jul</p>
                </div>
              </div>
              <div class="item">
                <div class="inner-box">
                  <p class="rupees">QAR.2290</p>
                  <p style="font-size:12px;">Tue, 18 Jul</p>
                </div>
              </div>
              <div class="item">
                <div class="inner-box">
                  <p class="rupees">QAR.2290</p>
                  <p style="font-size:12px;">Tue, 18 Jul</p>
                </div>
              </div>
              <div class="item">
                <div class="inner-box">
                  <p class="rupees">QAR.2290</p>
                  <p style="font-size:12px;">Tue, 18 Jul</p>
                </div>
              </div>
              <div class="item">
                <div class="inner-box">
                  <p class="rupees">QAR.2290</p>
                  <p style="font-size:12px;">Tue, 18 Jul</p>
                </div>
              </div>
              <div class="item">
                <div class="inner-box">
                  <p class="rupees">QAR.2290</p>
                  <p style="font-size:12px;">Tue, 18 Jul</p>
                </div>
              </div>
              <div class="item">
                <div class="inner-box">
                  <p class="rupees">QAR.2290</p>
                  <p style="font-size:12px;">Tue, 18 Jul</p>
                </div>
              </div>
              <div class="item">
                <div class="inner-box">
                  <p class="rupees">QAR.2290</p>
                  <p style="font-size:12px;">Tue, 18 Jul</p>
                </div>
              </div>
              <div class="item">
                <div class="inner-box">
                  <p class="rupees">QAR.2290</p>
                  <p style="font-size:12px;">Tue, 18 Jul</p>
                </div>
              </div>
            </div>
          </div>
          <!---->
          <div class="main-table">
            <table class="table">
              <thead>
                <tr>
                  <th>AIRLINE</th>
                  <th>DEPARTURE</th>
                  <th>DURATION</th>
                  <th>ARRIVAL</th>
                  <th>PRICE</th>
                  <th>BEST VALUE</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>
                    <div>
                      <img src="{{asset('website/images/indico.png')}}">
                      <p>IndiGo - IN90</p>
                    </div>

                  </td>
                  <td>
                    <div>
                      <h6>14.00</h6>
                      <p>Calicut</p>
                    </div>
                  </td>
                  <td>
                    <div>
                      <h6>3 Hr.14 min</h6>
                      <p class="flight-dots"><i class="fa fa-fighter-jet" aria-hidden="true"></i></p>
                    </div>
                  </td>
                  <td>
                    <div>
                      <h6>17.00</h6>
                      <p>Banglore</p>
                    </div>
                  </td>
                  <td>
                    <div>

                      <h4>QAR.5320</h4>
                    </div>
                  </td>
                  <td>
                    <div>
                      <a href="#" type="button" class="btn" data-bs-toggle="modal" data-bs-target="#myModal">Book Flight</a>
                      <p class="mt-2"><i class="fa fa-plus" aria-hidden="true"></i>&nbsp;&nbsp;Flight Details</p>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <div>
                      <img src="{{asset('website/images/spicejet.png')}}">
                      <p>IndiGo - IN90</p>
                    </div>

                  </td>
                  <td>
                    <div>
                      <h6>14.00</h6>
                      <p>Calicut</p>
                    </div>
                  </td>
                  <td>
                    <div>
                      <h6>3 Hr.14 min</h6>
                      <p class="flight-dots"><i class="fa fa-fighter-jet" aria-hidden="true"></i></p>
                    </div>
                  </td>
                  <td>
                    <div>
                      <h6>17.00</h6>
                      <p>Banglore</p>
                    </div>
                  </td>
                  <td>
                    <div>

                      <h4>QAR.5320</h4>
                    </div>
                  </td>
                  <td>
                    <div>
                      <a href="#" class="btn ">Book Flight</a>
                      <p class="mt-2"><i class="fa fa-plus" aria-hidden="true"></i>&nbsp;&nbsp;Flight Details</p>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <div>
                      <img src="{{asset('website/images/indico.png')}}">
                      <p>IndiGo - IN90</p>
                    </div>

                  </td>
                  <td>
                    <div>
                      <h6>14.00</h6>
                      <p>Calicut</p>
                    </div>
                  </td>
                  <td>
                    <div>
                      <h6>3 Hr.14 min</h6>
                      <p class="flight-dots"><i class="fa fa-fighter-jet" aria-hidden="true"></i></p>
                    </div>
                  </td>
                  <td>
                    <div>
                      <h6>17.00</h6>
                      <p>Banglore</p>
                    </div>
                  </td>
                  <td>
                    <div>

                      <h4>QAR.5320</h4>
                    </div>
                  </td>
                  <td>
                    <div>
                      <a href="#" class="btn ">Book Flight</a>
                      <p class="mt-2"><i class="fa fa-plus" aria-hidden="true"></i>&nbsp;&nbsp;Flight Details</p>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <!--Pagination-->
          <div class="pagination text-center" >
            <!-- Center-aligned -->
            <ul class="pagination justify-content-center">

              <li class="page-item"><a class="page-link active" href="javascript:void(0);">1</a></li>
              <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
              <li class="page-item"><a class="page-link" href="javascript:void(0);">3</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!--End-->
    @endsection