{% extends 'base.html' %}
{% load i18n static custom_filters %}
{% block title %}{{ _("Car Details") }}{% endblock %}
{% block customCSS %}
<style>
  .disabled{
    opacity: 0.5;
    pointer-events: none;
  }
  .car_status {
    position: absolute;
    top: 13%;
    left: 90%;
    transform: translate(-50%, -50%);
  }
</style>
{% endblock customCSS %}

{% block content %}
{% if not car.ready %}
  <div class="alert alert-outline-warning d-flex align-items-center" role="alert">
    <i class="fa-solid fa-circle-info fs-6"></i>
    <p class="mb-0 flex-1">{{ _("This car information is not complete , please add colors and finances before making it ready for sale .") }}</p>    
    <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
  </div>
  {% endif %}
  {% if car.get_transfer.status == "draft" %}
    <div class="alert alert-outline-info d-flex align-items-center" role="alert">    
      <i class="fa-solid fa-circle-info fs-6"></i>
      <p class="mb-0 flex-1">{{ _("Action Required , Please Approved The Tranfer Request Of This Car .") }}</p>    
      <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
  {% endif %}
  {% if car.get_transfer and car.get_transfer.status == "approved" %}
  <div class="alert alert-outline-info d-flex align-items-center" role="alert">    
    <i class="fa-solid fa-circle-info fs-6"></i>
    <p class="mb-0 flex-1">{{ _("Car Is In Transfer Process To Another Dealer, Please Wait For The Acceptance .") }}</p>    
    <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
  </div>
  {% endif %}
  {% if car.is_reserved %}
  <div class="alert alert-outline-warning d-flex align-items-center" role="alert">    
    <i class="fa-solid fa-circle-info fs-6"></i>
    <p class="mb-0 flex-1">{{ _("This car is reserved until ") }}{{ car.get_reservation.reserved_until }}</p>    
    <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endif %}

