{% extends 'base.html' %}
{% load i18n static custom_filters %}
{% load crispy_forms_filters %}
{% load tenhal_tag %}
{% 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 and not car.status == 'sold' %}
        <div class="alert alert-outline-warning d-flex align-items-center"
             role="alert">
            <i class="fa-solid fa-circle-info fs-6"></i>
            {% if not car.marked_price and not car.colors %}
                <p class="mb-0 flex-1">
                    {{ _("This car information is not complete , please add colors and finances both before making it ready for sale .") }}
                </p>
            {% elif car.marked_price and not car.colors %}
                <p class="mb-0 flex-1">
                    {{ _("This car information is not complete , please add colors before making it ready for sale .") }}
                </p>
            {% else %}
                <p class="mb-0 flex-1">
                    {{ _("This car information is not complete , please add finances before making it ready for sale .") }}
                </p>
            {% endif %}
            <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 -->
    {% if car.ready and  car.status != 'sold' %}
   <div class="d-flex align-items-center gap-2 mb-2">
    <button type="button"
            class="btn btn-sm btn-phoenix-success"
            data-bs-toggle="modal"
            data-bs-target="#estimateModal">
        {% trans 'Create Estimate' %}
    </button>
    {% if active_estimates %}
        <button type="button" class="btn btn-phoenix-warning btn-sm"
                data-bs-toggle="modal"
                data-bs-target="#activeEstimatesModal">
            {% trans "Active Estimates" %}
            <span class="ms-2 badge rounded-pill text-bg-light">{{ active_estimates|length }}</span>
        </button>
     {% endif %}
