{% extends 'base.html' %}
{% load i18n static humanize %}
{% block title %}
    {% trans 'User Management' %}
{% endblock title %}
{% block content %}
    <section class="pt-5 pb-9">
        <div class="row">
            <h2 class="mb-4">
                <i class="fa-solid fa-people-roof me-1"></i> {% trans 'User Management' %}
            </h2>
            <div class="row g-3 justify-content-between mb-4">
                <div class="col-12">
                    <h3 class="mb-3">{% trans 'Customers' %}</h3>
                    <div class="table-responsive scrollbar mx-n1 px-1">
                        <table class="table align-items-center table-flush table-hover">
                            <thead>
                                <tr class="bg-body-highlight">
                                    <th class="sort white-space-nowrap align-middle text-uppercase ps-0"
                                        scope="col"
                                        style="width:20%">{{ _("First Name") }}</th>
                                    <th class="sort white-space-nowrap align-middle text-uppercase ps-0"
                                        scope="col"
                                        style="width:20%">{{ _("Last Name") }}</th>
                                    <th class="sort white-space-nowrap align-middle text-uppercase ps-0"
                                        scope="col"
                                        style="width:20%">{{ _("Email") }}</th>
                                    <th class="sort align-middle ps-4 pe-5 text-uppercase"
                                        scope="col"
                                        style="width:15%">{{ _("Status") }}</th>
                                    <th class="sort align-middle ps-4 pe-5 text-uppercase"
                                        scope="col"
                                        style="width:15%">{{ _("Created date") }}</th>
                                    <th class="sort text-end align-middle pe-0 ps-4" scope="col">{{ _("Actions") }}</th>
                                </tr>
                            </thead>
                            <tbody class="list" id="leal-tables-body">
                                {% for customer in customers %}
                                    <tr>
                                        <td class="ps-0">{{ customer.first_name }}</td>
                                        <td class="ps-0">{{ customer.last_name }}</td>
                                        <td class="ps-0">{{ customer.email }}</td>
                                        <td class="ps-0">
                                            {% if customer.active %}
                                                <span class="fas fa-check-circle text-success"></span> {{ _("Active") }}
                                            {% else %}
                                                <span class="fas fa-times-circle text-danger"></span> {{ _("Inactive") }}
                                            {% endif %}
                                        </td>
                                        <td class="ps-0">{{ customer.created|naturalday|capfirst }}</td>
                                        <td class="align-middle white-space-nowrap text-end">
                                            <div class="btn-reveal-trigger position-static">
                                                <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10"
                                                        type="button"
                                                        data-bs-toggle="dropdown"
                                                        data-boundary="window"
                                                        aria-haspopup="true"
                                                        aria-expanded="false"
                                                        data-bs-reference="parent">
                                                    <span class="fas fa-ellipsis-h fs-10"></span>
                                                </button>
                                                <div class="dropdown-menu dropdown-menu-end py-2">
                                                    <a href="{% url 'activate_account' request.dealer.slug 'customer' customer.slug %}">
                                                        <button class="dropdown-item  text-primary">{% trans "Activate" %}</button>
                                                    </a>
                                                    <div class="dropdown-divider"></div>
                                                    <a href="{% url 'permenant_delete_account' request.dealer.slug 'customer' customer.slug %}">
                                                        <button class="dropdown-item text-danger">{% trans "Permenantly Delete" %}</button>
                                                    </a>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                {% empty %}
                                    <td colspan="6" class="text-center">{% trans 'No data available in table' %}</td>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    <div class="d-flex justify-content-end mt-3">
                        <div class="d-flex">
                            {% if is_paginated %}
                                {% include 'partials/pagination.html' %}
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mt-5">
                <div class="col-12">
                    <h3 class="mb-3">{% trans 'Organizations' %}</h3>
                    <div class="table-responsive scrollbar mx-n1 px-1">
                        <table class="table align-items-center table-flush table-hover">
                            <thead>
                                <tr class="bg-body-highlight">
                                    <th class="sort white-space-nowrap align-middle text-uppercase ps-0"
                                        scope="col"
                                        style="width:20%">{{ _("Name") }}</th>
                                    <th class="sort white-space-nowrap align-middle text-uppercase ps-0"
                                        scope="col"
                                        style="width:20%">{{ _("Arabic Name") }}</th>
                                    <th class="sort white-space-nowrap align-middle text-uppercase ps-0"
                                        scope="col"
                                        style="width:20%">{{ _("Email") }}</th>
                                    <th class="sort align-middle ps-4 pe-5 text-uppercase"
                                        scope="col"
                                        style="width:15%">{{ _("Status") }}</th>
                                    <th class="sort align-middle ps-4 pe-5 text-uppercase"
                                        scope="col"
                                        style="width:15%">{{ _("Create date") }}</th>
                                    <th class="sort text-end align-middle pe-0 ps-4" scope="col">{{ _("Actions") }}</th>
                                </tr>
                            </thead>
                            <tbody class="list" id="leal-tables-body">
                                {% for organization in organizations %}
                                    <tr>
                                        <td class="ps-0">{{ organization.name }}</td>
                                        <td class="ps-0">{{ organization.arabic_name }}</td>
                                        <td class="ps-0">{{ organization.email }}</td>
                                        <td class="ps-0">
                                            {% if customer.active %}
                                                <span class="fas fa-check-circle text-success"></span> {{ _("Active") }}
                                            {% else %}
                                                <span class="fas fa-times-circle text-danger"></span> {{ _("Inactive") }}
                                            {% endif %}
                                        </td>
                                        <td class="ps-0">{{ organization.created|naturalday|capfirst }}</td>
                                        <td class="align-middle white-space-nowrap text-end">
                                            <div class="btn-reveal-trigger position-static">
                                                <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10"
                                                        type="button"
                                                        data-bs-toggle="dropdown"
                                                        data-boundary="window"
                                                        aria-haspopup="true"
                                                        aria-expanded="false"
                                                        data-bs-reference="parent">
                                                    <span class="fas fa-ellipsis-h fs-10"></span>
                                                </button>
                                                <div class="dropdown-menu dropdown-menu-end py-2">
                                                    <a href="{% url 'activate_account' request.dealer.slug 'organization' organization.slug %}">
                                                        <button class="dropdown-item  text-primary">{% trans "Activate" %}</button>
                                                    </a>
                                                    <div class="dropdown-divider"></div>
                                                    <a href="{% url 'permenant_delete_account' request.dealer.slug 'organization' organization.slug %}">
                                                        <button class="dropdown-item text-danger">{% trans "Permenantly Delete" %}</button>
                                                    </a>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                {% empty %}
                                    <td colspan="6" class="text-center">{% trans 'No data available in table' %}</td>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    <div class="d-flex justify-content-end mt-3">
                        <div class="d-flex">
                            {% if is_paginated %}
                                {% include 'partials/pagination.html' %}
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mt-5">
                <div class="col-12">
                    <h3 class="mb-3">{% trans 'Vendors' %}</h3>
                    <div class="table-responsive scrollbar mx-n1 px-1">
                        <table class="table align-items-center table-flush table-hover">
                            <thead>
                                <tr class="bg-body-highlight">
                                    <th class="sort white-space-nowrap align-middle text-uppercase ps-0"
                                        scope="col"
                                        style="width:20%">{{ _("Name") }}</th>
                                    <th class="sort white-space-nowrap align-middle text-uppercase ps-0"
                                        scope="col"
                                        style="width:20%">{{ _("Arabic Name") }}</th>
                                    <th class="sort white-space-nowrap align-middle text-uppercase ps-0"
                                        scope="col"
                                        style="width:20%">{{ _("Email") }}</th>
                                    <th class="sort white-space-nowrap align-middle text-uppercase ps-0"
                                        scope="col"
                                        style="width:15%">{{ _("Status") }}</th>
                                    <th class="sort align-middle ps-4 pe-5 text-uppercase"
                                        scope="col"
                                        style="width:15%">{{ _("Create date") }}</th>
                                    <th class="sort text-end align-middle pe-0 ps-4" scope="col">{{ _("Actions") }}</th>
                                </tr>
                            </thead>
                            <tbody class="list" id="leal-tables-body">
                                {% for vendor in vendors %}
                                    <tr>
                                        <td class="ps-0">{{ vendor.name }}</td>
                                        <td class="ps-0">{{ vendor.arabic_name }}</td>
                                        <td class="ps-0">{{ vendor.email }}</td>
                                        <td class="ps-0">
                                            {% if customer.active %}
                                                <span class="fas fa-check-circle text-success"></span> {{ _("Active") }}
                                            {% else %}
                                                <span class="fas fa-times-circle text-danger"></span> {{ _("Inactive") }}
                                            {% endif %}
                                        </td>
                                        <td class="ps-0">{{ vendor.created_at|naturalday|capfirst }}</td>
                                        <td class="align-middle white-space-nowrap text-end">
                                            <div class="btn-reveal-trigger position-static">
                                                <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10"
                                                        type="button"
                                                        data-bs-toggle="dropdown"
                                                        data-boundary="window"
                                                        aria-haspopup="true"
                                                        aria-expanded="false"
                                                        data-bs-reference="parent">
                                                    <span class="fas fa-ellipsis-h fs-10"></span>
                                                </button>
                                                <div class="dropdown-menu dropdown-menu-end py-2">
                                                    <a href="{% url 'activate_account' request.dealer.slug 'vendor' vendor.slug %}">
                                                        <button class="dropdown-item text-primary">{% trans "Activate" %}</button>
                                                    </a>
                                                    <div class="dropdown-divider"></div>
                                                    <a href="{% url 'permenant_delete_account' request.dealer.slug 'vendor' vendor.slug %}">
                                                        <button class="dropdown-item text-danger">{% trans "Permenantly Delete" %}</button>
                                                    </a>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                {% empty %}
                                    <td colspan="6" class="text-center">{% trans 'No data available in table' %}</td>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    <div class="d-flex justify-content-end mt-3">
                        <div class="d-flex">
                            {% if is_paginated %}
                                {% include 'partials/pagination.html' %}
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mt-5">
                <div class="col-12">
                    <h3 class="mb-3">{% trans 'Staff' %}</h3>
                    <div class="table-responsive scrollbar mx-n1 px-1">
                        <table class="table align-items-center table-flush table-hover">
                            <thead>
                                <tr class="bg-body-highlight">
                                    <th class="sort white-space-nowrap align-middle text-uppercase ps-0"
                                        scope="col"
                                        style="width:20%">{{ _("Name") }}</th>
                                    <th class="sort white-space-nowrap align-middle text-uppercase ps-0"
                                        scope="col"
                                        style="width:20%">{{ _("Arabic Name") }}</th>
                                    <th class="sort white-space-nowrap align-middle text-uppercase ps-0"
                                        scope="col"
                                        style="width:20%">{{ _("Email") }}</th>
                                    <th class="sort white-space-nowrap align-middle text-uppercase ps-0"
                                        scope="col"
                                        style="width:15%">{{ _("Status") }}</th>
                                    <th class="sort align-middle ps-4 pe-5 text-uppercase"
                                        scope="col"
                                        style="width:15%">{{ _("Create date") }}</th>
                                    <th class="sort text-end align-middle pe-0 ps-4" scope="col">{{ _("Actions") }}</th>
                                </tr>
                            </thead>
                            <tbody class="list" id="leal-tables-body">
                                {% for obj in staff %}
                                    <tr>
                                        <td class="ps-0">{{ obj.name }}</td>
                                        <td class="ps-0">{{ obj.arabic_name }}</td>
                                        <td class="ps-0">{{ obj.email }}</td>
                                        <td class="ps-0">
                                            {% if obj.active %}
                                                <span class="fas fa-check-circle text-success"></span> {{ _("Active") }}
                                            {% else %}
                                                <span class="fas fa-times-circle text-danger"></span> {{ _("Inactive") }}
                                            {% endif %}
                                        </td>
                                        <td class="ps-0">{{ obj.created|naturalday|capfirst }}</td>
                                        <td class="align-middle white-space-nowrap text-end">
                                            <div class="btn-reveal-trigger position-static">
                                                <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10"
                                                        type="button"
                                                        data-bs-toggle="dropdown"
                                                        data-boundary="window"
                                                        aria-haspopup="true"
                                                        aria-expanded="false"
                                                        data-bs-reference="parent">
                                                    <span class="fas fa-ellipsis-h fs-10"></span>
                                                </button>
                                                <div class="dropdown-menu dropdown-menu-end py-2">
                                                    <a href="{% url 'activate_account' request.dealer.slug 'staff' obj.slug %}">
                                                        <button class="dropdown-item  text-primary">{% trans "Activate" %}</button>
                                                    </a>
                                                    <div class="dropdown-divider"></div>
                                                    <a href="{% url 'permenant_delete_account' request.dealer.slug 'staff' obj.slug %}">
                                                        <button class="dropdown-item text-danger">{% trans "Permenantly Delete" %}</button>
                                                    </a>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                {% empty %}
                                    <td colspan="6" class="text-center">{% trans 'No data available in table' %}</td>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    <div class="d-flex justify-content-end mt-3">
                        <div class="d-flex">
                            {% if is_paginated %}
                                {% include 'partials/pagination.html' %}
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}