{% 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="mt-4">
   <!--heading -->
        <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.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>{{ _("Update") }}</a>
                            {% endif %}
                        </div>
                        {% if perms.inventory.delete_customer %}
                            <div class="col-auto">
                                <button class="btn btn-phoenix-danger btn-sm delete-btn"
                                        data-url="{% url 'customer_delete' request.dealer.slug 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>
                            </div>
                        {% endif %}
                    </div>
                </div>
        </div>



    <!--cards-->
      <div class="row">

        <div class="col m-2">
                          <div class="card h-100">
                                <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 m-2">
                            <div class="card h-100">
                                <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 m-2">
                          <div class="card h-100">
                                <div class="card-body">
                                    {% if perms.inventory.change_customer %}
                                        <div class="d-flex align-items-center justify-content-end">
                                            {% if perms.inventory.change_lead %}
                                            <button class="btn btn-phoenix-primary btn-sm"
                                                    type="button"
                                                    onclick=""
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#noteModal">
                                                <span class="fas fa-plus me-1"></span>{{ _("Add Note") }}
                                            </button>
                                        {% endif %}
                                        </div>
                                    {% endif %}
                                    <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 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 }}</td>
                                                </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
        </div>
      <div class="col-12 mt-3">
                    <div class="mb-6">
                        
                        <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" scope="col" data-sort="leads">{% trans 'Leads'|upper %}</th>
                                            <th class="sort align-middle  " scope="col" data-sort="opportunities">{% trans 'Opportunities'|upper %}</th>
                                            <th class="sort align-middle " scope="col" data-sort="estimates">{% trans 'Estimates'|upper %}</th>
                                            <th class="sort align-middle " scope="col" data-sort="sale_orders">{% trans 'Sale orders'|upper %}</th>
                                            <th class="sort align-middle " scope="col" data-sort="invoices">{% trans 'Invoices'|upper %}</th>
                                            <th class="sort align-middle " scope="col" data-sort="car">{% trans 'Car'|upper %}</th>

                                        </tr>
                                    </thead>
                                    <tbody class="list" id="customer-order-table-body">
                                       {% for lead in leads %}
                                            <tr>
                                                <td><a href="#">{{lead}} ({{ forloop.counter }})<a></td>
                                                <td>{{lead.opportunity}} ({{ forloop.counter }})</td>
                                               
                                                <td>
                                                  
                                                    {% for estimate in  lead.customer.customer_model.estimatemodel_set.all %}
                                                      <div class="me-2">{{estimate}}</div>
                                                       <hr>
                                                     {% endfor %}
                                                </td>

                                                <td>
                                                    {% for estimate in  lead.customer.customer_model.estimatemodel_set.all %}
                                                      <div>{{estimate.sale_orders.first}}</div>
                                                      <hr>
                                                     {% endfor %}
                                                </td>
                                                <td>
                                                    {% for invoice in  lead.customer.customer_model.invoicemodel_set.all %}
                                                      
                                                      {% if invoice.is_paid %}
                                                        <span class="badge badge-phoenix fs-10 badge-phoenix-success">
                                                            <div>{{invoice}}</div>
                                                        </span>
                                                      {%else%}
                                                        <span class="badge badge-phoenix fs-10 badge-phoenix-info">
                                                            <div>{{invoice}}</div>
                                                        </span>
                                                      {% endif %}

                                                      <hr>
                                                     {% endfor %}
                                                </td>
                                               <td>
                                                  {% for estimate in  lead.customer.customer_model.invoicemodel_set.all %}
                                                      <div>{{estimate.itemtransactionmodel_set.first.item_model.name}}</div>
                                                      <hr>
                                                   {% endfor %}
                                                <td>

                                            <tr>

                                        {% endfor %}
                                           
                                      
                                    </tbody>
                                </table>
                            </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 %}