<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <title><%= vehicle.ModelYear %> <%= vehicle.Make %> <%= vehicle.Model %> - <%= env.COMPANY_NAME %></title>
    <meta charset="utf-8" />
    <meta name='viewport' content='width=device-width,initial-scale=1.0,maximum-scale=1.0' />
    <meta property="og:title" content="<%= vehicle.ModelYear %> <%= vehicle.Make %> <%= vehicle.Model %>" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="<%= env.APPLICATION_INVENTORY_URL + "/" + vehicle.StockNum %>" />
    <meta property="og:image" content="https://api.placeholder.app/image/1280x960" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="/style.css">
  </head>
  <body>
    <!-- Navigation -->
    <%- include('partials/navigation', {env: env}) %>

    <!-- Breadcrumbs -->
    <nav class="breadcrumb has-bullet-separator p-5 has-background-light" aria-label="breadcrumbs">
      <ul>
        <li><a href="/">Home</a></li>
        <% if (context.back.indexOf(env.APPLICATION_INVENTORY_URL) === -1) { %>
          <li><a href="<%= context.back %>">Search Results</a></li>
        <% } %>
        <li class="is-active"><a href="#" aria-current="page"><%= vehicle.ModelYear %> <%= vehicle.Make %> <%= vehicle.Model %></a></li>
      </ul>
    </nav>

    <!-- Vehicle Information Container -->
    <div class='container mb-5'>
      <!-- Page Header -->
      <div class="columns">
        <!-- Title -->
        <div class="column is-10">
          <h1 class="title is-1"><%= vehicle.ModelYear %> <%= vehicle.Make %> <%= vehicle.Model %> <%= vehicle.Trim %></h1>
          <div class="subtitle tags">
            <% if (typeof(vehicle.Price) === "number") { %>
              <span class="tag">
                <%= vehicle.Price.toLocaleString('en-US', {
                  style: 'currency',
                  currency: 'USD',
                  minimumFractionDigits: 0
                }) %>
              </span>
            <% } %>
            <% if (typeof(vehicle.Odometer) === "number") { %>
              <span class="tag">
                <%= (Math.round(Number(vehicle.Odometer) / 100) * 100).toLocaleString() %>mi
              </span>
            <% } %>
            <% if (typeof(vehicle.ExtColor) === "object" && typeof(vehicle.ExtColor[0]) === "string" && typeof(vehicle.IntColor) === "object" && typeof(vehicle.IntColor[0]) === "string") { %>
              <span class="tag">
                <%= vehicle.ExtColor[0] %>
                &middot;
                <%= vehicle.IntColor[0] %>
              </span>
            <% } %>
          </div>
        </div>

        <!-- Controls -->
        <div class="column"></div>
      </div>

      <div class="columns">
        <!-- Image Columns -->
        <div class="column has-background-light has-radius-6" style="align-self: flex-start">
          <!-- Main Preview -->
          <figure class="image is-4by3 has-shadow-1 is-pointer" id="active-image">
            <% if (vehicle.Images instanceof Array && typeof vehicle.Images[0] === "object" && typeof vehicle.Images[0].url === "string") { %>
              <img src="<%=vehicle.Images[0].url%>>" alt="Product image">
            <% } else { %>
              <img src="https://api.placeholder.app/image/1280x960?text=Coming Soon..." alt="Placeholder product image">
            <% } %>
          </figure>

          <!-- Other Images -->
          <% if (vehicle.Images instanceof Array && vehicle.Images.length > 1) { %>
            <div class="is-flex mt-1" id="inactive-images">
              <% vehicle.Images.forEach((image, index) => { %>
                <figure class="image is-pointer pt-0 is-4by3 mr-1 has-radius-6" style="width: 128px; height: 96px">
                  <img src="<%=image.url%>" alt="Product image <%=index%>" />
                </figure>
              <% }) %>
            </div>
          <% } %>

          <!-- Share Card -->
          <div class="card is-static mt-3">
            <div class="card-content">
              <div class="media">
                <div class="media-left">
                  <figure class="image" style="width: 89px">
                    <img alt="Scan QR Code" id="qr-code" />
                  </figure>
                </div>
                <div class="media-content">
                  <p class="title is-4 mb-2">Share with a friend</p>
                  <a class="subtitle is-6" href="<%= env.APPLICATION_INVENTORY_URL + "/" + vehicle.StockNum %>" target="_blank">
                    <span data-action="clickToCopy"><%= env.APPLICATION_INVENTORY_URL + "/" + vehicle.StockNum %></span>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Content Column -->
        <div class="column pt-0">
          <div class="content">
            <h1>First Heading</h1>
            <p>Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.</p>
            <ul>
              <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
              <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
              <li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
              <li>Ut non enim metus.</li>
            </ul>

            <h1>Second Heading</h1>
            <p>Maecenas eleifend sollicitudin dui, faucibus sollicitudin augue cursus non. Ut finibus eleifend arcu ut vehicula. Mauris eu est maximus est porta condimentum in eu justo. Nulla id iaculis sapien.</p>

            <!-- Vehicle Properties -->
            <%- include("partials/listingDataTable", {vehicle: vehicle}) %>

            <p>Phasellus porttitor enim id metus volutpat ultricies. Ut nisi nunc, blandit sed dapibus at, vestibulum in felis. Etiam iaculis lorem ac nibh bibendum rhoncus.</p>
          </div>
        </div>
      </div>
    </div>

    <!-- Vehicle Recommendations -->
    <% if (typeof(recommendations) === "object" && recommendations instanceof Array && recommendations.length > 0) { %>
      <section class="hero is-light">
        <div class="hero-body">
          <p class="title">Similar Vehicles</p>
          <p class="subtitle">You may also be interested in these vehicles</p>
        </div>
      </section>
      <div class='container py-5'>
        <div class="columns p-3">
          <% for (let i = 0; i < recommendations.length; i++) { %>
            <div class="column is-4">
              <%- include('partials/searchCard', {
                context: {
                  "page": "listing",
                },
                vehicle: recommendations[i],
              }) %>
            </div>
          <% } %>
        </div>
      </div>
    <% } %>

    <!-- Interest Call-To-Action -->
    <section class="hero is-link is-small is-sticky" style="bottom: 0;" id="interest-cta">
      <div class="hero-body">
        <div class="container">
          <p class="title is-flex">
            Interested?
            <button class="delete is-medium ml-auto" id="interest-cta-hide"></button>
          </p>
          <p class="subtitle">
            Find out more about this <%= vehicle.ModelYear %> <%= vehicle.Make %> <%= vehicle.Model %> by clicking below.
          </p>
          <button class="button is-link is-inverted" id='interest-modal-show'>
            Get started
          </button>
        </div>
      </div>
    </section>
    <%- include('partials/interestModal', {data: vehicle}) %>

    <!-- Footer -->
    <%- include('partials/footer', {env: env}) %>

    <!-- Scripts -->
    <script src="https://cdn.jsdelivr.net/npm/qrcode-generator@1.4.4/qrcode.min.js"></script>
    <script src="/js/navigation.js"></script>
    <script>
      // Variables
      const qr = qrcode(0, "M");

      // Setup QR code
      qr.addData('<%= env.APPLICATION_INVENTORY_URL + "/" + vehicle.StockNum %>');
      qr.make();

      // Update UI
      document.querySelector('#qr-code').src = qr.createDataURL(5, 2);

      // Events
      document.querySelector("#interest-cta-hide").onclick = (e) => {
        document.querySelector("#interest-cta").classList.remove("is-sticky");
        e.target.classList.add("is-hidden");
      };
      document.querySelector("#interest-modal-show").onclick = (e) => {
        document.querySelector("#interest-modal").classList.add("is-active");
      };
      document.querySelector("#interest-modal-cancel").onclick = (e) => {
        document.querySelector("#interest-modal").classList.remove("is-active");
      };
      document.querySelector("#interest-modal-close").onclick = (e) => {
        document.querySelector("#interest-modal").classList.remove("is-active");
      };
      document.querySelector("#interest-modal-submit").onclick = async (e) => {
        // Variables
        const formData = new FormData(document.querySelector("#interest-form"));
        const form = {};

        // Turn FormData into K:V pairs
        for (const [key, value] of formData.entries()) {
          form[key] = value;
        }

        // Submit form
        const response = fetch('/api/v1/interest', {
          headers: {
            'Content-Type': 'application/json'
          },
          method: 'POST',
          body: JSON.stringify(form),
        });

        // Update UI
        document.querySelector("#interest-modal").classList.remove("is-active");
      };
      document.querySelectorAll("#inactive-images img").forEach(e => {
        const mainImage = document.querySelector("#active-image img")
        e.onclick = () => {
          mainImage.src = e.src;
        };
      });
    </script>
  </body>
</html>
