@extends('website.layout.app')

@section('content') 
   @include('website.layout.index-header')
      <div class="row text-center mt-3">
        <div class="col-md-8 offset-md-2">
          <div class="banner-text">
            <img src="{{asset('website/images/banner-vector-text.png')}}" width="100%">
          </div>
        </div>
      </div>
      <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 class="row mt-4">
        <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
          <div class="main-ticket-section">
            <!--First Tab-->
            <!-- Nav pills -->
            <ul class="nav nav-pills gap-4" role="tablist">
              <li class="nav-item">
                <a class="nav-link active" data-bs-toggle="pill" href="#flight">
                  <img src="{{asset('website/images/flight-icon.png')}}">
                  <p> Flight</p>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-bs-toggle="pill" href="#hotel">
                  <img src="{{asset('website/images/hotel-icon.png')}}">
                  <p> Hotel</p>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link"  href="{{ route('visa') }}">
                  <img src="{{asset('website/images/visa.png')}}">
                  <p> Visa</p>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link"  href="{{ route('package-page') }}">
                  <img src="{{asset('website/images/packages-icon.png')}}">
                  <p> Packages</p>
                </a>
              </li>
            </ul>
            <!-- Tab panes -->

            <div class="tab-content">
              <div id="flight" class="container tab-pane active"><br>
                <div class="second-tabs">
                  <!-- Nav tabs -->
                  <div class="d-flex border-bottom">
                    <ul class="nav nav-tabs" role="tablist">
                      <li class="nav-item">
                        <a class="nav-link active" data-bs-toggle="tab" href="#one-way">
                          <div class="d-flex special">
                            <div class="circle"></div>
                            <p> One Way</p>
                          </div>
                        </a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#round-trip">
                          <div class="d-flex special">
                            <div class="circle "></div>
                            <p>Round Trip</p>
                          </div>
                        </a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#multi-city">
                          <div class="d-flex special">
                            <div class="circle"></div>
                            <p>Multi City</p>
                          </div>
                        </a>
                      </li>
                    </ul>
                    <div class="main-head">Book Flight Tickets</div>
                  </div>
                  <!-- Tab panes -->
                  <div class="tab-content">
                    <div id="one-way" class="container tab-pane active"><br>
                      <div class="main-tickets-booking-section">
                        <div class="first-colum">
                          <h6>From</h6>
                          <h2>Qatar</h2>
                          <p>Doha Hamad International Airport</p>
                        </div>
                        <div class="vertical-line">
                          <div class="reverse-icon"><img src="{{asset('website/images/reverse-icon.png')}}"></div>
                        </div>
                        <div class="second-colum">
                          <h6>To</h6>
                          <h2>London</h2>
                          <p>London City Airport</p>
                        </div>
                        <div class="vertical-line">
                        </div>
                        <div class="thrid-colum">
                          <div class="d-flex">
                            <div><img src="{{asset('website/images/calender-dep.png')}}"></div>
                            <div>
                              <h6>Depart</h6>
                            </div>
                          </div>
                          <h2>33</h2>
                          <p>March 2022</p>
                        </div>
                        <div class="vertical-line">
                        </div>
                        <div class="thrid-colum return">
                          <div class="d-flex">
                            <div><img src="{{asset('website/images/calender-dep.png')}}"></div>
                            <div>
                              <h6>Return</h6>
                            </div>
                          </div>

                          <p>Book a round trip<br>
                            to save more</p>
                        </div>
                        <div class="vertical-line">
                        </div>
                        <div class="second-colum">
                          <h6>Travallers & Class</h6>
                          <!---->
                          <div class="dropdown">
                            <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown"> 1 Travellers
                            </button>
                            <ul class="dropdown-menu">
                              <li>
                                <div class="d-flex dropdown-content">
                                  <div class="adults">
                                    <h6>Adults</h6>
                                  </div>
                                  <div class="number">
                                    <h6>2</h6>
                                  </div>
                              </li>

                              <li>
                                <div class="d-flex dropdown-content">
                                  <div class="adults">
                                    <h6>Children</h6>
                                    <p>2- 12 Years</p>
                                  </div>
                                  <div class="number">
                                    <h6>2</h6>
                                  </div>

                                </div>
                              </li>
                              <li>
                                <div class="top-radio-buttons">
                                  <div class="form-check">
                                    <input type="radio" class="form-check-input" id="radio1" name="optradio"
                                      value="option1" checked>Economy
                                    <label class="form-check-label" for="radio1"></label>
                                  </div>
                                  <div class="form-check">
                                    <input type="radio" class="form-check-input" id="radio2" name="optradio"
                                      value="option2">Preminum Economy
                                    <label class="form-check-label" for="radio2"></label>
                                  </div>
                                  <div class="form-check">
                                    <input type="radio" class="form-check-input" id="radio3" name="optradio"
                                      value="option3">Business
                                    <label class="form-check-label"></label>
                                  </div>
                                  <div class="dropdown-button">
                                    <button class="btn">Apply</button>
                                  </div>
                                </div>
                              </li>
                            </ul>
                          </div>
                          <!---->
                          <p>Economy</p>
                        </div>
                        <div class="vertical-line">
                        </div>
                        <div class="last-button d-flex justify-content-center align-items-center">
                          <a href="{{ route('flight-inner-page') }}" class="btn">Search Flights</a>
                        </div>
                      </div>
                    </div>
                    <div id="round-trip" class="container tab-pane fade"><br>
                      <div class="main-tickets-booking-section">
                        <div class="first-colum">
                          <h6>From</h6>
                          <h2>Qatar</h2>
                          <p>Doha Hamad International Airport</p>
                        </div>
                        <div class="vertical-line">
                          <div class="reverse-icon"><img src="{{asset('website/images/reverse-icon.png')}}"></div>
                        </div>
                        <div class="second-colum">
                          <h6>To</h6>
                          <h2>London</h2>
                          <p>London City Airport</p>
                        </div>
                        <div class="vertical-line">
                        </div>
                        <div class="thrid-colum">
                          <div class="d-flex">
                            <div><img src="{{asset('website/images/calender-dep.png')}}"></div>
                            <div>
                              <h6>Depart</h6>
                            </div>
                          </div>
                          <h2>13</h2>
                          <p>March 2022</p>
                        </div>
                        <div class="vertical-line">
                        </div>
                        <div class="thrid-colum">
                          <div class="d-flex">
                            <div><img src="{{asset('website/images/calender-dep.png')}}"></div>
                            <div>
                              <h6>Return</h6>
                            </div>
                          </div>
                          <h2>10</h2>
                          <p>April 2022</p>
                        </div>
                        <div class="vertical-line">
                        </div>
                        <div class="second-colum">
                          <h6>Travallers & Class</h6>
                          <!---->
                          <div class="dropdown">
                            <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown"> 1 Travellers
                            </button>
                            <ul class="dropdown-menu">
                              <li>
                                <div class="d-flex dropdown-content">
                                  <div class="adults">
                                    <h6>Adults</h6>
                                  </div>
                                  <div class="number">
                                    <h6>2</h6>
                                  </div>
                              </li>

                              <li>
                                <div class="d-flex dropdown-content">
                                  <div class="adults">
                                    <h6>Children</h6>
                                    <p>2- 12 Years</p>
                                  </div>
                                  <div class="number">
                                    <h6>2</h6>
                                  </div>

                                </div>
                              </li>
                              <li>
                                <div class="top-radio-buttons">
                                  <div class="form-check">
                                    <input type="radio" class="form-check-input" id="radio4" name="optradio"
                                      value="option4" checked>Economy
                                    <label class="form-check-label" for="radio1"></label>
                                  </div>
                                  <div class="form-check">
                                    <input type="radio" class="form-check-input" id="radio5" name="optradio"
                                      value="option5">Preminum Economy
                                    <label class="form-check-label" for="radio2"></label>
                                  </div>
                                  <div class="form-check">
                                    <input type="radio" class="form-check-input" id="radio6" name="optradio"
                                      value="option6">Business
                                    <label class="form-check-label"></label>
                                  </div>
                                  <div class="dropdown-button">
                                    <button class="btn">Apply</button>
                                  </div>
                                </div>
                              </li>
                            </ul>
                          </div>
                          <!---->
                          <p>Economy</p>
                        </div>
                        <div class="vertical-line">
                        </div>
                        <div class="last-button d-flex justify-content-center align-items-center">
                          <a href="{{ route('flight-inner-page') }}" class="btn">Search Flights</a>
                        </div>
                      </div>

                    </div>
                    <div id="multi-city" class="container tab-pane fade"><br>
                      <div class="main-tickets-booking-section">
                        <div class="first-colum">
                          <h6>From</h6>
                          <h2>Qatar</h2>
                          <p>Doha Hamad International Airport</p>
                        </div>
                        <div class="vertical-line">
                          <div class="reverse-icon"><img src="{{asset('website/images/reverse-icon.png')}}"></div>
                        </div>
                        <div class="second-colum">
                          <h6>To</h6>
                          <h2>London</h2>
                          <p>London City Airport</p>
                        </div>
                        <div class="vertical-line">
                        </div>
                        <div class="thrid-colum">
                          <div class="d-flex">
                            <div><img src="{{asset('website/images/calender-dep.png')}}"></div>
                            <div>
                              <h6>Depart</h6>
                            </div>
                          </div>
                          <h2>13</h2>
                          <p>March 2022</p>
                        </div>
                        <div class="vertical-line">
                        </div>
                        <div class="thrid-colum">
                          <div class="d-flex">
                            <div><img src="{{asset('website/images/calender-dep.png')}}"></div>
                            <div>
                              <h6>Return</h6>
                            </div>
                          </div>
                          <h2>10</h2>
                          <p>April 2022</p>
                        </div>
                        <div class="vertical-line">
                        </div>
                        <div class="second-colum">
                          <h6>Travallers & Class</h6>
                          <!---->
                          <div class="dropdown">
                            <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown"> 1 Travellers
                            </button>
                            <ul class="dropdown-menu">
                              <li>
                                <div class="d-flex dropdown-content">
                                  <div class="adults">
                                    <h6>Adults</h6>
                                  </div>
                                  <div class="number">
                                    <h6>2</h6>
                                  </div>
                              </li>

                              <li>
                                <div class="d-flex dropdown-content">
                                  <div class="adults">
                                    <h6>Children</h6>
                                    <p>2- 12 Years</p>
                                  </div>
                                  <div class="number">
                                    <h6>2</h6>
                                  </div>

                                </div>
                              </li>
                              <li>
                                <div class="top-radio-buttons">
                                  <div class="form-check">
                                    <input type="radio" class="form-check-input" id="radio4" name="optradio"
                                      value="option4" checked>Economy
                                    <label class="form-check-label" for="radio1"></label>
                                  </div>
                                  <div class="form-check">
                                    <input type="radio" class="form-check-input" id="radio5" name="optradio"
                                      value="option5">Preminum Economy
                                    <label class="form-check-label" for="radio2"></label>
                                  </div>
                                  <div class="form-check">
                                    <input type="radio" class="form-check-input" id="radio6" name="optradio"
                                      value="option6">Business
                                    <label class="form-check-label"></label>
                                  </div>
                                  <div class="dropdown-button">
                                    <button class="btn">Apply</button>
                                  </div>
                                </div>
                              </li>
                            </ul>
                          </div>
                          <!---->
                          <p>Economy</p>
                        </div>
                        <div class="vertical-line">
                        </div>
                        <div class="last-button d-flex justify-content-center align-items-center">
                          <a href="{{ route('flight-inner-page') }}" class="btn">Search Flights</a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div id="hotel" class="container tab-pane fade"><br>
                <div class="hotel-head border-bottom">Book Domestic and International Hotels</div>
                <div class="main-tickets-booking-section">
                  <div class="first-colum">
                    <h6>Enter Your Destination OR Property</h6>
                    <h2>Qatar</h2>
                    <p>Qatar</p>
                  </div>
                  <div class="vertical-line"></div>
                  <div class="thrid-colum">
                    <div class="d-flex">
                      <div><img src="{{asset('website/images/calender-dep.png')}}"></div>
                      <div>
                        <h6>Check In</h6>
                      </div>
                    </div>
                    <h2>13</h2>
                    <p>March 2022</p>
                  </div>
                  <div class="vertical-line">
                  </div>
                  <div class="thrid-colum">
                    <div class="d-flex">
                      <div><img src="{{asset('website/images/calender-dep.png')}}"></div>
                      <div>
                        <h6>Check Out</h6>
                      </div>
                    </div>
                    <h2>10</h2>
                    <p>April 2022</p>
                  </div>
                  <div class="vertical-line">
                  </div>
                  <div class="second-colum">
                    <h6>Rooms & Guests</h6>
                    <!---->
                    <div class="dropdown">
                      <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown"> 1 <span
                          style="font-size:15px;"> Room</span> 1 <span style="font-size:15px;">Guest</span>
                      </button>
                      <ul class="dropdown-menu">
                        <li>
                          <div class="d-flex dropdown-content">
                            <div class="adults">
                              <h6>Adults</h6>
                            </div>
                            <div class="number">
                              <h6>2</h6>
                            </div>
                        </li>

                        <li>
                          <div class="d-flex dropdown-content">
                            <div class="adults">
                              <h6>Children</h6>
                              <p>2- 12 Years</p>
                            </div>
                            <div class="number">
                              <h6>2</h6>
                            </div>

                          </div>
                        </li>
                        <li>
                          <div>
                            <div class="room"><span><i class="fa fa-plus" aria-hidden="true"></i>&nbsp;&nbsp;Add Another
                                Room</span></div>
                            <div class="dropdown-button">
                              <button class="btn">Apply</button>
                            </div>
                          </div>
                        </li>
                      </ul>
                    </div>
                    <!---->
                  </div>
                  <div class="vertical-line">
                  </div>
                  <div class="last-button d-flex justify-content-center align-items-center">
                    <a href="{{ route('hotel-inner-page') }}" class="btn">Search Hotel</a>
                  </div>
                </div>
              </div>
              <div id="visa" class="container tab-pane fade"><br>
               
              </div>
              <div id="packages" class="container tab-pane fade"><br>
                
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </section>
  <!--End Header-->
  <!--Exclusive Deals Section-->
  <section class="deal-section" data-aos="fade-up"
  data-aos-anchor-placement="top-bottom"  data-aos-delay="300">
    <div class="container">
      <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4">
          <h1>Exclusive Deals</h1>
        </div>
        <div class="col-lg-8 col-md-8 col-sm-8">
          <div class="exclusive-deals-sec">
            <!-- Nav pills -->
            <ul class="nav nav-pills">
              <li class="nav-item">
                <a class="nav-link active" data-bs-toggle="pill" href="#hot-deals">Hot Deals </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-bs-toggle="pill" href="#hot-flight">Flight</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-bs-toggle="pill" href="#hot-hotels">Hotels</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-bs-toggle="pill" href="#hot-Packages">Packages</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="col-lg-12 col-md-12 col-sm-12" data-aos="fade-up"
        data-aos-anchor-placement="top-bottom"  data-aos-delay="300">
          <div class="exclusive-deals-sec">
            <!-- Tab panes -->
            <div class="tab-content">
              <div class="tab-pane container active" id="hot-deals">
                <div class="row mt-5">
                  <div class="col-lg-4 col-md-4 col-sm-12">
                    <div class="img-exclusive-deals-sec">
                      <img src="{{asset('website/images/package-1.png')}}" width="100%">
                      <div class="image-text">
                        <div class="left-section">
                          <h5>Lorem Lipsum</h5>
                          <span>3 nights 4 Days</span><br>
                          <span>1000 QAR</span>
                        </div>
                        <div class="right-section">
                          <h4><a href="{{ route('flight-inner-page') }}">Book Now</a></h4>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-lg-4 col-md-4 col-sm-12">
                    <div class="img-exclusive-deals-sec">
                      <img src="{{asset('website/images/package-1.png')}}" width="100%">
                      <div class="image-text">
                        <div class="left-section">
                          <h5>Lorem Lipsum</h5>
                          <span>3 nights 4 Days</span><br>
                          <span>1000 QAR</span>
                        </div>
                        <div class="right-section">
                          <h4><a href="{{ route('flight-inner-page') }}">Book Now</a></h4>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-lg-4 col-md-4 col-sm-12">
                    <div class="img-exclusive-deals-sec">
                      <img src="{{asset('website/images/package-1.png')}}" width="100%">
                      <div class="image-text">
                        <div class="left-section">
                          <h5>Lorem Lipsum</h5>
                          <span>3 nights 4 Days</span><br>
                          <span>1000 QAR</span>
                        </div>
                        <div class="right-section">
                          <h4><a href="{{ route('flight-inner-page') }}">Book Now</a></h4>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row mt-5">
                  <div class="col-lg-4 col-md-4 col-sm-12">
                    <div class="img-exclusive-deals-sec">
                      <img src="{{asset('website/images/package-1.png')}}" width="100%">
                      <div class="image-text">
                        <div class="left-section">
                          <h5>Lorem Lipsum</h5>
                          <span>3 nights 4 Days</span><br>
                          <span>1000 QAR</span>
                        </div>
                        <div class="right-section">
                          <h4><a href="{{ route('flight-inner-page') }}">Book Now</a></h4>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-lg-4 col-md-4 col-sm-12">
                    <div class="img-exclusive-deals-sec">
                      <img src="{{asset('website/images/package-1.png')}}" width="100%">
                      <div class=" image-text">
                        <div class="left-section">
                          <h5>Lorem Lipsum</h5>
                          <span>3 nights 4 Days</span><br>
                          <span>1000 QAR</span>
                        </div>
                        <div class="right-section">
                          <h4><a href="{{ route('flight-inner-page') }}">Book Now</a></h4>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-lg-4 col-md-4 col-sm-12">
                    <div class="img-exclusive-deals-sec">
                      <img src="{{asset('website/images/package-1.png')}}" width="100%">
                      <div class="image-text">
                        <div class="left-section">
                          <h5>Lorem Lipsum</h5>
                          <span>3 nights 4 Days</span><br>
                          <span>1000 QAR</span>
                        </div>
                        <div class="right-section">
                          <h4><a href="{{ route('flight-inner-page') }}">Book Now</a></h4>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="tab-pane container fade" id="hot-flight">
                <div class="row mt-5">
                  <div class="col-lg-4 col-md-4 col-sm-12">
                    <div class="img-exclusive-deals-sec">
                      <img src="{{asset('website/images/package-1.png')}}" width="100%">
                      <div class="image-text">
                        <div class="left-section">
                          <h5>Lorem Lipsum</h5>
                          <span>3 nights 4 Days</span><br>
                          <span>1000 QAR</span>
                        </div>
                        <div class="right-section">
                          <h4><a href="{{ route('flight-inner-page') }}">Book Now</a></h4>
                        </div>
                      </div>
                    </div>
                  </div>


                  <div class="col-lg-4 col-md-4 col-sm-12">
                    <div class="img-exclusive-deals-sec">
                      <img src="{{asset('website/images/package-1.png')}}" width="100%">
                      <div class=" image-text">
                        <div class="left-section">
                          <h5>Lorem Lipsum</h5>
                          <span>3 nights 4 Days</span><br>
                          <span>1000 QAR</span>
                        </div>
                        <div class="right-section">
                          <h4><a href="{{ route('flight-inner-page') }}">Book Now</a></h4>
                        </div>
                      </div>
                    </div>
                  </div>

                  
                  <div class="col-lg-4 col-md-4 col-sm-12">
                    <div class="img-exclusive-deals-sec">
                      <img src="{{asset('website/images/package-1.png')}}" width="100%">
                      <div class="image-text">
                        <div class="left-section">
                          <h5>Lorem Lipsum</h5>
                          <span>3 nights 4 Days</span><br>
                          <span>1000 QAR</span>
                        </div>
                        <div class="right-section">
                          <h4><a href="{{ route('flight-inner-page') }}">Book Now</a></h4>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row mt-5">
                  <div class="col-lg-4 col-md-4 col-sm-12">
                    <div class="img-exclusive-deals-sec">
                      <img src="{{asset('website/images/package-1.png')}}" width="100%">
                      <div class=" image-text">
                        <div class="left-section">
                          <h5>Lorem Lipsum</h5>
                          <span>3 nights 4 Days</span><br>
                          <span>1000 QAR</span>
                        </div>
                        <div class="right-section">
                          <h4><a href="{{ route('flight-inner-page') }}">Book Now</a></h4>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-lg-4 col-md-4 col-sm-12">
                    <div class="img-exclusive-deals-sec">
                      <img src="{{asset('website/images/package-1.png')}}" width="100%">
                      <div class=" image-text">
                        <div class="left-section">
                          <h5>Lorem Lipsum</h5>
                          <span>3 nights 4 Days</span><br>
                          <span>1000 QAR</span>
                        </div>
                        <div class="right-section">
                          <h4><a href="{{ route('flight-inner-page') }}">Book Now</a></h4>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-lg-4 col-md-4 col-sm-12">
                    <div class="img-exclusive-deals-sec">
                      <img src="{{asset('website/images/package-1.png')}}" width="100%">
                      <div class="image-text">
                        <div class="left-section">
                          <h5>Lorem Lipsum</h5>
                          <span>3 nights 4 Days</span><br>
                          <span>1000 QAR</span>
                        </div>
                        <div class="right-section">
                          <h4><a href="{{ route('flight-inner-page') }}">Book Now</a></h4>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="tab-pane container fade" id="hot-hotels">



             
                <div class="row mt-5">
  @foreach($hotel_details as $details)
                  <div class="col-lg-4 col-md-4 col-sm-12">
                    <div class="img-exclusive-deals-sec">
                      <img src="{{ asset($details->main_image)}}" width="100%">
                      <div class=" image-text">
                        <div class="left-section">
                          <h5>{{json_decode($details->attributes)->hotel_name}}</h5>
                        
                          <span>{{json_decode($details->attributes)->price}}</span>
                        </div>
                        <div class="right-section">
                          <h4><a href="{{ route('hotel.detail', ['slug' => $details->url_slug]) }}">Book Now</a></h4>
                        </div>
                      </div>
                    </div>
                  </div>   
    @endforeach
                </div>



          
              </div>
              <div class="tab-pane container fade" id="hot-Packages">
                <div class="row mt-5">


                  @foreach($package_details as $details)

                  <div class="col-lg-4 col-md-4 col-sm-12">
                    <div class="img-exclusive-deals-sec">
                      <img src="{{ asset($details->image)}}" width="100%">
                      <div class="image-text">
                        <div class="left-section">
                            <h5>{{json_decode($details->attributes)->place}}</h5>

                          <span>{{json_decode($details->attributes)->number_of_nights}} Nights & {{json_decode($details->attributes)->number_of_days}} Days</span><br>
                          <span>{{json_decode($details->attributes)->price}}</span>
                        </div>
                        <div class="right-section">
                          <h4><a href="{{ route('package.package-inner-page', ['slug' => $details->url_slug]) }}">Book Now</a></h4>
                        </div>
                      </div>
                    </div>
                  </div>
                    @endforeach
                 </div>

                   </div>  
               
         
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!--End-->
  <!--Blogs Section-->
  <section class="blog-sec" data-aos="fade-up"
  data-aos-anchor-placement="top-bottom"  data-aos-delay="300">
    <div class="container-fluid">
      <!--ROW-->
      <div class="row rounded">
        <div class="col rounded">
          <div id="carouselExampleIndicators" class="carousel slide shadow-sm" data-bs-ride="true">
            <div class="carousel-indicators">
              <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"
                aria-current="true" aria-label="Slide 1"></button>
              <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
                aria-label="Slide 2"></button>
              <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
                aria-label="Slide 3"></button>
              <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3"
                aria-label="Slide 4"></button>
            </div>
            <div class="carousel-inner rounded">
              <div class="carousel-item active">
                <img src="{{asset('website/images/bg.png')}}" class="d-block w-100" alt="...">
                <div class="w-50 h-100 mini-blog float-left position-absolute top-0 start-0 d-flex align-items-center">
                  <h3>
                    <p class="mini-blog-para">Travel & Blogs</p>
                    <p>
                      Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam molestiae officiis labore
                      doloribus
                      vero at numquam ipsam iure vitae recusandae sit quisquam, quas ex saepe quo sunt deserunt maiores
                      qui
                      Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam molestiae officiis labore
                      doloribus
                      vero at numquam ipsam iure vitae recusandae sit quisquam, quas ex saepe quo sunt deserunt maiores
                    
                     
                    </p>
                  </h3>
                </div>
              </div>
              <div class="carousel-item">
                <img src="{{asset('website/images/bg-1.jpg')}}" class="d-block w-100" alt="...">
                <div class="w-50 h-100 mini-blog float-left position-absolute top-0 start-0 d-flex align-items-center">
                  <h3>
                    <p class="mini-blog-para">Travel & Blogs</p>
                    <p>
                      Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam molestiae officiis labore
                      doloribus
                      vero at numquam ipsam iure vitae recusandae sit quisquam, quas ex saepe quo sunt deserunt maiores
                      qui
                      Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam molestiae officiis labore
                      doloribus
                      vero at numquam ipsam iure vitae recusandae sit quisquam, quas ex saepe quo sunt deserunt maiores
                     
                    </p>
                  </h3>
                </div>
              </div>
              <div class="carousel-item">
                <img src="{{asset('website/images/bg-2.jpg')}}" class="d-block w-100" alt="...">
                <div class="w-50 h-100 mini-blog float-left position-absolute top-0 start-0 d-flex align-items-center">
                  <h3>
                    <p class="mini-blog-para">Travel & Blogs</p>
                    <p>
                      Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam molestiae officiis labore
                      doloribus
                      vero at numquam ipsam iure vitae recusandae sit quisquam, quas ex saepe quo sunt deserunt maiores
                      qui
                      Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam molestiae officiis labore
                      doloribus
                      vero at numquam ipsam iure vitae recusandae sit quisquam, quas ex saepe quo sunt deserunt maiores
                     
                    </p>
                  </h3>
                </div>
              </div>
              <div class="carousel-item">
                <img src="{{asset('website/images/bg.png')}}" class="d-block w-100" alt="...">
                <div class="w-50 h-100 mini-blog float-left position-absolute top-0 start-0 d-flex align-items-center">
                  <h3>
                    <p class="mini-blog-para">Travel & Blogs</p>
                    <p>
                      Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam molestiae officiis labore
                      doloribus
                      vero at numquam ipsam iure vitae recusandae sit quisquam, quas ex saepe quo sunt deserunt maiores
                      qui
                      Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam molestiae officiis labore
                      doloribus
                    
                    </p>
                  </h3>
                </div>
              </div>
            </div>
            <button class="carousel-control-prev justify-content-start px-5" type="button"
              data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
              <p aria-hidden="true">&#10094;</p>
              <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next justify-content-end px-5" type="button"
              data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
              <p aria-hidden="true">&#10095;</p>
              <span class="visually-hidden">Next</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </section>



   @endsection