{% extends "base.html" %}

{% block title %}{{ gettext('Loan Tablet') }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12 col-lg-8 offset-lg-2">
            <h1 class="page-title">{{ gettext('Loan Tablet') }}</h1>
            
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">{{ gettext('Loan Information') }}</h5>
                </div>
                <div class="card-body">
                    <form method="POST" action="/loan_tablet">
                        
                        <!-- Tablet Selection -->
                        <div class="mb-3">
                            <label for="tablet_id" class="form-label">{{ gettext('Tablet') }} *</label>
                            <input type="text" id="tablet_search" class="form-control mb-2"
                                   placeholder="{{ gettext('Search tablets (brand, model, or serial)...') }}"
                                   onkeyup="filterDropdown('tablet_search', 'tablet_id')">
                            <select id="tablet_id" name="tablet_id" class="form-select" required size="5">
                                <option value="">{{ gettext('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 class="form-text">{{ gettext('Select which tablet to loan') }}</div>
                        </div>
                        
                        <!-- User Selection (Staff) -->
                        <div class="mb-3">
                            <label for="user_id" class="form-label">{{ gettext('Staff User') }} *</label>
                            <input type="text" id="user_search" class="form-control mb-2"
                                   placeholder="{{ gettext('Search users (name or ID)...') }}"
                                   onkeyup="filterDropdown('user_search', 'user_id')">
                            <select id="user_id" name="user_id" class="form-select" required size="5">
                                <option value="">{{ gettext('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 class="form-text">{{ gettext('Select the staff member processing the loan') }}</div>
                        </div>
                        
                        <!-- Student Selection (Optional) -->
                        <div class="mb-3">
                            <label for="student_id" class="form-label">{{ gettext('Student (Optional)') }}</label>
                            <input type="text" id="student_search" class="form-control mb-2"
                                   placeholder="{{ gettext('Search students (name, CIAL, or NIF)...') }}"
                                   onkeyup="filterDropdown('student_search', 'student_id')">
                            <select id="student_id" name="student_id" class="form-select" size="5">
                                <option value="">{{ gettext('Select a student (optional)') }}</option>
                                {% for student in students %}
                                <option value="{{ student.id }}"
                                        data-search="{{ student.last_name|lower }} {{ student.first_name|lower }} {{ student.cial_code|lower }} {{ student.nif_nie_passport|lower }}">
                                    {{ student.last_name }}, {{ student.first_name }} ({{ student.cial_code }})
                                </option>
                                {% endfor %}
                            </select>
                            <div class="form-text">{{ gettext('Optionally associate this loan with a student') }}</div>
                        </div>
                        
                        <!-- Form Actions -->
                        <div class="d-flex justify-content-end gap-2">
                            <a href="/" class="btn btn-secondary">
                                <i class="bi bi-x-circle"></i> {{ gettext('Cancel') }}
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-check-circle"></i> {{ gettext('Loan Tablet') }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<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>
    select[size] {
        width: 100%;
        max-height: 200px;
        overflow-y: auto;
    }
</style>
{% endblock %}