{% extends "base.html" %}

{% block title %}Request Loan - {{ current_user.full_name }}{% endblock %}

{% block content %}
<div class="min-h-screen bg-gray-50">
    <!-- Enhanced Navigation -->
    <nav class="bg-white shadow-sm border-b border-gray-200">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <h1 class="text-xl font-semibold text-gray-900">
                        <i class="fas fa-hand-holding-usd text-blue-600 mr-2"></i>
                        Request Loan
                    </h1>
                </div>
                <div class="flex items-center space-x-4">
                    <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-user text-green-600"></i>
                    </div>
                    <div class="flex flex-col">
                        <span class="text-sm font-medium text-gray-900">
                            {% if current_user.custom_id %}
                                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800 mr-1">{{ current_user.custom_id }}</span>
                            {% endif %}
                            {{ current_user.full_name }}
                        </span>
                        <span class="text-xs text-gray-500">Member</span>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- Quick Actions Bar -->
    <div class="bg-white border-b border-gray-200">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex space-x-8 overflow-x-auto py-4">
                <a href="{{ url_for('member_dashboard') }}" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 rounded-lg border border-gray-200">
                    <i class="fas fa-home mr-2"></i>Dashboard
                </a>
                <a href="{{ url_for('member_submit_contribution') }}" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 rounded-lg border border-gray-200">
                    <i class="fas fa-plus-circle mr-2"></i>Submit Contribution
                </a>
                <a href="{{ url_for('member_request_loan') }}" class="flex items-center px-4 py-2 text-sm font-medium text-blue-600 bg-blue-50 rounded-lg border border-blue-200">
                    <i class="fas fa-hand-holding-usd mr-2"></i>Request Loan
                </a>
                <a href="{{ url_for('member_requests') }}" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 rounded-lg border border-gray-200">
                    <i class="fas fa-list-alt mr-2"></i>My Requests
                </a>
                <a href="{{ url_for('member_profile') }}" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 rounded-lg border border-gray-200">
                    <i class="fas fa-user-edit mr-2"></i>Update Profile
                </a>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="max-w-6xl mx-auto py-6 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <!-- Loan Request Form -->
            <div class="bg-white shadow rounded-lg">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900">
                        <i class="fas fa-file-invoice-dollar text-blue-600 mr-2"></i>Submit Loan Request
                    </h3>
                    <p class="text-sm text-gray-500 mt-1">Request a loan from your group's fund</p>
                </div>
                <form method="POST" class="p-6 space-y-6">
                    <!-- Amount Requested -->
                    <div>
                        <label for="amount_requested" class="block text-sm font-medium text-gray-700 mb-2">
                            <i class="fas fa-money-bill-wave text-green-600 mr-1"></i>Loan Amount (৳)
                        </label>
                        <input type="number" name="amount_requested" id="amount_requested" step="0.01" min="1000" required 
                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                               placeholder="Enter loan amount">
                        <!-- Quick amount suggestions -->
                        <div class="mt-2 flex flex-wrap gap-2">
                            <button type="button" onclick="setLoanAmount(50000)" class="px-3 py-1 text-xs bg-blue-100 text-blue-700 rounded-md hover:bg-blue-200">৳50,000</button>
                            <button type="button" onclick="setLoanAmount(100000)" class="px-3 py-1 text-xs bg-blue-100 text-blue-700 rounded-md hover:bg-blue-200">৳1,00,000</button>
                            <button type="button" onclick="setLoanAmount(200000)" class="px-3 py-1 text-xs bg-blue-100 text-blue-700 rounded-md hover:bg-blue-200">৳2,00,000</button>
                        </div>
                    </div>

                    <!-- Repayment Period -->
                    <div>
                        <label for="repayment_months" class="block text-sm font-medium text-gray-700 mb-2">
                            <i class="fas fa-calendar-alt text-purple-600 mr-1"></i>Repayment Period (Months)
                        </label>
                        <select name="repayment_months" id="repayment_months" required onchange="calculatePayment()"
                                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            <option value="">Select repayment period</option>
                            <option value="6">6 Months</option>
                            <option value="12">12 Months (1 Year)</option>
                            <option value="18">18 Months</option>
                            <option value="24">24 Months (2 Years)</option>
                            <option value="36">36 Months (3 Years)</option>
                        </select>
                    </div>

                    <!-- Monthly Payment Preview -->
                    <div id="payment-preview" class="hidden p-4 bg-blue-50 rounded-lg border border-blue-200">
                        <div class="flex items-center space-x-2 mb-2">
                            <i class="fas fa-calculator text-blue-600"></i>
                            <span class="text-sm font-medium text-blue-800">Monthly Payment Preview</span>
                        </div>
                        <div class="text-2xl font-bold text-blue-600" id="monthly-payment-amount">৳0.00</div>
                        <div class="text-xs text-blue-600 mt-1">This is an estimate without interest</div>
                    </div>

                    <!-- Purpose -->
                    <div>
                        <label for="purpose" class="block text-sm font-medium text-gray-700 mb-2">
                            <i class="fas fa-lightbulb text-orange-600 mr-1"></i>Purpose of Loan
                        </label>
                        <textarea name="purpose" id="purpose" rows="4" required 
                                  class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                  placeholder="Please explain why you need this loan and how you plan to use the funds..."></textarea>
                        <div class="mt-2 text-xs text-gray-500">Common purposes: Business investment, Education, Medical expenses, Home improvement, Emergency</div>
                    </div>

                    <!-- Submit Button -->
                    <div class="pt-4">
                        <button type="submit" 
                                class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200">
                            <i class="fas fa-paper-plane mr-2"></i>
                            Submit Loan Request
                        </button>
                    </div>
                </form>
            </div>

            <!-- Loan History -->
            <div class="bg-white shadow rounded-lg">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900">
                        <i class="fas fa-history text-gray-600 mr-2"></i>My Loan Requests
                    </h3>
                    <p class="text-sm text-gray-500 mt-1">History of your loan requests and status</p>
                </div>
                <div class="p-6">
                    {% if loan_requests %}
                        <div class="space-y-4">
                            {% for loan in loan_requests %}
                            <div class="border border-gray-200 rounded-lg p-4">
                                <div class="flex justify-between items-start mb-3">
                                    <div class="flex-1">
                                        <div class="flex items-center space-x-2 mb-2">
                                            {% if loan.status == 'pending' %}
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                                                    <i class="fas fa-clock mr-1"></i>Pending
                                                </span>
                                            {% elif loan.status == 'approved' %}
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                                    <i class="fas fa-check mr-1"></i>Approved
                                                </span>
                                            {% elif loan.status == 'rejected' %}
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                                                    <i class="fas fa-times mr-1"></i>Rejected
                                                </span>
                                            {% elif loan.status == 'active' %}
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                                    <i class="fas fa-handshake mr-1"></i>Active
                                                </span>
                                            {% elif loan.status == 'completed' %}
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                                                    <i class="fas fa-check-circle mr-1"></i>Completed
                                                </span>
                                            {% endif %}
                                        </div>
                                        <div class="text-xl font-bold text-gray-900">৳{{ "%.2f"|format(loan.amount_requested) }}</div>
                                        <div class="text-sm text-gray-600 space-y-1">
                                            <div><i class="fas fa-calendar mr-1"></i>{{ loan.repayment_months }} months repayment</div>
                                            <div><i class="fas fa-money-bill-alt mr-1"></i>৳{{ "%.2f"|format(loan.monthly_payment) }}/month</div>
                                        </div>
                                        <div class="text-sm text-gray-600 mt-2">
                                            <strong>Purpose:</strong> {{ loan.purpose[:100] }}{% if loan.purpose|length > 100 %}...{% endif %}
                                        </div>
                                        {% if loan.admin_notes %}
                                        <div class="mt-2 p-2 bg-gray-50 rounded text-sm">
                                            <strong>Admin Notes:</strong> {{ loan.admin_notes }}
                                        </div>
                                        {% endif %}
                                    </div>
                                    <div class="text-xs text-gray-500 text-right">
                                        <div>{{ loan.created_at.strftime('%b %d, %Y') }}</div>
                                        {% if loan.approved_at %}
                                        <div class="mt-1">Approved: {{ loan.approved_at.strftime('%b %d, %Y') }}</div>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    {% else %}
                        <div class="text-center py-8">
                            <i class="fas fa-hand-holding-usd text-gray-400 text-4xl mb-4"></i>
                            <p class="text-gray-500">No loan requests yet</p>
                            <p class="text-sm text-gray-400 mt-1">Submit your first loan request using the form</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Set quick loan amount
function setLoanAmount(amount) {
    document.getElementById('amount_requested').value = amount;
    calculatePayment();
}

// Calculate monthly payment
function calculatePayment() {
    const amount = parseFloat(document.getElementById('amount_requested').value) || 0;
    const months = parseInt(document.getElementById('repayment_months').value) || 0;
    
    if (amount > 0 && months > 0) {
        const monthlyPayment = amount / months;
        document.getElementById('monthly-payment-amount').textContent = '৳' + monthlyPayment.toLocaleString('en-BD', {minimumFractionDigits: 2, maximumFractionDigits: 2});
        document.getElementById('payment-preview').classList.remove('hidden');
    } else {
        document.getElementById('payment-preview').classList.add('hidden');
    }
}

// Calculate on amount change
document.getElementById('amount_requested').addEventListener('input', calculatePayment);
</script>
{% endblock %}