{% extends "base.html" %}
{% load i18n static crispy_forms_filters custom_filters%}

{% block title %}{{ _("View Customer") }}{% endblock title %}

{% block content %}
  {% include 'modal/delete_modal.html' %}

  <div class="row">
    <div class="mb-9">
      <div class="row align-items-center justify-content-between g-3 mb-4">
        <div class="col-auto">
          <h3 class="mb-0">{% trans 'Customer details' %}</h3>
        </div>
        <div class="col-auto">
          <div class="row g-3">
            <div class="col-auto">
              {% if perms.django_ledger.delete_customermodel %}
                <button class="btn btn-phoenix-danger btn-sm delete-btn"
                        data-url="{% url 'customer_delete' customer.slug %}"
                        data-message="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 class="col-auto">
              {% if perms.django_ledger.change_customermodel %}
                <a href="{% url 'customer_update' customer.slug %}" class="btn btn-sm btn-phoenix-warning"><span class="fa-solid fa-pen-to-square me-2"></span>{{_("Update")}}</a>
              {% endif %}
            </div>
          </div>
        </div>
      </div>
      <div class="row g-5">
        <div class="col-12 col-xxl-4">
          <div class="row g-3 h-100">
            <div class="col-12 col-md-7 col-xxl-12">
              <div class="card h-100 h-xxl-auto">
                <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" src="{{ customer.image.url }}" alt="" />
                        {% endif %}
                      </div>
                    </div>
                    <div class="col-12 col-sm-auto flex-1">
                      <h3>{{ customer.full_name }}</h3>
                      <p class="text-body-secondary">{{ customer.created|timesince}}</p>
                    </div>
                  </div>
                  <div class="d-flex justify-content-between border-top border-dashed pt-4">
                    <div>
                      <h6>{% trans 'Invoices' %}</h6>
                      <p class="fs-7 text-body-secondary mb-0">{{invoices.count}}</p>
                    </div>
                    <div>
                      <h6>{% trans 'Quotations' %}</h6>
                      <p class="fs-7 text-body-secondary mb-0">{{estimates.count}}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-12 col-md-5 col-xxl-12">
              <div class="card">
                <div class="card-body">
                  <div class="d-flex align-items-center mb-3">
                    <h3 class="me-1">{% trans 'Default Address' %}</h3>
                    <button class="btn btn-link p-0"><span class="fas fa-pen fs-8 ms-3 text-body-quaternary"></span></button>
                  </div>
                  <h5 class="text-body-secondary">{{ _("Address") }}</h5>
                  <p class="text-body-secondary">{{ customer.address}}</p>
                  <div class="mb-3">
                    <h5 class="text-body-secondary">{% trans 'Email' %}</h5><a href="{{ customer.email}}">{{ customer.email }}</a>
                  </div>
                  <h5 class="text-body-secondary">{% trans 'Phone Number' %}</h5><a class="text-body-secondary" href="#">{{ customer.phone_number }}</a>
                </div>
              </div>
            </div>
            <div class="col-12">
              <div class="card">
                <div class="card-body">
                  <div class="d-flex align-items-center justify-content-end">
                    <a id="addBtn" href="#" class="btn btn-sm btn-phoenix-primary mb-3" data-url="{% url 'add_note_to_customer' customer.slug %}" data-bs-toggle="modal" data-bs-target="#noteModal" data-note-title="{{ _("Add") }}<i class='fa fa-plus-circle text-success ms-2'></i>">
                      <span class="fas fa-plus me-1"></span>
                      {% trans 'Add Note' %}
                    </a>
                  </div>
                  <table class="table fs-9 mb-0 table-responsive">
                    <tr>
                      <th class="align-middle pe-6 text-start" scope="col">{{ _("Note") }}</th>
                      <th class="align-middle pe-6 text-start" scope="col">{{ _("Date") }}</th>
                    </tr>
                    <tbody>
                      {% for note in customer_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 }}</td>
                        </tr>
                      {% endfor %}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-xxl-8">
          <div class="mb-6">
            <h3 class="mb-4">{{ _("Related") }} <span class="text-body-tertiary fw-normal">({{ total }})</span></h3>
            <div class="border-top border-bottom border-translucent" id="customerOrdersTable" data-list='{"valueNames":["order","total","payment_status","fulfilment_status","delivery_type","date"],"page":6,"pagination":true}'>
              <div class="table-responsive scrollbar">
                <table class="table table-sm fs-9 mb-0">
                  <thead>
                    <tr>
                      <th class="sort white-space-nowrap align-middle ps-0 pe-3" scope="col" data-sort="order">{% trans 'Type'|upper %}</th>
                      <th class="sort align-middle text-end pe-7" scope="col" data-sort="total">{% trans 'Total'|upper %}</th>
                      <th class="sort align-middle white-space-nowrap pe-3" scope="col" data-sort="payment_status">{% trans 'Payment Status'|upper %}</th>
                      <th class="sort align-middle text-end pe-0" scope="col" data-sort="date">{% trans 'Date'|upper %}</th>
                      <th class="sort text-end align-middle pe-0 ps-5" scope="col"></th>
                    </tr>
                  </thead>
                  <tbody class="list" id="customer-order-table-body">
                    {% for estimate in estimates %}
                      <tr class="hover-actions-trigger btn-reveal-trigger position-static">
                        <td class="order align-middle white-space-nowrap ps-0">

                          <p class="fw-semibold mb-0" >{{ _("Quotation") }}-<span class="fs-10 fw-medium">{{ estimate.estimate_number }}</span></p>
                        </td>
                        <td class="total align-middle text-end fw-semibold pe-7 text-body-highlight">{{ estimate.revenue_estimate|currency_format }} <span class="currency"> {{ CURRENCY }}</span> </td>
                        <td class="payment_status align-middle white-space-nowrap text-start fw-bold text-body-tertiary">

                        </td>

                        <td class="date align-middle white-space-nowrap text-body-tertiary fs-9 ps-4 text-end">{{ estimate.created }}</td>
                        <td class="align-middle white-space-nowrap text-end pe-0 ps-5">
                          <div class="btn-reveal-trigger position-static">
                            <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs-10"></span></button>
                            <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
                              <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
                            </div>
                          </div>
                        </td>
                      </tr>
                    {% endfor %}
                    {% for invoice in invoices %}
                      <tr class="hover-actions-trigger btn-reveal-trigger position-static">
                        <td class="order align-middle white-space-nowrap ps-0">

                          <p class="fw-semibold mb-0" >{{ _("Invoice") }}-<span class="fs-10 fw-medium">{{ invoice.invoice_number }}</span></p>
                        </td>
                        <td class="total align-middle text-end fw-semibold pe-7 text-body-highlight">{{ invoice.amount_paid|currency_format }}<span class="currency"> {{ CURRENCY }}</span> </td>
                        <td class="payment_status align-middle white-space-nowrap text-start fw-bold text-body-tertiary">
                          {% if invoice.is_paid %}
                            <span class="badge badge-phoenix fs-10 badge-phoenix-success">
                              <span class="badge-label">{{ _("Paid") }}</span>
                              <span class="ms-1" data-feather="check" style="height:12.8px;width:12.8px;"></span>
                            </span>


                          {% endif %}
                        </td>
                        <td class="date align-middle white-space-nowrap text-body-tertiary fs-9 ps-4 text-end">{{ invoice.created }}</td>
                        <td class="align-middle white-space-nowrap text-end pe-0 ps-5">
                          <div class="btn-reveal-trigger position-static">
                            <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs-10"></span></button>
                            <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
                              <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
                            </div>
                          </div>
                        </td>
                      </tr>
                    {% endfor %}

                  </tbody>
                </table>
              </div>
              {% include 'partials/pagination.html' %}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="modal fade" id="noteModal" tabindex="-1" aria-labelledby="noteModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-sm">
        <div class="modal-content">
          <div class="modal-header justify-content-between align-items-start gap-5 px-4 pt-4 pb-3 border-0">
            <h4 class="modal-title" id="noteModalLabel">{% trans 'Notes' %}</h4>
            <button class="btn p-0 text-body-quaternary fs-6" data-bs-dismiss="modal" aria-label="Close">
              <span class="fas fa-times"></span>
            </button>
          </div>
          <div class="modal-body">
        <!-- Content will be loaded here via AJAX -->
          </div>
        </div>
      </div>
    </div>
  </div>
  <script>
    document.addEventListener("DOMContentLoaded", function () {
      const noteModal = document.getElementById("noteModal");
      const modalTitle = document.getElementById("noteModalLabel");

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

      noteModal.addEventListener("show.bs.modal", 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 %}