{% extends 'base.html' %}
{% load static %}
{% load crispy_forms_tags %}

{% block nav %}
<style>
  .modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  padding-top: 60px;
}

/* Modal Content/Box */
.modal-content {
  background-color: white;
  margin: 5px auto; /* 15% from the top and centered */
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  /* Position it in the top right corner outside of the modal */
  position: absolute;
  right: 25px;
  top: 0;
  color: #0f172e;
  font-size: 35px;
  font-weight: bold;
}

/* Close button on hover */
.close:hover,
.close:focus {
  color: #0f172e;
  cursor: pointer;
}

/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)}
  to {-webkit-transform: scale(1)}
}

@keyframes animatezoom {
  from {transform: scale(0)}
  to {transform: scale(1)}
} 
</style>

  <!-- Top Navigation Menu -->
<div class="topnav">
  <!-- <a href="#home" class="active">Logo</a> -->
  <a href="{% url 'sparedealers:sparepart-list' %}" class="active">
    <img src="{% static 'logo/spares-logo.svg' %}" width="120" height="60" alt="">
  </a>
  <!-- Navigation links (hidden by default) -->
  <div id="myLinks">
    <a href="{% url 'sparedealers:create' %}" style="text-align: left;">Sell a part</a>
    <a href="{% url 'mechanics:create' %}" style="text-align: left;">Sell a speciality</a>
    <a href="{% url 'sparedealers:listings' %}" style="text-align: left;">View my listings</a>
    {% if user.is_authenticated %}
      <a href="{% url 'logout' %}" style="text-align: left;">Log out</a>
    {% else %}
      <a href="{% url 'login' %}" style="text-align: left;">Log in</a>
    {% endif %}
  </div>
  <!-- "Hamburger menu" / "Bar icon" to toggle the navigation links -->
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>
{% endblock nav %}

{% block jumbotron %}
<div class="jumbotron jumbotron-fluid" style="background-color: #d02222;" >
  <div class="container">
    <div class="alert">
        <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
        <a href="{% url 'mechanics:speciality' %}" style="color: white;">Find a mechanic instead?</a>
    </div>
    <p class="lead" style="text-align: center;">Find anything in sparesnmechs</p>
    <br>
    <form class="example" method="get" action="{% url 'sparedealers:search_results' %}" style="margin:auto; max-width:500px">
        <input type="text" placeholder="Search.." name="q">
    </form>
    <br>
    <button onclick="document.getElementById('id01').style.display='block'" style="width: auto; background-color: #0f172e;">Filter spareparts</button>

    <!-- The Modal -->
    <div id="id01" class="modal">
      <span onclick="document.getElementById('id01').style.display='none'"
    class="close" title="Close Modal">&times;</span>

    <!-- Modal Content -->
    <form method="get" class="modal-content animate">
      <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
        <div class="container">
        {{ filter.form|crispy }}
      </div>
      <button type="submit" class="btn btn-light" style="background-color:#0f172e !important; color:white;">Filter Spareparts</button>
    <br>
    </form>
    <br>
  </div>
</div>
</div>

<script>
// Get the modal
var modal = document.getElementById('id01');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

const categoryInput = document.querySelector("select#id_category")
const subcategoryInput = document.querySelector("select#id_sub_category")

categoryInput.onchange = function (e) {
  getAndSetSubcategories(e.target.value)
}

function getAndSetSubcategories(category) {
  let subCatReq = new XMLHttpRequest()

  subCatReq.addEventListener("load", function (e) {
    let subcategories = JSON.parse(e.target.response)

    // Map the list of subcategory objects to a list of options
    subcategories = subcategories.map(function (subcategory) {
      return `<option value="${subcategory.pk}">${subcategory.fields.name}</option>`
    })

    // Add default option to start of the array
    subcategories.splice(0,0,'<option value="" selected="">---------</option>')

    subcategoryInput.innerHTML = subcategories.join(" ")
  })

  subCatReq.open("GET", `{% url 'sparedealers:get_subcategories' %}?category=${category}`)
  subCatReq.send()
}

// Get car model car_make == category
const car_makeInput = document.querySelector("select#id_car_make")
const car_modelInput = document.querySelector("select#id_car_model")

