{% extends "base.html" %}

{% block title %}Check In Device - IT Asset Tracker{% endblock %}

{% block content %}
<div class="page-header page-header-centered">
    <h1>Check In Device</h1>
</div>

<div class="content-narrow">
    <form id="checkinForm" method="POST" onsubmit="return validateCheckinForm()">
        <input type="hidden" id="device_id" name="device_id" value="">

        <div class="section-header">Select Device</div>

        <div id="deviceSearchGroup">
            <div class="search-bar">
                <input type="text" id="deviceSearch" placeholder="Search by name, asset tag, serial..." autocomplete="off">
            </div>
        </div>

        <div id="deviceList" class="device-select-list hidden"></div>
        <div id="noResults" class="card hidden empty-state-inline">
            <p class="text-muted mb-0">No matching devices found.</p>
        </div>

        <div id="selectedDevice" class="selected-device-card hidden">
            <div class="selected-device-header">
                <span class="selected-label">Selected</span>
                <button type="button" class="btn btn-sm" onclick="clearSelection()">Change</button>
            </div>
            <div id="selectedDeviceInfo"></div>
        </div>

        <div id="checkinDetails" class="hidden">
            <div class="section-header mt-3">Device Condition</div>
            <div class="condition-select">
                <div class="condition-option">
                    <input type="radio" id="cond_excellent" name="condition" value="excellent">
                    <label for="cond_excellent">Excellent</label>
                </div>
                <div class="condition-option">
                    <input type="radio" id="cond_good" name="condition" value="good" checked>
                    <label for="cond_good">Good</label>
                </div>
                <div class="condition-option">
                    <input type="radio" id="cond_fair" name="condition" value="fair">
                    <label for="cond_fair">Fair</label>
                </div>
                <div class="condition-option">
                    <input type="radio" id="cond_poor" name="condition" value="poor">
                    <label for="cond_poor">Poor</label>
                </div>
            </div>

            <div class="section-header mt-3">Signatures</div>
            <div class="two-col">
                <div class="signature-container">
                    <label>Person Returning *</label>
                    <div class="signature-pad-wrapper">
                        <canvas id="recipientSigPad" class="signature-pad" data-input="recipient_signature"></canvas>
                        <div class="signature-controls">
                            <span class="signature-status empty">Not signed</span>
                            <button type="button" class="btn btn-sm" onclick="clearSignature('recipientSigPad')">Clear</button>
                        </div>
                    </div>
                    <input type="hidden" id="recipient_signature" name="recipient_signature">
                </div>

                <div class="signature-container">
                    <label>IT Staff *</label>
                    <div class="signature-pad-wrapper">
                        <canvas id="itSigPad" class="signature-pad" data-input="it_signature"></canvas>
                        <div class="signature-controls">
                            <span class="signature-status empty">Not signed</span>
                            <button type="button" class="btn btn-sm" onclick="clearSignature('itSigPad')">Clear</button>
                        </div>
                    </div>
                    <input type="hidden" id="it_signature" name="it_signature">
                </div>
            </div>

            <div class="section-header mt-3">Notes</div>
            <div class="form-grouped">
                <div class="form-row form-row-auto">
                    <textarea id="notes" name="notes" placeholder="Any issues or notes about the returned device..." class="textarea-notes"></textarea>
                </div>
            </div>
        </div>

        <div class="action-buttons mt-3">
            <button type="submit" class="btn btn-primary btn-lg">Complete Check In</button>
            <a href="{{ url_for('devices_list', status='assigned') }}" class="btn btn-lg">Cancel</a>
        </div>
    </form>
</div>
{% endblock %}

{% block scripts %}
<script>
let selectedDeviceData = null;

const devices = [
    {% for device in devices %}
    {
        id: {{ device.id }},
        assetTag: "{{ device.asset_tag|e }}",
        make: "{{ device.make|e }}",
        model: "{{ device.model|e }}",
        serialNumber: "{{ (device.serial_number or '')|e }}",
        hostname: "{{ (device.hostname or '')|e }}",
        personName: "{{ device.person_name|e }}",
        checkoutDate: "{{ device.checkout_date or '' }}"
    }{% if not loop.last %},{% endif %}
    {% endfor %}
];

function filterDevices() {
    const searchTerm = document.getElementById('deviceSearch').value.toLowerCase().trim();
    const listEl = document.getElementById('deviceList');
    const noResultsEl = document.getElementById('noResults');

    if (!searchTerm) {
        listEl.classList.add('hidden');
        noResultsEl.classList.add('hidden');
        return;
    }

    const matches = devices.filter(d => {
        const searchStr = [
            d.personName,
            d.assetTag,
            d.serialNumber,
            d.make,
            d.model,
            d.hostname
        ].join(' ').toLowerCase();
        return searchStr.includes(searchTerm);
    });

    if (matches.length === 0) {
        listEl.classList.add('hidden');
        noResultsEl.classList.remove('hidden');
        return;
    }

    listEl.innerHTML = matches.map(device => `
        <div class="device-select-item" data-id="${device.id}">
            <div class="device-select-primary">${device.assetTag} - ${device.make} ${device.model}</div>
            <div class="device-select-secondary">
                Assigned to: <strong>${device.personName}</strong>
                ${device.serialNumber ? ' &bull; S/N: ' + device.serialNumber : ''}
            </div>
        </div>
    `).join('');

    listEl.querySelectorAll('.device-select-item').forEach(item => {
        item.addEventListener('click', function() {
            selectDevice(parseInt(this.dataset.id));
        });
    });

    listEl.classList.remove('hidden');
    noResultsEl.classList.add('hidden');
}

function selectDevice(id) {
    const device = devices.find(d => d.id === id);
    if (!device) return;

    selectedDeviceData = device;
    document.getElementById('device_id').value = id;

    document.getElementById('deviceSearchGroup').classList.add('hidden');
    document.getElementById('deviceList').classList.add('hidden');
    document.getElementById('noResults').classList.add('hidden');
    document.getElementById('selectedDevice').classList.remove('hidden');
    document.getElementById('checkinDetails').classList.remove('hidden');

    document.getElementById('selectedDeviceInfo').innerHTML = `
        <div class="device-select-primary">${device.assetTag} - ${device.make} ${device.model}</div>
        <div class="device-select-secondary">
            Assigned to: <strong>${device.personName}</strong>
            ${device.serialNumber ? ' &bull; S/N: ' + device.serialNumber : ''}
        </div>
    `;

    // Re-init signature pads after showing them
    if (typeof initSignaturePads === 'function') {
        initSignaturePads();
    }
}

function clearSelection() {
    selectedDeviceData = null;
    document.getElementById('device_id').value = '';
    document.getElementById('deviceSearch').value = '';
    document.getElementById('deviceSearchGroup').classList.remove('hidden');
    document.getElementById('deviceList').classList.add('hidden');
    document.getElementById('noResults').classList.add('hidden');
    document.getElementById('selectedDevice').classList.add('hidden');
    document.getElementById('checkinDetails').classList.add('hidden');
    document.getElementById('deviceSearch').focus();
}

function validateCheckinForm() {
    if (!selectedDeviceData) {
        showToast('Please select a device.', 'error');
        return false;
    }
    return validateSignatures(document.getElementById('checkinForm'));
}

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('deviceSearch').addEventListener('input', filterDevices);

    const urlParams = new URLSearchParams(window.location.search);
    const preselectedId = urlParams.get('device_id');
    if (preselectedId) {
        selectDevice(parseInt(preselectedId));
    }
});
</script>
{% endblock %}