<!-- Main row -->
<div class="row-fluid {% if car.status == 'sold' %}disabled{% endif %}">
  <div class="row g-3 justify-content-between">
    <div class="col-lg-12 col-xl-6">
      <div class="card rounded shadow d-flex align-content-center {% if car.get_transfer %}disabled{% endif %}">
        <p class="card-header rounded-top fw-bold">{% trans 'Car Details' %}</p>
        <div class="card-body">
          <div class="table-responsive scrollbar mb-3">
            <table class="table table-sm fs-9 mb-0 overflow-hidden">
              <tr>
                <th>{% trans "VIN" %}</th>
                <td>{{ car.vin }}</td>
              </tr>
              <tr>
                <th>{% trans "year"|capfirst %}</th>
                <td>{{ car.year }}</td>
              </tr>
              <tr>
                <th>{% trans "make"|capfirst %}</th>
                <td>{{ car.id_car_make.get_local_name }}</td>
              </tr>
              <tr>
                <th>{% trans "model"|capfirst %}</th>
                <td>{{ car.id_car_model.get_local_name }}</td>
              </tr>
              <tr>
                <th>{% trans "series"|capfirst %}</th>
                <td>{{ car.id_car_serie.name }}</td>
              </tr>
              <tr>
                <th>{% trans "trim"|capfirst %}</th>
                <td>{{ car.id_car_trim.name }}</td>
              </tr>
              <tr>
                <th>{% trans "Status"|capfirst %}</th>
                <td>{{ car.get_status_display }}</td>
              </tr>
              <tr>
                <th>{% trans "Stock Type"|capfirst %}</th>
                <td>{{ car.get_stock_type_display }}</td>
              </tr>
              <tr>
                <th>{% trans "Mileage"|capfirst %}</th>
                <td>{{ car.mileage }}</td>
              </tr>
              <tr>
                <th>{% trans "Receiving Date"|capfirst %}</th>
                <td>{{ car.receiving_date|timesince }}</td>
              </tr>
              {% if car.vendor %}
              <tr>
                <th>{% trans "Vendor"|capfirst %}</th>
                <td>{{ car.vendor.vendor_name }}</td>
              </tr>
              {% endif %}
              <tr>
                <th>{% trans "Remarks"|capfirst %}</th>
                <td>{{ car.remarks }}</td>
              </tr>
              <tr>
                <th>{% trans 'specifications'|capfirst %}</th>
                <td>
                  <button type="button" class="btn btn-phoenix-primary btn-sm" id="specification-btn" data-bs-toggle="modal" data-bs-target="#specificationsModal">
                    {% trans 'view'|capfirst %}
                  </button>
                </td>
              </tr>
              {% if car.custom_cards %}
              <tr>
                <th>{% trans "Custom Number"|capfirst %}</th>
                <td>{{ car.custom_cards.custom_number }}</td>
              </tr>
              <tr>
                <th>{% trans "Custom Date"|capfirst %}</th>
                <td>{{ car.custom_cards.custom_date|date }}</td>
              </tr>
              {% else %}
              <tr>
                <th>{% trans "Custom Card" %}</th>
                <td>
                  <button type="button" class="btn btn-sm btn-phoenix-success" data-bs-toggle="modal" data-bs-target="#customCardModal">
                    {% trans 'Add' %}
                  </button>
                </td>
              </tr>
              {% endif %}
            {% if car.registrations %}
              <tr>
                <th>{% trans "Registration"|capfirst %}</th>
                <td>{{ car.registrations.plate_number }} | {{ car.registrations.text1 }} {{ car.registrations.text2 }} {{ car.registrations.text3 }}

                </td>
              </tr>
              <tr>
                <th>{% trans "Registration Date"|capfirst %}</th>
                <td>{{ car.registrations.registration_date|date }}</td>
              </tr>
              {% else %}

              <tr>
                <th>{% trans "Registration" %}</th>
                <td>
                  <button type="button" class="btn btn-sm btn-phoenix-success" data-bs-toggle="modal" data-bs-target="#registrationModal">
                    {% trans 'Add' %}
                  </button>
                </td>
              </tr>
              {% endif %}
              <tr>

                <th>{% trans 'Location'|capfirst %}</th>
                <td>
                  {% if car.finances and not car.get_transfer %}
                    {% if car.location %} {% if car.location.is_owner_showroom %} {% trans 'Our Showroom' %} {% else %} {{ car.location.showroom.get_local_name }} {% endif %}
                    <a href="{% url 'update_car_location' car.pk car.location.pk%}" class="btn btn-phoenix-danger btn-sm">
                      {% trans "transfer"|capfirst %}
                    </a>
                    {% else %} {% trans "No location available." %}
                    <a href="{% url 'add_car_location' car.pk %}" class="btn btn-phoenix-success btn-sm ms-2">
                      {% trans "Add" %}
                    </a>
                  {% endif %}
                  {% endif %}
                </td>
              </tr>
            </table>
          </div>
          <div>
            {% if not car.get_transfer %}
              {% if perms.inventory.change_car %}
                <a href="{% url 'car_update' car.pk %}" class="btn btn-phoenix-warning btn-sm mt-1">{% trans "Edit" %}</a>
                  <a href="{% url 'transfer' car.pk %}" class="btn btn-phoenix-danger btn-sm">
                      {% trans "Sell to another dealer"|capfirst %}
                    </a>
              {% endif %}
            {% else %}
                <span class="badge bg-danger">{% trans "Cannot Edit, Car in Transfer." %}</span>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-6 col-xl-6">
      <div class="card rounded shadow d-flex align-content-center {% if car.get_transfer %}transfer{% endif %}">
        <p class="card-header rounded-top fw-bold">{% trans 'Financial Details' %}</p>
        <div class="card-body">

          <div class="table-responsive scrollbar mb-3">
            <table class="table table-sm fs-9 mb-0 overflow-hidden">
            {% if car.finances %}
              <tr>
                {% if perms.inventory.view_carfinance %}
                  <th>{% trans "Cost Price"|capfirst %}</th>
                  <td>{{ car.finances.cost_price|floatformat:2 }}</td>
                {% endif %}
              </tr>
              <tr>
                <th>{% trans "Selling Price"|capfirst %}</th>
                <td>{{ car.finances.selling_price|floatformat:2 }}</td>
              </tr>
              <tr>
                <th>{% trans "Discount Amount"|capfirst %}</th>
                <td>{{ car.finances.discount_amount|floatformat:2 }} -</td>
              </tr>
              <tr>
                <th>{% trans "Additional Fee"|capfirst %}</th>
                <td></td>
              </tr>
              {% if car.finances.additional_services.first.pk %}
                  {% for service in car.finances.additional_services.all %}
                    <tr>
                      <td>{{service.name}}</td>
                      <td>{{ service.price_|floatformat:2 }}</td>
                    </tr>
                  {% endfor %}
              {% endif %}
              <tr>
                <th>{% trans "VAT Amount"|capfirst %}</th>
                <td>{{ car.finances.vat_amount|floatformat:2 }}</td>
              </tr>
              <tr>
                <th>{% trans "Total"|capfirst %}</th>
                <td>{{ car.finances.total_vat|floatformat:2 }}</td>
              </tr>
              <tr>
                <td colspan="2">
                  {% if not car.get_transfer %}
                    <a href="{% url 'car_finance_update' car.finances.pk %}" class="btn btn-phoenix-warning btn-sm mb-3">
                      {% trans "Edit" %}
                    </a>
                  {% else %}
                    <span class="badge bg-danger">{% trans "Cannot Edit, Car in Transfer." %}</span>
                  {% endif %}
            {% else %}
                  <p>{% trans "No finance details available." %}</p>
                  {% if perms.inventory.add_carfinance %}
                  <a href="{% url 'car_finance_create' car.pk %}" class="btn btn-phoenix-success btn-sm mb-3">
                    {% trans "Add" %}
                  </a>
                  {% endif %}
                </td>
              </tr>
            {% endif %}
            </table>
          </div>
        </div>
      </div>
      <div class="card rounded shadow d-flex align-content-center mt-3 {% if car.get_transfer %}transfer{% endif %}">
        <p class="card-header rounded-top fw-bold">{% trans 'Colors Details' %}</p>
        <div class="card-body">
          <div class="table-responsive scrollbar mb-3">
            <table class="table table-sm fs-9 mb-0 overflow-hidden">
              {% if car.colors %}

              <tr>
                <th>{% trans 'Exterior' %}</th>
                <td>
                  <span>{{ car.colors.exterior.get_local_name }}</span>
                </td>
                <td class="align-middle">
                  <div class="text-end color-div" style="background-color: rgb({{ car.colors.exterior.rgb }});"></div>
                </td>
              </tr>
              <tr>
                <th>{% trans 'Interior' %}</th>
                <td>
                  <span>{{ car.colors.interior.get_local_name }}</span>
                </td>
                <td class="align-middle">
                  <div class="text-end color-div" style="background-color: rgb({{ car.colors.interior.rgb }});"></div>
                </td>
              </tr>

              {% else %}
              <tr>
                <td colspan="2">
                  {% trans "No colors available for this car." %}
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  {% if perms.inventory.change_carcolors %}
                  <a href="{% url 'add_color' car.pk %}" class="btn btn-phoenix-success btn-sm">
                    {% trans "Add" %}
                  </a>
                  {% endif %}
                </td>
              </tr>
              {% endif %}
            </table>
          </div>
        </div>
      </div>
      {% if car.status != 'transfer' %}
      <div class="card rounded shadow d-flex align-content-center mt-3">
        <p class="card-header rounded-top fw-bold">{% trans 'Reservations Details' %}</p>
        <div class="card-body">
          <div class="table-responsive scrollbar mb-3">
            <table class="table table-sm fs-9 mb-0 overflow-hidden">
            {% if car.is_reserved %}
              <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.dealer }}</td>
                  <td>{{ reservation.reserved_until }}</td>
                  <td>
                    {% if reservation.is_active %}
                    <form method="post" action="{% url 'reservations' reservation.id %}">
                      {% csrf_token %}
                        <div class="btn-group">
                            <button type="submit" name="action" value="renew" class="btn btn-sm btn-phoenix-success px-3 py-1">
                                {% trans "Renew" %}
                            </button>
                            <button type="submit" name="action" value="cancel" class="btn btn-sm btn-phoenix-secondary px-3 py-1">
                                {% trans "Cancel" %}
                            </button>
                        </div>
                    </form>
                    {% else %}
                    <span class="badge badge-phoenix badge-phoenix-danger fs-10">
                      {% trans "Expired" %}
                    </span>
                    {% endif %}
                  </td>
                </tr>
                {% endfor %} {% else %}
                <tr>
                  <td>
                    {% if perms.inventory.change_carreservation %}
                    <button type="button" class="btn btn-sm btn-phoenix-success" data-bs-toggle="modal" data-bs-target="#reserveModal">
                      {% trans 'Reserve' %}
                    </button>
                    {% endif %}
                  </td>
                </tr>
              </tbody>
            {% endif %}
            </table>
          </div>
        </div>
      </div>
      {% endif %}
      <!-- Transfer Table -->
       {% if car.status == 'transfer' and car.get_transfer %}
        <div class="card rounded shadow d-flex align-content-center mt-3">
          <p class="card-header rounded-top fw-bold">{% trans 'Transfer Details' %}</p>
          <div class="card-body">
            <div class="table-responsive scrollbar mb-3">
              <table class="table table-sm fs-9 mb-0 overflow-hidden">              
                <thead>
                  <tr>
                    <th>{% trans "Action" %}</th>
                    <th>{% trans "Status" %}</th>
                    <th>{% trans "From Showroom" %}</th>
                    <th>{% trans "To Showroom" %}</th>
                    <th>{% trans 'Date' %}</th>
                    <th></th>
                  </tr>
                </thead>
                <tbody>
                  
                  <tr>
                    <td><span class="badge badge-phoenix badge-phoenix-info">Transfer</span></td>
                    <td>
                      {% if car.get_transfer.status == "draft" %}
                      <span class="badge badge-phoenix badge-phoenix-warning">
                        waiting for approval
                      </span>
                      {% elif car.get_transfer.status == "approved" %}
                      <span class="badge badge-phoenix badge-phoenix-info">
                        waiting for dealer acceptance
                      </span>
                      {% endif %}
                    </td>
                    <td>{{ car.get_transfer.from_dealer|title }}</td>
                    <td>{{ car.get_transfer.to_dealer|title }}</td>
                    <td>{{ car.get_transfer.transfer_date|date:"Y-m-d" }}</td>

                    <td>
                      {% if car.get_transfer.status == "draft" %}
                      <a class="btn btn-sm btn-phoenix-success" href="{% url 'transfer_detail' car.get_transfer.pk %}">Approve</a>
                      {% endif %}
                    </td>
                    <td>                      
                      <a class="btn btn-sm btn-phoenix-success" href="{% url 'transfer_detail' car.get_transfer.pk %}?action=cancel">Cancel</a>
                    </td>
                  </tr>                  
                </tbody>              
              </table>
            </div>
          </div>
        </div>
      {% endif %}
    </div>
  </div>
  {% if car.status == 'sold' %}
    <img class="car_status" src="{% static 'images/sold.png' %}" width="200" height="100" alt="">
  {% endif %}
