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

{% block title %}My Lendables Inventory - {{ user.firstName }} - Local Lendables{% endblock %}

{% block content %}



<main class="content-wrapper">
    <div class="container pt-4">
        <!-- Page Header -->
        <div class="row mb-4">
            <div class="col-12 col-lg-8">
                <div class="d-flex align-items-center mb-3">
                    <img src="/lendables/logo_my_inventory_600.png" alt="My Inventory" class="me-3" style="max-width: 96px; height: auto;">
                    <div>
                        <h1 class="mb-0 giantish">My Lendables Inventory</h1>
                        <p class="text-muted mb-0">Complete overview of your lending and borrowing activity</p>
                    </div>
                </div>
            </div>
            
            <!-- Right Sidebar Navigation -->
            <div class="col-12 col-lg-4">
                <div class="card shadow-sm mini">
                    <div class="card-header bg-light py-2">
                        <h6 class="card-title mb-0 small">
                            QuickNav
                        </h6>
                    </div>
                    <div class="card-body p-3">
                        <nav class="nav flex-column">
                            <a class="nav-link py-1 px-2 text-decoration-none tiny" href="#my-lendable-items">
                                My Lendable Items ({{ myItems|length }})
                            </a>
                            <a class="nav-link py-1 px-2 text-decoration-none tiny" href="#borrow-requests">
                                Borrow Requests from Others ({{ borrowRequests|length }})
                            </a>
                            <a class="nav-link py-1 px-2 text-decoration-none tiny" href="#items-borrowed">
                                Items I've Borrowed ({{ borrowedItems|length }})
                            </a>
                            <a class="nav-link py-1 px-2 text-decoration-none tiny" href="#items-on-loan">
                                My Items Out on Loan ({{ itemsOnLoan|length }})
                            </a>
                            <a class="nav-link py-1 px-2 text-decoration-none tiny" href="#wish-list">
                                My Wish List ({{ wishListItems|length }})
                            </a>
                            <a class="nav-link py-1 px-2 text-decoration-none tiny" href="#draft-items">
                                Draft Items ({{ draftItems|length }})
                            </a>
                            <a class="nav-link py-1 px-2 text-decoration-none tiny" href="#my-hours-offered">
                                My Hours Offered ({{ userHourOfferings|length|default(0) }})
                            </a>
                            <a class="nav-link py-1 px-2 text-decoration-none tiny" href="#offered-hours-reserved">
                                Offered Hours Reserved ({{ bookedHourOfferings|length|default(0) }})
                            </a>
                        </nav>
                    </div>
                </div>
            </div>
        </div>

        <!-- My Lendable Items -->
        <div class="row mb-4" id="my-lendable-items">
            <div class="col-12">
                <div class="card">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0">
                            <i class="fas fa-box me-2"></i>
                            My Lendable Items ({{ myItems|length }})
                        </h5>
                    </div>
                    <div class="card-body">
                        {% if myItems|length > 0 %}
                            <div class="row">
                                {% for item in myItems %}
                                <div class="col-12 col-md-6 col-lg-4 mb-4">
                                    <div class="card h-100 browse-item-card mini">
                                        <!-- Item Image -->
                                        <div class="position-relative">
                                            {% if item.primaryLogo %}
                                                <img src="/lendable_items/{{ item.primaryLogo }}" 
                                                     alt="{{ item.name }}" 
                                                     class="card-img-top" 
                                                     style="height: 200px; object-fit: cover;">
                                            {% else %}
                                                <div class="card-img-top bg-light d-flex align-items-center justify-content-center" 
                                                     style="height: 200px; color: #666;">
                                                    <i class="fas fa-image fa-3x"></i>
                                                </div>
                                            {% endif %}
                                            
                                            <!-- Status Badge -->
                                            <span class="position-absolute top-0 end-0 m-2 badge {{ item.isOnLoan ? 'bg-warning' : 'bg-success' }}">
                                                {{ item.isOnLoan ? 'On Loan' : 'Available' }}
                                            </span>
                                        </div>
                                        
                                        <div class="card-body d-flex flex-column">
                                            <!-- Item Title -->
                                            <h5 class="card-title mb-2">{{ item.name }}{% if item.isRequest %}?{% endif %}</h5>
                                            
                                            <!-- Category -->
                                            <p class="text-muted small mb-2">
                                                <i class="fas fa-tag me-1"></i>{{ item.categoryName ?: 'Uncategorized' }}
                                            </p>
                                            
                                            <!-- Description -->
                                            {% if item.description %}
                                                <p class="card-text mb-2">{{ item.description|length > 100 ? item.description|slice(0, 100) ~ '...' : item.description }}</p>
                                            {% endif %}
                                            
                                            <!-- Condition -->
                                            {% if item.condition %}
                                                <p class="small mb-2">
                                                    <strong>Condition:</strong> 
                                                    <span class="badge bg-light text-dark">{{ item.condition|title }}</span>
                                                </p>
                                            {% endif %}
                                            
                                            <!-- Pricing Info -->
                                            {% if item.dailyRate or item.deposit %}
                                                <div class="mb-2">
                                                    {% if item.dailyRate %}
                                                        <span class="text-success fw-bold">${{ item.dailyRate }}/day</span>
                                                    {% endif %}
                                                    {% if item.deposit %}
                                                        <span class="text-muted small">• ${{ item.deposit }} deposit</span>
                                                    {% endif %}
                                                </div>
                                            {% endif %}
                                            
                                            <!-- Special Instructions -->
                                            {% if item.specialInstructions %}
                                                <p class="small text-info mb-2">
                                                    <i class="fas fa-info-circle me-1"></i>{{ item.specialInstructions|length > 80 ? item.specialInstructions|slice(0, 80) ~ '...' : item.specialInstructions }}
                                                </p>
                                            {% endif %}
                                            
                                            <!-- Action Buttons -->
                                            <div class="mt-auto">
                                                <div class="d-flex gap-2">
                                                    <a href="/item/{{ item.id }}" class="btn btn-outline-primary btn-sm flex-fill">
                                                        <i class="fas fa-eye me-1"></i>View Details
                                                    </a>
                                                    <a href="/edit-item/{{ item.id }}" class="btn btn-outline-secondary btn-sm">
                                                        <i class="fas fa-edit"></i>
                                                    </a>
                                                    {% if item.qrCode %}
                                                        <a href="/item/{{ item.id }}/qr" class="btn btn-outline-info btn-sm" title="QR Code">
                                                            <i class="fas fa-qrcode"></i>
                                                        </a>
                                                    {% endif %}
                                                </div>
                                            </div>
                                            
                                            <!-- Stats -->
                                            <div class="mt-2 pt-2 border-top">
                                                <small class="text-muted">
                                                    <i class="fas fa-eye me-1"></i>{{ item.views ?: 0 }} views
                                                    {% if item.timesLent %}
                                                        • <i class="fas fa-handshake me-1"></i>{{ item.timesLent }} loans
                                                    {% endif %}
                                                </small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        {% else %}
                            <div class="text-center py-4">
                                <i class="fas fa-box-open text-muted mb-3" style="font-size: 3rem;"></i>
                                <p class="text-muted">No lendable items yet. <a href="/create-item">Create your first item</a>.</p>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <!-- Borrow Requests from Others -->
        <div class="row mb-4" id="borrow-requests">
            <div class="col-12">
                <div class="card">
                    <div class="card-header bg-info text-white">
                        <h5 class="mb-0">
                            <i class="fas fa-hand-paper me-2"></i>
                            Borrow Requests from Others ({{ borrowRequests|length }})
                        </h5>
                    </div>
                    <div class="card-body">
                        {% if borrowRequests|length > 0 %}
                            {% for request in borrowRequests %}
                            <div class="border rounded p-3 mb-3">
                                <div class="d-flex align-items-center justify-content-between">
                                    <div class="d-flex align-items-center">
                                        {% if request.borrowerAvatar %}
                                            <img src="/ll_images/{{ request.borrowerAvatar }}" 
                                                 alt="{{ request.borrowerName }}" 
                                                 class="rounded-circle me-3" 
                                                 style="width: 40px; height: 40px; object-fit: cover;">
                                        {% else %}
                                            <div class="rounded-circle bg-secondary text-white me-3 d-flex align-items-center justify-content-center" 
                                                 style="width: 40px; height: 40px; font-size: 14px;">
                                                {{ request.borrowerName|first|upper }}
                                            </div>
                                        {% endif %}
                                        <div>
                                            <h6 class="mb-0">{{ request.itemName }}</h6>
                                            <p class="small text-muted mb-0">Requested by {{ request.borrowerName }}</p>
                                            <small class="text-muted">{{ request.createdAt|date('M j, Y g:i A') }}</small>
                                        </div>
                                    </div>
                                    <div>
                                        <span class="badge bg-warning">{{ request.status|title }}</span>
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                        {% else %}
                            <div class="text-center py-4">
                                <i class="fas fa-inbox text-muted mb-3" style="font-size: 3rem;"></i>
                                <p class="text-muted">No pending borrow requests.</p>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <!-- Items I've Borrowed -->
        <div class="row mb-4" id="items-borrowed">
            <div class="col-12">
                <div class="card">
                    <div class="card-header bg-success text-white">
                        <h5 class="mb-0">
                            <i class="fas fa-handshake me-2"></i>
                            Items I've Borrowed ({{ borrowedItems|length }})
                        </h5>
                    </div>
                    <div class="card-body">
                        {% if borrowedItems|length > 0 %}
                            <div class="row">
                                {% for item in borrowedItems %}
                                <div class="col-12 col-md-6 col-lg-4 mb-4">
                                    <div class="card h-100 browse-item-card mini">
                                        <div class="position-relative">
                                            {% if item.primary_logo %}
                                                <img src="/lendable_items/{{ item.primary_logo }}" 
                                                     alt="{{ item.item_name ?: 'Borrowed Item' }}" 
                                                     class="card-img-top" 
                                                     style="height: 200px; object-fit: cover;">
                                            {% else %}
                                                <div class="card-img-top bg-light d-flex align-items-center justify-content-center" 
                                                     style="height: 200px; color: #666;">
                                                    <i class="fas fa-image fa-3x"></i>
                                                </div>
                                            {% endif %}
                                            <span class="position-absolute top-0 end-0 m-2 badge bg-info">Borrowing</span>
                                        </div>
                                        <div class="card-body d-flex flex-column">
                                            <h5 class="card-title mb-2">{{ item.item_name }}</h5>
                                            <p class="text-muted small mb-2">
                                                <i class="fas fa-user me-1"></i>From: {{ item.owner_show_name ?: item.owner_first_name }}
                                            </p>
                                            {% if item.description %}
                                                <p class="card-text mb-2">{{ item.description|length > 80 ? item.description|slice(0, 80) ~ '...' : item.description }}</p>
                                            {% endif %}
                                            <p class="text-warning small mb-2">
                                                <i class="fas fa-calendar me-1"></i>Due: {{ item.end_date|date('M j, Y') }}
                                            </p>
                                            {% if item.condition %}
                                                <p class="small mb-2">
                                                    <strong>Condition:</strong> 
                                                    <span class="badge bg-light text-dark">{{ item.condition|title }}</span>
                                                </p>
                                            {% endif %}
                                            <div class="mt-auto">
                                                <div class="d-flex gap-2">
                                                    <a href="/item/{{ item.item_id }}" class="btn btn-outline-primary btn-sm flex-fill">
                                                        <i class="fas fa-eye me-1"></i>View Item
                                                    </a>
                                                    <a href="/return/{{ item.item_id }}?userId={{ user.id }}" class="btn btn-outline-success btn-sm">
                                                        <i class="fas fa-undo me-1"></i>Return
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        {% else %}
                            <div class="text-center py-4">
                                <i class="fas fa-hand-holding text-muted mb-3" style="font-size: 3rem;"></i>
                                <p class="text-muted">No items currently borrowed.</p>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <!-- My Items Out on Loan -->
        <div class="row mb-4" id="items-on-loan">
            <div class="col-12">
                <div class="card">
                    <div class="card-header bg-warning text-dark">
                        <h5 class="mb-0">
                            <i class="fas fa-arrow-right me-2"></i>
                            My Items Out on Loan ({{ itemsOnLoan|length }})
                        </h5>
                    </div>
                    <div class="card-body">
                        {% if itemsOnLoan|length > 0 %}
                            {% for loan in itemsOnLoan %}
                            <div class="border rounded p-3 mb-3">
                                <div class="d-flex align-items-center justify-content-between">
                                    <div class="d-flex align-items-center">
                                        {% if loan.itemImage %}
                                            <img src="/lendable_items/{{ loan.itemImage }}" 
                                                 alt="{{ loan.itemName }}" 
                                                 class="me-3 rounded" 
                                                 style="width: 50px; height: 50px; object-fit: cover;">
                                        {% else %}
                                            <div class="me-3 bg-light border rounded d-flex align-items-center justify-content-center" 
                                                 style="width: 50px; height: 50px; font-size: 10px; color: #666;">
                                                No Image
                                            </div>
                                        {% endif %}
                                        <div>
                                            <h6 class="mb-0">{{ loan.itemName }}</h6>
                                            <p class="small text-muted mb-0">Borrowed by {{ loan.borrowerName }}</p>
                                            <small class="text-muted">Due: {{ loan.expectedReturnDate|date('M j, Y') }}</small>
                                        </div>
                                    </div>
                                    <div>
                                        <span class="badge bg-warning">On Loan</span>
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                        {% else %}
                            <div class="text-center py-4">
                                <i class="fas fa-check-circle text-muted mb-3" style="font-size: 3rem;"></i>
                                <p class="text-muted">No items out on loan.</p>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <!-- My Wish List -->
        <div class="row mb-4" id="wish-list">
            <div class="col-12">
                <div class="card">
                    <div class="card-header bg-secondary text-white">
                        <h5 class="mb-0">
                            <i class="fas fa-heart me-2"></i>
                            My Wish List ({{ wishListItems|length }})
                        </h5>
                    </div>
                    <div class="card-body">
                        {% if wishListItems|length > 0 %}
                            <div class="row">
                                {% for item in wishListItems %}
                                <div class="col-md-6 col-lg-4 mb-3">
                                    <div class="card h-100">
                                        <div class="card-body">
                                            <div class="d-flex align-items-start">
                                                {% if item.primaryLogo %}
                                                    <img src="/lendable_items/{{ item.primaryLogo }}" 
                                                         alt="{{ item.name }}" 
                                                         class="me-3 rounded" 
                                                         style="width: 60px; height: 60px; object-fit: cover;">
                                                {% else %}
                                                    <div class="me-3 bg-light border rounded d-flex align-items-center justify-content-center" 
                                                         style="width: 60px; height: 60px; font-size: 12px; color: #666;">
                                                        No Image
                                                    </div>
                                                {% endif %}
                                                <div class="flex-grow-1">
                                                    <h6 class="card-title mb-1">{{ item.name }}{% if item.isRequest %}?{% endif %}</h6>
                                                    <p class="small text-muted mb-0">By {{ item.ownerName }}</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        {% else %}
                            <div class="text-center py-4">
                                <i class="fas fa-heart text-muted mb-3" style="font-size: 3rem;"></i>
                                <p class="text-muted">No items in your wish list yet. <a href="/browse">Browse items</a> to add favorites.</p>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <!-- Draft Items -->
        <div class="row mb-4" id="draft-items">
            <div class="col-12">
                <div class="card">
                    <div class="card-header bg-light text-dark">
                        <h5 class="mb-0">
                            <i class="fas fa-edit me-2"></i>
                            Draft Items ({{ draftItems|length }})
                        </h5>
                    </div>
                    <div class="card-body">
                        {% if draftItems|length > 0 %}
                            {% for item in draftItems %}
                            <div class="border rounded p-3 mb-3">
                                <div class="d-flex align-items-center justify-content-between">
                                    <div>
                                        <h6 class="mb-1">{{ item.name ?: 'Untitled Draft' }}{% if item.isRequest %}?{% endif %}</h6>
                                        <p class="small text-muted mb-0">Last modified: {{ item.updatedAt|date('M j, Y g:i A') }}</p>
                                    </div>
                                    <div>
                                        <a href="/edit-item/{{ item.id }}" class="btn btn-sm btn-outline-primary">Continue Editing</a>
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                        {% else %}
                            <div class="text-center py-4">
                                <i class="fas fa-file-alt text-muted mb-3" style="font-size: 3rem;"></i>
                                <p class="text-muted">No draft items.</p>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <!-- My Hours Offered -->
        <div class="row mb-4" id="my-hours-offered">
            <div class="col-12">
                <div class="card">
                    <div class="card-header bg-light text-dark">
                        <h5 class="mb-0">
                            <i class="fas fa-clock me-2"></i>
                            My Hours Offered ({{ userHourOfferings|length|default(0) }})
                        </h5>
                    </div>
                    <div class="card-body">
                        {% if userHourOfferings|length > 0 %}
                            <div class="row">
                                {% for offering in userHourOfferings %}
                                <div class="col-md-6 col-lg-4 mb-3">
                                    <div class="border rounded p-3">
                                        <div class="d-flex align-items-start justify-content-between">
                                            <div class="flex-grow-1">
                                                <h6 class="mb-1 fw-bold text-primary">{{ offering.title }}</h6>
                                                {% if offering.description %}
                                                    <p class="small text-muted mb-2">{{ offering.description }}</p>
                                                {% endif %}
                                                <p class="small mb-1">
                                                    <i class="fas fa-calendar text-muted me-1"></i>
                                                    {{ offering.offerDate|date('M j, Y') }}
                                                </p>
                                                <p class="small mb-2">
                                                    <i class="fas fa-clock text-muted me-1"></i>
                                                    {{ offering.startTime|date('g:i A') }} - {{ offering.endTime|date('g:i A') }}
                                                </p>
                                                <span class="badge {{ offering.isBooked ? 'bg-success' : 'bg-primary' }}">
                                                    {{ offering.isBooked ? 'Scheduled' : 'Available' }}
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                            <div class="text-center mt-3">
                                <a href="/offer-hour" class="btn btn-primary">
                                    <i class="fas fa-plus me-1"></i>
                                    Offer Another Hour
                                </a>
                                <a href="/browse-hours?tab=my-hours" class="btn btn-outline-primary ms-2">
                                    <i class="fas fa-eye me-1"></i>
                                    View All My Hours
                                </a>
                            </div>
                        {% else %}
                            <div class="text-center py-4">
                                <i class="fas fa-clock text-muted mb-3" style="font-size: 3rem;"></i>
                                <p class="text-muted mb-3">You haven't offered any hours yet.</p>
                                <a href="/offer-hour" class="btn btn-primary">
                                    <i class="fas fa-plus me-1"></i>
                                    Offer an Hour
                                </a>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <!-- Offered Hours Reserved -->
        <div class="row mb-4" id="offered-hours-reserved">
            <div class="col-12">
                <div class="card">
                    <div class="card-header bg-light text-dark">
                        <h5 class="mb-0">
                            <i class="fas fa-handshake me-2"></i>
                            Offered Hours Reserved ({{ bookedHourOfferings|length|default(0) }})
                        </h5>
                    </div>
                    <div class="card-body">
                        {% if bookedHourOfferings|length > 0 %}
                            <div class="row">
                                {% for booking in bookedHourOfferings %}
                                <div class="col-md-6 col-lg-4 mb-3">
                                    <div class="border rounded p-3 bg-light">
                                        <div class="d-flex align-items-start justify-content-between">
                                            <div class="flex-grow-1">
                                                <h6 class="mb-1 fw-bold text-success">{{ booking.offering.title }}</h6>
                                                {% if booking.offering.description %}
                                                    <p class="small text-muted mb-2">{{ booking.offering.description }}</p>
                                                {% endif %}
                                                <p class="small mb-1">
                                                    <i class="fas fa-calendar text-muted me-1"></i>
                                                    {{ booking.offering.offerDate|date('M j, Y') }}
                                                </p>
                                                <p class="small mb-2">
                                                    <i class="fas fa-clock text-muted me-1"></i>
                                                    {{ booking.offering.startTime|date('g:i A') }} - {{ booking.offering.endTime|date('g:i A') }}
                                                </p>
                                                <p class="small mb-2">
                                                    <i class="fas fa-user text-muted me-1"></i>
                                                    Reserved by: <strong>{{ booking.requesterName }}</strong>
                                                </p>
                                                <span class="badge bg-success">Scheduled</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        {% else %}
                            <div class="text-center py-4">
                                <i class="fas fa-handshake text-muted mb-3" style="font-size: 3rem;"></i>
                                <p class="text-muted">None of your hour offerings have been reserved yet.</p>
                                <p class="small text-muted">When someone reserves one of your hour offerings, it will appear here.</p>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

{% endblock %}