{% extends 'base.html' %}
{% load static %}
{% load i18n %}
{% block title %}
    {{user_.fullname}}
{% endblock title %}
{% block content %}
    <div class="container py-4">
        <div class="d-flex flex-wrap justify-content-between align-items-center mb-4">
            <div class="d-flex align-items-center mb-3 mb-md-0">
                <a href="{% url 'user_list' request.dealer.slug %}"
                   class="btn btn-phoenix-secondary btn-sm me-3">
                    <i class="fa-regular fa-circle-left me-2"></i>{% trans "Back to Staffs" %}
                </a>
                <h1 class="h4 fw-bold mb-0">{% trans "Staff Profile" %}</h1>
            </div>
            <div class="d-flex flex-wrap gap-2">
                <a href="{% url 'user_update' request.dealer.slug user_.slug %}"
                   class="btn btn-phoenix-primary btn-sm">
                    <i class="fa-solid fa-pen-to-square me-2"></i>{% trans "Edit Profile" %}
                </a>
                <button class="btn btn-phoenix-danger btn-sm delete-btn"
                        data-url="{% url 'user_delete' request.dealer.slug user_.slug %}"
                        data-message='{% trans "Are you sure you want to delete this user?" %}'
                        data-bs-toggle="modal"
                        data-bs-target="#deleteModal">
                    <i class="fas fa-trash-alt me-2"></i>{% trans "Delete" %}
                </button>
                <a href="{% url 'staff_password_reset' request.dealer.slug user_.pk %}"
                   class="btn btn-phoenix-danger">
                    <i class="fas fa-key me-2"></i>{{ _("Change Password") }}
                </a>
            </div>
        </div>
        <div class="row g-4">
            <div class="col-lg-4">
                <div class="card h-100 border-0 shadow-sm rounded-4 hover-lift">
                    <div class="card-body d-flex flex-column align-items-center justify-content-center p-4">
                        <div class="position-relative d-inline-block mb-3">
                            {% if user_.logo %}
                                <img class="rounded-circle border border-4 border-body-tertiary"
                                     src="{{ user_.logo.url }}"
                                     alt="{{ user_.fullname }}"
                                     style="object-fit: cover;
                                            width: 120px;
                                            height: 120px">
                            {% else %}
                                <div class="rounded-circle d-inline-flex align-items-center justify-content-center bg-primary text-white border border-4 border-body-tertiary"
                                     style="width: 120px;
                                            height: 120px;
                                            font-size: 3rem">{{ user_.fullname|first|upper }}</div>
                            {% endif %}
                        </div>
                        <h2 class="h5 fw-bold mb-1 text-center">{{ user_.name }}</h2>
                        <p class="small text-secondary mb-2">
                            <span class="badge rounded-pill bg-light text-dark fw-bold">{{ user_.groups.first.name|default:"No Role" }}</span>
                        </p>
                        <p class="small text-muted mb-3 text-center">
                            <a href="mailto:{{ user_.email }}">{{ user_.email }}</a>
                        </p>
                        <div class="d-grid w-40">
                            <a href="tel:{{ user_.phone_number }}"
                               class="btn  btn-sm rounded-pill d-flex align-items-center justify-content-center gap-2">
                                <i class="fas fa-phone-alt"></i><span>{{ user_.phone_number|default:"N/A" }}</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-8">
                <div class="card h-100 border-0 shadow-sm rounded-4">
                    <div class="card-body p-4">
                        <h5 class="mb-4 text-primary fw-bold">{% trans "Personal Information" %}</h5>
                        <dl class="row g-3 small">
                            <dt class="col-sm-3 text-muted">{% trans "Name (Arabic)" %}</dt>
                            <dd class="col-sm-9 fw-bold">
                                {{ user_.arabic_name|default:"N/A" }}
                            </dd>
                            <dt class="col-sm-3 text-muted">{% trans "Last Login" %}</dt>
                            <dd class="col-sm-9 fw-bold">
                                {{ user_.user.last_login|date:"D, M d, Y H:i"|default:"N/A" }}
                            </dd>
                            <dt class="col-sm-3 text-muted">{% trans "Status" %}</dt>
                            <dd class="col-sm-9">
                                {% if user_.user.is_active %}
                                    <span class="badge rounded-pill bg-success">{% trans "Active" %}</span>
                                {% else %}
                                    <span class="badge rounded-pill bg-danger">{% trans "Inactive" %}</span>
                                {% endif %}
                            </dd>
                        </dl>
                        <hr class="my-4">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h5 class="mb-0 text-primary fw-bold">{% trans "Assigned Groups" %}</h5>
                            <a class="btn btn-sm btn-phoenix-primary rounded-pill"
                               href="{% url 'user_groups' request.dealer.slug user_.slug %}">
                                <i class="fa-solid fa-users me-2"></i>{% trans "Manage Groups" %}
                            </a>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-hover table-borderless fs--1 mb-0">
                                <thead class="bg-body-tertiary">
                                    <tr>
                                        <th scope="col">{% trans 'Group Name'|capfirst %}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for group in user_.groups.all %}
                                        <tr class="align-middle">
                                            <td class="small text-dark">{{ group.name }}</td>
                                        </tr>
                                    {% empty %}
                                        <tr>
                                            <td class="text-secondary small">{% trans "This user is not assigned to any groups." %}</td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% include 'modal/delete_modal.html' %}
{% endblock %}