{% extends "base.html" %}

{% block title %}Dashboard - IT Asset Tracker{% endblock %}

{% block content %}
<div class="page-header">
    <h1>Dashboard</h1>
</div>

<div class="stats-grid">
    <div class="stat-card">
        <div class="stat-value">{{ stats.total or 0 }}</div>
        <div class="stat-label">Total Devices</div>
    </div>
    <div class="stat-card">
        <div class="stat-value color-green">{{ stats.available or 0 }}</div>
        <div class="stat-label">Available</div>
    </div>
    <div class="stat-card">
        <div class="stat-value color-orange">{{ stats.pending or 0 }}</div>
        <div class="stat-label">Pending</div>
    </div>
    <div class="stat-card">
        <div class="stat-value color-blue">{{ stats.assigned or 0 }}</div>
        <div class="stat-label">Assigned</div>
    </div>
    <div class="stat-card">
        <div class="stat-value color-gray">{{ stats.retired or 0 }}</div>
        <div class="stat-label">Retired</div>
    </div>
</div>

{% if pending %}
<div class="section-header">Pending Pickups ({{ pending|length }})</div>
<div class="card">
    <div class="mobile-cards mobile-cards-flush">
        {% for p in pending[:5] %}
        <a href="{{ url_for('complete_checkout', transaction_id=p.id) }}" class="list-row">
            <div class="list-row-content">
                <div class="list-row-title">{{ p.asset_tag }} - {{ p.make }} {{ p.model }}</div>
                <div class="list-row-subtitle">For: {{ p.person_name }}</div>
            </div>
            <span class="status-badge status-pending">Pending</span>
            <div class="list-row-chevron"></div>
        </a>
        {% endfor %}
    </div>
    <div class="table-wrapper table-wrapper-flush">
        <table>
            <thead>
                <tr>
                    <th>Asset Tag</th>
                    <th>Device</th>
                    <th>Recipient</th>
                    <th>Staged</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                {% for p in pending[:5] %}
                <tr>
                    <td>{{ p.asset_tag }}</td>
                    <td>{{ p.make }} {{ p.model }}</td>
                    <td>{{ p.person_name }}</td>
                    <td>{{ p.created_at[:10] if p.created_at else '-' }}</td>
                    <td>
                        <a href="{{ url_for('complete_checkout', transaction_id=p.id) }}" class="btn btn-sm btn-primary">Complete</a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% if pending|length > 5 %}
<p class="text-center mt-2"><a href="{{ url_for('pending_pickups') }}">View all {{ pending|length }} pending</a></p>
{% endif %}
{% endif %}

<div class="two-col mt-3">
    <div>
        <div class="section-header">Recent Activity</div>
        <div class="card">
            {% if recent %}
            <div class="mobile-cards mobile-cards-flush">
                {% for t in recent %}
                <a href="{{ url_for('transaction_detail', transaction_id=t.id) }}" class="list-row">
                    <div class="list-row-content">
                        <div class="list-row-title">
                            <span class="{% if t.transaction_type == 'check_out' %}transaction-type-checkout{% else %}transaction-type-checkin{% endif %}">
                                {{ 'OUT' if t.transaction_type == 'check_out' else 'IN' }}
                            </span>
                            {{ t.asset_tag }}
                        </div>
                        <div class="list-row-subtitle">{{ t.person_name }} &middot; {{ t.created_at[:10] if t.created_at else '-' }}</div>
                    </div>
                    <span class="status-badge status-{{ t.status }}">{{ t.status|capitalize }}</span>
                    <div class="list-row-chevron"></div>
                </a>
                {% endfor %}
            </div>
            <div class="table-wrapper table-wrapper-flush">
                <table>
                    <thead>
                        <tr>
                            <th>Type</th>
                            <th>Device</th>
                            <th>Person</th>
                            <th>Date</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for t in recent %}
                        <tr>
                            <td class="{% if t.transaction_type == 'check_out' %}transaction-type-checkout{% else %}transaction-type-checkin{% endif %}">
                                {{ 'OUT' if t.transaction_type == 'check_out' else 'IN' }}
                            </td>
                            <td><a href="{{ url_for('device_detail', device_id=t.device_id) }}">{{ t.asset_tag }}</a></td>
                            <td>{{ t.person_name }}</td>
                            <td>{{ t.created_at[:10] if t.created_at else '-' }}</td>
                            <td><span class="status-badge status-{{ t.status }}">{{ t.status|capitalize }}</span></td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <div class="empty-state">
                <p>No recent activity</p>
            </div>
            {% endif %}
        </div>
    </div>

    <div>
        <div class="section-header">Quick Actions</div>
        <div class="card">
            <div class="quick-actions">
                <a href="{{ url_for('stage_checkout') }}" class="btn btn-lg btn-primary btn-block">Checkout Device</a>
                <a href="{{ url_for('checkin') }}" class="btn btn-lg btn-block">Check In Device</a>
                <a href="{{ url_for('device_add') }}" class="btn btn-lg btn-block">Add New Device</a>
                <a href="{{ url_for('import_data') }}" class="btn btn-lg btn-block">Import Data</a>
            </div>
        </div>
    </div>
</div>
{% endblock %}