@extends('layouts.app')

@section('title')
    <title>{{$page->title}}</title>  
    <meta name="description" content="{{$page->meta_description}}">
    <!-- Open Graph / Facebook -->
    <meta property="og:url" content="{{Request::url()}}" />
    <meta property="og:type" content="website">
    <meta property="og:title" content="{{$page->title}}">
    <meta property="og:description" content="{{$page->meta_description}}">
    <meta property="og:image" content="{{Voyager::image($page->banner)}}">
    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="{{$page->title}}" />
    <meta name="twitter:description" content="{{$page->meta_description}}" />
    <meta name="twitter:image" content="{{Voyager::image($page->banner)}}" />
    <link rel="canonical" href="{{Request::url()}}" />
@endsection

@section('body') 

      <section class="banner" style="background: url({{Voyager::image($page->banner)}})">
				<div class="container">
					<div class="row">
						<div class="col-lg-12">
							<div class="breadcrumb-info text-center" data-lag="0.2" data-stagger="0.08" data-speed="1" style="translate: none; rotate: none; scale: none; transform: translate(0px, 0px); will-change: transform;">
								<h1>{{$page->title}}</h1>
							</div>
						</div>
					</div>
				</div>
			</section>

  <section class="package p90">
    <div class="container">
      <div class="title">
        <h6>NORMAL</h6>
        <h3>Packages</h3>
      </div>

      <div class="row">
        @foreach($normal as $pack)
          <div class="col-md-4">
            <div class="package_card">
              <a href="/package/{{$pack->slug}}">
                <img src="{{Voyager::image($pack->cover)}}" alt="" />
              </a>

              <div class="text">
                <h4><a href="/package/{{$pack->slug}}">{{$pack->title}}</a></h4>

                <ul>
                  <li><i class="fa-solid fa-dollar-sign"></i> Price: {{$pack->price}}</li>
                  <li>
                    <i class="fa-regular fa-calendar"></i> Date: {{$pack->date}}
                  </li>
                  <li>
                    <i class="fa-regular fa-hourglass"></i> Duration: {{$pack->duration}}
                  </li>
                  <li>
                    <i class="fa-solid fa-chart-column"></i> Difficulty: {{$pack->difficulty}}
                  </li>
                </ul>
              </div>
            </div>
          </div>
        @endforeach
      </div>
    </div>
  </section>

  <section class="package" style="padding-bottom:90px;">
    <div class="container">
      <div class="title">
        <h6>SPECIAL</h6>
        <h3>Packages</h3>
      </div>

      <div class="row">
        @foreach($special as $pack)
          <div class="col-md-4">
            <div class="package_card">
              <a href="/package/{{$pack->slug}}">
                <img src="{{Voyager::image($pack->cover)}}" alt="" />
              </a>

              <div class="text">
                <h4><a href="/package/{{$pack->slug}}">{{$pack->title}}</a></h4>

                <ul>
                  <li><i class="fa-solid fa-dollar-sign"></i> Price: {{$pack->price}}</li>
                  <li>
                    <i class="fa-regular fa-calendar"></i> Date: {{$pack->date}}
                  </li>
                  <li>
                    <i class="fa-regular fa-hourglass"></i> Duration: {{$pack->duration}}
                  </li>
                  <li>
                    <i class="fa-solid fa-chart-column"></i> Difficulty: {{$pack->difficulty}}
                  </li>
                </ul>
              </div>
            </div>
          </div>
        @endforeach
      </div>
    </div>
  </section>
@endsection