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

{% block title %}Donor Details - {{ donor.full_name }}{% endblock %}

{% block extra_css %}
<link href="{% static 'assets/plugins/datatables.net-bs5/css/dataTables.bootstrap5.min.css' %}" rel="stylesheet" />
<link href="{% static 'assets/plugins/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css' %}" rel="stylesheet" />
{% endblock %}

{% block content %}
<!-- BEGIN breadcrumb -->
<ol class="breadcrumb float-xl-end">
    <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Home</a></li>
    <li class="breadcrumb-item"><a href="{% url 'blood_bank:dashboard' %}">Blood Bank</a></li>
    <li class="breadcrumb-item"><a href="{% url 'blood_bank:donor_list' %}">Donors</a></li>
    <li class="breadcrumb-item active">{{ donor.donor_id }}</li>
</ol>
<!-- END breadcrumb -->

<!-- BEGIN page-header -->
<h1 class="page-header">
    Donor Details 
    <small>{{ donor.full_name }} ({{ donor.donor_id }})</small>
</h1>
<!-- END page-header -->

<!-- BEGIN row -->
<div class="row">
    <!-- BEGIN col-4 -->
    <div class="col-xl-4">
        <!-- BEGIN panel -->
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <h4 class="panel-title">Donor Information</h4>
                <div class="panel-heading-btn">
                    <a href="{% url 'blood_bank:donor_update' donor.id %}" class="btn btn-warning btn-sm">
                        <i class="fa fa-edit"></i> Edit
                    </a>
                </div>
            </div>
            <div class="panel-body">
                <div class="row mb-3">
                    <div class="col-12 text-center">
                        <div class="bg-light rounded p-4 mb-3">
                            <i class="fa fa-user fa-4x text-muted mb-2"></i>
                            <h4>{{ donor.full_name }}</h4>
                            <p class="text-muted mb-0">{{ donor.donor_id }}</p>
                        </div>
                    </div>
                </div>

                <table class="table table-borderless">
                    <tr>
                        <td class="fw-bold">Blood Group:</td>
                        <td>
                            <span class="badge bg-primary fs-6">{{ donor.blood_group.display_name }}</span>
                        </td>
                    </tr>
                    <tr>
                        <td class="fw-bold">Age:</td>
                        <td>{{ donor.age }} years</td>
                    </tr>
                    <tr>
                        <td class="fw-bold">Gender:</td>
                        <td>{{ donor.get_gender_display }}</td>
                    </tr>
                    <tr>
                        <td class="fw-bold">Weight:</td>
                        <td>{{ donor.weight }} kg</td>
                    </tr>
                    <tr>
                        <td class="fw-bold">Height:</td>
                        <td>{{ donor.height }} cm</td>
                    </tr>
                    <tr>
                        <td class="fw-bold">Status:</td>
                        <td>
                            {% if donor.status == 'active' %}
                                <span class="badge bg-success">{{ donor.get_status_display }}</span>
                            {% elif donor.status == 'deferred' %}
                                <span class="badge bg-warning">{{ donor.get_status_display }}</span>
                            {% elif donor.status == 'permanently_deferred' %}
                                <span class="badge bg-danger">{{ donor.get_status_display }}</span>
                            {% else %}
                                <span class="badge bg-secondary">{{ donor.get_status_display }}</span>
                            {% endif %}
                        </td>
                    </tr>
                    <tr>
                        <td class="fw-bold">Donor Type:</td>
                        <td>{{ donor.get_donor_type_display }}</td>
                    </tr>
                </table>

                <hr>

                <h6 class="fw-bold">Contact Information</h6>
                <table class="table table-borderless">
                    <tr>
                        <td class="fw-bold">Phone:</td>
                        <td>{{ donor.phone }}</td>
                    </tr>
                    <tr>
                        <td class="fw-bold">Email:</td>
                        <td>{{ donor.email|default:"Not provided" }}</td>
                    </tr>
                    <tr>
                        <td class="fw-bold">Address:</td>
                        <td>{{ donor.address }}</td>
                    </tr>
                </table>

                <hr>

                <h6 class="fw-bold">Emergency Contact</h6>
                <table class="table table-borderless">
                    <tr>
                        <td class="fw-bold">Name:</td>
                        <td>{{ donor.emergency_contact_name }}</td>
                    </tr>
                    <tr>
                        <td class="fw-bold">Phone:</td>
                        <td>{{ donor.emergency_contact_phone }}</td>
                    </tr>
                </table>

                {% if donor.notes %}
                <hr>
                <h6 class="fw-bold">Notes</h6>
                <p class="text-muted">{{ donor.notes }}</p>
                {% endif %}
            </div>
        </div>
        <!-- END panel -->
    </div>
    <!-- END col-4 -->

    <!-- BEGIN col-8 -->
    <div class="col-xl-8">
        <!-- BEGIN panel -->
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <h4 class="panel-title">Donation Statistics</h4>
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-md-3">
                        <div class="widget widget-stats bg-blue">
                            <div class="stats-icon"><i class="fa fa-tint"></i></div>
                            <div class="stats-info">
                                <h4>TOTAL DONATIONS</h4>
                                <p>{{ donor.total_donations }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="widget widget-stats bg-info">
                            <div class="stats-icon"><i class="fa fa-calendar"></i></div>
                            <div class="stats-info">
                                <h4>LAST DONATION</h4>
                                <p>
                                    {% if donor.last_donation_date %}
                                        {{ donor.last_donation_date|date:"M d, Y" }}
                                    {% else %}
                                        Never
                                    {% endif %}
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="widget widget-stats bg-orange">
                            <div class="stats-icon"><i class="fa fa-clock"></i></div>
                            <div class="stats-info">
                                <h4>NEXT ELIGIBLE</h4>
                                <p>{{ donor.next_eligible_date|date:"M d, Y" }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="widget widget-stats {% if donor.is_eligible_for_donation %}bg-green{% else %}bg-red{% endif %}">
                            <div class="stats-icon">
                                <i class="fa {% if donor.is_eligible_for_donation %}fa-check{% else %}fa-times{% endif %}"></i>
                            </div>
                            <div class="stats-info">
                                <h4>ELIGIBILITY</h4>
                                <p>{% if donor.is_eligible_for_donation %}Eligible{% else %}Not Eligible{% endif %}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- END panel -->

        <!-- BEGIN panel -->
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <h4 class="panel-title">Donation History</h4>
                <div class="panel-heading-btn">
                    {% if donor.is_eligible_for_donation %}
                    <a href="{% url 'blood_bank:donor_eligibility' donor.id %}" class="btn btn-success btn-sm">
                        <i class="fa fa-tint"></i> New Donation
                    </a>
                    {% endif %}
                </div>
            </div>
            <div class="panel-body">
                {% if blood_units %}
                <div class="table-responsive">
                    <table id="donationTable" class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>Unit Number</th>
                                <th>Component</th>
                                <th>Collection Date</th>
                                <th>Volume (ml)</th>
                                <th>Status</th>
                                <th>Expiry Date</th>
                                <th>Location</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for unit in blood_units %}
                            <tr>
                                <td>
                                    <a href="{% url 'blood_bank:blood_unit_detail' unit.id %}">
                                        {{ unit.unit_number }}
                                    </a>
                                </td>
                                <td>{{ unit.component.get_name_display }}</td>
                                <td>{{ unit.collection_date|date:"M d, Y H:i" }}</td>
                                <td>{{ unit.volume_ml }}</td>
                                <td>
                                    {% if unit.status == 'available' %}
                                        <span class="badge bg-success">{{ unit.get_status_display }}</span>
                                    {% elif unit.status == 'expired' %}
                                        <span class="badge bg-danger">{{ unit.get_status_display }}</span>
                                    {% elif unit.status == 'transfused' %}
                                        <span class="badge bg-info">{{ unit.get_status_display }}</span>
                                    {% else %}
                                        <span class="badge bg-warning">{{ unit.get_status_display }}</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {{ unit.expiry_date|date:"M d, Y" }}
                                    {% if unit.days_to_expiry <= 3 and unit.status == 'available' %}
                                        <span class="badge bg-danger ms-1">Expiring Soon</span>
                                    {% endif %}
                                </td>
                                <td>{{ unit.location }}</td>
                                <td>
                                    <a href="{% url 'blood_bank:blood_unit_detail' unit.id %}" 
                                       class="btn btn-outline-primary btn-sm" title="View Details">
                                        <i class="fa fa-eye"></i>
                                    </a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <div class="text-center py-5">
                    <i class="fa fa-tint fa-3x text-muted mb-3"></i>
                    <h5 class="text-muted">No Donation History</h5>
                    <p class="text-muted">This donor has not made any donations yet.</p>
                    {% if donor.is_eligible_for_donation %}
                    <a href="{% url 'blood_bank:donor_eligibility' donor.id %}" class="btn btn-primary">
                        <i class="fa fa-tint"></i> Start First Donation
                    </a>
                    {% endif %}
                </div>
                {% endif %}
            </div>
        </div>
        <!-- END panel -->
    </div>
    <!-- END col-8 -->
</div>
<!-- END row -->

<!-- BEGIN action buttons -->
<div class="row">
    <div class="col-12">
        <div class="d-flex justify-content-between">
            <a href="{% url 'blood_bank:donor_list' %}" class="btn btn-default">
                <i class="fa fa-arrow-left"></i> Back to Donors
            </a>
            <div>
                {% if donor.is_eligible_for_donation %}
                <a href="{% url 'blood_bank:donor_eligibility' donor.id %}" class="btn btn-success">
                    <i class="fa fa-tint"></i> Check Eligibility
                </a>
                {% endif %}
                <a href="{% url 'blood_bank:donor_update' donor.id %}" class="btn btn-warning">
                    <i class="fa fa-edit"></i> Edit Donor
                </a>
                <button type="button" class="btn btn-info" onclick="window.print()">
                    <i class="fa fa-print"></i> Print
                </button>
            </div>
        </div>
    </div>
</div>
<!-- END action buttons -->
{% endblock %}

{% block extra_js %}
<script src="{% static 'assets/plugins/datatables.net/js/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'assets/plugins/datatables.net-bs5/js/dataTables.bootstrap5.min.js' %}"></script>
<script src="{% static 'assets/plugins/datatables.net-responsive/js/dataTables.responsive.min.js' %}"></script>
<script src="{% static 'assets/plugins/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js' %}"></script>

<script>
$(document).ready(function() {
    $('#donationTable').DataTable({
        responsive: true,
        pageLength: 10,
        order: [[2, 'desc']], // Sort by collection date
        columnDefs: [
            { orderable: false, targets: [7] } // Actions column
        ]
    });
});
</script>
{% endblock %}