car_makeInput.onchange = function (e) {
getAndSetCarmodels(e.target.value)
}

function getAndSetCarmodels(car_make) { //subCatReg == carmodelReq
let carModelReq = new XMLHttpRequest()

carModelReq.addEventListener("load", function (e) { //subcategories ==car_models
    let car_models = JSON.parse(e.target.response)

    // Map the list of subcategory objects to a list of options
    subcategories = car_models.map(function (car_model) {
    return `<option value="${car_model.pk}">${car_model.fields.name}</option>`
    })

    // Add default option to start of the array
    car_models.splice(0,0,'<option value="" selected="">---------</option>')

    car_modelInput.innerHTML = subcategories.join(" ")
})

carModelReq.open("GET", `{% url 'carowners:get_carmodels' %}?car_make=${car_make}`)
carModelReq.send()
}
</script>

{% endblock %}

{% block content %}
<div class="row">
    <div class="column">
        <div class="card">
            <a href="{% url 'sparedealers:accessories' %}">
            <img src="{% static 'svg/accessories.jpg' %}">
            <p>Accessories</p>
            </a>
        </div>
    </div>

    <div class="column">
        <div class="card">
            <a href="{% url 'sparedealers:audio' %}">
            <img src="{% static 'svg/audio_n_video.jpg' %}">
            <p>Audio & Video</p>
            </a>
        </div>
    </div>

    <div class="column">
        <div class="card">
            <a href="{% url 'sparedealers:electrical' %}">
            <img src="{% static 'svg/electrical.jpg' %}">
            <p>Electrical</p>
            </a>
        </div>
    </div>

    <div class="column">
        <div class="card">
            <a href="{% url 'sparedealers:engine' %}">
            <img src="{% static 'svg/engine.jpg' %}">
            <p>Engine</p>
            </a>
        </div>
    </div>

    <div class="column">
        <div class="card">
            <a href="{% url 'sparedealers:exterior' %}">
            <img src="{% static 'svg/exterior.jpg' %}">
            <p>Exterior</p>
            </a>
        </div>
    </div>

    <div class="column">
        <div class="card">
            <a href="{% url 'sparedealers:interior' %}">
            <img src="{% static 'svg/interior.jpg' %}">
            <p>Interior</p>
            </a>
        </div>
    </div>

    <div class="column">
        <div class="card">
            <a href="{% url 'sparedealers:performance' %}">
            <img src="{% static 'svg/performance.jpg' %}">
            <p>Performance</p>
            </a>
        </div>
    </div>

    <div class="column">
        <div class="card">
            <a href="{% url 'sparedealers:suspension' %}">
            <img src="{% static 'svg/suspension.jpg' %}">
            <p>Suspension</p>
            </a>
        </div>
    </div>

    <div class="column">
        <div class="card">
            <a href="{% url 'sparedealers:transmission' %}">
            <img src="{% static 'svg/transmission.jpg' %}">
            <p>Transmission</p>
            </a>
        </div>
    </div>

    <div class="column">
        <div class="card">
            <a href="{% url 'sparedealers:wheels' %}">
            <img src="{% static 'svg/wheels_n_tyres.jpg' %}">
            <p>Wheels & Tyres</p>
            </a>
        </div>
    </div>
</div>
<br>
<h3 style="text-align: center;">Parts</h3>
<hr>
<div class="scrolling-wrapper">
    {% for sparepart in filter.qs %}
      <div class="mech_card">
        {% if sparepart.photo %}
            <img src="{{ sparepart.photo.url }}" alt="{{ sparepart.name }}" style="width:80%; height: 180px;">
        {% endif %}
        <hr>
        <p>{{ sparepart.name }}</p>
        <hr>
        <ul style="text-align: left; list-style: none; font-size: 14px;">
            <li><strong>Ksh </strong>{{ sparepart.price }}</li>
            <li><strong><i class="fa fa-phone" aria-hidden="true"></i></strong> {{ sparepart.phone_number }}</li>
            <li><strong>Condition: </strong>{{ sparepart.condition }}</li>
        </ul>
      </div>
    {% endfor %}
</div>
<br>
{% endblock %}