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

{% block title %}{% trans "My Profile" %} - {{ site_settings.business_name }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row mb-4 align-items-center">
        <div class="col-md-6">
            <h1 class="h3 mb-0 text-gray-800">{% trans "My Profile" %}</h1>
            <p class="text-muted">{% trans "Manage your personal information and account security." %}</p>
        </div>
    </div>

    {% if messages %}
    <div class="row">
        <div class="col-12">
            {% for message in messages %}
            <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <div class="row">
        <div class="col-lg-4">
            <!-- Profile Card -->
            <div class="card shadow-sm border-0 rounded-4 glassmorphism mb-4">
                <div class="card-body text-center py-5">
                    <div class="position-relative d-inline-block mb-4">
                        {% if user.profile.image %}
                            <img src="{{ user.profile.image.url }}" alt="{{ user.username }}" class="rounded-circle img-thumbnail shadow-sm" style="width: 150px; height: 150px; object-fit: cover;">
                        {% else %}
                            <div class="bg-primary-subtle text-primary rounded-circle d-flex align-items-center justify-content-center mx-auto shadow-sm" style="width: 150px; height: 150px;">
                                <i class="bi bi-person-fill" style="font-size: 5rem;"></i>
                            </div>
                        {% endif %}
                    </div>
                    <h4 class="fw-bold mb-1">{{ user.get_full_name|default:user.username }}</h4>
                    <p class="text-muted mb-3">{{ user.email|default:"No email provided" }}</p>
                    <div class="d-flex justify-content-center gap-2">
                        {% for group in user.groups.all %}
                            <span class="badge bg-primary-soft text-primary px-3 rounded-pill">{{ group.name }}</span>
                        {% empty %}
                            <span class="badge bg-secondary-soft text-secondary px-3 rounded-pill">{% trans "User" %}</span>
                        {% endfor %}
                    </div>
                </div>
                <div class="card-footer bg-transparent border-0 pb-4 px-4">
                    <div class="d-flex justify-content-between small text-muted mb-2">
                        <span>{% trans "Joined" %}</span>
                        <span class="fw-bold text-dark">{{ user.date_joined|date:"M Y" }}</span>
                    </div>
                    <div class="d-flex justify-content-between small text-muted">
                        <span>{% trans "Last Login" %}</span>
                        <span class="fw-bold text-dark">{{ user.last_login|date:"d M, H:i"|default:"Never" }}</span>
                    </div>
                </div>
            </div>

            <!-- Security Tip -->
            <div class="card shadow-sm border-0 rounded-4 glassmorphism bg-light">
                <div class="card-body py-4">
                    <div class="d-flex align-items-center mb-3">
                        <div class="bg-warning-subtle text-warning p-2 rounded-3 me-3">
                            <i class="bi bi-shield-lock fs-4"></i>
                        </div>
                        <h6 class="fw-bold mb-0">{% trans "Security Tip" %}</h6>
                    </div>
                    <p class="small text-muted mb-0">
                        {% trans "Always use a strong, unique password for your account. Avoid using the same password across multiple sites." %}
                    </p>
                </div>
            </div>
        </div>

        <div class="col-lg-8">
            <div class="card shadow-sm border-0 rounded-4 glassmorphism">
                <div class="card-header bg-transparent border-0 py-4 px-4">
                    <ul class="nav nav-tabs nav-tabs-custom border-0" id="profileTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active fw-bold px-4 border-0" id="edit-tab" data-bs-toggle="tab" data-bs-target="#edit" type="button" role="tab">
                                <i class="bi bi-person-lines-fill me-2"></i>{% trans "Edit Profile" %}
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link fw-bold px-4 border-0" id="security-tab" data-bs-toggle="tab" data-bs-target="#security" type="button" role="tab">
                                <i class="bi bi-lock me-2"></i>{% trans "Security" %}
                            </button>
                        </li>
                    </ul>
                </div>
                <div class="card-body p-4">
                    <div class="tab-content" id="profileTabsContent">
                        <!-- Edit Profile Tab -->
                        <div class="tab-pane fade show active" id="edit" role="tabpanel">
                            <form method="post" enctype="multipart/form-data">
                                {% csrf_token %}
                                <div class="row g-4">
                                    <div class="col-md-12">
                                        <label class="form-label small fw-bold text-uppercase text-muted">{% trans "Profile Picture" %}</label>
                                        <div class="d-flex align-items-center gap-3">
                                            <input type="file" name="image" class="form-control" accept="image/*">
                                        </div>
                                        <div class="form-text">{% trans "Recommended: Square image, max 2MB." %}</div>
                                    </div>

                                    <div class="col-md-6">
                                        <label class="form-label small fw-bold text-uppercase text-muted">{% trans "First Name" %}</label>
                                        <input type="text" name="first_name" class="form-control rounded-3" value="{{ user.first_name }}">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label small fw-bold text-uppercase text-muted">{% trans "Last Name" %}</label>
                                        <input type="text" name="last_name" class="form-control rounded-3" value="{{ user.last_name }}">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label small fw-bold text-uppercase text-muted">{% trans "Email Address" %}</label>
                                        <input type="email" name="email" class="form-control rounded-3" value="{{ user.email }}">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label small fw-bold text-uppercase text-muted">{% trans "Phone Number" %}</label>
                                        <input type="text" name="phone" class="form-control rounded-3" value="{{ user.profile.phone }}">
                                    </div>
                                    <div class="col-12">
                                        <label class="form-label small fw-bold text-uppercase text-muted">{% trans "Bio" %}</label>
                                        <textarea name="bio" class="form-control rounded-3" rows="3" placeholder="{% trans "A little bit about yourself..." %}">{{ user.profile.bio }}</textarea>
                                    </div>
                                </div>
                                <div class="mt-5 pt-3 border-top d-flex justify-content-end">
                                    <button type="submit" class="btn btn-primary px-5 py-2 rounded-3 fw-bold">
                                        <i class="bi bi-save me-2"></i> {% trans "Update Profile" %}
                                    </button>
                                </div>
                            </form>
                        </div>

                        <!-- Security Tab -->
                        <div class="tab-pane fade" id="security" role="tabpanel">
                            <form method="post">
                                {% csrf_token %}
                                <div class="row g-4">
                                    <div class="col-md-12">
                                        <div class="alert alert-info border-0 rounded-4">
                                            <i class="bi bi-info-circle-fill me-2"></i>
                                            {% trans "Leave password fields blank if you don't want to change your password." %}
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label small fw-bold text-uppercase text-muted">{% trans "New Password" %}</label>
                                        <input type="password" name="password" class="form-control rounded-3" minlength="8">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label small fw-bold text-uppercase text-muted">{% trans "Confirm New Password" %}</label>
                                        <input type="password" name="confirm_password" class="form-control rounded-3" minlength="8">
                                    </div>
                                </div>
                                <div class="mt-5 pt-3 border-top d-flex justify-content-end">
                                    <button type="submit" class="btn btn-primary px-5 py-2 rounded-3 fw-bold">
                                        <i class="bi bi-key me-2"></i> {% trans "Change Password" %}
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<style>
    .nav-tabs-custom .nav-link {
        color: #6c757d;
        background: transparent;
        border-bottom: 3px solid transparent !important;
        margin-bottom: -1px;
    }
    .nav-tabs-custom .nav-link.active {
        color: var(--bs-primary);
        border-bottom: 3px solid var(--bs-primary) !important;
        background: transparent;
    }
    .bg-primary-soft { background-color: rgba(13, 110, 253, 0.1); }
    .bg-secondary-soft { background-color: rgba(108, 117, 125, 0.1); }
</style>
{% endblock %}