@extends('layouts.app')

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

@section('body') 

      <section class="banner" style="background: url({{Voyager::image($item->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>{{$item->title}}</h1>
							</div>
						</div>
					</div>
				</div>
			</section>

    <section class="event_text p90">
      <div class="r_text">
        {!!$item->overview!!}
        <h3>Qualification Criteria</h3>
        {!!$item->qualification_criteria!!}
        <h3>Cut Off Time</h3>
        {!!$item->cut_off_time!!}
      </div>
    </section>

    <section class="highlight">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <div class="r_text">
              <h3>Highlights</h3>
            </div>
          </div>
        </div>
        <div class="row g-4 g-lg-5">
        @foreach($item->highlights as $high)
          <div class="col-md-4">
            <div class="highlight_card">
              <a
                href="{{Voyager::image($high->image)}}"
                data-fancybox="highlight"
                data-caption="{{$high->title}}"
              >
                <img src="{{Voyager::image($high->image)}}" />
              </a>

              <p>{{$high->title}}</p>
            </div>
          </div>
          @endforeach
        </div>
      </div>
    </section>

    <section class="trail p90">
      <div class="container">
        <h3>All Trails</h3>
        {!!$item->trails!!}
      </div>
    </section>

    <section class="trail" style="padding-bottom:90px;">
      <div class="container">
        <h3>Elevation Chart</h3>

        <img
          src="{{Voyager::image($item->chart)}}"
          alt=""
        />
      </div>
    </section>

    <section class="download_link p60">
      <form action="{{Route('packageBrochure')}}" method="post">
      @csrf
        <div class="container">
          <h4>
            You can <em>download our brochure</em> by filling up the form below
          </h4>

          <input type="text" placeholder="Full Name" name="name"/>
          <input type="email" placeholder="Email" name="email"/>
          <input type="hidden" name="type" value="event">
          <input type="hidden" name="id" value="{{$item->id}}">
		<div style="display:none;">
            <input type="text" name="ip" value="">
        </div>
          <div class="d-flex justify-content-center" style="margin:20px 0px">
            {!! htmlFormSnippet() !!}
          </div>
          <!--button type="submit" class="cta red">Send Download Link</button-->
          <button type="submit" class="cta">
            <span class="btn-flip">
              <span data-text="Send Download Link">Send Download Link</span>
            </span>
          </button>
        </div>
      </form>
    </section>

    <section class="package p90">
      <div class="container">
        <div class="title">
          <h6>NORMAL</h6>
          <h3>Package</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>Package</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

@section('javascript')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.css" integrity="sha512-3pIirOrwegjM6erE5gPSwkUzO+3cTjpnV9lexlNZqvupR64iZBnOOTiiLPb9M36zpMScbmUNIcHUqKD47M719g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js" integrity="sha512-VEd+nq25CkR676O+pLBnDW09R7VQX9Mdiij052gVCp5yVH3jGtH70Ho/UUv4mJDsEdTvqRCFZg0NKGiojGnUCw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>  
    @if(Session::has('success'))  
            toastr.success("{{ Session('success') }}");  
    @endif  
    @if(Session::has('error')) 
            toastr.error("{{ Session('error') }}");
    @endif
    </script>  
@endsection