{% extends "base.html" %}

{% block content %}
    <h2>{{ _('Loan Tablet') }}</h2>
    <form method="POST" action="/loan_tablet">
        <!-- Tablet Selection with Search -->
        <div class="form-group">
            <label for="tablet_id">{{ _('Tablet') }}:</label>
            <input type="text" id="tablet_search" class="search-input"
                   placeholder="{{ _('Search tablets (brand, model, or serial)...') }}"
                   onkeyup="filterDropdown('tablet_search', 'tablet_id')">
            <select id="tablet_id" name="tablet_id" required size="5">
                <option value="">{{ _('Select a tablet') }}</option>
                {% for tablet in available_tablets %}
                    <option value="{{ tablet.id }}"
                            data-search="{{ tablet.brand|lower }} {{ tablet.model|lower }} {{ tablet.serial_number|lower }}">
                        {{ tablet.brand }} {{ tablet.model }} ({{ tablet.serial_number }})
                    </option>
                {% endfor %}
            </select>
        </div>

        <!-- User Selection with Search -->
        <div class="form-group">
            <label for="user_id">{{ _('User') }}:</label>
            <input type="text" id="user_search" class="search-input"
                   placeholder="{{ _('Search users (name or ID)...') }}"
                   onkeyup="filterDropdown('user_search', 'user_id')">
            <select id="user_id" name="user_id" required size="5">
                <option value="">{{ _('Select a user') }}</option>
                {% for user in users %}
                    <option value="{{ user.id }}"
                            data-search="{{ user.name|lower }} {{ user.identification|lower }}">
                        {{ user.name }} ({{ user.identification }})
                    </option>
                {% endfor %}
            </select>
        </div>

        <div class="form-group">
            <button type="submit" class="btn">{{ _('Loan Tablet') }}</button>
        </div>
    </form>

    <script>
        function filterDropdown(searchId, selectId) {
            const search = document.getElementById(searchId).value.toLowerCase();
            const select = document.getElementById(selectId);
            const options = select.options;

            for (let i = 1; i < options.length; i++) {
                const searchText = options[i].getAttribute('data-search') || '';
                options[i].style.display = searchText.includes(search) ? '' : 'none';
            }

            // Show first visible option if search is empty, otherwise keep selection
            if (search === '') {
                select.selectedIndex = 0;
            }
        }
    </script>

    <style>
        .search-input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
            margin-bottom: 5px;
        }
        select[size] {
            width: 100%;
            max-height: 200px;
            overflow-y: auto;
        }
    </style>
{% endblock %}