{% extends 'base.html' %}
{% block title %}Profile{% endblock %}
{% block content %}

<header class="py-8 py-md-11">
    <div class="container text-center py-xl-2">
        <h1 class="display-4 fw-semi-bold mb-0">Profile</h1>
    </div>
</header>

<div class="container my-5">
    <div class="row">

        <!-- Profile Picture or Initials -->
        <div class="col-md-4">
            <div class="profile-avatar">
              
            </div>
        </div>
        <div class="col-md-4 my-5">
            <div class="profile-avatar">
                {% if user.userprofile.avatar %}
                <div class="avatar avatar-size-120">
                    <img src="{{ user.userprofile.avatar.url }}" alt="..." class="avatar-img rounded-circle">
                </div>
                {% else %}
                <div class="avatar avatar-size-120">
                    {{ user.first_name|slice:":1" }}{{ user.last_name|slice:":1" }}
                </div>
                {% endif %}
            </div>
        </div>
        <div class="col-md-4">
            <div class="profile-avatar">
              
            </div>
        </div>
    </div>
    <div class="row">

        
        <!-- Left Side: Profile Update Form -->
        <div class="col-md-6">
            <div class="card">
                {% if messages %}
                    <div>
                        {% for message in messages %}
                            <div class="alert alert-info">{{ message }}</div>
                        {% endfor %}
                    </div>
                {% endif %}
                <div class="card-body">
                    <h4 class="card-title">Profile Update</h4>
                    <form method="POST" action="{% url 'profile_update' %}" enctype="multipart/form-data">
                        {% csrf_token %}
                        <div class="mb-3"> 
                            <label for="avatar" class="form-label">Profile Image</label> 
                            <input type="file" class="form-control" name="avatar">
                        </div>
                        <div class="mb-3">
                            <label for="username" class="form-label">Username</label>
                            <input type="text" class="form-control" name="username" value="{{ user.username }}" readonly>
                        </div>
                        <div class="mb-3">
                            <label for="first_name" class="form-label">First Name</label>
                            <input type="text" class="form-control" name="first_name" value="{{ user.first_name }}">
                        </div>
                        <div class="mb-3">
                            <label for="last_name" class="form-label">Last Name</label>
                            <input type="text" class="form-control" name="last_name" value="{{ user.last_name }}">
                        </div>
                        <button type="submit" class="btn btn-primary">Update Profile</button>
                    </form>
                </div>
            </div>
        </div>

        <!-- Right Side: Applications and Subscription Details -->
        <div class="col-md-6">
            <!-- Application Details (Scrollable) -->
            <div class="card mb-4">
                <div class="card-body" style="max-height: 300px; overflow-y: auto;">
                    <h5 class="card-title">Your Applications</h5>
                    <ul class="list-group">
                        {% for application in applications %}
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <div>
                                    <strong>Type:</strong> {{ application.get_application_type_display }} <br>
                                    <strong>Amount:</strong> {{ application.amount }} {{ application.currency }} <br>
                                    <strong>Token:</strong> {{ application.tran_id }} <br>
                                    <strong>Applied Date:</strong> {{ application.tran_date|date:"Y-m-d" }}
                                </div>
                                <span class="badge 
                                    {% if application.is_approved %}bg-success{% else %}bg-secondary{% endif %}">
                                    {% if application.is_approved %}
                                        Approved
                                    {% else %}
                                        Pending
                                    {% endif %}
                                </span>
                            </li>
                        {% empty %}
                            <li class="list-group-item">No applications found.</li>
                        {% endfor %}
                    </ul>
                </div>
            </div>

            <!-- Subscription Details -->
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Subscription Details</h5>
                    {% if subscription %}
                        <p><strong>Start Date:</strong> {{ subscription.start_date|date:"Y-m-d" }}</p>
                        <p><strong>End Date:</strong> {{ subscription.end_date|date:"Y-m-d" }}</p>
                    {% else %}
                        <p>No active subscription.</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}