@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->cover)}}">
    <!-- 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->cover)}}" />
    <link rel="canonical" href="{{Request::url()}}" />
    {!! htmlScriptTagJsApi() !!}
@endsection

@section('body') 

      <section class="banner" style="background: url({{Voyager::image($item->cover)}})">
				<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="iti_facts">
      <div class="container">
        <div class="iti_flex">
          @if($item->price)
          <div class="fact_card">
            <i class="fa-solid fa-dollar-sign"></i>

            <div class="detail">
              <p>Price</p>
              <h5>{{$item->price}}</h5>
            </div>
          </div>
          @endif

          @if($item->date)
          <div class="fact_card">
            <i class="fa-regular fa-calendar"></i>

            <div class="detail">
              <p>Date</p>
              <h5>{{$item->date}}</h5>
            </div>
          </div>
          @endif

          @if($item->duration)
          <div class="fact_card">
            <i class="fa-regular fa-hourglass"></i>

            <div class="detail">
              <p>Duration</p>
              <h5>{{$item->duration}}</h5>
            </div>
          </div>
          @endif

          @if($item->difficulty)
          <div class="fact_card">
            <i class="fa-solid fa-chart-column"></i>

            <div class="detail">
              <p>Difficulty</p>
              <h5>{{$item->difficulty}}</h5>
            </div>
          </div>
          @endif
        </div>
      </div>
    </section>

    <section class="option_table p90">
      <div class="container">
        {!!$item->description!!}
      </div>
    </section>

    @if(json_decode($item->highlights)->body)
    <section class="highlight" style="padding-bottom:90px;">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <div class="r_text">
              <h2>Highlights</h2>
            </div>
          </div>
        </div>
        <div class="row g-4 g-lg-5">
        @foreach(json_decode($item->highlights)->body as $high)
          <div class="col-md-4">
            <div class="highlight_card">
              <a
                href="{{Voyager::image($high->iconLocation)}}"
                data-fancybox="highlight"
                data-caption="{{$high->title}}"
              >
                <img src="{{Voyager::image($high->iconLocation)}}" />
              </a>

              <p>{{$high->title}}</p>
            </div>
          </div>

     
          @endforeach
        </div>
      </div>
    </section>
    @endif

    @if(json_decode($item->itinerary)->body)
    <section class="event_text" style="padding-bottom:90px;">
      <div class="wrapper">
        <h3>Itinerary Descriptions</h3>

        <div class="itinerary">
          @foreach(json_decode($item->itinerary)->body as $iti)
          <div class="iti_card">
            <div class="icon"><i class="fa-regular fa-calendar-days"></i></div>
            <span>{{$iti->day}}</span>

            <div class="text">
              <h4>{{$iti->title}}</h4>
              <p>{!!$iti->description!!}</p>
            </div>
          </div>
          @endforeach
        </div>
      </div>
    </section>
    @endif

    @if($item->brochure)
    <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="package">
        <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>
    @endif

@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