haikal/templates/inventory/car_detail.html

<!-- templates/cars/car_detail.html -->
{% extends 'base.html' %}
{% load static %}
{% load i18n %}
{% load custom_filters %}
{% block title %}{{ _("Car Details") }}{% endblock %}

{% block content %}
<div class="container mt-2 p-1">

<!-- Custom Card Modal -->
<div class="modal fade" id="customCardModal" tabindex="-1" aria-labelledby="customCardModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <h5 class="modal-title text-light" id="customCardModalLabel">{% trans 'Custom Card' %}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- Content will be loaded here via AJAX -->
            </div>
        </div>
    </div>
</div>

  <!-- Specification Modal -->
  <div class="modal fade" 
       id="specificationsModal"
       tabindex="-1" 
       aria-labelledby="specificationsModalLabel" 
       aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
      <div class="modal-content glossy-modal">
        <div class="modal-header bg-primary text-light">
          <h5 class="modal-title" 
              id="specificationsModalLabel">
              {% trans 'specifications'|upper %}
          </h5>
          <button type="button" 
                  class="btn-close" 
                  data-bs-dismiss="modal" 
                  aria-label="Close">
          </button>
        </div>
        <div class="modal-body">
          <div id="specificationsContent"></div>
        </div>
      </div>
    </div>
  </div>

  <!-- Main Container -->
  <div class="d-flex flex-column min-vh-100">
    <div class="d-flex flex-column flex-sm-grow-1 ms-sm-14 p-4">
      <main class="d-grid gap-4">
        <div class="row g-4">
          <div class="col-lg-6 col-xl-6">
            <p class="fs-5">{% trans 'Car Details' %}</p>
            <table class="table table-sm table-responsive align-middle">
              <tr>
                <th>{% trans "VIN" %}</th>
                <td>{{ car.vin }}</td>
              </tr>
              <tr>
                <th>{% trans "year" %}</th>
                <td>{{ car.year }}</td>
              </tr>
              <tr>
                <th>{% trans "make" %}</th>
              <td>{{ car.id_car_make.get_local_name }}</td>

              </tr>
              <tr>
                <th>{% trans "model" %}</th>
                <td>{{ car.id_car_model.get_local_name }}</td>
              </tr>
              <tr>
                <th>{% trans "series" %}</th>
                <td>{{ car.id_car_serie.name }}</td>
              </tr>
              <tr>
                <th>{% trans "trim" %}</th>
                <td>{{ car.id_car_trim.name }}</td>
              </tr>
              <tr>
                <th>{% trans "Status" %}</th>
                <td>{{ car.get_status_display }}</td>
              </tr>
              <tr>
                <th>{% trans "Stock Type" %}</th>
                <td>{{ car.get_stock_type_display }}</td>
              </tr>
              <tr>
                <th>{% trans "Mileage" %}</th>
                <td>{{ car.mileage }}</td>
              </tr>
              <tr>
                <th>{% trans "Receiving Date" %}</th>
                <td>{{ car.receiving_date|timesince }}</td>
              </tr>
              {% if car.branch %}
              <tr>
                <th>{% trans "Branch" %}</th>
                <td>{{ car.branch.get_local_name }}</td>
              </tr>
              {% endif %} {% if car.vendor %}
              <tr>
                <th>{% trans "Vendor" %}</th>
                <td>{{ car.vendor.get_local_name }}</td>
              </tr>
              {% endif %}
              <tr>
                <th>{% trans "Remarks" %}</th>
                <td>{{ car.remarks }}</td>
              </tr>
              <tr>
                <th>{% trans 'specifications' %}</th>
                <td>
                  <button type="button" 
                          class="btn btn-primary btn-sm" 
                          id="specification-btn" 
                          data-bs-toggle="modal" 
                          data-bs-target="#specificationsModal">
                      {% trans 'view' %}
                  </button>
                </td>
              </tr>
            {% if car.custom_cards.exists %}
    {% for custom_card in car.custom_cards.all %}
    <tr>
        <th>{% trans "Custom Number" %}</th>
        <td>{{ custom_card.custom_number }}</td>
    </tr>
    <tr>
        <th>{% trans "Custom Date" %}</th>
        <td>{{ custom_card.custom_date|date }}</td>
    </tr>
    {% endfor %}
{% else %}
    <tr>
        <th>{% trans "Custom Card" %}</th>
        <td>
            <button type="button" 
                    class="btn btn-sm btn-success" 
                    data-bs-toggle="modal" 
                    data-bs-target="#customCardModal">
                {% trans 'Add' %}
            </button>
        </td>
    </tr>
{% endif %}
            <tr>
           <th>{% trans 'Showroom Location' %}</th>
           <td>
             {% if car.location %}
{% if car.location.is_owner_showroom %}
             {% trans 'Our Showroom' %}
    {% else %}
          {{ car.location.showroom.get_local_name }}
       {% endif %}
                 <a href="{% url 'transfer' car.location.pk %}" class="btn btn-danger btn-sm">{% trans "transfer" %}</a>
{% else %}
                 
                 {% trans "No location available." %}
                <a href="{% url 'add_car_location' car.pk %}" 
                   class="btn btn-success btn-sm mb-3 ms-2">
                    {% trans "Add" %}
                </a>
                 </td>
            
            {% endif %}
            </tr>
            </table>
          </div>
          <div class="col-lg-6 col-xl-6">
            <p class="fs-5">{% trans 'Financial Details' %}</p>
            {% if car.finances.exists %} {% for finance in car.finances.all %}
            <table class="table table-sm table-responsive mb-3 align-middle">
              <tr>
                <th>{% trans "Cost Price" %}</th>
                <td>{{ finance.cost_price }}</td>
              </tr>
              <tr>
                <th>{% trans "Selling Price" %}</th>
                <td>{{ finance.selling_price }}</td>
              </tr>
                <tr>
                <td><small class="ms-5">{% trans "Administration Fee" %}</small></td>
                    <td><small>{{ finance.administration_fee }}</small></td>
              </tr>
                <tr>
                <td><small class="ms-5">{% trans "Registration Fee" %}</small></td>
                    <td><small>{{ finance.registration_fee }}</small></td>
              </tr>
         <tr>
             <td><small class="ms-5">{% trans "Transportation Fee" %}</small></td>
             <td><small>{{ finance.transportation_fee }}</small></td>
              </tr>
                <tr>
                    <td><small class="ms-5">{% trans "Custom Card Fee" %}</small></td>
                    <td><small>{{ finance.custom_card_fee }}</small></td>
              </tr>
                <tr>
                <th>{% trans "Discount Amount" %}</th>
                <td>{{ finance.discount_amount }} - </td>
              </tr>
              <tr>
                <th>{% trans "VAT Amount" %}</th>
                <td>{{ finance.vat_amount }}</td>
              </tr>
              <tr>
                <th>{% trans "Total" %}</th>
                <td>{{ car.total }}</td>
              </tr>
            <tr>
                <td colspan="2">
                    <a href="{% url 'car_finance_update' finance.pk %}" 
                   class="btn btn-warning btn-sm mb-3">
                    {% trans "Edit Finance Details" %}
                </a>
                {% endfor %} 
                {% else %}
                <p>{% trans "No finance details available." %}</p>
                <a href="{% url 'car_finance_create' car.pk %}" 
                   class="btn btn-success btn-sm mb-3">
                    {% trans "Add Finance Details" %}
                </a>
                </td>
            </tr>
             {% endif %}
                </table>
            <p class="fs-5 mt-2">{% trans 'Colors Details' %}</p>
            <table class="table table-sm table-responsive align-middle">
              <tbody class=" align-middle">
                {% if car.colors.exists %}
                    {% for color in car.colors.all %}
                <tr>
                <th>{% trans 'Exterior' %}</th>
                  <td>
                    <span>{{ color.exterior.get_local_name }}</span>
                  </td>
                  <td class="align-middle">
                      <div class="text-end" style="width: 32px; height: 32px; background-color: rgb({{ color.exterior.rgb }}); border-radius: 50px; border-style: solid; border-color: #000;"></div>
                  </td>
                </tr>
                    <tr>
                <th>{% trans 'Interior' %}</th>
                  <td>
                    <span>{{ color.interior.get_local_name }}</span>
                  </td>
                  <td class="align-middle">
                      <div class="text-end" style="width: 32px; height: 32px; background-color: rgb({{ color.interior.rgb }}); border-radius: 50px; border-style: solid; border-color: #000;"></div>
                  </td>
                </tr>
                    {% endfor %}
                {% else %}
                <tr>
                  <td colspan="2">
                    {% trans "No colors available for this car." %}
                  </td>
                </tr>
                <tr>
                  <td colspan="2">
                    <a href="{% url 'add_color' car.pk %}" 
                       class="btn btn-success btn-sm">
                        {% trans "Get Colors" %}
                    </a>
                  </td>
                </tr>
              {% endif %}
              </tbody>
            </table>
          <p class="fs-5 mt-2">{% trans 'Reservations Details' %}</p>
                {% if car.is_reserved %}
            <table class="table table-sm table-responsive align-middle">
            <thead>
                <tr>
                     <th>{% trans "Reserved By" %}</th>
                    <th>{% trans "Expires At" %}</th>
                    <th>{% trans 'Actions' %}</th>
                </tr>
            </thead>
                <tbody>
                {% for reservation in car.reservations.all %}
                <tr>
                    <td>{{ reservation.reserved_by.username }}</td>
                    <td>{{ reservation.reserved_until }}</td>
                    <td>
                        {% if reservation.is_active %}
                        <form method="post" action="{% url 'reservations' reservation.id %}">
                            {% csrf_token %}
                            <button type="submit" 
                                    name="action" 
                                    value="renew" 
                                    class="btn btn-sm btn-success">
                                <small>{% trans "Renew" %}</small>
                            </button>
                            <button type="submit" 
                                    name="action" 
                                    value="cancel" 
                                    class="btn btn-sm btn-secondary">
                                <small>{% trans "Cancel" %}</small>
                            </button>
                        </form>
                        {% else %}
                        <span class="badge bg-danger" style="width: 120px;">{% trans "Expired" %}</span>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
                {% else %}
                    <tr>
                        <td>
                            <form method="POST" action="{% url 'reserve_car' car.id %}" class="d-inline">
                            {% csrf_token %}
                                <button type="submit" class="btn btn-success btn-sm">{% trans "Reserve" %}</button>
                            </form>
                            {% endif %}
                        </td>
                    </tr>
                </tbody>
            </table>
            </div>
        </div>
        <div class="row g-4">
          <div class="">
              <!-- Actions -->
            
           
            <a href="{% url 'car_update' car.pk %}" class="btn btn-warning btn-sm">{% trans "Edit" %}</a>
    
            <a href="{% url 'inventory_stats' %}" class="btn btn-secondary btn-sm">{% trans "Back to List" %}</a>
          </div>
        </div>
         
      </main>
    </div>
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    function getCookie(name) {
      let cookieValue = null;
      if (document.cookie && document.cookie !== "") {
        const cookies = document.cookie.split(";");
        for (let cookie of cookies) {
          cookie = cookie.trim();
          if (cookie.substring(0, name.length + 1) === name + "=") {
            cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
            break;
          }
        }
      }
      return cookieValue;
    }

    const csrfToken = getCookie("csrftoken");
    const ajaxUrl = "{% url 'ajax_handler' %}";

    const modal = document.getElementById('customCardModal');
        const modalBody = modal.querySelector('.modal-body');

        // When the modal is triggered, load the form
        modal.addEventListener('show.bs.modal', function () {
            const url = "{% url 'add_custom_card' car.pk %}";

            fetch(url)
                .then(response => response.text())
                .then(html => {
                    modalBody.innerHTML = html;
                })
                .catch(error => {
                    modalBody.innerHTML = '<p class="text-danger">Error loading form. Please try again later.</p>';
                    console.error('Error loading form:', error);
                });
        });

        modal.addEventListener('hidden.bs.modal', function () {
            modalBody.innerHTML = '';
        });
        
        
        
        
    
    
    const showSpecificationButton = document.getElementById("specification-btn");
    const specificationsContent = document.getElementById("specificationsContent");

    showSpecificationButton.addEventListener("click", function () {
      specificationsContent.innerHTML = "";
      fetch(`${ajaxUrl}?action=get_specifications&trim_id={{ car.id_car_trim.id_car_trim }}`, {
        headers: {
          "X-Requested-With": "XMLHttpRequest",
          "X-CSRFToken": csrfToken,
        },
      })
        .then((response) => response.json())
        .then((data) => {
          if (data.length > 0) {
            data.forEach(function (parent) {
              const parentSpec = document.createElement("div");
              parentSpec.classList.add("mb-2");
              parentSpec.innerHTML = `<strong>${parent.parent_name}</strong>`;

              parent.specifications.forEach(function (specification) {
                const specificationDiv = document.createElement("div");
                specificationDiv.classList.add("ms-3");
                specificationDiv.innerHTML = `&#183; ${specification.s_name}: ${specification.s_value} ${specification.s_unit}`;
                parentSpec.appendChild(specificationDiv);
              });

              specificationsContent.appendChild(parentSpec);
            });
          } else {
            specificationsContent.innerHTML = '<p>{% trans "No specifications available." %}</p>';
          }
        })
        .catch((error) => {
          specificationsContent.innerHTML = '<p>{% trans "Error loading specifications." %}</p>';
          console.error("Error fetching specifications:", error);
        });
    });

    document.querySelectorAll(".reserve-btn").forEach((button) => {
      button.addEventListener("click", async function () {
        try {
          const response = await fetch(`{% url 'reserve_car' car.pk %}`, {
            method: "POST",
            headers: {
              "X-CSRFToken": csrfToken,
              "X-Requested-With": "XMLHttpRequest",
            },
          });
          const data = await response.json();
          if (data.success) {
            this.textContent = "Reserved";
            this.classList.remove("btn-success");
            this.classList.add("btn-danger");
            this.disabled = true;
            alert("Car reserved successfully.");
          } else {
            alert(data.message || "Failed to reserve the car.");
          }
        } catch (error) {
          console.error("Error:", error);
          alert("An error occurred. Please try again.");
        }
      });
    });
  });
</script>

{% endblock %}