{% 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">
            {% comment %} <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="nav-link px-2 py-1"><span>Filter</span><span class="text-body-tertiary fw-semibold"></span></button></li>
            </ul> {% endcomment %}
        </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 make" aria-label="Default select example"
                hx-on::before-request="filter_before_request()"
                hx-on::after-request="filter_after_request()"
        >
          <option selected="" value="" disabled>Select Make</option>
          {% for m in make %}
            <option value="{{ m.pk }}">{{ 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 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>Select Model</option>
          {% for m in model %}
            <option value="{{ m.pk }}">{{ m.name }}</option>
          {% endfor %}
        </select>
        <select class="form-select year" name="year" aria-label="Default select example">
          <option selected="" value="" disabled>Select Year</option>
          {% for y in year %}
            <option value="{{ y.0 }}">{{ y.0 }}</option>
          {% endfor %}
        </select>
        <select class="form-select 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"
                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>
                <tr class="bg-body-highlight">
                  <th class="sort white-space-nowrap align-middle ps-0" scope="col" data-sort="customer_name" style="width:10%;">
                    {{ _("Customer Name")}}</th>
                  <th class="sort align-middle ps-3" scope="col" data-sort="customer_address" style="width:5%;">{{ _("Customer Address")}}</th>
                  <th class="sort align-middle ps-3" scope="col" data-sort="customer_phone" style="width:5%;">{{ _("Customer Phone")}}</th>
                  <th class="sort align-middle ps-3" scope="col" data-sort="make" style="width:5%;">{{ _("Make") }}</th>
                  <th class="sort align-middle ps-3" scope="col" data-sort="model" style="width:5%;">{{ _("Model") }}</th>
                  <th class="sort align-middle ps-3" scope="col" data-sort="vin" style="width:5%;">{{ _("VIN") }}</th>
                  <th class="sort align-middle ps-3" scope="col" data-sort="trim" style="width:5%;">{{ _("Trim") }}</th>
                  <th class="sort align-middle ps-3" scope="col" data-sort="price" style="width:5%;">{{ _("Price") }}</th>
                  <th class="sort align-middle ps-3" scope="col" data-sort="quotation" style="width:7%;">{{ _("Quotation") }}</th>
                  <th class="sort align-middle ps-3" scope="col" data-sort="invoice" style="width:7%;">{{ _("Invoice") }}</th>
                  <th class="sort align-middle ps-3" scope="col" data-sort="status" style="width:7%;">{{ _("Status") }}</th>
                  <th class="sort align-middle ps-3" scope="col" data-sort="staff" style="width:7%;">{{ _("Staff Member") }}</th>
                  <th class="sort align-middle text-end" scope="col" style="width:10%;"></th>
                </tr>
              </thead>
              <tbody class="list" id="project-list-table-body">
                {% for tx in txs %}
                  <tr class="position-static">
                    <td class="align-middle white-space-nowrap customer_name">
                      <p class="mb-0 fs-9 text-body">{{tx.customer.customer_name}}</p>
                    </td>
                    <td class="align-middle white-space-nowrap customer_address">
                      <p class="mb-0 fs-9 text-body">{{tx.customer.address_1}}</p>
                    </td>
                    <td class="align-middle white-space-nowrap customer_phone">
                      <p class="mb-0 fs-9 text-body">{{tx.customer.phone}}</p>
                    </td>
                    <td class="align-middle time white-space-nowrap make">{{tx.info.make}}</td>
                    <td class="align-middle white-space-nowrap model">
                      <p class="mb-0 fs-9 text-body">{{tx.info.model}}</p>
                    </td>
                    <td class="align-middle white-space-nowrap vin">
                      <p class="mb-0 fs-9 text-body">{{tx.info.vin}}</p>
                    </td>
                    <td class="align-middle white-space-nowrap trim">
                      <p class="fw-bo text-body fs-9 mb-0">{{tx.info.trim}}</p>
                    </td>
                    <td class="align-middle white-space-nowrap price">
                      <p class="fw-bo text-body fs-9 mb-0">{{tx.finance.total}}</p>
                    </td>
                    <td class="align-middle white-space-nowrap quotation">
                      {% if tx.has_estimate %}
                        <p class="fw-bo text-body fs-9 mb-0">
                          <a href="{% url 'estimate_detail' tx.estimate.uuid %}">
                            {{tx.estimate.estimate_number}}
                          </a><br>
                          {% if tx.estimate.status == "draft" %}
                            <span class="badge badge-phoenix badge-phoenix-warning">{{tx.estimate.status}}</span>
                          {% elif tx.estimate.status == "in_review" %}
                            <span class="badge badge-phoenix badge-phoenix-info">{{tx.estimate.status}}</span>
                          {% elif tx.estimate.status == "approved" %}
                            <span class="badge badge-phoenix badge-phoenix-primary">{{tx.estimate.status}}</span>
                          {% elif tx.estimate.status == "completed" %}
                            <span class="badge badge-phoenix badge-phoenix-success">{{tx.estimate.status}}</span>
                          {% endif %}
                        </p>
                      {% endif %}
                    </td>
                    <td class="align-middle white-space-nowrap invoice">
                      {% if tx.has_invoice %}
                        <p class="fw-bo text-body fs-9 mb-0">
                          <a href="{% url 'invoice_detail' tx.invoice.uuid %}">
                            {{tx.invoice.invoice_number}}
                          </a><br>
                          {% if tx.invoice.is_draft %}
                            <span class="badge badge-phoenix badge-phoenix-warning">{{tx.invoice.invoice_status}}</span>
                          {% elif tx.invoice.is_review %}
                            <span class="badge badge-phoenix badge-phoenix-info">{{tx.invoice.invoice_status}}</span>
                          {% elif tx.invoice.is_approved %}
                            <span class="badge badge-phoenix badge-phoenix-primary">{{tx.invoice.invoice_status}}</span>
                          {% elif tx.invoice.is_completed %}
                            <span class="badge badge-phoenix badge-phoenix-success">{{tx.invoice.invoice_status}}</span>
                          {% elif tx.invoice.is_paid %}
                            <span class="badge badge-phoenix badge-phoenix-success">{{tx.invoice.invoice_status}}</span>
                          {% elif tx.invoice.is_canceled %}
                            <span class="badge badge-phoenix badge-phoenix-danger">{{tx.invoice.invoice_status}}</span>
                          {% elif tx.invoice.is_past_due %}
                            <span class="badge badge-phoenix badge-phoenix-danger">{{ _("Past Due")}}</span>
                          {% endif %}
                        </p>
                      {% endif %}
                    </td>

                    <td class="align-middle white-space-nowrap text-end status">
                      {% if car.status == "available" %}
                        <span class="badge badge-phoenix fs-10 badge-phoenix-success">{{car.status}}</span>
                      {% elif car.status == "reserved" %}
                        <span class="badge badge-phoenix fs-10 badge-phoenix-danger">{{car.status}}</span>
                      {% elif car.status == "sold" %}
                        <span class="badge badge-phoenix fs-10 badge-phoenix-info">{{car.status}}</span>
                      {% elif car.status == "transfer" %}
                        <span class="badge badge-phoenix fs-10 badge-phoenix-warning">{{car.status}}</span>
                      {% endif %}
                    </td>
                    <td class="align-middle white-space-nowrap text-center staff"></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="">{{ _("View") }}</a><a class="dropdown-item" href="">{{ _("Export") }}</a>
                          <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="">{{ _("Remove") }}</a>
                        </div>
                      </div>
                    </td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </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>

{% 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')
    }
    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 %}