{% extends "base.html" %}

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

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

<form method="GET" id="filter-form">
    <div class="filter-bar">
        <div class="search-bar search-bar-inline">
            <input type="text" name="search" id="search-input" placeholder="Search asset tag, serial, name..." value="{{ search }}">
        </div>
        <select name="type" id="type-select">
            <option value="">All Types</option>
            <option value="check_out" {% if transaction_type == 'check_out' %}selected{% endif %}>Check Out</option>
            <option value="check_in" {% if transaction_type == 'check_in' %}selected{% endif %}>Check In</option>
        </select>
        <input type="date" name="start_date" id="start-date" value="{{ start_date }}">
        <input type="date" name="end_date" id="end-date" value="{{ end_date }}">
        {% if search or transaction_type or start_date or end_date %}
        <a href="{{ url_for('log_list') }}" class="btn">Clear</a>
        {% endif %}
    </div>
</form>

<script>
(function() {
    const form = document.getElementById('filter-form');
    const searchInput = document.getElementById('search-input');
    const typeSelect = document.getElementById('type-select');
    const startDate = document.getElementById('start-date');
    const endDate = document.getElementById('end-date');

    let debounceTimer;

    function submitForm() {
        form.submit();
    }

    function debounceSubmit() {
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(submitForm, 300);
    }

    // Debounced submit for text input
    searchInput.addEventListener('input', debounceSubmit);

    // Immediate submit for select and date inputs
    typeSelect.addEventListener('change', submitForm);
    startDate.addEventListener('change', submitForm);
    endDate.addEventListener('change', submitForm);
})();
</script>

{% if transactions %}
<div class="mobile-cards">
    {% for t in transactions %}
    <a href="{{ url_for('transaction_detail', transaction_id=t.id) }}" class="device-card">
        <div class="device-card-header">
            <span class="{% if t.transaction_type == 'check_out' %}transaction-type-checkout{% else %}transaction-type-checkin{% endif %}">
                {{ 'CHECK OUT' if t.transaction_type == 'check_out' else 'CHECK IN' }}
            </span>
            <span class="status-badge status-{{ t.status }}">{{ t.status|capitalize }}</span>
        </div>
        <div class="device-card-meta">
            {{ t.asset_tag }} - {{ t.make }} {{ t.model }}<br>
            {{ t.person_name }} &middot; {{ t.created_at[:10] if t.created_at else '-' }}
        </div>
    </a>
    {% endfor %}
</div>

<div class="table-wrapper">
    <table>
        <thead>
            <tr>
                <th>Date</th>
                <th>Type</th>
                <th>Device</th>
                <th>Person</th>
                <th>Status</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            {% for t in transactions %}
            <tr>
                <td>{{ t.created_at[:10] if t.created_at else '-' }}</td>
                <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><span class="status-badge status-{{ t.status }}">{{ t.status|capitalize }}</span></td>
                <td><a href="{{ url_for('transaction_detail', transaction_id=t.id) }}" class="btn btn-sm">View</a></td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% else %}
<div class="empty-state">
    <p>No transactions found{% if search %} matching your filters{% endif %}.</p>
</div>
{% endif %}
{% endblock %}