{% extends "base.html" %}

{% block title %}Admin Portal - Savly{% endblock %}

{% block content %}
<div class="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50 flex items-center justify-center p-4">
    <div class="w-full max-w-6xl flex rounded-3xl shadow-2xl bg-white overflow-hidden">
        <!-- Left side - Background -->
        <div class="hidden lg:block relative w-1/2 overflow-hidden">
            <div class="absolute inset-0 h-full w-full bg-gradient-to-br from-blue-600 via-purple-600 to-indigo-700 flex items-center justify-center">
                <!-- Geometric Background Pattern -->
                <div class="absolute inset-0 opacity-20">
                    <!-- Large decorative circles -->
                    <div class="absolute top-10 right-10 w-40 h-40 bg-white rounded-full opacity-10 animate-pulse"></div>
                    <div class="absolute bottom-20 left-10 w-32 h-32 bg-white rounded-full opacity-15 animate-pulse delay-1000"></div>
                    
                    <!-- SVG Pattern -->
                    <svg class="absolute inset-0 w-full h-full" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
                        <!-- Hexagonal pattern -->
                        <defs>
                            <pattern id="hexPattern" x="0" y="0" width="60" height="60" patternUnits="userSpaceOnUse">
                                <polygon points="30,5 50,20 50,40 30,55 10,40 10,20" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/>
                            </pattern>
                        </defs>
                        <rect width="100%" height="100%" fill="url(#hexPattern)"/>
                        
                        <!-- Floating geometric shapes -->
                        <circle cx="80" cy="100" r="8" fill="rgba(255,255,255,0.2)" class="animate-pulse">
                            <animateTransform attributeName="transform" type="translate" values="0,0; 10,5; 0,0" dur="4s" repeatCount="indefinite"/>
                        </circle>
                        <circle cx="320" cy="180" r="6" fill="rgba(255,255,255,0.3)" class="animate-pulse delay-1000">
                            <animateTransform attributeName="transform" type="translate" values="0,0; -5,8; 0,0" dur="3s" repeatCount="indefinite"/>
                        </circle>
                        <circle cx="150" cy="300" r="10" fill="rgba(255,255,255,0.15)" class="animate-pulse delay-2000">
                            <animateTransform attributeName="transform" type="translate" values="0,0; 8,-3; 0,0" dur="5s" repeatCount="indefinite"/>
                        </circle>
                    </svg>
                </div>
                
                <!-- Main Content -->
                <div class="relative z-10 text-center text-white px-8">
                    <div class="space-y-8">
                        <!-- Main Illustration -->
                        <div class="w-40 h-40 mx-auto relative">
                            <!-- Dashboard illustration using CSS -->
                            <div class="w-full h-full bg-white bg-opacity-20 rounded-3xl backdrop-blur-sm border border-white border-opacity-30 flex items-center justify-center relative overflow-hidden">
                                <!-- Dashboard screen -->
                                <div class="absolute inset-4 bg-white bg-opacity-10 rounded-2xl flex flex-col">
                                    <!-- Header bar -->
                                    <div class="h-3 bg-white bg-opacity-20 rounded-t-2xl mb-2"></div>
                                    <!-- Chart bars -->
                                    <div class="flex-1 flex items-end justify-center space-x-1 p-2">
                                        <div class="w-2 bg-blue-300 rounded-t" style="height: 60%"></div>
                                        <div class="w-2 bg-purple-300 rounded-t" style="height: 80%"></div>
                                        <div class="w-2 bg-indigo-300 rounded-t" style="height: 45%"></div>
                                        <div class="w-2 bg-blue-300 rounded-t" style="height: 70%"></div>
                                        <div class="w-2 bg-purple-300 rounded-t" style="height: 90%"></div>
                                    </div>
                                </div>
                                <!-- Floating admin icon -->
                                <div class="absolute -top-2 -right-2 w-8 h-8 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-full flex items-center justify-center">
                                    <i class="fas fa-crown text-white text-xs"></i>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Content -->
                        <div>
                            <h3 class="text-3xl font-bold mb-4">Administrative Dashboard</h3>
                            <p class="text-lg text-blue-100 max-w-md mx-auto leading-relaxed">
                                Take control of your group's financial journey with powerful administrative tools, real-time analytics, and comprehensive member management.
                            </p>
                        </div>
                        
                        <!-- Interactive Stats -->
                        <div class="grid grid-cols-3 gap-4 mt-10">
                            <div class="text-center bg-white bg-opacity-10 rounded-xl p-4 backdrop-blur-sm border border-white border-opacity-20 hover:bg-opacity-20 transition-all duration-300">
                                <div class="w-8 h-8 mx-auto mb-2 bg-green-400 rounded-full flex items-center justify-center">
                                    <i class="fas fa-users text-white text-xs"></i>
                                </div>
                                <div class="text-2xl font-bold mb-1">23</div>
                                <div class="text-xs text-blue-200 font-medium">Active Members</div>
                            </div>
                            <div class="text-center bg-white bg-opacity-10 rounded-xl p-4 backdrop-blur-sm border border-white border-opacity-20 hover:bg-opacity-20 transition-all duration-300">
                                <div class="w-8 h-8 mx-auto mb-2 bg-yellow-400 rounded-full flex items-center justify-center">
                                    <i class="fas fa-coins text-white text-xs"></i>
                                </div>
                                <div class="text-2xl font-bold mb-1">৳28L</div>
                                <div class="text-xs text-blue-200 font-medium">Total Saved</div>
                            </div>
                            <div class="text-center bg-white bg-opacity-10 rounded-xl p-4 backdrop-blur-sm border border-white border-opacity-20 hover:bg-opacity-20 transition-all duration-300">
                                <div class="w-8 h-8 mx-auto mb-2 bg-purple-400 rounded-full flex items-center justify-center">
                                    <i class="fas fa-chart-line text-white text-xs"></i>
                                </div>
                                <div class="text-2xl font-bold mb-1">389</div>
                                <div class="text-xs text-blue-200 font-medium">Contributions</div>
                            </div>
                        </div>
                        
                        <!-- Feature Pills -->
                        <div class="flex flex-wrap justify-center gap-2 mt-8">
                            <span class="bg-white bg-opacity-20 text-xs px-3 py-1 rounded-full border border-white border-opacity-30">
                                <i class="fas fa-shield-alt mr-1"></i>Secure Access
                            </span>
                            <span class="bg-white bg-opacity-20 text-xs px-3 py-1 rounded-full border border-white border-opacity-30">
                                <i class="fas fa-chart-bar mr-1"></i>Real-time Data
                            </span>
                            <span class="bg-white bg-opacity-20 text-xs px-3 py-1 rounded-full border border-white border-opacity-30">
                                <i class="fas fa-mobile-alt mr-1"></i>Mobile Ready
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Right side - Login Form -->
        <div class="w-full lg:w-1/2 flex flex-col justify-center py-12 px-8 lg:px-16">
            <div class="w-full max-w-sm mx-auto">
            <!-- Logo and Header -->
            <div class="text-center mb-8">
                <div class="mx-auto flex items-center justify-center w-20 h-20 bg-gradient-to-br from-blue-600 to-purple-600 rounded-2xl shadow-lg mb-6">
                    <i class="fas fa-shield-alt text-white text-2xl"></i>
                </div>
                
                <div class="mb-6">
                    <h1 class="text-3xl font-bold text-gray-900 mb-2">Savly</h1>
                    <p class="text-sm text-gray-500 font-medium">Administrative Portal</p>
                </div>
                
                <div>
                    <h2 class="text-2xl font-bold text-gray-900 mb-2">
                        Welcome back, Admin
                    </h2>
                    <p class="text-sm text-gray-600">
                        Sign in to manage your group savings platform
                    </p>
                </div>
            </div>

            <!-- Login Form -->
            <div>
                <form class="space-y-6" method="POST">
                    <div>
                        <label for="username" class="block text-sm font-semibold text-gray-700 mb-2">
                            Admin Username
                        </label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                <i class="fas fa-user h-5 w-5 text-gray-400"></i>
                            </div>
                            <input id="username" name="username" type="text" autocomplete="username" required 
                                   class="block w-full pl-12 pr-4 py-3 border border-gray-200 rounded-xl text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 shadow-sm"
                                   placeholder="Enter your admin username">
                        </div>
                    </div>

                    <div>
                        <label for="password" class="block text-sm font-semibold text-gray-700 mb-2">
                            Password
                        </label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                <i class="fas fa-lock h-5 w-5 text-gray-400"></i>
                            </div>
                            <input id="password" name="password" type="password" autocomplete="current-password" required 
                                   class="block w-full pl-12 pr-4 py-3 border border-gray-200 rounded-xl text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 shadow-sm"
                                   placeholder="Enter your secure password">
                        </div>
                    </div>

                    <!-- Group Selection with Search -->
                    <div>
                        <label for="group_search" class="block text-sm font-semibold text-gray-700 mb-2">
                            Select Group/Organization
                        </label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                <i class="fas fa-layer-group h-5 w-5 text-gray-400"></i>
                            </div>
                            <input type="text" id="group_search" placeholder="Search and select a group..." 
                                   class="block w-full pl-12 pr-10 py-3 border border-gray-200 rounded-xl text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 shadow-sm"
                                   onclick="toggleGroupDropdown()" 
                                   onkeyup="filterGroups(this.value)"
                                   autocomplete="off">
                            <div class="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none">
                                <i class="fas fa-chevron-down h-4 w-4 text-gray-400" id="dropdown_arrow"></i>
                            </div>
                            
                            <!-- Hidden input for form submission -->
                            <input type="hidden" name="group_code" id="group_code" value="">
                            
                            <!-- Dropdown Options -->
                            <div id="group_dropdown" class="hidden absolute z-50 w-full mt-1 bg-white border border-gray-200 rounded-xl shadow-lg max-h-60 overflow-y-auto">
                                {% for group in groups %}
                                <div class="group-option p-3 hover:bg-blue-50 cursor-pointer border-b border-gray-100 last:border-b-0" 
                                     onclick="selectGroup('{{ group.group_code }}', '{{ group.name }} ({{ group.group_code }})')">
                                    <div class="font-medium text-gray-900">{{ group.name }}</div>
                                    <div class="text-xs text-gray-500">Group Code: {{ group.group_code }}</div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                        <p class="text-xs text-gray-500 mt-1">
                            Search and select a specific group to manage
                        </p>
                    </div>

                    <div class="flex items-center justify-between py-2">
                        <div class="flex items-center">
                            <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                            <label for="remember-me" class="ml-3 block text-sm font-medium text-gray-700">
                                Keep me signed in
                            </label>
                        </div>

                        <div class="text-sm">
                            <a href="#" class="font-semibold text-blue-600 hover:text-blue-500 transition-colors duration-200">
                                Forgot password?
                            </a>
                        </div>
                    </div>

                    <div class="pt-2">
                        <button type="submit" class="group relative w-full flex justify-center py-3.5 px-4 border border-transparent text-sm font-semibold rounded-xl text-white bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5">
                            <span class="absolute left-0 inset-y-0 flex items-center pl-4">
                                <i class="fas fa-shield-alt h-5 w-5 text-blue-200 group-hover:text-blue-100 transition-colors duration-200"></i>
                            </span>
                            Access Admin Dashboard
                        </button>
                    </div>
                </form>

                <div class="mt-8">
                    <div class="relative">
                        <div class="absolute inset-0 flex items-center">
                            <div class="w-full border-t border-gray-200" />
                        </div>
                        <div class="relative flex justify-center text-sm">
                            <span class="px-4 bg-white text-gray-500 font-medium">Need help?</span>
                        </div>
                    </div>

                    <div class="mt-6">
                        <button onclick="window.location.href='/'" 
                           style="position: relative; z-index: 50; cursor: pointer;"
                           class="w-full inline-flex justify-center py-3 px-4 border border-gray-200 rounded-xl shadow-sm bg-gray-50 text-sm font-semibold text-gray-600 hover:bg-gray-100 hover:border-gray-300 transition-all duration-200">
                            <i class="fas fa-arrow-left mr-2 h-4 w-4 text-gray-500"></i>
                            Return to Homepage
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function toggleGroupDropdown() {
    const dropdown = document.getElementById('group_dropdown');
    const arrow = document.getElementById('dropdown_arrow');
    
    if (dropdown.classList.contains('hidden')) {
        dropdown.classList.remove('hidden');
        arrow.classList.remove('fa-chevron-down');
        arrow.classList.add('fa-chevron-up');
    } else {
        dropdown.classList.add('hidden');
        arrow.classList.remove('fa-chevron-up');
        arrow.classList.add('fa-chevron-down');
    }
}

