{% extends "base.html" %}
{% load humanize %}
{% load i18n static crispy_forms_filters custom_filters %}
{% block title %}
    {{ _("View Customer") }}
{% endblock title %}
{% block content %}
    {% include 'modal/delete_modal.html' %}
    {% include 'components/note_modal.html' with content_type="customer" slug=customer.slug %}
    <div class="mt-4">
        <div class="row align-items-center justify-content-between g-3 mb-4">
            <div class="col-auto">
                <h3 class="mb-0">
                    {% trans 'Customer details' %}<i class="fas fa-user ms-2 "></i>
                </h3>
            </div>
            <div class="col-auto d-flex gap-2">
                {% if perms.inventory.change_customer %}
                    <a href="{% url 'customer_update' request.dealer.slug customer.slug %}"
                       class="btn btn-sm btn-phoenix-primary">
                        <span class="fa-solid fa-pen-to-square me-2"></span>{{ _("Edit") }}
                    </a>
                {% endif %}
                {% if perms.inventory.delete_customer %}
                    <button class="btn btn-sm btn-phoenix-danger delete-btn"
                            data-url="{% url 'customer_delete' request.dealer.slug customer.slug %}"
                            data-message="{% trans 'Are you sure you want to delete this customer?' %}"
                            data-bs-toggle="modal"
                            data-bs-target="#deleteModal">
                        <i class="fas fa-trash me-1"></i>{{ _("Delete") }}
                    </button>
                {% endif %}
            </div>
        </div>
        <div class="row g-4 mb-4">
            <div class="col-12 col-lg-4">
                <div class="card h-100 shadow-sm">
                    <div class="card-body d-flex flex-column justify-content-between pb-3">
                        <div class="row align-items-center g-5 mb-3 text-center text-sm-start">
                            <div class="col-12 col-sm-auto mb-sm-2">
                                <div class="avatar avatar-5xl">
                                    {% if customer.image %}
                                        <img class="rounded-circle border border-2 border-primary"
                                             src="{{ customer.image.url }}"
                                             alt="{{ customer.full_name }}" />
                                    {% else %}
                                        <div class="avatar-text rounded-circle bg-secondary text-white border border-2 border-primary">
                                            <span class="fs-4">{{ customer.full_name|first|default:"?" }}</span>
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-12 col-sm-auto flex-1">
                                <h3>{{ customer.full_name }}</h3>
                                <p class="text-body-secondary">{% trans "Member since:" %} {{ customer.created|date:"d M Y" }}</p>
                            </div>
                        </div>
                        <div class="d-flex justify-content-between border-top border-dashed pt-4 mt-auto">
                            <div class="text-center">
                                <h6 class="mb-1 text-uppercase text-body-secondary fs-8">{% trans 'Invoices' %}</h6>
                                <p class="fs-6 fw-bold mb-0">{{ invoices.count }}</p>
                            </div>
                            <div class="text-center">
                                <h6 class="mb-1 text-uppercase text-body-secondary fs-8">{% trans 'Quotations' %}</h6>
                                <p class="fs-6 fw-bold mb-0">{{ estimates.count }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-8">
                <div class="card h-100 shadow-sm">
                    <div class="card-body p-4">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h5 class="card-title mb-0">{% trans 'Default Information' %}</h5>
                        </div>
                        <ul class="list-unstyled mb-0">
                            <li class="mb-2">
                                <strong class="text-body-secondary d-block">{% trans 'Address' %}:</strong>
                                <p class="mb-0">{{ customer.address|default:_("N/A") }}</p>
                            </li>
                            <li class="mb-2">
                                <strong class="text-body-secondary d-block">{% trans 'Email' %}:</strong>
                                <a href="mailto:{{ customer.email|default:"" }}"
                                   class="text-decoration-none">{{ customer.email|default:_("N/A") }}</a>
                            </li>
                            <li class="mb-0">
                                <strong class="text-body-secondary d-block">{% trans 'Phone Number' %}:</strong>
                                <a href="tel:{{ customer.phone_number|default:"" }}"
                                   class="text-decoration-none">{{ customer.phone_number|default:_("N/A") }}</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="row g-4 mb-4">
            <div class="col-12">
                <div class="card shadow-sm">
                    <div class="card-body p-4">
                        <div class="d-flex align-items-center justify-content-between mb-3">
                            <h5 class="card-title mb-0">{% trans 'Notes' %}</h5>
                            {% if perms.inventory.change_customer %}
                                <button class="btn btn-phoenix-primary btn-sm d-flex align-items-center"
                                        type="button"
                                        data-bs-toggle="modal"
                                        data-bs-target="#noteModal">
                                    <i class="fas fa-plus me-1"></i>{{ _("Add Note") }}
                                </button>
                            {% endif %}
                        </div>
                        <div class="table-responsive">
                            <table class="table fs-9 mb-0">
                                <thead>
                                    <tr>
                                        <th class="align-middle pe-6 text-uppercase text-start"
                                            scope="col"
                                            style="width:40%">{{ _("Note") }}</th>
                                        <th class="align-middle text-start text-uppercase white-space-nowrap"
                                            scope="col"
                                            style="width:40%">{{ _("Created On") }}</th>
                                        <th class="align-middle text-start text-uppercase white-space-nowrap"
                                            scope="col"
                                            style="width:40%">{{ _("Last Updated") }}</th>
                                        <th class="align-middle pe-0 text-end" scope="col" style="width:10%;"></th>
                                    </tr>
                                </thead>
                                <tbody id="notesTable">
                                    {% for note in notes %}
                                        <tr class="hover-actions-trigger btn-reveal-trigger position-static">
                                            <td class="align-middle  text-start fw-bold text-body-tertiary ps-1">{{ note.note }}</td>
                                            <td class="align-middle text-body-tertiary text-start white-space-nowrap">{{ note.created|naturalday|capfirst }}</td>
                                            <td class="align-middle text-body-tertiary text-start white-space-nowrap">{{ note.updated|naturalday|capfirst }}</td>
                                            <td class="align-middle text-end white-space-nowrap pe-0 action py-2">
                                                {% if note.created_by == request.user %}
                                                    <a id="updateBtn"
                                                       href="#"
                                                       onclick="updateNote(this)"
                                                       class="btn btn-sm btn-phoenix-primary me-2"
                                                       data-pk="{{ note.pk }}"
                                                       data-note="{{ note.note|escapejs }}"
                                                       data-url="{% url 'update_note' request.dealer.slug note.pk %}"
                                                       data-bs-toggle="modal"
                                                       data-bs-target="#noteModal"
                                                       data-note-title="{{ _("Update") }}">
                                                        <i class='fas fa-pen-square text-primary ms-2'></i>
                                                        {{ _("Update") }}
                                                    </a>
                                                    <button class="btn btn-phoenix-danger btn-sm delete-btn"
                                                            data-url="{% url 'delete_note_to_lead' request.dealer.slug note.pk %}"
                                                            data-message="Are you sure you want to delete this note?"
                                                            data-bs-toggle="modal"
                                                            data-bs-target="#deleteModal">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                {% endif %}
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row g-4 mb-3">
            <div class="col-12">
                <div class="card shadow-sm">
                    <div class="card-body p-4">
                        <h5 class="card-title mb-3">{% trans 'Sales History' %}</h5>
                        <ul class="nav nav-tabs" id="myTab" role="tablist">
                            <li class="nav-item me-6" role="presentation">
                                <button class="nav-link active"
                                        id="leads-tab"
                                        data-bs-toggle="tab"
                                        data-bs-target="#leads-tab-pane"
                                        type="button"
                                        role="tab"
                                        aria-controls="leads-tab-pane"
                                        aria-selected="true">{% trans 'Leads' %}</button>
                            </li>
                            <li class="nav-item me-6" role="presentation">
                                <button class="nav-link"
                                        id="opportunities-tab"
                                        data-bs-toggle="tab"
                                        data-bs-target="#opportunities-tab-pane"
                                        type="button"
                                        role="tab"
                                        aria-controls="opportunities-tab-pane"
                                        aria-selected="false">{% trans 'Opportunities' %}</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link"
                                        id="estimates-tab"
                                        data-bs-toggle="tab"
                                        data-bs-target="#estimates-tab-pane"
                                        type="button"
                                        role="tab"
                                        aria-controls="estimates-tab-pane"
                                        aria-selected="false">{% trans 'Estimates' %}</button>
                            </li>
                        </ul>
                        <div class="tab-content pt-3" id="myTabContent">
                            <div class="tab-pane fade show active"
                                 id="leads-tab-pane"
                                 role="tabpanel"
                                 aria-labelledby="leads-tab"
                                 tabindex="0">
                                {% for lead in leads %}
                                    <div class="d-flex align-items-center mb-2">
                                        <i class="fas fa-handshake me-2 text-primary"></i>
                                        <a href="{% url 'lead_detail' request.dealer.slug lead.slug %}"
                                           class="fw-bold">{{ lead }}</a>
                                    </div>
                                {% empty %}
                                    <p class="text-body-secondary">{% trans 'No leads found for this customer.' %}</p>
                                {% endfor %}
                            </div>
                            <div class="tab-pane fade"
                                 id="opportunities-tab-pane"
                                 role="tabpanel"
                                 aria-labelledby="opportunities-tab"
                                 tabindex="0">
                                {% for lead in leads %}
                                    {% if lead.opportunity %}
                                        <div class="d-flex align-items-center mb-2">
                                            <i class="fas fa-chart-line me-2 text-success"></i>
                                            <a href="{% url 'opportunity_detail' request.dealer.slug lead.opportunity.slug %}"
                                               class="fw-bold">{{ lead.opportunity }}</a>
                                        </div>
                                    {% endif %}
                                {% empty %}
                                    <p class="text-body-secondary">{% trans 'No opportunities found for this customer.' %}</p>
                                {% endfor %}
                            </div>
                            <div class="tab-pane fade"
                                 id="estimates-tab-pane"
                                 role="tabpanel"
                                 aria-labelledby="estimates-tab"
                                 tabindex="0">
                                {% for estimate in estimates %}
                                    <div class="card mb-3 shadow-sm">
                                        <div class="card-body p-3">
                                            <div class="d-flex align-items-center justify-content-between mb-3">
                                                <h6 class="mb-0">
                                                    <i class="fas fa-file-invoice me-2 text-info"></i>
                                                    <a href="{% url 'estimate_detail' request.dealer.slug estimate.pk %}"
                                                       class="text-decoration-none">{{ estimate }}</a>
                                                </h6>
                                                <span class="badge bg-success">{{ estimate.created|date:"d M Y" }}</span>
                                            </div>
                                            <ul class="list-unstyled mb-0 ms-5">
                                                {% for sale_order in estimate.sale_orders.all %}
                                                    <li class="mb-2">
                                                        <i class="fas fa-truck-moving me-2 text-success"></i>
                                                        <a href="{% url 'order_detail' request.dealer.slug sale_order.pk %}">{{ sale_order }}</a>
                                                    </li>
                                                {% endfor %}
                                                {% for invoice in estimate.invoicemodel_set.all %}
                                                    <li class="mb-2">
                                                        <i class="fas fa-receipt me-2 {% if invoice.is_paid %}text-success{% else %}text-warning{% endif %}"></i>
                                                        <a href="{% url 'invoice_detail' request.dealer.slug request.entity.slug invoice.pk %}"
                                                           class="text-decoration-none">{{ invoice }}</a>
                                                        <span class="badge rounded-pill {% if invoice.is_paid %}bg-success{% else %}bg-warning{% endif %} ms-2">
                                                            {% if invoice.is_paid %}
                                                                {% trans "Paid" %}
                                                            {% else %}
                                                                {% trans "Unpaid" %}
                                                            {% endif %}
                                                        </span>
                                                    </li>
                                                {% endfor %}
                                                {% for item in estimate.itemtransactionmodel_set.all %}
                                                    <li>
                                                        <i class="fas fa-car me-2 text-primary"></i>
                                                        <a href="{% url 'car_detail' request.dealer.slug  item.item_model.car.slug %}">{{ item.item_model.car.vin }}&nbsp;&vert;&nbsp;{{ item.item_model.car.id_car_make.name }}&nbsp;&vert;&nbsp;{{ item.item_model.car.id_car_model.name }}</a>
                                                    </li>
                                                {% endfor %}
                                            </ul>
                                        </div>
                                    </div>
                                {% empty %}
                                    <p class="text-body-secondary">{% trans 'No estimates found for this customer.' %}</p>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% include "components/note_modal.html" with content_type="customer" slug=customer.slug %}
    <!---->
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const noteModal = document.getElementById("noteModal");
            const modalTitle = document.getElementById("noteModalLabel");

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

            noteModal.addEventListener("", function (event) {
                const button = event.relatedTarget;
                const url = button.getAttribute("data-url");
                const title = button.getAttribute("data-note-title");

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

    </script>
{% endblock %}