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

{% block title %}Profile - HAVEN GRAZURI ADVANCE{% endblock %}

{% block content %}
<div class="min-h-screen bg-gray-50">
    <div class="max-w-4xl mx-auto py-6 sm:px-6 lg:px-8">
        <!-- Page header -->
        <div class="mb-8">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-2xl font-semibold text-gray-900">My Profile</h1>
                    <p class="mt-2 text-sm text-gray-700">
                        View and manage your personal information and account settings.
                    </p>
                </div>
                <a href="{% url 'users:edit_profile' %}" 
                   class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                    <span>✏️</span>
                    Edit Profile
                </a>
            </div>
        </div>

        <!-- Profile Overview -->
        <div class="bg-white shadow sm:rounded-lg mb-8">
            <div class="px-4 py-5 sm:p-6">
                <div class="flex items-center space-x-6">
                    <div class="shrink-0">
                        <img class="h-24 w-24 object-cover rounded-full border-2 border-gray-300" 
                             src="{{ user.get_profile_image_url }}" alt="Profile image">
                    </div>
                    <div class="flex-1">
                        <h2 class="text-xl font-semibold text-gray-900">{{ user.get_full_name }}</h2>
                        <p class="text-sm text-gray-600">{{ user.get_role_display }}</p>
                        <div class="mt-2 flex items-center space-x-4">
                            <span class="inline-flex rounded-full px-2 text-xs font-semibold leading-5 
                                {% if user.status == 'active' %}bg-green-100 text-green-800
                                {% elif user.status == 'inactive' %}bg-gray-100 text-gray-800
                                {% elif user.status == 'suspended' %}bg-red-100 text-red-800
                                {% else %}bg-yellow-100 text-yellow-800{% endif %}">
                                {{ user.get_status_display }}
                            </span>
                            {% if user.is_verified %}
                            <span class="inline-flex items-center text-xs text-green-600">
                                <span>✓</span>
                                Verified
                            </span>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Profile Details -->
        <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
            <!-- Basic Information -->
            <div class="bg-white shadow sm:rounded-lg">
                <div class="px-4 py-5 sm:p-6">
                    <h3 class="text-lg font-medium text-gray-900 mb-4">
                        <span>👤</span>
                        Basic Information
                    </h3>
                    
                    <dl class="space-y-4">
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Full Name</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ user.get_full_name|default:"Not provided" }}</dd>
                        </div>
                        
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Username</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ user.username }}</dd>
                        </div>
                        
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Email</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ user.email|default:"Not provided" }}</dd>
                        </div>
                        
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Phone Number</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ user.phone_number|default:"Not provided" }}</dd>
                        </div>
                        
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Date Joined</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ user.date_joined|date:"M d, Y" }}</dd>
                        </div>
                        
                        {% if user.branch %}
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Assigned Branch</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ user.branch.name }}</dd>
                        </div>
                        {% endif %}
                        
                        {% if user.last_login %}
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Last Login</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ user.last_login|date:"M d, Y H:i" }}</dd>
                        </div>
                        {% endif %}
                    </dl>
                </div>
            </div>
            
            <!-- Account Information -->
            <div class="bg-white shadow sm:rounded-lg">
                <div class="px-4 py-5 sm:p-6">
                    <h3 class="text-lg font-medium text-gray-900 mb-4">
                        <i class="fas fa-shield-alt text-primary mr-2"></i>
                        Account Information
                    </h3>
                    
                    <dl class="space-y-4">
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Role</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ user.get_role_display }}</dd>
                        </div>
                        
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Status</dt>
                            <dd class="mt-1">
                                <span class="inline-flex rounded-full px-2 text-xs font-semibold leading-5 
                                    {% if user.status == 'active' %}bg-green-100 text-green-800
                                    {% elif user.status == 'inactive' %}bg-gray-100 text-gray-800
                                    {% elif user.status == 'suspended' %}bg-red-100 text-red-800
                                    {% else %}bg-yellow-100 text-yellow-800{% endif %}">
                                    {{ user.get_status_display }}
                                </span>
                            </dd>
                        </div>
                        
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Staff Member</dt>
                            <dd class="mt-1 text-sm text-gray-900">
                                {% if user.is_staff %}
                                    <span class="text-green-600">
                                        <span>✓</span>
                                        Yes
                                    </span>
                                {% else %}
                                    <span class="text-gray-600">
                                        <span>✕</span>
                                        No
                                    </span>
                                {% endif %}
                            </dd>
                        </div>
                        
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Superuser</dt>
                            <dd class="mt-1 text-sm text-gray-900">
                                {% if user.is_superuser %}
                                    <span class="text-green-600">
                                        <span>✓</span>
                                        Yes
                                    </span>
                                {% else %}
                                    <span class="text-gray-600">
                                        <span>✕</span>
                                        No
                                    </span>
                                {% endif %}
                            </dd>
                        </div>
                        
                        {% if user.verification_date %}
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Verified Date</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ user.verification_date|date:"M d, Y" }}</dd>
                        </div>
                        {% endif %}
                        
                        {% if user.verified_by %}
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Verified By</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ user.verified_by.get_full_name }}</dd>
                        </div>
                        {% endif %}
                        
                        {% if user.role == 'admin' and selected_branch %}
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Currently Selected Branch</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ selected_branch.name }}</dd>
                        </div>
                        {% endif %}
                    </dl>
                </div>
            </div>
        </div>
        
        <!-- Additional Information for Staff -->
        {% if user.is_staff %}
        <div class="mt-6">
            <div class="bg-white shadow sm:rounded-lg">
                <div class="px-4 py-5 sm:p-6">
                    <h3 class="text-lg font-medium text-gray-900 mb-4">
                        <i class="fas fa-briefcase text-primary mr-2"></i>
                        Staff Information
                    </h3>
                    
                    <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                        {% if user.role == 'loan_officer' or user.role == 'team_leader' %}
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Portfolio Clients</dt>
                            <dd class="mt-1 text-sm text-gray-900">
                                {{ user.portfolio_clients.count }} clients assigned
                            </dd>
                        </div>
                        {% endif %}
                        
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Account Created</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ user.created_at|date:"M d, Y H:i" }}</dd>
                        </div>
                        
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Last Updated</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ user.updated_at|date:"M d, Y H:i" }}</dd>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}