{% extends "base.html" %}
{% load i18n %}
{% load custom_filters %}

{% block customCSS %}
  <style>
    .htmx-indicator{
      opacity:0;
      transition: opacity 500ms ease-in;
    }
    .htmx-request .htmx-indicator{
      opacity:1;
    }
    .htmx-request.htmx-indicator{
      opacity:1;
    }
    .on-before-request{
      opacity: 0.5;
      pointer-events: none;
    }
    .transition {
      transition: all ease-in 1s ;
    }
  </style>
{% endblock customCSS %}

{% block content %}
  <div class="mb-9">
    <div id="projectSummary">
      <div class="row g-3 justify-content-between align-items-end mb-4">
        <div class="col-12 col-sm-auto">

          <ul class="nav nav-links mx-n2" hx-boost="true" hx-push-url='false' hx-target=".table-responsive" hx-select=".table-responsive" hx-swap="innerHTML show:window:top" hx-indicator=".htmx-indicator"
              hx-on::before-request="on_before_request()"
              hx-on::after-request="on_after_request()"
          >
            <li class="nav-item"><a class="nav-link px-2 py-1 active" aria-current="page" href="{% url 'car_list' %}"><span>{{ _("All") }}</span><span class="text-body-tertiary fw-semibold">({{stats.all}})</span></a></li>
            <li class="nav-item"><a class="nav-link px-2 py-1" href="{% url 'car_list' %}?status=available"><span>{{ _("Available") }}</span><span class="text-body-tertiary fw-semibold">({{stats.available}})</span></a></li>
            <li class="nav-item"><a class="nav-link px-2 py-1" href="{% url 'car_list' %}?status=reserved"><span>{{ _("Reserved") }}</span><span class="text-body-tertiary fw-semibold">({{stats.reserved}})</span></a></li>
            <li class="nav-item"><a class="nav-link px-2 py-1" href="{% url 'car_list' %}?status=transfer"><span>{{ _("Transfer") }}</span><span class="text-body-tertiary fw-semibold">({{stats.transfer}})</span></a></li>
            <li class="nav-item"><a class="nav-link px-2 py-1" href="{% url 'car_list' %}?status=sold"><span>{{ _("Sold") }}</span><span class="text-body-tertiary fw-semibold">({{stats.sold}})</span></a></li>
            <li class="nav-item"><button hx-on:click="toggle_filter()" class="btn btn-sm btn-primary px-2 py-1"><span><span class="fa fa-filter me-1"></span>{{ _("Filter") }}</span><span class="fas fa-caret-down fs-9 ms-1 filter-icon"></span></button></li>
          </ul>
        </div>
        <div class="col-12 col-sm-auto">
          <div class="d-flex align-items-center">
            <div class="spinner-border mx-3 htmx-indicator" role="status"><span class="visually-hidden">Loading...</span></div>
            <div class="search-box me-3">
              <form class="position-relative">
                <input class="form-control search-input search" name='search' type="search" placeholder="Search" aria-label="Search" hx-get="{% url 'car_list' %}"  hx-trigger='keyup changed delay:500ms' hx-target='.table-responsive' hx-select='.table-responsive' hx-swap="innerHTML show:window:top" hx-indicator=".htmx-indicator"
                       hx-on::before-request="on_before_request()"
                       hx-on::after-request="on_after_request()"
                />
                <span class="fas fa-search search-box-icon"></span>
              </form>
            </div>
          </div>
        </div>
      </div>
      <div class="d-flex align-items-center d-none filter">
        <select hx-get="{% url 'car_list' %}" name="make" hx-target='.model-select' hx-select='.model-select' hx-swap="outerHTML show:window:top" hx-indicator=".htmx-indicator" class="form-select form-control-sm me-1 make" aria-label="Default select example"
                hx-on::before-request="filter_before_request()"
                hx-on::after-request="filter_after_request()">
          <option selected="" value="" disabled>{{ _("Make")}}</option>
          {% for m in make %}
            <option value="{{ m.pk }}">{{ m.get_local_name|default:m.name }}</option>
          {% endfor %}
        </select>
        <select hx-get="{% url 'car_list' %}" hx-include=".make" name="model" hx-target='.year' hx-select='.year' hx-swap="outerHTML show:window:top" hx-indicator=".htmx-indicator" class="form-select form-control-sm me-1 model-select" aria-label="Default select example"
                hx-on::before-request="filter_before_request()"
                hx-on::after-request="filter_after_request()"
        >
          <option selected="" value="" disabled>{{ _("Model")}}</option>
          {% for m in model %}
            <option value="{{ m.pk }}">{{ m.get_local_name|default:m.name }}</option>
          {% endfor %}
        </select>
        <select class="form-select form-control-sm me-1 year" name="year" aria-label="Default select example">
          <option selected="" value="" disabled>{{ _("Year")}}</option>
          {% for y in year %}
            <option value="{{ y.0 }}">{{ y.0 }}</option>
          {% endfor %}
        </select>
        <select class="form-select form-control-sm me-1 car_status" name="car_status" aria-label="Default select example">
          <option selected="" value="">{{ _("All") }}</option>
          <option value="available">{{ _("Available") }}</option>
          <option value="reserved">{{ _("Reserved") }}</option>
          <option value="sold">{{ _("Sold") }}</option>
          <option value="transfer">{{ _("Transfer") }}</option>
        </select>
        <button id="search" hx-get="{% url 'car_list' %}" hx-include=".make,.model,.year,.car_status" hx-indicator=".htmx-indicator" hx-target='.table-responsive' hx-select='.table-responsive' hx-swap="outerHTML show:window:top" class="btn btn-sm btn-phoenix-primary ms-1"
                hx-on::before-request="filter_before_request()"
                hx-on::after-request="filter_after_request()">{{ _("Search") }}</button>
      </div>
      <div class="row">
        <div class="table-responsive scrollbar transition">
          <div class="d-flex flex-wrap align-items-center justify-content-between py-3 pe-0 fs-9">
            <div class="d-flex" hx-boost="true" hx-push-url='false' hx-include=".make,.model,.year,.car_status" hx-target=".table-responsive" hx-select=".table-responsive" hx-swap="innerHTML show:window:top" hx-indicator=".htmx-indicator"
                 hx-on::before-request="on_before_request()"
                 hx-on::after-request="on_after_request()">

            </div>


            <table class="table align-items-center table-flush">
              <thead class="text-body">
                <tr class="bg-body-highlight">
                  <th class="sort white-space-nowrap align-middle" scope="col">{{ _("VIN") }}</th>
                  <th class="sort white-space-nowrap align-middle" scope="col">{{ _("Make") }}</th>
                  <th class="sort white-space-nowrap align-middle" scope="col">{{ _("Model") }}</th>
                  <th class="sort white-space-nowrap align-middle" scope="col">{{ _("Year") }}</th>
                  <th class="sort white-space-nowrap align-middle" scope="col">{{ _("Trim") }}</th>
                  <th class="sort white-space-nowrap align-middle" scope="col">{{ _("Color") }}</th>
                  <th class="sort white-space-nowrap align-middle" scope="col">{{ _("Age") }}</th>
                  <th class="sort white-space-nowrap align-middle" scope="col">{{ _("Status") }}</th>
                  <th class="sort white-space-nowrap align-middle" scope="col"></th>
                </tr>
              </thead>
              <tbody class="list" id="project-list-table-body">
                {% for car in cars %}
                  <tr class="position-static">
                    <td class="align-middle white-space-nowrap ps-1">
                      <a class="fw-bold" href="{% url 'car_detail' car.slug %}">{{car.vin}}</a>
                    </td>
                    <td class="align-middle white-space-nowrap">
                      <p class="text-body mb-0">{{car.id_car_make.get_local_name|default:car.id_car_make.name}}</p>
                    </td>
                    <td class="align-middle white-space-nowrap">
                      <p class="text-body mb-0">{{car.id_car_model.get_local_name|default:car.id_car_model.name}}</p>
                    </td>
                    <td class="align-middle white-space-nowrap">
                      <p class="text-body mb-0">{{car.year}}</p>
                    </td>
                    <td class="align-middle white-space-nowrap">
                      <p class="fw-bold text-body mb-0">{{car.id_car_trim }}</p>
                    </td>
                    <td class="align-middle white-space-nowrap">
                      <div class="d-flex flex-row align-items-center">
                        <div class="d-flex flex-column align-items-center">
                          <span class="color-div" style="background: linear-gradient(90deg, rgba({{ car.colors.exterior.rgb }},1) 10%, rgba({{ car.colors.exterior.rgb }},0.10) 100%);" title="{{ car.colors.exterior.get_local_name }}"></span><span>{{ car.colors.exterior.get_local_name }}</span>
                        </div>
                        <div class="d-flex flex-column align-items-center">
                          <span class="color-div" style="background: linear-gradient(90deg, rgba({{ car.colors.interior.rgb }},1) 10%, rgba({{ car.colors.interior.rgb }},0.10) 100%);" title="{{ car.colors.interior.get_local_name }}"></span><span>{{ car.colors.interior.get_local_name }}</span>
                        </div>
                      </div>
                    </td>

                    <td class="align-middle white-space-nowrap">
                      <p class="fw-bold text-body mb-0">{{car.receiving_date|timesince}}</p>
                    </td>

                    <td class="align-middle white-space-nowrap statuses">
                      {% if car.status == "available" %}
                        <span class="badge badge-phoenix fs-11 badge-phoenix-success">{{ _("Available") }}</span>
                      {% elif car.status == "reserved" %}
                        <span class="badge badge-phoenix fs-11 badge-phoenix-danger">{{ _("Reserved") }}</span>
                      {% elif car.status == "sold" %}
                        <span class="badge badge-phoenix fs-11 badge-phoenix-info">{{ _("Sold") }}</span>
                      {% elif car.status == "transfer" %}
                        <span class="badge badge-phoenix fs-11 badge-phoenix-warning">{{ _("Transfer") }}</span>
                      {% endif %}
                    </td>
                    <td class="align-middle text-end white-space-nowrap pe-0 action">
                      <div class="btn-reveal-trigger position-static">
                        <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs-10"></span></button>
                        <div class="dropdown-menu dropdown-menu-end py-2">
                          <a class="dropdown-item" href="{% url 'car_detail' car.slug %}">{{ _("View") }}</a>
                          <a class="dropdown-item" href="#!">{{ _("Export") }}</a>
                        </div>
                      </div>
                    </td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>

         <div class="d-flex justify-content-between mt-3"><span class="d-none d-sm-inline-block" data-list-info="data-list-info">{{ page_obj.start_index }} {{ _("to") }} {{ page_obj.end_index }}<span class="text-body-tertiary"> {{ _("Items of")}} </span>{{ page_obj.paginator.count }}</span>
            <div class="d-flex">

                {% if is_paginated %}
                    {% include 'partials/pagination.html' %}
                {% endif %}

            </div>
        </div>

        </div>





      </div>
    </div>
  </div>
{% endblock %}

