{% extends "base.html" %} 
{% load humanize %} 
{% load static %} 
{% block content %}

<link rel="stylesheet" href="{% static 'css/autocomplete.css' %}" />
<script src="https://unpkg.com/@trevoreyre/autocomplete-js"></script>
<div class="banner">
  <div class="owl-slider">
    <div id="carousel" class="owl-carousel">
      {% for slider in sliders %}
      <div class="item">
        <img src="{{ slider.image.url }}" alt="{{ slider.heading }}" />
      </div>
      {% endfor %}
    </div>
  </div>

  <div class="banner-overlay">
    <div class="container banner-content">
      <div class="banner-text">
        <div class="message-secondary">
          Experience Nepal, Beyond Expectations
        </div>
        <div class="message-primary">Find your perfect escape..</div>
      </div>

      <form action="#" class="search-wrapper">
        {% csrf_token %}

        <div id="autocomplete" class="autocomplete">
          <input
            class="autocomplete-input"
            name="search"
            placeholder="Search your trip..."
          />
          <ul
            class="autocomplete-result-list"
            style="
              position: absolute;
              z-index: 999 !important;
              width: 100%;
              box-sizing: border-box;
              visibility: hidden;
              pointer-events: none;
              top: 100%;
            "
          ></ul>
        </div>
      </form>
    </div>
  </div>
</div>

<div class="section-message">
  <div class="container mt-5">
    <div class="row row-message">
      <div class="col-md-auto">
        <div id="TA_selfserveprop228" class="TA_selfserveprop">
          <ul id="sHIzY26I" class="TA_links gi2uRr4F">
            <li id="PlX02pov5Ki" class="hxZMYEMv2">
              <a target="_blank" href="https://www.tripadvisor.com/"
                ><img
                  src="{% static 'images/150_logo-11900-2.png' %}"
                  alt="TripAdvisor"
              /></a>
            </li>
          </ul>
        </div>
      </div>
      <div class="col-lg-1 d-none d-lg-block"></div>

      <div class="col-md">
        <div class="h2 heading">{{ about.title }}</div>
        <div class="box-description">
          {{ about.description |safe | truncatewords:200}}
        </div>
        <a href="{% url 'about' %}">read more..</a>
      </div>
    </div>
  </div>
</div>

<div id="section-trip">
  <div class="container">
    <h2 class="section-title">Join with Our Upcoming Group</h2>
    <p class="text-center m-2">
      Join Himalayan Magic Adventures with guaranteed departures—choose your
      trip and be part of a group today!
    </p>
    <div id="trip-detail-departures" class="trip-detail-item">
      <div class="table-responsive">
        <table class="table table-striped">
          <thead>
            <tr>
              <th>Trip Name</th>
              <th>Joining Dates</th>
              <th>Status</th>
              <th>Price</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody class="ajaxloadmoredeparture">
            <td colspan="5" class="loading" style="display: none">
              <div class="fa-3x text-center">
                {% for tour in tourdepartures %} 
                {% for departure in tour.departure_set.all %}

                <tr>
                  <td>
                    <a href="{% url 'package' tour.slug %}"
                      >{{ departure.tour.title }}</a
                    >
                  </td>
                  <td>
                    {{ departure.departure_date}} - {{ departure.end_date}}
                  </td>
                  <td>Available</td>
                  <td>
                    <span class=""
                      ><strike
                        >US$ {{ tour.regular_price | intcomma }}</strike
                      ></span
                    >
                    <span class="">US$ {{ tour.sell_price | intcomma }}</span>
                  </td>
                  <td>
                    <form action='{% url 'booking' %}' method="GET">
                      {% csrf_token %}
                       <input name="trip_name" type="hidden" value="{{tour.title}}" />
                       <input name="trip_image" type="hidden" value="{{tour.image.url }}" />
            <input name="trip_price" type="hidden" value="{{ tour.sell_price }}" />
             <input name="trip_duration" type="hidden" value="{{ tour.duration }}" />
  <input name="trip_departure" type="hidden" value="{{ departure.departure_date }}" />
                    <button type="submit"  href="{% url 'booking' %}" class="btn btn-primary btn-block" id="search">
                      Join Group
                    </button>

                  </form>
                  </td>
                </tr>
                {% endfor %} 
                {% endfor %}
              </div>
            </td>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<div id="section-trip">
  <div class="container">
    <h2 class="section-title">Best Seller Treks for 2025</h2>
    {% comment %}
    <div class="section-summary">
      We hit the trails like nobody else & we pride ourselves on providing
      impartial information to help you decide the right trip for you. Dive into
      the heart of Himalayas & get a sense of adventure.
    </div>
    {% endcomment %}
  </div>
  <div class="container">
    <div class="trips row">
      {% for tour in tours %}
      <div class="col-md-4 my-4">
        <div class="trip">
          <div class="wrapper-image">
            <a href="{% url 'package' tour.slug %}">
              <img
                src="{{ tour.image.url }}"
                width="410"
                height="250"
                alt="{{ tour.title }}"
                class="img-fluid rounded"
              />
            </a>
            <div class="trip-price">
              <div>
                {% if tour.regular_price %}
                <span class="previous-price"
                  ><s>$ {{ tour.regular_price | intcomma }}</s></span
                >{% endif %}&nbsp;
                <span class="current-price">$ {{ tour.sell_price }}</span>
              </div>
            </div>
          </div>
          <div class="wrapper-text">
            <div class="trip-description">
              <div class="trip-title">
                <a href="{% url 'package' tour.slug %}"
                  >Everest Base Camp Trek</a
                >
              </div>
              <div class="trip-duration">
                <div>
                  <span class="far fa-clock text-primary"></span>
                  {{ tour.duration }} Days
                </div>
              </div>
            </div>
            <div class="wrapper-book-now">
              <a
                href="{% url 'package' tour.slug %}"
                class="btn btn-outline-primary rounded-pill btn-block btn-book-now"
                >View Details</a
              >
            </div>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</div>
