{% extends 'auth/dashboard.html' %}
{% load static %}

{% block title %}{{ group.name }} - Group Details{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    <!-- Header with Breadcrumb -->
    <div class="mb-6">
        <nav class="text-sm text-gray-600 mb-4">
            <a href="{% url 'contract_market_place:dashboard' %}" class="hover:text-tea-green-600">Dashboard</a>
            <span class="mx-2">/</span>
            <a href="{% url 'contract_market_place:my_groups' %}" class="hover:text-tea-green-600">My Groups</a>
            <span class="mx-2">/</span>
            <span class="text-gray-800 font-medium">{{ group.name }}</span>
        </nav>
        
        <div class="flex justify-between items-start">
            <div>
                <h1 class="text-3xl font-bold text-tea-green-800">{{ group.name }}</h1>
                <p class="text-gray-600 mt-2 flex items-center">
                    <i class="fas fa-map-marker-alt text-tea-green-600 mr-2"></i>
                    {{ group.location }}
                </p>
            </div>
            
            <div class="flex gap-3">
                <!-- Manage Button - Only for Signatories and Admins -->
                {% if can_manage %}
                <a href="{% url 'contract_market_place:manage_group' group.id %}" 
                   class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center shadow-md">
                    <i class="fas fa-cog mr-2"></i>
                    Manage Group
                </a>
                {% endif %}
                
                <a href="{% url 'contract_market_place:my_groups' %}" 
                   class="px-6 py-3 bg-gray-600 text-white rounded-lg hover:bg-gray-700 flex items-center">
                    <i class="fas fa-arrow-left mr-2"></i>
                    Back to Groups
                </a>
            </div>
        </div>
    </div>

    {% if messages %}
    <div class="mb-6 space-y-2">
        {% for message in messages %}
        <div class="p-4 rounded-lg bg-{% if message.tags == 'error' %}red{% elif message.tags == 'warning' %}yellow{% else %}green{% endif %}-100 border-l-4 border-{% if message.tags == 'error' %}red{% elif message.tags == 'warning' %}yellow{% else %}green{% endif %}-500 text-{% if message.tags == 'error' %}red{% elif message.tags == 'warning' %}yellow{% else %}green{% endif %}-800">
            {{ message }}
        </div>
        {% endfor %}
    </div>
    {% endif %}

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Main Content - Left Side (2 columns) -->
        <div class="lg:col-span-2 space-y-6">
            <!-- Group Stats -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div class="bg-white rounded-lg shadow-md p-6">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-gray-600 text-sm">Total Members</p>
                            <p class="text-3xl font-bold text-tea-green-700">{{ active_members_count }}</p>
                        </div>
                        <div class="w-12 h-12 bg-tea-green-100 rounded-full flex items-center justify-center">
                            <i class="fas fa-users text-tea-green-600 text-xl"></i>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-lg shadow-md p-6">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-gray-600 text-sm">Officials</p>
                            <p class="text-3xl font-bold text-blue-600">{{ officials_count }}</p>
                        </div>
                        <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
                            <i class="fas fa-user-tie text-blue-600 text-xl"></i>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-lg shadow-md p-6">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-gray-600 text-sm">Regular Members</p>
                            <p class="text-3xl font-bold text-purple-600">{{ regular_members_count }}</p>
                        </div>
                        <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center">
                            <i class="fas fa-user text-purple-600 text-xl"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Group Contracts Section -->
            <div class="bg-white rounded-lg shadow-md p-6">
                <div class="flex items-center justify-between mb-4">
                    <h2 class="text-xl font-bold text-gray-800 flex items-center">
                        <i class="fas fa-file-contract text-tea-green-600 mr-3"></i>
                        Group Contracts
                    </h2>
                    {% if can_manage or user.is_superuser or user.type == 'FIELD_OFFICER' %}
                    <a href="{% url 'contract_market_place:group_contract_create' %}?group_id={{ group.id }}" 
                       class="px-4 py-2 bg-tea-green-600 text-white rounded-lg hover:bg-tea-green-700 flex items-center text-sm">
                        <i class="fas fa-plus mr-2"></i>
                        Create Contract
                    </a>
                    {% endif %}
                </div>

                <!-- Display group contracts -->
                {% if group.contracts.exists %}
                <div class="space-y-3">
                    {% for contract in group.contracts.all|slice:":5" %}
                    <a href="{% url 'contract_market_place:group_contract_detail' contract.id %}" 
                       class="block p-4 bg-gray-50 rounded-lg hover:bg-gray-100 transition border border-gray-200 hover:border-tea-green-300">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="font-medium text-gray-800">Contract #{{ contract.id }}</p>
                                <p class="text-sm text-gray-600 mt-1">
                                    {{ contract.get_type_display }} • Created {{ contract.created_at|date:"M d, Y" }}
                                </p>
                                <p class="text-sm font-semibold text-tea-green-700 mt-1">
                                    KES {{ contract.total_amount|floatformat:2 }}
                                </p>
                            </div>
                            <div class="text-right">
                                <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full 
                                             {% if contract.status == 'ACTIVE' %}bg-green-100 text-green-800
                                             {% elif contract.status == 'COMPLETED' %}bg-blue-100 text-blue-800
                                             {% elif contract.status == 'DRAFT' %}bg-gray-100 text-gray-800
                                             {% elif contract.status == 'APPROVED' or contract.status == 'PARTIALLY_SIGNED' %}bg-yellow-100 text-yellow-800
                                             {% else %}bg-purple-100 text-purple-800{% endif %}">
                                    {{ contract.get_status_display }}
                                </span>
                                <p class="text-xs text-gray-500 mt-2">
                                    <i class="fas fa-pen-fancy mr-1"></i>
                                    {{ contract.signatures_count }}/3 signed
                                </p>
                            </div>
                        </div>
                    </a>
                    {% endfor %}
                </div>
                
                {% if group.contracts.count > 5 %}
                <div class="mt-4 text-center">
                    <a href="{% url 'contract_market_place:group_contract_list' %}?group={{ group.id }}" 
                       class="text-tea-green-600 hover:text-tea-green-700 font-medium">
                        View all {{ group.contracts.count }} contracts →
                    </a>
                </div>
                {% endif %}
                {% else %}
                <div class="text-center py-12">
                    <i class="fas fa-file-contract text-gray-300 text-5xl mb-4"></i>
                    <p class="text-gray-500 text-lg">No group contracts yet</p>
                    <p class="text-gray-400 text-sm mt-2">
                        {% if can_manage or user.is_superuser or user.type == 'FIELD_OFFICER' %}
                        Click "Create Contract" above to start a new group contract
                        {% else %}
                        Group signatories can create contracts for this group
                        {% endif %}
                    </p>
                </div>
                {% endif %}
            </div>

            <!-- Group Officials -->
            <div class="bg-white rounded-lg shadow-md p-6">
                <h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
                    <i class="fas fa-star text-yellow-500 mr-3"></i>
                    Group Officials
                </h2>
                <div class="space-y-4">
                    {% for membership in group.memberships.all %}
                        {% if membership.role.name in 'CHAIRPERSON,SECRETARY,TREASURER' and membership.is_active %}
                        <div class="flex items-center p-4 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg border border-blue-200">
                            <div class="w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center mr-4">
                                {% if membership.role.name == 'CHAIRPERSON' %}
                                    <i class="fas fa-crown text-white"></i>
                                {% elif membership.role.name == 'SECRETARY' %}
                                    <i class="fas fa-clipboard text-white"></i>
                                {% elif membership.role.name == 'TREASURER' %}
                                    <i class="fas fa-coins text-white"></i>
                                {% endif %}
                            </div>
                            <div class="flex-1">
                                <p class="font-bold text-gray-800">{{ membership.user.get_full_name }}</p>
                                <p class="text-sm text-blue-700 font-medium">{{ membership.role.get_name_display }}</p>
                                {% if membership.user.phone_number %}
                                <p class="text-sm text-gray-600 mt-1">
                                    <i class="fas fa-phone mr-1"></i>{{ membership.user.phone_number }}
                                </p>
                                {% endif %}
                            </div>
                            <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-xs font-semibold">
                                <i class="fas fa-pen-fancy mr-1"></i>Signatory
                            </span>
                        </div>
                        {% endif %}
                    {% endfor %}
                </div>
            </div>

            <!-- All Members -->
            <div class="bg-white rounded-lg shadow-md p-6">
                <h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
                    <i class="fas fa-users text-tea-green-600 mr-3"></i>
                    All Members ({{ active_members_count }})
                </h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                    {% for membership in group.memberships.all %}
                        {% if membership.is_active %}
                        <div class="flex items-center p-3 bg-gray-50 rounded-lg border border-gray-200">
                            <div class="w-10 h-10 bg-tea-green-100 rounded-full flex items-center justify-center mr-3">
                                <i class="fas fa-user text-tea-green-600"></i>
                            </div>
                            <div class="flex-1 min-w-0">
                                <p class="font-medium text-gray-800 truncate">{{ membership.user.get_full_name }}</p>
                                <p class="text-xs text-gray-600">{{ membership.role.get_name_display }}</p>
                            </div>
                        </div>
                        {% endif %}
                    {% endfor %}
                </div>
            </div>
        </div>

        <!-- Sidebar - Right Side (1 column) -->
        <div class="space-y-6">
            <!-- Group Information -->
            <div class="bg-white rounded-lg shadow-md p-6">
                <h3 class="text-lg font-bold text-gray-800 mb-4">Group Information</h3>
                <div class="space-y-3">
                    <div>
                        <p class="text-sm text-gray-600">Group Name</p>
                        <p class="font-medium text-gray-800">{{ group.name }}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-600">Location</p>
                        <p class="font-medium text-gray-800">{{ group.location }}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-600">Created</p>
                        <p class="font-medium text-gray-800">{{ group.created_at|date:"M d, Y" }}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-600">Status</p>
                        <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm font-semibold">
                            {% if group.is_active %}Active{% else %}Inactive{% endif %}
                        </span>
                    </div>
                    {% if group.registration_document %}
                    <div>
                        <p class="text-sm text-gray-600 mb-2">Registration Document</p>
                        <a href="{{ group.registration_document.url }}" target="_blank" 
                           class="flex items-center px-3 py-2 bg-blue-50 text-blue-700 rounded-lg hover:bg-blue-100">
                            <i class="fas fa-file-pdf mr-2"></i>
                            View Document
                        </a>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="bg-white rounded-lg shadow-md p-6">
                <h3 class="text-lg font-bold text-gray-800 mb-4">Quick Actions</h3>
                <div class="space-y-2">
                    <a href="{% url 'contract_market_place:group_contract_list' %}?group={{ group.id }}" 
                       class="block w-full px-4 py-3 bg-tea-green-50 text-tea-green-700 rounded-lg hover:bg-tea-green-100 text-center font-medium border border-tea-green-200">
                        <i class="fas fa-file-contract mr-2"></i>
                        View All Contracts
                    </a>
                    
                    {% if can_manage %}
                    <a href="{% url 'contract_market_place:manage_group' group.id %}" 
                       class="block w-full px-4 py-3 bg-blue-50 text-blue-700 rounded-lg hover:bg-blue-100 text-center font-medium border border-blue-200">
                        <i class="fas fa-users-cog mr-2"></i>
                        Manage Members
                    </a>
                    {% endif %}
                    
                    {% if can_manage or user.is_superuser or user.type == 'FIELD_OFFICER' %}
                    <a href="{% url 'contract_market_place:group_contract_create' %}?group_id={{ group.id }}" 
                       class="block w-full px-4 py-3 bg-purple-50 text-purple-700 rounded-lg hover:bg-purple-100 text-center font-medium border border-purple-200">
                        <i class="fas fa-plus-circle mr-2"></i>
                        New Group Contract
                    </a>
                    {% endif %}
                </div>
            </div>

            <!-- Your Role (if member) -->
            {% if membership %}
            <div class="bg-gradient-to-br from-tea-green-50 to-blue-50 rounded-lg shadow-md p-6 border-2 border-tea-green-200">
                <h3 class="text-lg font-bold text-gray-800 mb-3">Your Role</h3>
                <div class="flex items-center">
                    <div class="w-12 h-12 bg-tea-green-600 rounded-full flex items-center justify-center mr-3">
                        {% if membership.role.name == 'CHAIRPERSON' %}
                            <i class="fas fa-crown text-white text-xl"></i>
                        {% elif membership.role.name == 'SECRETARY' %}
                            <i class="fas fa-clipboard text-white text-xl"></i>
                        {% elif membership.role.name == 'TREASURER' %}
                            <i class="fas fa-coins text-white text-xl"></i>
                        {% else %}
                            <i class="fas fa-user text-white text-xl"></i>
                        {% endif %}
                    </div>
                    <div>
                        <p class="font-bold text-gray-800">{{ membership.role.get_name_display }}</p>
                        <p class="text-sm text-gray-600">Member since {{ membership.joined_at|date:"M Y" }}</p>
                    </div>
                </div>
                {% if membership.role.can_manage_group %}
                <div class="mt-4 p-3 bg-white rounded-lg">
                    <p class="text-sm text-gray-700">
                        <i class="fas fa-info-circle text-blue-600 mr-2"></i>
                        As a {{ membership.role.get_name_display|lower }}, you can manage this group and sign contracts.
                    </p>
                </div>
                {% endif %}
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}