{% block customJS %}
  <script>
    links = document.querySelectorAll('.nav-link')
    links.forEach(link => {
      link.addEventListener('click', () => {
        links.forEach(link => {
          link.classList.remove('active')
        })
        link.classList.add('active')
      })
    })
    function on_before_request() {
      document.querySelector('.table').classList.toggle('on-before-request')
      document.querySelector('.model-select').classList.add('on-after-request')
    }
    function on_after_request() {
      document.querySelector('.table').classList.remove('on-before-request')
      document.querySelector('.model-select').classList.remove('on-after-request')
    }
    function toggle_filter(){
      document.querySelector('.filter').classList.toggle('d-none')
      document.querySelector('.filter-icon').classList.toggle("fa-caret-down");
      document.querySelector('.filter-icon').classList.toggle("fa-caret-up");
    }
    function filter_before_request(){
      document.querySelector('.model-select').setAttribute('disabled', true)
      document.querySelector('.year').setAttribute('disabled', true)
      document.querySelector('.car_status').setAttribute('disabled', true)
    }
    function filter_after_request(){
      document.querySelector('.model-select').removeAttribute('disabled')
      document.querySelector('.year').removeAttribute('disabled')
      document.querySelector('.car_status').removeAttribute('disabled')
    }

  </script>
{% endblock customJS %}