{% extends "base.html" %}

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

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

<div class="content-narrow">
    <p class="subhead mb-3">
        Stage a device for checkout. The device will be marked as "pending" until signatures are collected.
    </p>

    <form id="checkoutForm" method="POST">
        <input type="hidden" id="device_id" name="device_id" value="">
        <input type="hidden" id="person_id" name="person_id" value="">

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

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

        <div id="deviceList" class="device-select-list hidden"></div>
        <div id="deviceNoResults" 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">Device Selected</span>
                <button type="button" class="btn btn-sm" onclick="clearDeviceSelection()">Change</button>
            </div>
            <div id="selectedDeviceInfo"></div>
        </div>

        <div class="section-header mt-3">Assign To</div>

        <div class="person-toggle">
            <button type="button" class="toggle-btn active" id="btnExisting" onclick="showExistingPerson()">Existing Person</button>
            <button type="button" class="toggle-btn" id="btnNew" onclick="showNewPerson()">New Person</button>
        </div>

        <div id="existingPersonSection">
            <div id="personSearchGroup">
                <div class="search-bar">
                    <input type="text" id="personSearch" placeholder="Search by name, location, position..." autocomplete="off">
                </div>
            </div>

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

            <div id="selectedPerson" class="selected-device-card hidden">
                <div class="selected-device-header">
                    <span class="selected-label color-blue">Person Selected</span>
                    <button type="button" class="btn btn-sm" onclick="clearPersonSelection()">Change</button>
                </div>
                <div id="selectedPersonInfo"></div>
            </div>
        </div>

        <div id="newPersonSection" class="hidden">
            <div class="form-grouped">
                <div class="form-row">
                    <label for="new_person_name">Name *</label>
                    <input type="text" id="new_person_name" name="new_person_name" placeholder="Full name">
                </div>
                <div class="form-row">
                    <label for="new_person_location">Location</label>
                    <input type="text" id="new_person_location" name="new_person_location" placeholder="Site/building">
                </div>
                <div class="form-row">
                    <label for="new_person_position">Position</label>
                    <input type="text" id="new_person_position" name="new_person_position" placeholder="Job title">
                </div>
                <div class="form-row">
                    <label for="new_person_phone">Phone</label>
                    <input type="tel" id="new_person_phone" name="new_person_phone" placeholder="Phone number">
                </div>
                <div class="form-row">
                    <label for="new_person_email">Email</label>
                    <input type="email" id="new_person_email" name="new_person_email" placeholder="Email address">
                </div>
            </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 additional notes about this checkout..." class="textarea-notes"></textarea>
            </div>
        </div>

        <div class="action-buttons mt-3">
            <button type="submit" class="btn btn-primary btn-lg">Stage Checkout</button>
            <a href="{{ url_for('devices_list') }}" class="btn btn-lg">Cancel</a>
        </div>
    </form>
</div>
{% endblock %}

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

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 }}"
    }{% if not loop.last %},{% endif %}
    {% endfor %}
];

const people = [
    {% for person in people %}
    {
        id: {{ person.id }},
        name: "{{ person.name|e }}",
        location: "{{ (person.location or '')|e }}",
        position: "{{ (person.position or '')|e }}",
        email: "{{ (person.email or '')|e }}",
        phone: "{{ (person.phone or '')|e }}"
    }{% if not loop.last %},{% endif %}
    {% endfor %}
];

function showExistingPerson() {
    isNewPerson = false;
    document.getElementById('btnExisting').classList.add('active');
    document.getElementById('btnNew').classList.remove('active');
    document.getElementById('existingPersonSection').classList.remove('hidden');
    document.getElementById('newPersonSection').classList.add('hidden');

    document.getElementById('new_person_name').value = '';
    document.getElementById('new_person_location').value = '';
    document.getElementById('new_person_position').value = '';
    document.getElementById('new_person_phone').value = '';
    document.getElementById('new_person_email').value = '';
}

function showNewPerson() {
    isNewPerson = true;
    document.getElementById('btnNew').classList.add('active');
    document.getElementById('btnExisting').classList.remove('active');
    document.getElementById('newPersonSection').classList.remove('hidden');
    document.getElementById('existingPersonSection').classList.add('hidden');

    selectedPersonData = null;
    document.getElementById('person_id').value = '';
    document.getElementById('new_person_name').focus();
}

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

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

    const matches = devices.filter(d => {
        const searchStr = [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">
                ${device.serialNumber ? 'S/N: ' + device.serialNumber : ''}
                ${device.hostname ? ' &bull; ' + device.hostname : ''}
            </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('deviceNoResults').classList.add('hidden');
    document.getElementById('selectedDevice').classList.remove('hidden');

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

function clearDeviceSelection() {
    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('deviceNoResults').classList.add('hidden');
    document.getElementById('selectedDevice').classList.add('hidden');
    document.getElementById('deviceSearch').focus();
}

function filterPeople() {
    const searchTerm = document.getElementById('personSearch').value.toLowerCase().trim();
    const listEl = document.getElementById('personList');
    const noResultsEl = document.getElementById('personNoResults');

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

    const matches = people.filter(p => {
        const searchStr = [p.name, p.location, p.position, p.email].join(' ').toLowerCase();
        return searchStr.includes(searchTerm);
    });

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

    listEl.innerHTML = matches.map(person => `
        <div class="device-select-item" data-id="${person.id}">
            <div class="device-select-primary">${person.name}</div>
            <div class="device-select-secondary">
                ${person.location ? person.location : ''}
                ${person.position ? ' &bull; ' + person.position : ''}
                ${person.email ? ' &bull; ' + person.email : ''}
            </div>
        </div>
    `).join('');

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

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

function selectPerson(id) {
    const person = people.find(p => p.id === id);
    if (!person) return;

    selectedPersonData = person;
    document.getElementById('person_id').value = id;

    document.getElementById('personSearchGroup').classList.add('hidden');
    document.getElementById('personList').classList.add('hidden');
    document.getElementById('personNoResults').classList.add('hidden');
    document.getElementById('selectedPerson').classList.remove('hidden');

    document.getElementById('selectedPersonInfo').innerHTML = `
        <div class="device-select-primary">${person.name}</div>
        <div class="device-select-secondary">
            ${person.location ? person.location : ''}
            ${person.position ? ' &bull; ' + person.position : ''}
            ${person.email ? ' &bull; ' + person.email : ''}
        </div>
    `;
}

function clearPersonSelection() {
    selectedPersonData = null;
    document.getElementById('person_id').value = '';
    document.getElementById('personSearch').value = '';
    document.getElementById('personSearchGroup').classList.remove('hidden');
    document.getElementById('personList').classList.add('hidden');
    document.getElementById('personNoResults').classList.add('hidden');
    document.getElementById('selectedPerson').classList.add('hidden');
    document.getElementById('personSearch').focus();
}

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

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