{% extends "base.html" %}

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

{% block content %}
<div class="min-h-screen bg-gradient-to-br from-green-50 to-emerald-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-green-600 via-emerald-600 to-teal-700 flex items-center justify-center">
            <div class="text-center text-white">
                <div class="space-y-4">
                    <div class="w-24 h-24 mx-auto bg-white bg-opacity-20 rounded-full flex items-center justify-center">
                        <i class="fas fa-piggy-bank text-4xl"></i>
                    </div>
                    <h3 class="text-2xl font-bold">Your Savings Journey</h3>
                    <p class="text-lg text-green-100 max-w-md">
                        Track your contributions, monitor progress, and achieve your financial goals together with your group.
                    </p>
                    <div class="flex justify-center space-x-6 mt-8">
                        <div class="text-center">
                            <div class="text-2xl font-bold">৳25K</div>
                            <div class="text-sm text-green-200">Your Savings</div>
                        </div>
                        <div class="text-center">
                            <div class="text-2xl font-bold">95%</div>
                            <div class="text-sm text-green-200">Goal Progress</div>
                        </div>
                        <div class="text-center">
                            <div class="text-2xl font-bold">12</div>
                            <div class="text-sm text-green-200">Months Active</div>
                        </div>
                    </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-green-600 to-emerald-600 rounded-2xl shadow-lg mb-6">
                    <i class="fas fa-user 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">Member Portal</p>
                </div>
                
                <div>
                    <h2 class="text-2xl font-bold text-gray-900 mb-2">
                        Welcome back, Member
                    </h2>
                    <p class="text-sm text-gray-600">
                        Access your savings dashboard and track your progress
                    </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">
                            Username or Member ID
                        </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-green-500 focus:border-transparent transition-all duration-200 shadow-sm"
                                   placeholder="Enter username or member ID (e.g., M001)">
                        </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-green-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 Your 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-users h-5 w-5 text-gray-400"></i>
                            </div>
                            <input type="text" id="group_search" placeholder="Search and select your 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-green-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-green-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 your group to access your member dashboard
                        </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-green-600 focus:ring-green-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-green-600 hover:text-green-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-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-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-user h-5 w-5 text-green-200 group-hover:text-green-100 transition-colors duration-200"></i>
                            </span>
                            Access Member 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 grid grid-cols-2 gap-3">
                        <button onclick="window.location.href='/'" 
                           style="position: relative; z-index: 50; cursor: pointer;"
                           class="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>
                            Home
                        </button>
                        <button onclick="window.location.href='/admin/login'" 
                           style="position: relative; z-index: 50; cursor: pointer;"
                           class="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-user-shield mr-2 h-4 w-4 text-gray-500"></i>
                            Admin
                        </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 - user must choose a group
    document.getElementById('group_search').placeholder = 'Search and select your group...';
});
</script>
{% endblock %}