@extends('layout.main')
@section('main-section')
<div class="breadcumb-wrapper" data-bg-src="{{asset('/public/assets/hotel.webp')}}" style="margin-top:-100px;">
    <div class="container z-index-common">
      <div class="breadcumb-content">
        <h1 class="breadcumb-title">Tour Packages</h1>
        <div class="breadcumb-menu-wrap">
          <ul class="breadcumb-menu">
            <li><a href="/">Home</a></li>
            <li>Tour Packages</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  
  
  <section class="tour--layout4 space space-extra-bottom shape-mockup-wrap">
    <div class="container ">
      <div class="row justify-content-center text-center">
        <div class="col-xl-6 col-lg-8 wow fadeInUp" data-wow-delay="0.3s">
          <div class="title-area">
            <span class="sec-subtitle">Awesome Tours</span>
            <h2 class="sec-title h1">Domestic Tour Package</h2>
          </div>
        </div>
      </div>
      <div class="row vs-carousel" data-slide-show="3" data-arrows="false" data-lg-slide-show="3" data-md-slide-show="2"
        data-sm-slide-show="1">
          @foreach($package as $packages)
        <div class="col-xl-3 col-lg-6 col-sm-6">
          <div class="package-style3">
            <div class="package-img">
              <a href="/tour-packages"><img class="w-100" src="{{asset('/public/uploads/post/'.$packages->image)}}"
                  alt="Package Image"></a>
            </div>
            <div class="package-content">
              <h3 class="package-title"><a href="/tour-packages">{{$packages->name}}</a></h3>
              <p class="package-text">{{$packages->para}}</p>
              <div class="package-meta">
                <a href="#"><i class="fas fa-map-marked-alt"></i> Locations</a>
                <a href="#"><i class="fas fa-car"></i> Transfer</a>
                <a href="#"><i class="fas fa-hotel"></i> Hotels</a>
              </div>
              <div class="package-footer">
                  <a href="tel:9599380000" class="vs-btn style4">Call Now</a>
                <span class="package-price">
                  <a href="https://wa.me/919599380000" class="btn btn-success">Whatsapp Now</a>
                </span>
              </div>
            </div>
          </div>
        </div>
        @endforeach
      </div>
    </div>
  </section>
<section class="tour--layout4 space space-extra-bottom shape-mockup-wrap">
    <div class="container ">
      <div class="row justify-content-center text-center">
        <div class="col-xl-6 col-lg-8 wow fadeInUp" data-wow-delay="0.3s">
          <div class="title-area">
            <span class="sec-subtitle">Awesome Tours</span>
            <h2 class="sec-title h1">International Package</h2>
          </div>
        </div>
      </div>
      <div class="row vs-carousel" data-slide-show="3" data-arrows="false" data-lg-slide-show="3" data-md-slide-show="2"
        data-sm-slide-show="1">
          @foreach($outside as $outsides)
        <div class="col-xl-3 col-lg-6 col-sm-6">
          <div class="package-style3">
            <div class="package-img">
              <a href="/tour-packages"><img class="w-100" src="{{asset('/public/uploads/post/'.$outsides->image)}}"
                  alt="Package Image"></a>
            </div>
            <div class="package-content">
              <h3 class="package-title"><a href="/tour-packages">{{$outsides->name}}</a></h3>
              <p class="package-text">{{$outsides->para}}</p>
              <div class="package-meta">
                <a href="#"><i class="fas fa-map-marked-alt"></i> Locations</a>
                <a href="#"><i class="fas fa-car"></i> Transfer</a>
                <a href="#"><i class="fas fa-hotel"></i> Hotels</a>
              </div>
              <div class="package-footer">
                  <a href="tel:9599380000" class="vs-btn style4">Call Now</a>
                <span class="package-price">
                  <a href="https://wa.me/919599380000" class="btn btn-success">Whatsapp Now</a>
                </span>
              </div>
            </div>
          </div>
        </div>
        @endforeach
      </div>
    </div>
  </section>
@endsection