{% extends 'base.html' %}
{% load i18n static humanize %}
{% load crispy_forms_tags %}
{% block title %}
    {% trans "Lead Detail" %}
{% endblock %}
{% 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">
                    <h3 class="mb-0">{{ _("Lead Details") }}</h3>
                </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="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|capfirst }} {{ lead.last_name|capfirst }}</h3>
                                    <p>{{ lead.email|capfirst }}</p>
                                </div>
                                <div class="col-6 col-sm-auto flex-1">
                                    <h5 id="leadStatus" 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>
                                    {% if lead.id_car_make.logo %}
                                        <img src="{{ lead.id_car_make.logo.url }}"
                                             alt="Car Make Logo"
                                             class="img-fluid rounded mb-2"
                                             style="width: 60px;
                                                    height: 60px">
                                    {% endif %}
                                    <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 id="assignedTo"
                                 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">{{ _("Assigned To") }}</h5>
                                    <div class="d-flex align-items-center">
                                        <div class="avatar avatar-tiny me-2">
                                            {% if lead.staff.logo %}
                                                <img class="avatar-img rounded-circle"
                                                     src="{{ lead.staff.thumbnail.url }}"
                                                     onerror="this.src='/static/img/brand/brand-logo.png'"
                                                     alt="Logo">
                                            {% endif %}
                                        </div>
                                        <small>
                                            {% if lead.staff == request.staff %}
                                                {{ _("Me") }}
                                            {% elif LANGUAGE_CODE == "en" %}
                                                {{ lead.staff.fullname|capfirst }}
                                            {% else %}
                                                {{ lead.staff.arabic_name }}
                                            {% endif %}
                                        </small>
                                    </div>
                                </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 id="currentStage" 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>
                {% comment %} <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> {% endcomment %}
                <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> {%trans "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 %}"
                                          hx-select-oob="#assignedTo:outerHTML,#toast-container:outerHTML"
                                          hx-swap="none"
                                          hx-on::after-request="{ resetSubmitButton(document.querySelector('#exampleModal button[type=submit]')); $('#exampleModal').modal('hide');}"
                                          method="post">
                                        {% csrf_token %}
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="exampleModalLabel">{%trans "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 id="timeline" 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>
                                                        {% elif activity.activity_type == "meeting" %}
                                                            <span class="fa-solid fa-users text-danger fs-8"></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 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 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 %}
                            {% comment %} <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> {% endcomment %}
                            <button class="btn btn-phoenix-primary btn-sm"
                                    type="button"
                                    data-bs-toggle="modal"
                                    data-bs-target="#emailModal"
                                    hx-get="{% url 'send_lead_email' request.dealer.slug lead.slug %}"
                                    hx-target="#emailModalBody"
                                    hx-select=".email-form"
                                    hx-swap="innerHTML">
                                <span class="fas fa-plus me-1"></span>{{ _("Send Email") }}
                            </button>
                        {% 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>{%trans "Call"%}</a>
                                                        </td>
                                                        <td class="status align-middle fw-semibold text-end py-2">
                                                            <span class="badge badge-phoenix fs-10 badge-phoenix-success">{%trans "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">{% trans "Subject" %}</th>
                                                    <th class="sort align-middle pe-3 text-uppercase"
                                                        scope="col"
                                                        data-sort="sent"
                                                        style="width:15%;
                                                               min-width:130px">{% trans "Sent by" %}</th>
                                                    <th class="sort align-middle text-start text-uppercase"
                                                        scope="col"
                                                        data-sort="date"
                                                        style="min-width:165px">{% trans "Date" %}</th>
                                                    <th class="sort align-middle pe-0 text-uppercase"
                                                        scope="col"
                                                        style="width:15%;
                                                               min-width:100px">{% trans "Action" %}</th>
                                                    <th class="sort align-middle text-end text-uppercase"
                                                        scope="col"
                                                        data-sort="status"
                                                        style="width:15%;
                                                               min-width:100px">{% trans "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">{%trans "Name"%}</th>
                                            <th class="sort align-middle pe-3 text"
                                                scope="col"
                                                data-sort="sent"
                                                style="width:15%;
                                                       min-width:400px">{%trans "Note"%}</th>
                                            <th class="sort align-middle text-start"
                                                scope="col"
                                                data-sort="date"
                                                style="min-width:100px">{%trans "Due Date"%}</th>
                                            <th class="sort align-middle text-start"
                                                scope="col"
                                                data-sort="date"
                                                style="min-width:100px">{%trans "Completed"%}</th>
                                        </tr>
                                    </thead>
                                    <tbody class="list taskTable" 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 mt-3">
                                <div class="col-auto d-flex">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {% include 'modal/delete_modal.html' %}
                <!-- add update Modal -->
            {% include "components/email_modal.html" %}
                <!-- 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 %}"
        }

        {% 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('actionTrackingForm').setAttribute('hx-boost', 'false');
            document.getElementById('leadId').value = leadId;
            document.getElementById('currentAction').value = currentAction;
            document.getElementById('nextAction').value = nextAction;
            document.getElementById('nextActionDate').value = nextActionDate;
            modal.show();
        }


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

  // Close modal after successful form submission
        document.body.addEventListener('htmx:afterSwap', function(evt) {
            if (evt.detail.target.id === 'main_content') {
                var modal = bootstrap.Modal.getInstance(document.getElementById('exampleModal'));
                if (modal) {
                    modal.hide();
                }
            }
        });

  // Cleanup modal backdrop if needed
        document.body.addEventListener('htmx:beforeSwap', function(evt) {
            if (evt.detail.target.id === 'main_content') {
                var backdrops = document.querySelectorAll('.modal-backdrop');
                backdrops.forEach(function(backdrop) {
                    backdrop.remove();
                });
            }
        });

    </script>
{% endblock customJS %}