{% extends 'blood_bank/base.html' %}

{% block title %}My Dashboard{% endblock %}

{% block content %}
<div class="row g-4">
    <div class="col-md-4">
        <div class="card p-4 h-100">
            <div class="text-center mb-4">
                <div class="avatar-lg mx-auto mb-3 bg-danger text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
                    <i class="fas fa-user-circle fa-4x"></i>
                </div>
                <h4 class="fw-bold mb-0">{{ user.username }}</h4>
                <span class="badge bg-light text-danger rounded-pill px-3 py-2 mt-2 border">{{ profile.get_role_display }}</span>
            </div>
            
            <div class="profile-details">
                <div class="d-flex justify-content-between mb-3 p-3 bg-light rounded-4">
                    <span class="text-muted"><i class="fas fa-tint me-2 text-danger"></i>Blood Group</span>
                    <span class="fw-bold text-danger">{{ profile.blood_group }}</span>
                </div>
                <div class="d-flex justify-content-between mb-3 p-3 bg-light rounded-4">
                    <span class="text-muted"><i class="fas fa-map-marker-alt me-2 text-danger"></i>Location</span>
                    <span class="fw-bold">{{ profile.location }}</span>
                </div>
                <div class="d-flex justify-content-between mb-3 p-3 bg-light rounded-4">
                    <span class="text-muted"><i class="fas fa-phone me-2 text-danger"></i>Contact</span>
                    <span class="fw-bold">{{ profile.contact }}</span>
                </div>
            </div>
            
            <a href="{% url 'request_blood' %}" class="btn btn-primary w-100 mt-3 py-3 rounded-4 shadow">
                <i class="fas fa-plus-circle me-2"></i>New Blood Request
            </a>
            {% if profile.role == 'DONOR' %}
            <a href="{% url 'donate_blood' %}" class="btn btn-outline-danger w-100 mt-2 py-3 rounded-4">
                <i class="fas fa-hand-holding-heart me-2"></i>Donate Now
            </a>
            {% endif %}
        </div>
    </div>
    <div class="col-md-8">
        <div class="card p-4 mb-4">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h4 class="fw-bold m-0"><i class="fas fa-history text-danger me-2"></i>My Donation History</h4>
            </div>
            <div class="table-responsive">
                <table class="table table-hover align-middle">
                    <thead class="table-light">
                        <tr>
                            <th>Units</th>
                            <th>Date</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for don in user_donations %}
                        <tr>
                            <td><span class="fw-bold">{{ don.units }}</span> Units</td>
                            <td>{{ don.donation_date|date:"d M, Y" }}</td>
                            <td>
                                {% if don.status == 'PENDING' %}
                                    <span class="badge bg-warning text-dark px-3">Pending</span>
                                {% elif don.status == 'APPROVED' %}
                                    <span class="badge bg-success px-3">Approved</span>
                                {% else %}
                                    <span class="badge bg-secondary px-3">Rejected</span>
                                {% endif %}
                            </td>
                        </tr>
                        {% empty %}
                        <tr><td colspan="3" class="text-center py-4">No donations recorded yet.</td></tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

        <div class="card p-4">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h4 class="fw-bold m-0"><i class="fas fa-history text-danger me-2"></i>My Requests History</h4>
            </div>

            
            <div class="table-responsive">
                <table class="table table-hover align-middle">
                    <thead class="table-light">
                        <tr>
                            <th>Blood Group</th>
                            <th>Units</th>
                            <th>Date Requested</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for req in user_requests %}
                        <tr>
                            <td><span class="badge bg-danger rounded-pill px-3">{{ req.blood_group }}</span></td>
                            <td><span class="fw-bold">{{ req.units }}</span> Units</td>
                            <td>{{ req.request_date|date:"d M, Y" }}</td>
                            <td>
                                {% if req.status == 'PENDING' %}
                                    <span class="badge bg-warning text-dark px-3"><i class="fas fa-spinner fa-spin me-1"></i>Pending</span>
                                {% elif req.status == 'APPROVED' %}
                                    <span class="badge bg-success px-3"><i class="fas fa-check-circle me-1"></i>Approved</span>
                                {% else %}
                                    <span class="badge bg-secondary px-3"><i class="fas fa-times-circle me-1"></i>Rejected</span>
                                {% endif %}
                            </td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="4" class="text-center py-5">
                                <i class="fas fa-folder-open fa-3x text-light mb-3"></i>
                                <p class="text-muted">You haven't made any blood requests yet.</p>
                                <a href="{% url 'request_blood' %}" class="btn btn-outline-danger btn-sm rounded-pill">Make First Request</a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% endblock %}