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

{% block title %}Blood Requests - RaktaPulse{% endblock %}

{% block content %}
<style>
    .urgency-badge {
        padding: 4px 10px;
        border-radius: 6px;
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }
    .bg-critical { background: #FF4D4D; color: #fff; box-shadow: 0 0 10px rgba(255, 77, 77, 0.4); }
    .bg-urgent { background: #FFA500; color: #000; }
    .bg-normal { background: #4CAF50; color: #fff; }

    .request-card {
        border-left: 5px solid transparent !important;
        transition: all 0.3s ease;
    }
    .request-card.border-critical { border-left-color: #FF4D4D !important; }
    .request-card.border-urgent { border-left-color: #FFA500 !important; }
    .request-card.border-normal { border-left-color: #4CAF50 !important; }

    @keyframes pulse-red {
        0% { transform: scale(1); opacity: 1; }
        50% { transform: scale(1.1); opacity: 0.8; }
        100% { transform: scale(1); opacity: 1; }
    }
    .pulse-icon {
        animation: pulse-red 2s infinite ease-in-out;
    }
</style>

<div class="container-fluid p-0">
    <div class="row mb-4">
        <div class="col-12 d-flex justify-content-between align-items-center">
            <div>
                <h2 class="brand-font mb-1">{% if current_status %}{{ current_status }} {% endif %}Blood Requests</h2>
                <p class="text-secondary">{% if current_status == 'Active' %}Current urgent requirements for blood.{% else %}History of blood requests in our community.{% endif %}</p>
            </div>
            <a href="{% url 'request_blood' %}" class="btn btn-danger rounded-pill px-4">Post a Request</a>
        </div>
    </div>

    <div class="glass-card mb-4">
        <div class="row">
            {% for req in requests %}
            <div class="col-md-6 col-xl-4 mb-4">
                <div class="p-3 border rounded h-100 bg-light d-flex flex-column request-card border-{{ req.urgency|lower }}">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <div class="d-flex gap-2">
                            <span class="urgency-badge bg-{{ req.urgency|lower }}">
                                {% if req.urgency == 'CRITICAL' %}
                                    <i class="bi bi-exclamation-triangle-fill pulse-icon"></i>
                                {% elif req.urgency == 'URGENT' %}
                                    <i class="bi bi-exclamation-circle-fill"></i>
                                {% else %}
                                    <i class="bi bi-info-circle-fill"></i>
                                {% endif %}
                                {{ req.urgency }}
                            </span>
                            {% if req.status == 'Active' %}
                            <span class="badge bg-success bg-opacity-10 text-success small" style="font-size: 0.7rem;">Active</span>
                            {% else %}
                            <span class="badge bg-secondary bg-opacity-10 text-secondary small" style="font-size: 0.7rem;">{{ req.status }}</span>
                            {% endif %}
                        </div>
                        <div class="bg-danger bg-opacity-10 text-danger rounded-circle d-flex align-items-center justify-content-center fw-bold" style="width: 40px; height: 40px;">
                            {{ req.blood_group }}
                        </div>
                    </div>
                    <h5 class="mb-1 fw-bold text-dark">{{ req.patient_name }}</h5>
                    <p class="text-secondary small mb-2"><i class="bi bi-hospital me-1"></i> {{ req.hospital }}</p>
                    
                    {% with acceptance=req.donations.first %}
                    {% if acceptance %}
                    <div class="mb-2 p-2 rounded bg-success bg-opacity-10 border border-success border-opacity-25">
                        <p class="mb-0 small text-success">
                            <i class="bi bi-person-check-fill me-1"></i>
                            Accepted by: <strong>{{ acceptance.donor.name }}</strong>
                        </p>
                    </div>
                    {% endif %}
                    {% endwith %}
                    
                    {% if req.image %}
                    <div class="mb-3">
                        <img src="{{ req.image.url }}" class="img-fluid rounded border shadow-sm" alt="Patient/Prescription" style="max-height: 150px; width: 100%; object-fit: cover; cursor: pointer;" onclick="window.open(this.src)">
                    </div>
                    {% endif %}

                    <div class="mt-auto pt-3 border-top">
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="small text-muted"><i class="bi bi-clock me-1"></i> {{ req.created_at|timesince }} ago</span>
                            <div class="d-flex gap-2">
                                {% if req.user %}
                                    <a href="{% url 'chat' req.user.username %}" class="btn btn-sm btn-outline-secondary px-2 rounded-pill" title="Message Requester">
                                        <i class="bi bi-chat-dots-fill"></i>
                                    </a>
                                {% endif %}
                                {% if user.is_authenticated and user.donor_profile and req.user != user %}
                                    {% if req.can_volunteer %}
                                        <a href="{% url 'volunteer_for_request' req.id %}" class="btn btn-sm btn-outline-danger px-3 rounded-pill">Volunteer</a>
                                    {% else %}
                                        <button class="btn btn-sm btn-outline-secondary px-3 rounded-pill" disabled title="{{ req.ineligibility_reason }}">
                                            {{ req.ineligibility_reason }}
                                        </button>
                                    {% endif %}
                                {% endif %}
                                <a href="tel:{{ req.contact_number }}" class="btn btn-sm btn-danger px-3 rounded-pill">Call</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% empty %}
            <div class="col-12 text-center py-5">
                <i class="bi bi-megaphone fs-1 text-secondary opacity-25"></i>
                <p class="text-secondary mt-3">No active blood requests at the moment.</p>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}