</div>

<!-- 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">
        <h5 class="modal-title" 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>

    <!-- Registration Modal -->
<div class="modal fade" id="registrationModal" tabindex="-1" aria-labelledby="registrationModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="registrationModalLabel">{% trans 'Registration' %}</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>

<!-- Reservation Modal -->
<div class="modal fade" id="reserveModal" tabindex="-1" aria-labelledby="reserveModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="reserveModalLabel">{% trans 'Car Reservation' %}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        {% trans 'Are you sure you want to reserve this car?' %}
      </div>
<form method="POST" action="{% url 'reserve_car' car.id %}" class="form ">


          {% csrf_token %}
    <div class="p-1">
          <div class="d-flex gap-1">
        <button type="button"
                class="btn btn-sm btn-danger w-50"
                data-bs-dismiss="modal"
                aria-label="Cancel and close modal">
            <i class="fas fa-times"></i> {% trans 'No' %}
        </button>
        <button type="submit"
                class="btn btn-sm btn-success w-50"
                aria-label="Save changes">
            <i class="fas fa-check"></i> {% trans 'Yes' %}
        </button>
            </div>
      </div>
    </form>
    </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">
      <div class="modal-header">
        <h5 class="modal-title" id="specificationsModalLabel">{% trans 'specifications'|upper %}</h5>
        <button class="btn btn-close p-1" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="list-inline" id="specificationsContent"></div>
      </div>
    </div>
  </div>
</div>
<script>
  document.addEventListener("DOMContentLoaded", function () {


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

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

    // When the modal is triggered, load the form
    customCardModal.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);
        });
    });

    customCardModal.addEventListener("hidden.bs.modal", function () {
      modalBody.innerHTML = "";
    });

    const registrationModal = document.getElementById("registrationModal");
    const modalBody_r = registrationModal.querySelector(".modal-body");

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

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

    registrationModal.addEventListener("hidden.bs.modal", function () {
      modalBody_r.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.");
        }
      });
    });
  });

  if('{{car.status}}' == "sold"){
    document.querySelector(".row-fluid").querySelectorAll("button").forEach((button) => {
      button.classList.add("d-none");
    });
    document.querySelector(".row-fluid").querySelectorAll("a").forEach((button) => {
      button.classList.add("d-none");
    });
  }
</script>

{% endblock %}