{% extends "base.html" %}
{% load static %}
{% load humanize %}

{% block title %}Make Investment - IHICL Investment{% endblock %}

{% block content %}
    <!-- Header Start -->
    <div class="container-fluid bg-breadcrumb">
        <div class="bg-breadcrumb-single"></div>
        <div class="container text-center py-5" style="max-width: 900px;">
            <h4 class="text-white display-4 mb-4 wow fadeInDown" data-wow-delay="0.1s">Make an Investment</h4>
            <ol class="breadcrumb justify-content-center mb-0 wow fadeInDown" data-wow-delay="0.3s">
                <li class="breadcrumb-item"><a href="{% url 'home' %}">Home</a></li>
                <li class="breadcrumb-item"><a href="{% url 'dashboard' %}">Dashboard</a></li>
                <li class="breadcrumb-item active text-primary">Invest</li>
            </ol>    
        </div>
    </div>
    <!-- Header End -->

    <!-- Investment Form Section Start -->
    <div class="container-fluid py-5">
        <div class="container py-5">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="card border-0 shadow-sm">
                        <div class="card-header bg-white">
                            <h5 class="mb-0">Investment Details</h5>
                        </div>
                        <div class="card-body">
                            {% if messages %}
                                {% for message in messages %}
                                <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                                    {{ message }}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                </div>
                                {% endfor %}
                            {% endif %}
                            
                            <div class="mb-4 p-3 bg-light rounded">
                                <h6>Your Information</h6>
                                <div class="row">
                                    <div class="col-md-6">
                                        <p><strong>Name:</strong> {{ investor_profile.get_full_title }} {{ user.first_name }} {{ user.last_name }}</p>
                                        <p><strong>Email:</strong> {{ user.email }}</p>
                                    </div>
                                    <div class="col-md-6">
                                        <p><strong>Phone:</strong> {{ investor_profile.telephone }}</p>
                                        
                                    </div>
                                </div>
                            </div>
                            
                            <form method="post">
                                {% csrf_token %}
                                
                                <div class="mb-3">
                                    <label for="id_amount" class="form-label">Investment Amount (₦)</label>
                                    {{ form.amount }}
                                    {% if form.amount.errors %}
                                        <div class="text-danger">{{ form.amount.errors }}</div>
                                    {% endif %}
                                    <div class="form-text">Minimum investment: ₦10,000</div>
                                </div>
                                
                                <div class="mb-3 form-check">
                                    {{ form.terms }}
                                    <label class="form-check-label" for="id_terms">
                                        I agree to the <a href="#" target="_blank">terms and conditions</a>
                                    </label>
                                    {% if form.terms.errors %}
                                        <div class="text-danger">{{ form.terms.errors }}</div>
                                    {% endif %}
                                </div>
                                
                                <div class="d-grid gap-2">
                                    <button type="submit" class="btn btn-primary btn-lg">Proceed with Investment</button>
                                    <a href="{% url 'dashboard' %}" class="btn btn-outline-secondary">Cancel</a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.querySelector('form');
            if (form) {
                form.addEventListener('submit', function() {
                    const submitButton = this.querySelector('button[type="submit"]');
                    if (submitButton) {
                        submitButton.disabled = true;
                        submitButton.textContent = 'Processing...';
                    }
                });
            }
        });
        </script>
    <!-- Investment Form Section End -->
{% endblock %}