@extends('layouts.app')

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

@section('body') 
    <section
      class="banner index"
      style="background: url({{Voyager::image($banner->banner)}})"
    >
      <div class="container">
        <div class="text">
          <h1>{{$banner->banner_caption}} </h1>

          <div class="timer">
    
            <h3 id="targetDate" style="display: none;">{{$banner->banner_timer_date}}</h3>

            <div class="countdown" id="countdown" >
              <div id="days">
                <h4>
                  <span>52</span>
                  Days
                </h4>
              </div>

              <div id="hours">
                <h4>
                  <span>00</span>
                  Hours
                </h4>
              </div>

              <div id="minutes">
                <h4>
                  <span>00</span>
                  Minutes
                </h4>
              </div>

              <div id="seconds">
                <h4>
                  <span>00</span>
                  Seconds
                </h4>
              </div>
            </div>

        
        </div>
        </div>

        
        <div class="featured">
          @foreach($featured as $logo)
          <img src="{{Voyager::image($logo->image)}}" alt="{{$logo->title}}" />
          @endforeach
        </div>
      </div>
    </section>

    <section class="intro p90">
      <div class="container">
        <div class="text">
          {!!$item->about!!}
        </div>
      </div>
    </section>

    <section class="event p90">
      <div class="container">
        <div class="heading">
          <h3>{!!$item->everest_run_title!!}</h3>
          {!!$item->everest_run!!}

          <a href="/register" class="cta_arrow">
            Book Now <i class="fa-solid fa-right-long"></i>
          </a>
        </div>

        <div class="row gx-5">
          @foreach($events as $event)
          <div class="col-md-4">
          <a href="/events/{{$event->slug}}">
            <div
              class="event_card_overlay"
              style="background-image: url({{Voyager::image($event->homepage_image)}})"
            >
              <div class="text">
                <h4>{!!$event->title!!}</h4>
                {!!$event->homepage_text!!}
              </div>
            </div>
          </a>
          </div>
          @endforeach

        </div>
      </div>
    </section>

    <section class="non_runner">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-md-7">
            <div class="text">
              <div class="r_text">
                <h3>{{$nonRunner->title}}</h3>
                {!!$nonRunner->text!!}
                <a href="{{$nonRunner->link}}" class="cta_arrow">View More <i class="fa-solid fa-right-long"></i></a>
              </div>
            </div>
          </div>

          <div class="col-md-5">
            <div class="image">
              <img src="{{Voyager::image($item->nonrunner_image)}}" alt="" />
            </div>
          </div>
        </div>
      </div>
    </section>

    <section
      class="multi_everest"
      style="background: url({{Voyager::image($multi->banner)}})"
    >
      <div class="container">
        <div class="r_text">
          <h3>{{$multi->title}}</h3>
            {!!$multi->content!!}

          <div class="features">
            <div class="key">
              <img src="{{asset('images/gps.png')}}" alt="" />

              <div>
                <span>Location</span>
                <h5>Mount Everest</h5>
              </div>
            </div>

            <div class="key">
              <img src="{{asset('images/calendar.png')}}" alt="" />

              <div>
                <span>Date</span>
                <h5>{{$everest->date}}</h5>
              </div>
            </div>

            <div class="key">
              <img src="{{asset('images/speedometer.png')}}" alt="" />

              <div>
                <span>Difficulty</span>
                <h5>{{$everest->difficulty}}</h5>
              </div>
            </div>

            <div class="key">
              <img src="{{asset('images/hourglass-start.png')}}" alt="" />

              <div>
                <span>Duration</span>
                <h5>{{$everest->duration}}</h5>
              </div>
            </div>
          </div>

          <a href="{{$multi->link}}" class="cta">
            <span class="btn-flip">
              <span data-text="Read More">Read More</span>
            </span>
          </a>
        </div>
      </div>
    </section>

    <section class="concept p90">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-md-4">
            <h3>{!!$message->title!!}</h3>
            <a href="{{$message->link}}" class="cta_arrow">
              Read More <i class="fa-solid fa-right-long"></i>
            </a>
          </div>

          <div class="col-md-2">
            <img src="{{Voyager::image($message->image)}}" alt="" />
          </div>

          <div class="col-md-6">
            <div class="r_text">
              {!!$message->content!!}
            </div>
          </div>
        </div>
      </div>
    </section>

    <section
      class="partners"
      style="background: url({{asset('images/dynamic/Group-65.png')}})"
    >
      <div class="container">
        <div class="runners p60">
          <img src="{{asset('images/dynamic/Earth-footer.png')}}" alt="" />
          <div class="title">
            <span>Everest Marathon</span>
            <h2>{!!$item->runner_title!!}</h2>
            {!!$item->runner_text!!}
          </div>

          <a href="{!!$item->runner_link!!}" class="cta">
            <span class="btn-flip">
              <span data-text="Read More">Read More</span>
            </span>
          </a>

        </div>

        <div class="partners_wrapper p60">
          <div class="title">
            <span>Our Partners</span>
            <h2>{!!$item->partner_title!!}</h2>
            {!!$item->partner_text!!}
          </div>

          <div class="partner_slider swiper">
            <div class="swiper-wrapper">
              @foreach($partners as $part)
              <div class="swiper-slide">
                <img src="{{Voyager::image($part->image)}}" alt="{{$part->title}}" />
              </div>
              @endforeach
            </div>
          </div>
        </div>
      </div>
    </section>
@endsection

@section('javascript')


<script>
      const countdownElement = document.getElementById("countdown");
      const daysSpan = countdownElement.querySelector("#days span");
      const hoursSpan = countdownElement.querySelector("#hours span");
      const minutesSpan = countdownElement.querySelector("#minutes span");
      const secondsSpan = countdownElement.querySelector("#seconds span");

      const targetDateEl = document.getElementById("targetDate").innerHTML;

      const targetDate = new Date(targetDateEl).getTime();

      function updateCountdown() {
          const now = new Date().getTime();
          const remainingTime = targetDate - now;

          const days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
          const hours = Math.floor(
              (remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
          );
          const minutes = Math.floor(
              (remainingTime % (1000 * 60 * 60)) / (1000 * 60)
          );
          const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);

          daysSpan.innerHTML = days;
          hoursSpan.innerHTML = ("0" + hours).slice(-2);
          minutesSpan.innerHTML = ("0" + minutes).slice(-2);
          secondsSpan.innerHTML = ("0" + seconds).slice(-2);

          if (remainingTime < 0) {
              clearInterval(interval);
              countdownElement.style.display = "none";
             
          }
      }

      const interval = setInterval(updateCountdown, 1000);
      updateCountdown(); 
    </script>
@endsection