<div id="section-trip">
  <div class="container">
    <h2 class="section-title">Top-rated climbing</h2>
    {% comment %}
    <div class="section-summary">
      We hit the trails like nobody else & we pride ourselves on providing
      impartial information to help you decide the right trip for you. Dive into
      the heart of Himalayas & get a sense of adventure.
    </div>
    {% endcomment %}
  </div>
  <div class="container">
    <div class="trips row">
      {% for climbing in climbings %}
      <div class="col-md-4 my-4">
        <div class="trip">
          <div class="wrapper-image">
            <a href="{% url 'package' climbing.slug %}">
              <img
                src="{{ climbing.image.url }}"
                width="410"
                height="250"
                alt="{{ climbing.title }}"
                class="img-fluid rounded"
              />
            </a>
            <div class="trip-price">
              <div>
                {% if climbing.regular_price %}
                <span class="previous-price"
                  ><s>$ {{ climbing.regular_price | intcomma }}</s></span
                >{% endif %}&nbsp;
                <span class="current-price">$ {{ climbing.sell_price}}</span>
              </div>
            </div>
          </div>
          <div class="wrapper-text">
            <div class="trip-description">
              <div class="trip-title">
                <a href="{% url 'package' climbing.slug %}"
                  >{{ climbing.title }}</a
                >
              </div>
              <div class="trip-duration">
                <div>
                  <span class="far fa-clock text-primary"></span>
                  {{ climbing.duration }} Days
                </div>
              </div>
            </div>
            <div class="wrapper-book-now">
              <a
                href="{% url 'package' climbing.slug %}"
                class="btn btn-outline-primary rounded-pill btn-block btn-book-now"
                >View Details</a
              >
            </div>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</div>

<div id="section-article">
  <div class="container">
    <div class="section-title">Travel Blogs</div>

    <div class="section-summary">
      <a href="{% url 'blog' %}">View all</a>
    </div>
  </div>
  <div class="articles">
    <div class="container">
      <div class="row">
        {% for blog in blogs %}
        <div class="col-md-4 my-4">
          <div class="article">
            <div class="image-wrapper">
              <a href="{% url 'blog-detail' blog.slug %}">
                <img
                  src="{{ blog.image.url }}"
                  width="379"
                  height="259"
                  alt="{{ blog.title }}"
                  class="preview-image rounded"
                />
              </a>
            </div>
            <div class="article-text-container">
              <div class="article-date">
                <div>{{ blog.created_at | date }}</div>
              </div>
              <div class="article-title font-weight-bold">
                <a href="{% url 'blog-detail' blog.slug %}">{{ blog.title }}</a>
              </div>
              <div>
                <a href="{% url 'blog-detail' blog.slug %}" class="detail-link">
                  Read more
                  <span class="fa fa-chevron-right"></span>
                </a>
              </div>
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
</div>

<script>
  new Autocomplete("#autocomplete", {
    search: (input) => {
      console.log(input);
      const url = `/search/?search=${input}`;
      return new Promise((resolve) => {
        fetch(url)
          .then((response) => response.json())
          .then((data) => {
            console.log(data.payload);
            resolve(data.payload);
          });
      });
    },
    renderResult: (result, props) => `
    <li ${props}>
      <div class="wiki-title">
        ${result.title}
      </div>
      
    </li>
  `,

    getResultValue: (result) => result.title,
    onSubmit: (result) => {
      window.location.href = `/package/${encodeURI(result.slug)}`;
    },
  });
</script>

{% endblock content %}