{% extends "layout.html.twig" %}

{% block content %}
<div class="container-fluid py-4">
    <div class="row">
        <div class="col-12">
            <div class="card border-0 shadow-lg">
                <div class="card-header bg-primary text-white">
                    <h1 class="h4 mb-0">
                        <i class="fas fa-history me-2"></i>
                        History: Items Loaned and Borrowed and Returned
                    </h1>
                </div>
                <div class="card-body p-0">
                    <!-- Items I've Loaned to Others -->
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th colspan="6" class="bg-success text-white">
                                        <i class="fas fa-hand-holding me-2"></i>
                                        Items I've Loaned to Others ({{ loanedItems|length }})
                                    </th>
                                </tr>
                                <tr>
                                    <th style="width: 80px;">Image</th>
                                    <th style="width: 200px;">Item</th>
                                    <th style="width: 120px;">Category</th>
                                    <th style="width: 120px;">Borrower</th>
                                    <th style="width: 100px;">Borrowed</th>
                                    <th style="width: 100px;">Returned</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% if loanedItems|length > 0 %}
                                    {% for item in loanedItems %}
                                    <tr style="border-bottom: 8px solid transparent;">
                                        <td>
                                            {% if item.primaryLogo %}
                                                <img src="/lendable_items/{{ item.primaryLogo }}" 
                                                     alt="{{ item.name }}" 
                                                     class="img-thumbnail" 
                                                     style="width: 60px; height: 60px; object-fit: cover;">
                                            {% else %}
                                                <div class="d-flex align-items-center justify-content-center img-thumbnail" 
                                                     style="width: 60px; height: 60px; background-color: #f8f9fa;">
                                                    <i class="fas fa-box text-muted"></i>
                                                </div>
                                            {% endif %}
                                        </td>
                                        <td>
                                            <a href="/item/{{ item.id }}" class="text-decoration-none fw-bold">
                                                {{ item.name|length > 20 ? item.name|slice(0, 20) ~ '...' : item.name }}
                                            </a>
                                            <br>
                                            <small class="text-muted">{{ item.description|length > 40 ? item.description|slice(0, 40) ~ '...' : item.description }}</small>
                                            <br>
                                            <a href="/item/{{ item.id }}?chat=open" class="btn btn-sm btn-outline-primary mt-1">
                                                <i class="fas fa-comments me-1"></i>View Chat
                                            </a>
                                        </td>
                                        <td>
                                            <span class="badge bg-light text-dark">{{ item.categoryName }}</span>
                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                {% if item.borrowerAvatar %}
                                                    <img src="/ll_images/{{ item.borrowerAvatar }}" 
                                                         alt="{{ item.borrowerName }}" 
                                                         class="rounded-circle me-2" 
                                                         style="width: 30px; height: 30px; object-fit: cover;">
                                                {% else %}
                                                    <i class="fas fa-user-circle me-2" style="font-size: 30px; color: #ccc;"></i>
                                                {% endif %}
                                                <span>{{ item.borrowerName }}</span>
                                            </div>
                                        </td>
                                        <td>
                                            <a href="/item/{{ item.id }}?calendar=open" class="text-decoration-none">
                                                {% if item.borrowedDate %}
                                                    {% set dateparts = item.borrowedDate|split('-') %}
                                                    {{ dateparts[1] }}/{{ dateparts[2] }}/{{ dateparts[0] }}
                                                {% else %}
                                                    <span class="text-muted">Date Unknown</span>
                                                {% endif %}
                                            </a>
                                            <br>
                                            <small class="text-muted">{{ item.borrowedDays }} day{{ item.borrowedDays == 1 ? '' : 's' }}</small>
                                        </td>
                                        <td>
                                            <span class="text-success">
                                                {% set returndateparts = item.returnedDate|split('-') %}
                                                {{ returndateparts[1] }}/{{ returndateparts[2] }}/{{ returndateparts[0] }}
                                            </span>
                                            <br>
                                            <small class="badge bg-success text-white">RETURNED</small>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                {% else %}
                                    <tr>
                                        <td colspan="6" class="text-center py-4 text-muted">
                                            <i class="fas fa-inbox fa-2x mb-3"></i>
                                            <br>
                                            No items loaned to others in your history yet.
                                        </td>
                                    </tr>
                                {% endif %}
                            </tbody>
                        </table>
                    </div>

                    <!-- Spacing between sections -->
                    <div style="height: 20px; background: transparent;"></div>

                    <!-- Items I've Borrowed -->
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th colspan="6" class="bg-info text-white">
                                        <i class="fas fa-hand-holding-heart me-2"></i>
                                        Archive: Items I've Borrowed ({{ borrowedItems|length }})
                                    </th>
                                </tr>
                                <tr>
                                    <th style="width: 80px;">Image</th>
                                    <th style="width: 180px;">Item</th>
                                    <th style="width: 120px;">Category</th>
                                    <th style="width: 120px;">Owner</th>
                                    <th style="width: 100px;">Borrowed</th>
                                    <th style="width: 100px;">Returned</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% if borrowedItems|length > 0 %}
                                    {% for item in borrowedItems %}
                                    <tr style="border-bottom: 8px solid transparent;">
                                        <td>
                                            {% if item.primaryLogo %}
                                                <img src="/lendable_items/{{ item.primaryLogo }}" 
                                                     alt="{{ item.name }}" 
                                                     class="img-thumbnail" 
                                                     style="width: 60px; height: 60px; object-fit: cover;">
                                            {% else %}
                                                <div class="d-flex align-items-center justify-content-center img-thumbnail" 
                                                     style="width: 60px; height: 60px; background-color: #f8f9fa;">
                                                    <i class="fas fa-box text-muted"></i>
                                                </div>
                                            {% endif %}
                                        </td>
                                        <td>
                                            <a href="/item/{{ item.id }}" class="text-decoration-none fw-bold">
                                                {{ item.name|length > 20 ? item.name|slice(0, 20) ~ '...' : item.name }}
                                            </a>
                                            <br>
                                            <small class="text-muted">{{ item.description|length > 40 ? item.description|slice(0, 40) ~ '...' : item.description }}</small>
                                            <br>
                                            <a href="/item/{{ item.id }}?chat=open" class="btn btn-sm btn-outline-primary mt-1">
                                                <i class="fas fa-comments me-1"></i>View Chat
                                            </a>
                                        </td>
                                        <td>
                                            <span class="badge bg-light text-dark">{{ item.categoryName }}</span>
                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                {% if item.ownerAvatar %}
                                                    <img src="/ll_images/{{ item.ownerAvatar }}" 
                                                         alt="{{ item.ownerName }}" 
                                                         class="rounded-circle me-2" 
                                                         style="width: 30px; height: 30px; object-fit: cover;">
                                                {% else %}
                                                    <i class="fas fa-user-circle me-2" style="font-size: 30px; color: #ccc;"></i>
                                                {% endif %}
                                                <span>{{ item.ownerName }}</span>
                                            </div>
                                        </td>
                                        <td>
                                            <a href="/item/{{ item.id }}?calendar=open" class="text-decoration-none">
                                                {% if item.borrowedDate %}
                                                    {% set dateparts = item.borrowedDate|split('-') %}
                                                    {{ dateparts[1] }}/{{ dateparts[2] }}/{{ dateparts[0] }}
                                                {% else %}
                                                    <span class="text-muted">Date Unknown</span>
                                                {% endif %}
                                            </a>
                                            <br>
                                            <small class="text-muted">{{ item.borrowedDays }} day{{ item.borrowedDays == 1 ? '' : 's' }}</small>
                                        </td>
                                        <td>
                                            {% if item.displayStatus == 'Returned' %}
                                                <span class="text-success">
                                                    {% set statusdateparts = item.statusDate|split('-') %}
                                                    {{ statusdateparts[1] }}/{{ statusdateparts[2] }}/{{ statusdateparts[0] }}
                                                </span>
                                                <br>
                                                <small class="badge bg-success text-white">RETURNED</small>
                                            {% elseif item.displayStatus == 'Declined' %}
                                                <span class="text-danger">
                                                    {% set statusdateparts = item.statusDate|split('-') %}
                                                    {{ statusdateparts[1] }}/{{ statusdateparts[2] }}/{{ statusdateparts[0] }}
                                                </span>
                                                <br>
                                                <small class="badge bg-danger text-white">DECLINED</small>
                                            {% elseif item.displayStatus == 'Dismissed' %}
                                                <span class="text-warning">
                                                    {% set statusdateparts = item.statusDate|split('-') %}
                                                    {{ statusdateparts[1] }}/{{ statusdateparts[2] }}/{{ statusdateparts[0] }}
                                                </span>
                                                <br>
                                                <small class="badge bg-warning text-dark">DISMISSED</small>
                                            {% elseif item.displayStatus == 'Expired' %}
                                                <span class="text-secondary">
                                                    {% set statusdateparts = item.statusDate|split('-') %}
                                                    {{ statusdateparts[1] }}/{{ statusdateparts[2] }}/{{ statusdateparts[0] }}
                                                </span>
                                                <br>
                                                <small class="badge bg-secondary text-white">EXPIRED</small>
                                            {% else %}
                                                <span class="text-muted">{{ item.displayStatus }}</span>
                                            {% endif %}
                                        </td>
                                    </tr>
                                    {% endfor %}
                                {% else %}
                                    <tr>
                                        <td colspan="6" class="text-center py-4 text-muted">
                                            <i class="fas fa-inbox fa-2x mb-3"></i>
                                            <br>
                                            No items in your borrowing history yet.
                                        </td>
                                    </tr>
                                {% endif %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}