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

{% block title %}{{ manager.get_full_name }} - Portfolio Details{% endblock %}

{% block content %}
<div class="min-h-screen bg-gray-50">
    <!-- Header -->
    <div class="bg-gradient-to-r from-blue-600 to-purple-600 text-white py-8">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between">
                <div class="flex items-center space-x-4">
                    <div class="w-16 h-16 bg-white bg-opacity-20 rounded-full flex items-center justify-center text-2xl font-bold">
                        {{ manager.first_name|first }}{{ manager.last_name|first }}
                    </div>
                    <div>
                        <h1 class="text-3xl font-bold">{{ manager.get_full_name }}</h1>
                        <p class="text-blue-100 mt-1">{{ manager.get_role_display }} - Portfolio Details</p>
                    </div>
                </div>
                <div class="flex space-x-3">
                    <a href="{% url 'users:portfolio_dashboard' %}" class="bg-blue-100 bg-opacity-20 hover:bg-opacity-30 px-6 py-3 rounded-lg transition-all duration-200 flex items-center space-x-2">
                        <span>←</span>
                        <span>Back to Dashboard</span>
                    </a>
                    <a href="{% url 'users:portfolio_analytics' %}" class="bg-blue-100 bg-opacity-20 hover:bg-opacity-30 px-6 py-3 rounded-lg transition-all duration-200 flex items-center space-x-2">
                        <span>📈</span>
                        <span>Analytics</span>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
        <!-- Manager Information Card -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 mb-8">
            <div class="px-6 py-4 border-b border-gray-200">
                <h2 class="text-xl font-semibold text-gray-800 flex items-center">
                    <span>👔</span>
                    Manager Information
                </h2>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                    <div class="text-center">
                        <div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-3">
                            <span>✉️</span>
                        </div>
                        <div class="text-sm text-gray-600">Email</div>
                        <div class="font-semibold text-gray-900">{{ manager.email|default:"Not provided" }}</div>
                    </div>
                    <div class="text-center">
                        <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3">
                            <span>📞</span>
                        </div>
                        <div class="text-sm text-gray-600">Phone</div>
                        <div class="font-semibold text-gray-900">{{ manager.phone_number|default:"Not provided" }}</div>
                    </div>
                    <div class="text-center">
                        <div class="w-20 h-20 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-3">
                            <span>📅</span>
                        </div>
                        <div class="text-sm text-gray-600">Joined</div>
                        <div class="font-semibold text-gray-900">{{ manager.date_joined|date:"M d, Y" }}</div>
                    </div>
                    <div class="text-center">
                        <div class="w-20 h-20 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-3">
                            <span>✓</span>
                        </div>
                        <div class="text-sm text-gray-600">Status</div>
                        <div class="font-semibold text-gray-900">{{ manager.get_status_display|default:"Active" }}</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Performance Statistics -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            <div class="bg-gradient-to-br from-blue-500 to-blue-600 text-white rounded-xl p-6 shadow-lg">
                <div class="flex items-center justify-between">
                    <div>
                        <div class="text-blue-100 text-sm font-medium">Total Clients</div>
                        <div class="text-3xl font-bold">{{ stats.total_clients|default:0 }}</div>
                    </div>
                    <div class="bg-blue-100 bg-opacity-20 p-3 rounded-full">
                        <span>👥</span>
                    </div>
                </div>
            </div>

            <div class="bg-gradient-to-br from-green-500 to-green-600 text-white rounded-xl p-6 shadow-lg">
                <div class="flex items-center justify-between">
                    <div>
                        <div class="text-green-100 text-sm font-medium">Active Loans</div>
                        <div class="text-3xl font-bold">{{ stats.active_loans|default:0 }}</div>
                    </div>
                    <div class="bg-white bg-opacity-20 p-3 rounded-full">
                        <span>💵</span>
                    </div>
                </div>
            </div>

            <div class="bg-gradient-to-br from-purple-500 to-purple-600 text-white rounded-xl p-6 shadow-lg">
                <div class="flex items-center justify-between">
                    <div>
                        <div class="text-purple-100 text-sm font-medium">Collection Rate</div>
                        <div class="text-3xl font-bold">{{ stats.collection_rate|floatformat:1|default:0 }}%</div>
                    </div>
                    <div class="bg-white bg-opacity-20 p-3 rounded-full">
                        <i class="fas fa-percentage text-2xl"></i>
                    </div>
                </div>
            </div>

            <div class="bg-gradient-to-br from-orange-500 to-red-500 text-white rounded-xl p-6 shadow-lg">
                <div class="flex items-center justify-between">
                    <div>
                        <div class="text-orange-100 text-sm font-medium">Total Disbursed</div>
                        <div class="text-2xl font-bold">KES {{ stats.total_disbursed|floatformat:0|default:0 }}</div>
                    </div>
                    <div class="bg-white bg-opacity-20 p-3 rounded-full">
                        <span>📈</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Performance Metrics -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
            <!-- Collection Performance -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-200">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-semibold text-gray-800 flex items-center">
                        <span>📊</span>
                        Collection Performance
                    </h3>
                </div>
                <div class="p-6">
                    <div class="space-y-4">
                        <div>
                            <div class="flex justify-between text-sm mb-2">
                                <span class="text-gray-600">Collection Rate</span>
                                <span class="font-semibold">{{ stats.collection_rate|floatformat:1|default:0 }}%</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-3">
                                <div class="bg-green-500 h-3 rounded-full" style="width: {{ stats.collection_rate|default:0 }}%"></div>
                            </div>
                        </div>
                        
                        {% if stats.default_rate %}
                        <div>
                            <div class="flex justify-between text-sm mb-2">
                                <span class="text-gray-600">Default Rate</span>
                                <span class="font-semibold text-red-600">{{ stats.default_rate|floatformat:1 }}%</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-3">
                                <div class="bg-red-500 h-3 rounded-full" style="width: {{ stats.default_rate }}%"></div>
                            </div>
                        </div>
                        {% endif %}

                        <div class="pt-4 border-t border-gray-200">
                            <div class="grid grid-cols-2 gap-4 text-center">
                                <div>
                                    <div class="text-2xl font-bold text-green-600">{{ stats.total_collected|floatformat:0|default:0 }}</div>
                                    <div class="text-sm text-gray-600">Total Collected</div>
                                </div>
                                <div>
                                    <div class="text-2xl font-bold text-blue-600">{{ stats.outstanding_amount|floatformat:0|default:0 }}</div>
                                    <div class="text-sm text-gray-600">Outstanding</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Loan Distribution -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-200">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-semibold text-gray-800 flex items-center">
                        <span>📊</span>
                        Loan Distribution
                    </h3>
                </div>
                <div class="p-6">
                    <div class="space-y-4">
                        {% if stats.loan_distribution %}
                        {% for product, count in stats.loan_distribution.items %}
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <div class="w-4 h-4 bg-blue-500 rounded-full mr-3"></div>
                                <span class="text-sm font-medium text-gray-700">{{ product|title }}</span>
                            </div>
                            <span class="text-sm font-semibold text-gray-900">{{ count }}</span>
                        </div>
                        {% endfor %}
                        {% else %}
                        <div class="text-center py-8">
                            <span>📊</span>
                            <p class="text-gray-600">No loan distribution data available</p>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <!-- Assigned Clients -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200">
            <div class="px-6 py-4 border-b border-gray-200">
                <h2 class="text-xl font-semibold text-gray-800 flex items-center">
                    <span>👥</span>
                    Assigned Clients ({{ clients_count }})
                </h2>
            </div>
            <div class="p-6">
                {% if clients %}
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    {% for client in clients %}
                    <div class="bg-gray-50 border border-gray-200 rounded-lg p-4 hover:bg-gray-100 transition-colors">
                        <div class="flex items-start justify-between">
                            <div class="flex-1">
                                <h4 class="font-semibold text-gray-900">{{ client.get_full_name }}</h4>
                                <div class="mt-2 space-y-1 text-sm text-gray-600">
                                    <div class="flex items-center">
                                        <span>✉️</span>
                                        <span>{{ client.email|default:"No email" }}</span>
                                    </div>
                                    <div class="flex items-center">
                                        <span>📞</span>
                                        <span>{{ client.phone_number|default:"No phone" }}</span>
                                    </div>
                                    {% if client.business_name %}
                                    <div class="flex items-center">
                                        <span>🏢</span>
                                        <span>{{ client.business_name }}</span>
                                    </div>
                                    {% endif %}
                                </div>
                                
                                <!-- Client Stats -->
                                <div class="mt-4 grid grid-cols-2 gap-2 text-xs">
                                    <div class="text-center bg-white rounded p-2">
                                        <div class="font-semibold text-blue-600">{{ client.loans.count }}</div>
                                        <div class="text-gray-600">Loans</div>
                                    </div>
                                    <div class="text-center bg-white rounded p-2">
                                        <div class="font-semibold text-green-600">{{ client.active_loans_count|default:0 }}</div>
                                        <div class="text-gray-600">Active</div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="ml-4 flex flex-col space-y-2">
                                <a href="{% url 'users:client_detail' client.id %}" 
                                   class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-xs font-semibold transition-colors text-center">
                                    View
                                </a>
                                <a href="{% url 'users:reassign_client' client.id %}" 
                                   class="bg-gray-600 hover:bg-gray-700 text-white px-3 py-1 rounded text-xs font-semibold transition-colors text-center">
                                    Reassign
                                </a>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>

                <!-- Pagination -->
                {% if is_paginated %}
                <div class="mt-8 flex justify-center">
                    <nav class="flex items-center space-x-2">
                        {% if page_obj.has_previous %}
                        <a href="?page=1" class="px-3 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 border border-gray-300 rounded-md hover:bg-gray-50">
                            First
                        </a>
                        <a href="?page={{ page_obj.previous_page_number }}" class="px-3 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 border border-gray-300 rounded-md hover:bg-gray-50">
                            Previous
                        </a>
                        {% endif %}

                        <span class="px-3 py-2 text-sm font-medium text-gray-700 bg-blue-50 border border-blue-200 rounded-md">
                            Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
                        </span>

                        {% if page_obj.has_next %}
                        <a href="?page={{ page_obj.next_page_number }}" class="px-3 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 border border-gray-300 rounded-md hover:bg-gray-50">
                            Next
                        </a>
                        <a href="?page={{ page_obj.paginator.num_pages }}" class="px-3 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 border border-gray-300 rounded-md hover:bg-gray-50">
                            Last
                        </a>
                        {% endif %}
                    </nav>
                </div>
                {% endif %}
                {% else %}
                <div class="text-center py-12">
                    <div class="w-24 h-24 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <span>👥</span>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-900 mb-2">No Clients Assigned</h3>
                    <p class="text-gray-600">This portfolio manager has no clients assigned yet.</p>
                    <div class="mt-6">
                        <a href="{% url 'users:assign_clients' %}" 
                           class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-semibold transition-colors">
                            Assign Clients
                        </a>
                    </div>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}