function selectGroup(groupCode, groupName) {
    document.getElementById('group_search').value = groupName;
    document.getElementById('group_code').value = groupCode;
    
    const dropdown = document.getElementById('group_dropdown');
    const arrow = document.getElementById('dropdown_arrow');
    
    dropdown.classList.add('hidden');
    arrow.classList.remove('fa-chevron-up');
    arrow.classList.add('fa-chevron-down');
}

function filterGroups(searchText) {
    const options = document.querySelectorAll('.group-option');
    const searchLower = searchText.toLowerCase();
    
    options.forEach(option => {
        const text = option.textContent.toLowerCase();
        if (text.includes(searchLower)) {
            option.style.display = 'block';
        } else {
            option.style.display = 'none';
        }
    });
    
    // Show dropdown if there's text
    const dropdown = document.getElementById('group_dropdown');
    if (searchText.length > 0 && dropdown.classList.contains('hidden')) {
        toggleGroupDropdown();
    }
}

// Close dropdown when clicking outside
document.addEventListener('click', function(event) {
    const searchBox = document.getElementById('group_search');
    const dropdown = document.getElementById('group_dropdown');
    const arrow = document.getElementById('dropdown_arrow');
    
    if (!searchBox.contains(event.target) && !dropdown.contains(event.target)) {
        dropdown.classList.add('hidden');
        arrow.classList.remove('fa-chevron-up');
        arrow.classList.add('fa-chevron-down');
    }
});

// Form validation
document.querySelector('form').addEventListener('submit', function(e) {
    const groupCode = document.getElementById('group_code').value;
    const groupSearch = document.getElementById('group_search').value;
    
    if (!groupCode || !groupSearch) {
        e.preventDefault();
        alert('Please select a group to continue');
        document.getElementById('group_search').focus();
        return false;
    }
});

// Set default selection
document.addEventListener('DOMContentLoaded', function() {
    // No default selection - admin must choose a group
    document.getElementById('group_search').placeholder = 'Search and select a group...';
});
</script>
{% endblock %}