{% extends 'base.html' %}
{% load i18n static humanize %}
{% load crispy_forms_tags %}

{% block customCSS %}
  <style>
    .main-tab li:last-child {
      margin-left: auto;
    }
    .kanban-header {
      position: relative;
      background-color:rgb(237, 241, 245);
      font-weight: 600;
      padding: 0.5rem 1rem;
      margin-bottom: 1rem;
      color: #333;
      clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
      box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }

    .kanban-header::after {
      content: "";
      position: absolute;
      right: -20px;
      top: 0;
      width: 0;
      height: 0;
      border-top: 28px solid transparent;
      border-bottom: 28px solid transparent;
      border-left: 20px solid #dee2e6;
    }
  </style>
{% endblock customCSS %}
{% block content %}
  <div class="row g-3">
    <div class="col-12">
      {% include "crm/leads/partials/update_action.html" %}
      <div class="row align-items-center justify-content-between g-3 mb-3">
        <div class="col-12 col-md-auto">
          <h4 class="mb-0">{{ _("Lead Details")}}</h4>
        </div>
        <div class="col-12 col-md-auto">
          <div class="d-flex">
            <div class="flex-1 d-md-none">
              <button class="btn px-3 btn-phoenix-secondary text-body-tertiary me-2"><span class="fa-solid fa-bars"></span></button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row g-0 g-md-4 g-xl-6">
    <div class="col-md-5 col-lg-5 col-xl-4">
      <div class="sticky-leads-sidebar">
        <div class="lead-details" data-breakpoint="md">
          <div class="d-flex justify-content-between align-items-center mb-2 d-md-none">
            <h3 class="mb-0">{{ _("Lead Details")}}</h3>
            <button class="btn p-0" ><span class="uil uil-times fs-7"></span></button>
        </div>
        <div class="card mb-2">
            <div class="card-body">
              <div class="row align-items-center g-3 text-center text-xxl-start">
                <div class="col-6 col-sm-auto flex-1">
                  <h3 class="fw-bolder mb-2">{{ lead.first_name }} {{ lead.last_name }}</h3>
                  {% if lead.staff %}
                    <p class="fs-8 mb-0 white-space-nowrap fw-bold">{{ _("Assigned to")}}: <span class="fw-light">{{ lead.staff }}</span></p>
                  {% else %}
                    <p class="mb-0 fw-bold">{{ _("Not Assigned")}}</p>
                  {% endif %}
                </div>
                <div class="col-6 col-sm-auto flex-1">

                  <h5 class="text-body-highlight mb-0 text-end">{{ _("Status")}}
                    {% if lead.status == "new" %}
                      <span class="badge badge-phoenix badge-phoenix-primary"><span class="badge-label">{{_("New")}}</span><span class="fa fa-bell ms-1"></span></span>
                    {% elif lead.status == "contacted" %}
                      <span class="badge badge-phoenix badge-phoenix-warning"><span class="badge-label">{{_("Contacted")}}</span><span class="fa fa-clock-o ms-1"></span></span>
                    {% elif lead.status == "qualified" %}
                      <span class="badge badge-phoenix badge-phoenix-info"><span class="badge-label">{{_("Qualified")}}</span><span class="fa fa-wrench ms-1"></span></span>
                    {% elif lead.status == "unqualified" %}
                      <span class="badge badge-phoenix badge-phoenix-success"><span class="badge-label">{{_("Unqualified")}}</span><span class="fa fa-check ms-1"></span></span>
                    {% elif lead.status == "converted" %}
                      <span class="badge badge-phoenix badge-phoenix-danger"><span class="badge-label">{{_("Converted")}}</span><span class="fa fa-times ms-1"></span></span>
                    {% endif %}
                  </h5>
                </div>
              </div>
            </div>
          </div>
          <div class="card mb-2">
            <div class="card-body">
              <div class="row align-items-center g-3 text-center text-xxl-start">
                <div class="col-6 col-sm-auto d-flex flex-column align-items-center text-center">
                  <h5 class="fw-bolder mb-2 text-body-highlight">{{ _("Car Requested") }}</h5>
                  <img src="{{ lead.id_car_make.logo.url }}" alt="Car Make Logo" class="img-fluid rounded mb-2" style="width: 60px; height: 60px;">
                  <p class="mb-0">{{ lead.id_car_make.get_local_name }} - {{ lead.id_car_model.get_local_name }} {{ lead.year }}</p>
                </div>
              </div>
            </div>
          </div>
          <div class="card mb-2">
            <div class="card-body">
              <div class="row align-items-center g-3 text-center text-xxl-start">
                <div class="col-6 col-sm-auto d-flex flex-column align-items-center text-center">
                  <h5 class="fw-bolder mb-2 text-body-highlight">{{ _("Related Records") }}</h5>
                  <h6 class="fw-bolder mb-2 text-body-highlight">{{ _("Opportunity") }}</h6>
                  {% if lead.opportunity %}
                    <a href="{% url 'opportunity_detail' request.dealer.slug lead.opportunity.slug %}" class="">{{ lead.opportunity }}</a>
                  {% else %}
                    <p>{{ _("No Opportunity") }}</p>
                  {% endif %}
                </div>
              </div>
            </div>
          </div>
          <div class="card mb-2">
            <div class="card-body">
              <div class="mb-3">
                <div class="d-flex align-items-center mb-1"><span class="me-2 uil uil-envelope-alt">  </span>
                  <h5 class="text-body-highlight fw-bold mb-0">{{ _("Email") }}</h5>
                </div>
                <span class="text-body-secondary">{{ lead.email }}</span>
              </div>
              <div class="mb-3">
                <div class="d-flex align-items-center mb-1"><span class="me-2 uil uil-phone"> </span>
                  <h5 class="text-body-highlight fw-bold mb-0">{{ _("Phone") }}</h5>
                </div>
                <span class="text-body-secondary">{{ lead.phone_number}} </span>
              </div>
              <div class="mb-3">
                <div class="d-flex align-items-center mb-1"><span class="me-2 uil uil-clock"></span>
                  <h5 class="text-body-highlight fw-bold mb-0">{{ _("Created")}}</h5>
                </div>
                <span class="text-body-secondary">{{ lead.created|naturalday|capfirst }}</span>
              </div>
              <div class="mb-3">
                <div class="d-flex align-items-center mb-1"><span class="me-2 uil uil-file-check-alt"></span>
                  <h5 class="text-body-highlight fw-bold mb-0">{{ _("Lead Source")}}</h5>
                </div>
                {% if lead.source == 'REFERRALS' %}
                    <span class="ms-2 fa fa-users"></span>
                  {% elif lead.source == 'WHATSAPP' %}
                    <span class="ms-2 fa fa-whatsapp"></span>
                  {% elif lead.source == 'SHOWROOM' %}
                    <span class="ms-2 fa fa-building"></span>
                  {% elif lead.source == 'TIKTOK' %}
                    <span class="ms-2 fa fa-tiktok"></span>
                  {% elif lead.source == 'INSTAGRAM' %}
                    <span class="ms-2 fa fa-instagram"></span>
                  {% elif lead.source == 'X' %}
                    <span class="ms-2 fa fa-times-circle"></span>
                  {% elif lead.source == 'FACEBOOK' %}
                    <span class="ms-2 fa fa-facebook-f"></span>
                  {% elif lead.source == 'MOTORY' %}
                    <span class="ms-2 fa fa-car-side"></span>
                  {% elif lead.source == 'INFLUENCERS' %}
                    <span class="ms-2 fa fa-user-check"></span>
                  {% elif lead.source == 'YOUTUBE' %}
                    <span class="ms-2 fa fa-youtube"></span>
                  {% elif lead.source == 'CAMPAIGN' %}
                    <span class="ms-2 fa fa-bullhorn"></span>
                  {% endif %}
                <span class="text-body-secondary">{{ lead.source|upper }}</span>
              </div>
              <div class="mb-3">
                <div class="d-flex align-items-center mb-1"><span class="me-2 uil uil-file-check-alt"></span>
                  <h5 class="text-body-highlight fw-bold mb-0">{{ _("Lead Channel")}}</h5>
                </div>
                <span class="text-body-secondary">{{ lead.channel|upper }}</span>
              </div>
              <div class="mb-3">
                <div class="d-flex align-items-center mb-1"><span class="me-2 uil uil-estate"></span>
                  <h5 class="text-body-highlight fw-bold mb-0">{{ _("Address") }}</h5>
                </div>
                <span class="text-body-secondary">{{ lead.address}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="d-lg-none top-0"></div>
      </div>
    </div>
    <div class="col-md-7 col-lg-7 col-xl-8">
      <div class="d-flex w-100 gap-5">
        <div class="kanban-header bg-success w-50 text-white fw-bold"><i class="fa-solid fa-circle-check me-2"></i>{{lead.status|capfirst}} <br> &nbsp; <small>{% trans "Current Stage" %}</small></div>
        <div class="kanban-header bg-secondary w-50 text-white fw-bold"><i class="fa-solid fa-circle-info me-2"></i>{{lead.next_action|capfirst}}  <br> &nbsp; <small>{% trans "Next Action" %} :</small>&nbsp; <small>{{lead.next_action_date|naturalday|capfirst}}</small></div>
      </div>
      <ul class="nav main-tab nav-underline fs-9 deal-details scrollbar flex-nowrap w-100 pb-1 mb-6 justify-content-end mt-5" id="myTab" role="tablist" style="overflow-y: hidden;">
          <li class="nav-item text-nowrap me-2" role="presentation"><a class="nav-link active" id="tasks-tab" data-bs-toggle="tab" href="#tab-tasks" role="tab" aria-controls="tab-tasks" aria-selected="true"> <span class="fa-solid fa-envelope me-2 tab-icon-color fs-8"></span>{{ _("Tasks") }}</a></li>
          <li class="nav-item text-nowrap me-2" role="presentation"><a class="nav-link" id="notes-tab" data-bs-toggle="tab" href="#tab-notes" role="tab" aria-controls="tab-notes" aria-selected="false" tabindex="-1"> <span class="fa-solid fa-clipboard me-2 tab-icon-color fs-8"></span>{{ _("Notes") }}</a></li>
          <li class="nav-item text-nowrap me-2" role="presentation"><a class="nav-link" id="emails-tab" data-bs-toggle="tab" href="#tab-emails" role="tab" aria-controls="tab-emails" aria-selected="true"> <span class="fa-solid fa-envelope me-2 tab-icon-color fs-8"></span>{{ _("Emails") }}</a></li>
          <li class="nav-item text-nowrap me-2" role="presentation"><a class="nav-link" id="activity-tab" data-bs-toggle="tab" href="#tab-activity" role="tab" aria-controls="tab-activity" aria-selected="false" tabindex="-1"> <span class="fa-solid fa-chart-line me-2 tab-icon-color fs-8"></span>{{ _("Activity") }}</a></li>
          <li class="nav-item text-nowrap me-2" role="presentation"><a class="nav-link" id="opportunity-tab" data-bs-toggle="tab" href="#tab-opportunity" role="tab" aria-controls="tab-opportunity" aria-selected="false" tabindex="-1"> <span class="fa-solid fa-chart-line me-2 tab-icon-color fs-8"></span>{{ _("Opportunities") }}</a></li>
       {% if perms.inventory.change_lead%}
        <li class="nav-item text-nowrap ml-auto" role="presentation">
          {% if perms.inventory.can_reassign_lead %}
            <button class="btn btn-phoenix-primary btn-sm" type="button" data-bs-toggle="modal" data-bs-target="#exampleModal"> <i class="fa-solid fa-user-plus me-2"></i> Reassign Lead</button>
          {% endif %}
          <button class="btn btn-phoenix-primary btn-sm" onclick="openActionModal('{{ lead.id }}', '{{ lead.action }}', '{{ lead.next_action }}', '{{ lead.next_action_date|date:"Y-m-d\TH:i" }}')">
            <i class="fa-solid fa-user-plus me-2"></i>
            {% trans "Update Actions" %}
          </button>
          <div class="modal fade" id="exampleModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog">
              <div class="modal-content">
                <form class="modal-content" action="{% url 'lead_transfer' request.dealer.slug lead.slug %}" method="post">
                  {% csrf_token %}
                  <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Reassign Lead To Another Employee</h5>
                    <button class="btn btn-close p-1" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
                  </div>
                  <div class="modal-body">
                    {{transfer_form|crispy}}
                  </div>
                  <div class="modal-footer">
                    <button class="btn btn-phoenix-primary" type="submit">Save</button>
                    <button class="btn btn-phoenix-secondary" type="button" data-bs-dismiss="modal">Cancel</button>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </li>
        {% endif %}
      </ul>
      <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade" id="tab-activity" role="tabpanel" aria-labelledby="activity-tab">
          <div class="mb-1 d-flex justify-content-between align-items-center">
            <h3 class="mb-4" id="s  crollspyTask">{{ _("Activities") }} <span class="fw-light fs-7">({{ activities.count}})</span></h3>
            {% if perms.inventory.change_lead%}
            {% endif %}
          </div>
          <div class="row justify-content-between align-items-md-center hover-actions-trigger btn-reveal-trigger border-translucent py-3 gx-0 border-top">
            <div class="col-12 col-lg-auto">
              <div class="timeline-basic mb-9">
                {% for activity in activities %}
                  <div class="timeline-item">
                    <div class="row g-3">
                      <div class="col-auto">
                        <div class="timeline-item-bar position-relative">
                          <div class="icon-item icon-item-md rounded-7 border border-translucent">
                            {% if activity.activity_type == "call" %}
                              <span class="fa-solid fa-phone text-warning fs-8"></span>
                            {% elif activity.activity_type == "note" %}
                              <span class="fa-regular fa-sticky-note text-info-light fs-8"></span>
                            {% elif activity.activity_type == "task" %}
                              <span class="fa-solid fa-list-check text-success fs-8"></span>
                            {% elif activity.activity_type == "email" %}
                              <span class="fa-solid fa-envelope text-info-light fs-8"></span>
                            {% elif activity.activity_type == "visit" %}
                              <span class="fa-solid fa-users text-danger fs-8"></span>
                            {% elif activity.activity_type == "whatsapp" %}
                              <span class="fab fa-whatsapp text-success-dark fs-7"></span>
                            {% endif %}
                          </div>
                          {% if forloop.last %}
                            <span class=""></span>
                          {% else %}
                            <span class="timeline-bar border-end border-dashed"></span>
                          {% endif %}
                        </div>
                      </div>
                      <div class="col">
                        <div class="d-flex justify-content-between">
                          <div class="d-flex mb-2">
                            <h6 class="lh-sm mb-0 me-2 text-body-secondary timeline-item-title">{{ activity.activity_type|capfirst }}</h6>
                          </div>
                          <p class="text-body-quaternary fs-9 mb-0 text-nowrap timeline-time"><span class="fa-regular fa-clock me-1"></span>{{ activity.created|naturalday|capfirst }}</p>
                        </div>
                        <h6 class="fs-10 fw-normal mb-3">{{ _("created by") }} <a class="fw-semibold" href="#!">{{ activity.created_by }}</a></h6>
                        <p class="fs-9 text-body-secondary w-sm-60 mb-5">{{ activity.notes }}</p>
                      </div>
                    </div>
                  </div>
                {% endfor %}
              </div>
            </div>
          </div>
        </div>
        <div class="tab-pane fade" id="tab-opportunity" role="tabpanel" aria-labelledby="opportunity-tab">
          <div class="mb-1 d-flex justify-content-between align-items-center">
            <h3 class="mb-4" id="scrollspyTask">{{ _("Opportunities") }} <span class="fw-light fs-7">({{ lead.get_opportunities.count}})</span></h3>
            {% if perms.inventory.add_opportunity%}
            <a href="{% url 'lead_opportunity_create' request.dealer.slug lead.slug %}" class="btn btn-phoenix-primary btn-sm" type="button"> <i class="fa-solid fa-plus me-2"></i>{{ _("Add Opportunity") }}</a>
            {% endif%}
          </div>

          <div class="border-top border-bottom border-translucent" id="leadDetailsTable">
            <div class="table-responsive scrollbar mx-n1 px-1">
              <table class="table fs-9 mb-0">
                <thead>
                  <tr>
                    <th class="align-middle pe-6 text-uppercase text-start" scope="col" style="width:40%;">{{ _("Car") }}</th>
                    <th class="align-middle text-start text-uppercase" scope="col" style="width:20%;">{{ _("Probability")}}</th>
                    <th class="align-middle text-start text-uppercase white-space-nowrap" scope="col" style="width:20%;">{{ _("Priority")}}</th>
                    <th class="align-middle pe-0 text-end" scope="col" style="width:10%;"></th>
                  </tr>
                </thead>
                <tbody >
                  {% for opportunity in lead.get_opportunities %}
                    <tr class="hover-actions-trigger btn-reveal-trigger position-static">
                      <td class="align-middle  text-start fw-bold text-body-tertiary ps-1">{{opportunity.car}}</td>
                      <td class="align-middle  text-start fw-bold text-body-tertiary ps-1">{{opportunity.probability}}</td>
                      <td class="align-middle  text-start fw-bold text-body-tertiary ps-1">{{opportunity.priority|capfirst}}</td>
                      <td class="align-middle  text-start fw-bold text-body-tertiary ps-1"><a class="btn btn-sm btn-phoenix-primary" href="{% url 'opportunity_detail' request.dealer.slug opportunity.slug %}">View</a></td>
                    </tr>
                  {% endfor %}
                </tbody>
              </table>

            </div>
          </div>
        </div>
        <div class="tab-pane fade" id="tab-notes" role="tabpanel" aria-labelledby="notes-tab">
          <div class="mb-1 d-flex align-items-center justify-content-between">
            <h3 class="mb-4" id="scrollspyNotes">{{ _("Notes") }}</h3>
            {% if perms.inventory.change_lead %}
            <button class="btn btn-phoenix-primary btn-sm" type="button" onclick="reset_form()" data-bs-toggle="modal" data-bs-target="#noteModal"><span class="fas fa-plus me-1"></span>{{ _("Add Note") }}</button>
             {% endif %}
          </div>

          <div class="border-top border-bottom border-translucent" id="leadDetailsTable">
            <div class="table-responsive scrollbar mx-n1 px-1">
              <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 >
                  {% 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 class="tab-pane fade" id="tab-emails" role="tabpanel" aria-labelledby="emails-tab">
          <div class="mb-1 d-flex justify-content-between align-items-center">
            <h3 class="mb-0" id="scrollspyEmails">{{ _("Emails") }}</h3>
            {% if perms.inventory.change_lead%}
            <a href="{% url 'send_lead_email' request.dealer.slug lead.slug %}">
              <button type="button" class="btn btn-sm btn-phoenix-primary">
                <span class="fas fa-plus me-1"></span>
                {% trans 'Send Email' %}
              </button>
            </a>
            {% endif %}
          </div>
          <div>
            <div class="scrollbar">
              <ul class="nav nav-underline fs-9 flex-nowrap mb-1" id="emailTab" role="tablist">
                <li class="nav-item me-3"><a class="nav-link text-nowrap border-0 active" id="mail-tab" data-bs-toggle="tab" href="#tab-mail" aria-controls="mail-tab" role="tab" aria-selected="true">Mails ({{emails.sent.count}})<span class="text-body-tertiary fw-normal"></span></a></li>
                <li class="nav-item me-3"><a class="nav-link text-nowrap border-0" id="drafts-tab" data-bs-toggle="tab" href="#tab-drafts" aria-controls="drafts-tab" role="tab" aria-selected="true">Drafts ({{emails.draft.count}})<span class="text-body-tertiary fw-normal"></span></a></li>
              </ul>
            </div>
            <div class="tab-content" id="profileTabContent">
              <div class="tab-pane fade show active" id="tab-mail" role="tabpanel" aria-labelledby="mail-tab">
                <div class="border-top border-bottom border-translucent" id="allEmailsTable" data-list='{"valueNames":["subject","sent","date","source","status"],"page":7,"pagination":true}'>
                  <div class="table-responsive scrollbar mx-n1 px-1">
                    <table class="table fs-9 mb-0">
                      <thead>
                        <tr>
                          <th class="white-space-nowrap fs-9 align-middle ps-0" style="width:26px;">
                            <div class="form-check mb-0 fs-8">
                              <input class="form-check-input" type="checkbox" data-bulk-select='{"body":"all-email-table-body"}' />
                            </div>
                          </th>
                          <th class="sort white-space-nowrap align-middle pe-3 ps-0 text-uppercase" scope="col" data-sort="subject" style="width:31%; min-width:350px">Subject</th>
                          <th class="sort align-middle pe-3 text-uppercase" scope="col" data-sort="sent" style="width:15%; min-width:130px">Sent by</th>
                          <th class="sort align-middle text-start text-uppercase" scope="col" data-sort="date" style="min-width:165px">Date</th>
                          <th class="sort align-middle pe-0 text-uppercase" scope="col" style="width:15%; min-width:100px">Action</th>
                          <th class="sort align-middle text-end text-uppercase" scope="col" data-sort="status" style="width:15%; min-width:100px">Status</th>
                        </tr>
                      </thead>
                      <tbody class="list" id="all-email-table-body">
                        {% for email in emails.sent %}
                          <tr class="hover-actions-trigger btn-reveal-trigger position-static">
                            <td class="fs-9 align-middle px-0 py-3">
                              <div class="form-check mb-0 fs-8">
                                <input class="form-check-input" type="checkbox" data-bulk-select-row='{"mail":{"subject":"Quary about purchased soccer socks","email":"jackson@mail.com"},"active":true,"sent":"Jackson Pollock","date":"Dec 29, 2021 10:23 am","source":"Call","type_status":{"label":"sent","type":"badge-phoenix-success"}}' />
                              </div>
                            </td>
                            <td class="subject order align-middle white-space-nowrap py-2 ps-0"><a class="fw-semibold text-primary" href="">{{email.subject}}</a>
                              <div class="fs-10 d-block">{{email.to_email}}</div>
                            </td>
                            <td class="sent align-middle white-space-nowrap text-start fw-bold text-body-tertiary py-2">{{email.from_email}}</td>
                            <td class="date align-middle white-space-nowrap text-body py-2">{{email.created|naturalday}}</td>
                            <td class="align-middle white-space-nowrap ps-3"><a class="text-body" href=""><span class="fa-solid fa-phone text-primary me-2"></span>Call</a></td>
                            <td class="status align-middle fw-semibold text-end py-2"><span class="badge badge-phoenix fs-10 badge-phoenix-success">sent</span></td>
                          </tr>
                        {% endfor %}
                      </tbody>
                    </table>
                  </div>
                  <div class="row align-items-center justify-content-between py-2 pe-0 fs-9">
                    <div class="col-auto d-flex">
                      <p class="mb-0 d-none d-sm-block me-3 fw-semibold text-body" data-list-info="data-list-info"></p><a class="fw-semibold" href="" data-list-view="*">View all<span class="fas fa-angle-right ms-1" data-fa-transform="down-1"></span></a><a class="fw-semibold d-none" href="" data-list-view="less">View Less<span class="fas fa-angle-right ms-1" data-fa-transform="down-1"></span></a>
                    </div>
                    <div class="col-auto d-flex">
                      <button class="page-link" data-list-pagination="prev"><span class="fas fa-chevron-left"></span></button>
                      <ul class="mb-0 pagination"></ul>
                      <button class="page-link pe-0" data-list-pagination="next"><span class="fas fa-chevron-right"></span></button>
                    </div>
                  </div>
                </div>
              </div>
              <div class="tab-pane fade" id="tab-drafts" role="tabpanel" aria-labelledby="drafts-tab">
                <div class="border-top border-bottom border-translucent" id="draftsEmailsTable" data-list='{"valueNames":["subject","sent","date","source","status"],"page":7,"pagination":true}'>
                  <div class="table-responsive scrollbar mx-n1 px-1">
                    <table class="table fs-9 mb-0">
                      <thead>
                        <tr>
                          <th class="white-space-nowrap fs-9 align-middle ps-0" style="width:26px;">
                            <div class="form-check mb-0 fs-8">
                              <input class="form-check-input" type="checkbox" data-bulk-select='{"body":"drafts-email-table-body"}' />
                            </div>
                          </th>
                          <th class="sort white-space-nowrap align-middle pe-3 ps-0 text-uppercase" scope="col" data-sort="subject" style="width:31%; min-width:350px">Subject</th>
                          <th class="sort align-middle pe-3 text-uppercase" scope="col" data-sort="sent" style="width:15%; min-width:130px">Sent by</th>
                          <th class="sort align-middle text-start text-uppercase" scope="col" data-sort="date" style="min-width:165px">Date</th>
                          <th class="sort align-middle pe-0 text-uppercase" scope="col" style="width:15%; min-width:100px">Action</th>
                          <th class="sort align-middle text-end text-uppercase" scope="col" data-sort="status" style="width:15%; min-width:100px">Status</th>
                        </tr>
                      </thead>
                      <tbody class="list" id="drafts-email-table-body">
                        {% for email in emails.draft %}
                          <tr class="hover-actions-trigger btn-reveal-trigger position-static">
                            <td class="fs-9 align-middle px-0 py-3">
                              <div class="form-check mb-0 fs-8">
                                <input class="form-check-input" type="checkbox" data-bulk-select-row='{"mail":{"subject":"Quary about purchased soccer socks","email":"jackson@mail.com"},"active":true,"sent":"Jackson Pollock","date":"Dec 29, 2021 10:23 am","source":"Call","type_status":{"label":"sent","type":"badge-phoenix-success"}}' />
                              </div>
                            </td>
                            <td class="subject order align-middle white-space-nowrap py-2 ps-0"><a class="fw-semibold text-primary" href="">{{email.subject}}</a>
                              <div class="fs-10 d-block">{{email.to_email}}</div>
                            </td>
                            <td class="sent align-middle white-space-nowrap text-start fw-bold text-body-tertiary py-2">{{email.from_email}}</td>
                            <td class="date align-middle white-space-nowrap text-body py-2">{{email.created}}</td>
                            <td class="align-middle white-space-nowrap ps-3"><a class="text-body" href="{% url 'send_lead_email_with_template' request.dealer.slug lead.slug email.pk %}"><span class="fa-solid fa-email text-primary me-2"></span>Send</a></td>
                            <td class="status align-middle fw-semibold text-end py-2"><span class="badge badge-phoenix fs-10 badge-phoenix-warning">draft</span></td>
                          </tr>
                        {% endfor %}
                      </tbody>
                    </table>
                  </div>
                  <div class="row align-items-center justify-content-between py-2 pe-0 fs-9">
                    <div class="col-auto d-flex">
                      <p class="mb-0 d-none d-sm-block me-3 fw-semibold text-body" data-list-info="data-list-info"></p><a class="fw-semibold" href="" data-list-view="*">View all<span class="fas fa-angle-right ms-1" data-fa-transform="down-1"></span></a><a class="fw-semibold d-none" href="" data-list-view="less">View Less<span class="fas fa-angle-right ms-1" data-fa-transform="down-1"></span></a>
                    </div>
                    <div class="col-auto d-flex">
                      <button class="page-link" data-list-pagination="prev"><span class="fas fa-chevron-left"></span></button>
                      <ul class="mb-0 pagination"></ul>
                      <button class="page-link pe-0" data-list-pagination="next"><span class="fas fa-chevron-right"></span></button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
{% comment %}  {% endcomment %}
        <div class="tab-pane fade active show" id="tab-tasks" role="tabpanel" aria-labelledby="tasks-tab">
          <div class="mb-1 d-flex justify-content-between align-items-center">
            <h3 class="mb-0" id="scrollspyEmails">{{ _("Tasks") }}</h3>
            {% if perms.inventory.change_lead%}
            {% comment %} <button class="btn btn-phoenix-primary btn-sm" type="button" data-bs-toggle="modal" data-bs-target="#taskModal"><span class="fas fa-plus me-1"></span>{{ _("Add Task") }}</button> {% endcomment %}
            <button class="btn btn-phoenix-primary btn-sm" type="button" data-bs-toggle="modal" data-bs-target="#scheduleModal"><span class="fas fa-plus me-1"></span>{{ _("Add Task") }}</button>
             {% endif %}
          </div>
          <div>

            <div class="border-top border-bottom border-translucent" id="allEmailsTable" data-list='{"valueNames":["subject","sent","date","source","status"],"page":7,"pagination":true}'>
              <div class="table-responsive scrollbar mx-n1 px-1">
                <table class="table fs-9 mb-0">
                  <thead>
                    <tr>
                      <th class="white-space-nowrap fs-9 align-middle ps-0" style="width:26px;">
                        <div class="form-check mb-0 fs-8">
                          <input class="form-check-input" type="checkbox" data-bulk-select='{"body":"all-email-table-body"}' />
                        </div>
                      </th>
                      <th class="sort white-space-nowrap align-middle pe-3 ps-0" scope="col" data-sort="subject" style="width:31%; min-width:100px">Name</th>
                      <th class="sort align-middle pe-3 text" scope="col" data-sort="sent" style="width:15%; min-width:400px">Note</th>
                      <th class="sort align-middle text-start" scope="col" data-sort="date" style="min-width:100px">Due Date</th>
                      <th class="sort align-middle text-start" scope="col" data-sort="date" style="min-width:100px">Completed</th>
                    </tr>
                  </thead>
                  <tbody class="list" id="all-tasks-table-body">
                    {% for task in schedules %}
                      {% include "partials/task.html" %}
                    {% endfor %}
                  </tbody>
                </table>
              </div>
              <div class="row align-items-center justify-content-between py-2 pe-0 fs-9">
                <div class="col-auto d-flex">
                  <p class="mb-0 d-none d-sm-block me-3 fw-semibold text-body" data-list-info="data-list-info"></p>
                    <a class="nav-link px-3 d-block" href="{% url 'appointment:get_user_appointments' %}"> <span class="me-2 text-body align-bottom" data-feather="calendar"></span>{{ _("View in Calendar") }}
                    <span class="fas fa-angle-right ms-1" data-fa-transform="down-1"></span></a>
                </div>
                <div class="col-auto d-flex">
                  <button class="page-link" data-list-pagination="prev"><span class="fas fa-chevron-left"></span></button>
                  <ul class="mb-0 pagination"></ul>
                  <button class="page-link pe-0" data-list-pagination="next"><span class="fas fa-chevron-right"></span></button>
                </div>
              </div>
            </div>
          </div>

        </div>
        {% include 'modal/delete_modal.html' %}
 <!-- add update Modal -->
        {% comment %} <div class="modal fade" id="noteModal" tabindex="-1" aria-labelledby="noteModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-md">
            <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> {% endcomment %}

<!-- task Modal -->
        {% include "components/task_modal.html" with content_type="lead" slug=lead.slug %}
<!-- note Modal -->
        {% include "components/note_modal.html" with content_type="lead" slug=lead.slug %}
<!-- schedule Modal -->
        {% include "components/schedule_modal.html" with content_type="lead" slug=lead.slug %}
{% endblock content %}

{% block customJS %}
  <script>
    function reset_form() {
      document.querySelector('#id_note').value = ""
      let form = document.querySelector('.add_note_form')
      form.action = "{% url 'add_note' request.dealer.slug 'lead' lead.slug %}"
    }
    let Toast = Swal.mixin({
      toast: true,
      position: "top-end",
      showConfirmButton: false,
      timer: 3000,
      timerProgressBar: true,
      didOpen: (toast) => {
        toast.onmouseenter = Swal.stopTimer;
        toast.onmouseleave = Swal.resumeTimer;
      }
    });

  // Display Django messages
    {% if messages %}
      {% for message in messages %}
        Toast.fire({
          icon: "{{ message.tags }}",
          titleText: "{{ message|safe }}"
        });
      {% endfor %}
    {% endif %}

    function openActionModal(leadId, currentAction, nextAction, nextActionDate) {
      const modal = new bootstrap.Modal(document.getElementById('actionTrackingModal'));
      document.getElementById('leadId').value = leadId;
      document.getElementById('currentAction').value = currentAction;
      document.getElementById('nextAction').value = nextAction;
      document.getElementById('nextActionDate').value = nextActionDate;
      modal.show();
    }

    document.getElementById('actionTrackingForm').addEventListener('submit', function(e) {
      e.preventDefault();
      const formData = new FormData(this);

      // Show loading indicator
      Swal.fire({
        toast: true,
        icon: 'info',
        text: 'Please wait...',
        allowOutsideClick: false,
        position: "top-end",
        showConfirmButton: false,
        timer: 2000,
        timerProgressBar: false,
        didOpen: (toast) => {
          toast.onmouseenter = Swal.stopTimer;
          toast.onmouseleave = Swal.resumeTimer;
        }
      });

      fetch("{% url 'update_lead_actions' request.dealer.slug %}", {
        method: 'POST',
        body: formData,
        headers: {
          'X-CSRFToken': '{{ csrf_token }}'
        }
      })
        .then(response => response.json())
        .then(data => {
          Swal.close();
          if (data.success) {
              // Success notification
            Swal.fire({
              toast: true,
              icon: 'success',
              position: "top-end",
              text: data.message || 'Actions updated successfully',
              showConfirmButton: false,
              timer: 2000,
              timerProgressBar: false,
              didOpen: (toast) => {
                toast.onmouseenter = Swal.stopTimer;
                toast.onmouseleave = Swal.resumeTimer;
              }
            }).then(() => {
              location.reload(); // Refresh after user clicks OK
            });
          } else {
              // Error notification
            Swal.fire({
              toast: true,
              icon: 'error',
              position: "top-end",
              text: data.message || 'Failed to update actions',
              showConfirmButton: false,
              timer: 2000,
              timerProgressBar: false,
              didOpen: (toast) => {
                toast.onmouseenter = Swal.stopTimer;
                toast.onmouseleave = Swal.resumeTimer;
              }
            });
          }
        })
        .catch(error => {
          Swal.close();
          console.error('Error:', error);
          Swal.fire({
            toast: true,
            icon: 'error',
            position: "top-end",
            text: 'An unexpected error occurred',
            showConfirmButton: false,
            timer: 2000,
            timerProgressBar: false,
            didOpen: (toast) => {
              toast.onmouseenter = Swal.stopTimer;
              toast.onmouseleave = Swal.resumeTimer;
            }
          });
        });
    });

  // Helper function for notifications
    function notify(tag, msg) {
      Toast.fire({
        icon: tag,
        titleText: msg
      });
    }

  </script>
{% endblock customJS %}