</div>
{% endif %}
    {% if perms.inventory.view_car %}
        <div class="row-fluid {% if car.status == 'sold' %}disabled{% endif %}">
            <div class="row g-3 justify-content-between">
                <div class="col-md-6">
                    <div class="card mb-3 rounded shadow d-flex justify-content-center align-item-center{% if car.get_transfer %}disabled{% endif %}">
                        <p class="card-header rounded-top fw-bold">{% trans 'Car Details' %}</p>
                         <div class="col-md-4 ms-4 mt-2">
                            <div class="avatar avatar-6xl mb-3">
                                <img class="rounded"
                                     src="{% static 'images/car_images/' %}{{ car.get_hash }}.png"
                                     alt="{{ car.vin }}" />
                            </div>
                        </div>
                        <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.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>
                                                {% if perms.inventory.add_customcard %}
                                                    <button type="button"
                                                            class="btn btn-sm btn-phoenix-success"
                                                            data-bs-toggle="modal"
                                                            data-bs-target="#mainModal"
                                                            hx-get="{% url 'add_custom_card' request.dealer.slug car.slug %}"
                                                            hx-target="#mainModalBody"
                                                            hx-swap="innerHTML">{% trans 'Add' %}</button>
                                                {% endif %}
                                            </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>
                                                {% if perms.inventory.add_carregistration %}
                                                    <button type="button"
                                                            class="btn btn-sm btn-phoenix-success"
                                                            hx-get="{% url 'add_registration' request.dealer.slug car.slug %}"
                                                            hx-target=".main-modal-body"
                                                            hx-swap="innerHTML"
                                                            data-bs-toggle="modal"
                                                            data-bs-target="#mainModal"
                                                            >{% trans 'Add' %}</button>
                                                {% endif %}
                                            </td>
                                        </tr>
                                    {% endif %}
                                    <tr>
                                        <th>{% trans 'Location'|capfirst %}</th>
                                        <td>
                                            {% if car.marked_price 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 %}
                                                    {% if perms.inventory.add_cartransfer %}
                                                        {% comment %} <a href="{% url 'update_car_location' car.slug car.location.pk %}"
                                                           class="btn btn-phoenix-danger btn-sm">
                                                            {% trans "transfer"|capfirst %}
                                                        </a> {% endcomment %}
                                                    {% endif %}
                                                {% else %}
                                                    {% trans "No location available." %}
                                                    {% if perms.inventory.add_carlocation %}
                                                        <a href="{% url 'add_car_location' car.slug %}"
                                                           class="btn btn-phoenix-success btn-sm ms-2">{% trans "Add" %}</a>
                                                    {% endif %}
                                                {% endif %}
                                            {% endif %}
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            <div>
                                {% if not car.get_transfer %}
                                    {% if perms.inventory.change_car %}
                                        <a href="{% url 'car_update' request.dealer.slug car.slug %}"
                                           class="btn btn-phoenix-primary btn-sm mt-1 me-3 mb-3">{% trans "Edit" %}
                                            <span class="fas fa-solid fa-pencil ms-1"></span>
                                        </a>
                                        {% comment %} <a href="{% url 'transfer' car.slug %}"
                                           class="btn btn-phoenix-danger btn-sm">
                                            {% trans "Sell to another dealer"|capfirst %}
                                        </a> TODO: for future {% endcomment %}
                                    {% endif %}
                                {% else %}
                                    <span class="badge bg-danger">{% trans "Cannot Edit, Car in Transfer." %}</span>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="row mb-2">
                        <div class="col-md-12">
                            <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.marked_price %}
                                                <tr>
                                                    <th>{% trans "Cost Price"|capfirst %}</th>
                                                    {% if request.is_dealer or request.is_accountant or request.manager%}
                                                    <td class="text-nowrap">{{ car.cost_price|floatformat:2 }}<span class="icon-saudi_riyal"></span></td>
                                                    {% else %}
                                                     <td class="d-none text-nowrap">{{ car.cost_price|floatformat:2 }}<span class="icon-saudi_riyal"></span></td>
                                                     {% endif %}
                                                </tr>
                                                <tr>
                                                    <th>{% trans "Marked Price"|capfirst %}</th>
                                                    <td>{{ car.marked_price|floatformat:2 }}<span class="icon-saudi_riyal"></span></td>
                                                </tr>

                                                <tr>
                                                    {% if perms.django_ledger.change_ledgermodel %}
                                                    <td colspan="2">
                                                        {% if not car.get_transfer %}
                                                            <a href="{% url 'car_finance_update' request.dealer.slug car.slug %}"
                                                               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 %}
                                                    </td>
                                                    {% endif %}
                                                </tr>
                                            {% else %}
                                               {% if perms.inventory.add_car%}
                                                <p>{% trans "No finance details available." %}</p>
                                                <a href="{% url 'car_finance_update' request.dealer.slug car.slug %}"
                                                   class="btn btn-phoenix-success btn-sm mb-3">{% trans "Add" %}</a>
                                                {% endif %}
                                            {% endif %}
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% if perms.inventory.view_carcolors %}
                        <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">
                                        <!--test-->
                                        {% 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>
                                            {% if perms.inventory.change_carcolors %}
                                                <tr>
                                                    <td colspan="2">
                                                        {% if not car.get_transfer %}
                                                            <a href="{% url 'car_colors_update' request.dealer.slug car.slug %}"
                                                               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 %}
                                                    </td>
                                                </tr>
                                            {% endif %}
                                        {% else %}
                                            <tr>
                                                <td colspan="2">
                                                    <p>{% trans "No color details available." %}</p>
                                                    {% if perms.inventory.add_carcolors %}
                                                        <a class="btn btn-phoenix-success btn-sm mb-3"
                                                           href="{% url 'add_color' request.dealer.slug car.slug %}">{{ _("Add Color") }}</a>
                                                    {% endif %}
                                                </td>
                                            </tr>
                                        {% endif %}
                                        <!--test-->
                                    </table>
                                </div>
                            </div>
                        </div>
                    {% endif %}
                    {% if car.status != 'transfer' %}
                        {% if perms.inventory.view_carreservation %}
                            <div class="card rounded shadow d-flex align-content-center mt-3 h-full w-100">
                                <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>
                                                            {% if perms.inventory.change_carreservation %}
                                                                <td>
                                                                    {% if reservation.is_active %}
                                                                        <form method="post"
                                                                              action="{% url 'reservations' request.dealer.slug 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>
                                                            {% endif %}
                                                        </tr>
                                                    {% endfor %}
                                                {% else %}
                                                    {% if perms.inventory.add_carreservation %}
                                                        <tr>
                                                            <td>
                                                                <button type="button"
                                                                        class="btn btn-sm btn-phoenix-success"
                                                                        data-bs-toggle="modal"
                                                                        data-bs-target="#reserveModal">
                                                                    {% trans 'Reserve' %}
                                                                </button>
                                                            </td>
                                                        </tr>
                                                    {% endif %}
                                                </tbody>
                                            {% endif %}
                                        </table>
                                    </div>
                                </div>
                            </div>
                        {% endif %}
                    {% 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">{% trans "Transfer" %}</span>
                                                </td>
                                                <td>
                                                    {% if car.get_transfer.status == "draft" %}
                                                        <span class="badge badge-phoenix badge-phoenix-warning">{% trans "waiting for approval" %}</span>
                                                    {% elif car.get_transfer.status == "approved" %}
                                                        <span class="badge badge-phoenix badge-phoenix-info">{% trans "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 %}">{% trans "Approve" %}</a>
                                                    {% endif %}
                                                </td>
                                                <td>
                                                    <a class="btn btn-sm btn-phoenix-success"
                                                       href="{% url 'transfer_detail' car.get_transfer.pk %}?action=cancel">{% trans "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>
        <!-- Main Modal -->
        <div class="modal fade"
             id="estimateModal"
             tabindex="-1"
             aria-labelledby="estimateModalLabel"
             aria-hidden="true">
            <div class="modal-dialog modal-md">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="estimateModalLabel">{% trans 'Create Estimate' %}</h5>
                        <button type="button"
                                class="btn-close"
                                data-bs-dismiss="modal"
                                aria-label="Close"></button>
                    </div>
                    <div id="estimateModalBody" class="main-modal-body" style="padding: 20px;">                        
                        <form action="{% url 'create_estimate_for_car' request.dealer.slug car.slug %}" method="post">
                            {% csrf_token %}
                            {{estimate_form|crispy}}
                            <button type="submit" class="btn btn-primary">{% trans 'Create Estimate' %}</button>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans 'Cancel' %}</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade"
             id="mainModal"
             tabindex="-1"
             aria-labelledby="mainModalLabel"
             aria-hidden="true">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="mainModalLabel">{% trans 'Registration' %}</h5>
                        <button type="button"
                                class="btn-close"
                                data-bs-dismiss="modal"
                                aria-label="Close"></button>
                    </div>
                    <div id="mainModalBody" class="main-modal-body" style="padding: 20px;">
                        <!-- 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' request.dealer.slug car.slug %}"
                          class="form">
                        {% csrf_token %}
                        <div class="p-1">
                            <div class="d-flex gap-1">
                                <button type="button"
                                        class="btn btn-sm btn-phoenix-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-phoenix-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>
    {% endif %}

    <!--active estimate modal-->

    <div class="modal fade" id="activeEstimatesModal" tabindex="-1" aria-labelledby="activeEstimatesModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-top">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="activeEstimatesModalLabel">Active Estimates ({{ active_estimates|length }})</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="d-flex flex-column gap-3">
                    {% for e in active_estimates %}
                    <div class="d-flex align-items-center gap-2 border-bottom pb-2">
                        <span class="badge rounded-pill bg-primary text-light me-1">{{ e.content_object.estimate_number }}</span class="text-nowrap"><span>{% trans " created by: " %}</span>
                        <div class="text-muted">{{ e.related_object }}</div>
                    </div>
                    {% endfor %}
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-phoenix-secondary" data-bs-dismiss="modal">{% trans "Close" %}</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block customJS %}
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const csrftoken = getCookie("csrftoken");
            const ajaxUrl = "{% url 'ajax_handler' request.dealer.slug %}";

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

            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) {
          // Create a section container
                                const section = document.createElement("div");
                                section.classList.add("mb-4", "p-3", "border", "rounded");

          // Add section title
                                const sectionTitle = document.createElement("h4");
                                sectionTitle.classList.add("mb-3", "fw-bold");
                                sectionTitle.textContent = parent.parent_name;
                                section.appendChild(sectionTitle);

          // Create a table for the specifications
                                const specsTable = document.createElement("div");
                                specsTable.classList.add("row");

                                parent.specifications.forEach(function (specification) {
            // Create a row for each specification
                                    const specRow = document.createElement("div");
                                    specRow.classList.add("row", "mb-2");

            // Left Column: Spec name
                                    const specName = document.createElement("div");
                                    specName.classList.add("col-6", "text-muted");
                                    specName.textContent = specification.s_name;

            // Right Column: Spec value + unit
                                    const specValue = document.createElement("div");
                                    specValue.classList.add("col-6", "text-end");
                                    specValue.textContent = `${specification.s_value} ${specification.s_unit || ""}`;

                                    specRow.appendChild(specName);
                                    specRow.appendChild(specValue);

                                    specsTable.appendChild(specRow);
                                });

                                section.appendChild(specsTable);
                                specificationsContent.appendChild(section);
                            });
                        } 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' request.dealer.slug car.slug %}`, {
                            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-phoenix-success");
                            this.classList.add("btn-phoenix-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");
            });
        }

        document.addEventListener('htmx:afterRequest', e => {
    console.log('PUT Success!')
});
document.addEventListener('htmx:beforeSwap', e => {
    console.log('Before Swap!')
});
document.addEventListener('htmx:swapError', e => {
    console.log('Swap Error!')
});
document.addEventListener('htmx:afterSwap', e => {
    console.log('After Swap!')
});
    </script>
{% endblock %}