{% extends "base.html" %}

{% block title %}Count - {{ session.session_name }}{% endblock %}

{% block content %}
<div class="count-container">
    <div class="count-header">
        <a href="{{ url_for('dashboard') }}" class="breadcrumb">← Back</a>
        <h1 class="page-title">{{ session.session_name }}</h1>
    </div>

    <div class="scan-card">
        <div class="scan-header">
            <h2 class="scan-title">Scan Location Barcode</h2>
            <p class="scan-subtitle">Point scanner at location label and trigger</p>
        </div>

        <form id="locationScanForm" class="scan-form">
            <div class="scan-input-group">
                <input 
                    type="text" 
                    id="locationInput" 
                    class="scan-input" 
                    placeholder="Scan or type location code..."
                    autocomplete="off"
                    autofocus
                >
                <button type="submit" class="btn-scan">START</button>
            </div>
        </form>

        <div class="scan-help">
            <div class="help-item">
                <span class="help-icon">📱</span>
                <span class="help-text">Hold scanner trigger to scan barcode</span>
            </div>
            <div class="help-item">
                <span class="help-icon">⌨️</span>
                <span class="help-text">Or manually type location code</span>
            </div>
        </div>
    </div>
</div>

<script>
document.getElementById('locationScanForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const locationCode = document.getElementById('locationInput').value.trim().toUpperCase();
    
    if (!locationCode) {
        alert('Please scan or enter a location code');
        return;
    }
    
    // Show loading state
    const btn = this.querySelector('.btn-scan');
    const originalText = btn.textContent;
    btn.textContent = 'LOADING...';
    btn.disabled = true;
    
    fetch('{{ url_for("start_location", session_id=session.session_id) }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: 'location_code=' + encodeURIComponent(locationCode)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            window.location.href = data.redirect;
        } else {
            alert(data.message);
            btn.textContent = originalText;
            btn.disabled = false;
            document.getElementById('locationInput').value = '';
            document.getElementById('locationInput').focus();
        }
    })
    .catch(error => {
        alert('Error starting location count');
        console.error(error);
        btn.textContent = originalText;
        btn.disabled = false;
    });
});

// Auto-uppercase input
document.getElementById('locationInput').addEventListener('input', function(e) {
    this.value = this.value.toUpperCase();
});
</script>
{% endblock %}