{% extends "base.html" %}
{% load i18n custom_filters humanize %}
{% 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">{{ _("Date Received") }}</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|naturalday|capfirst }}</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-end mt-3">
                        <div class="d-flex">
                            {% if is_paginated %}
                                {% include 'partials/pagination.html' %}
                            {% endif %}
                        </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 %}