{% extends "base.html" %}

{% block title %}Add Product - QuantumQuickSales{% endblock %}

{% block page_title %}Add New Product{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="card shadow">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">Product Information</h6>
            </div>
            <div class="card-body">
                <form method="POST">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="product_id" class="form-label">Product ID *</label>
                            <div class="input-group">
                                <input type="number" class="form-control" id="product_id" name="product_id" required min="1">
                                {% if barcode_available %}
                                <button type="button" class="btn btn-outline-secondary" id="scanBarcodeBtn">
                                    <i class="fas fa-barcode"></i> Scan
                                </button>
                                {% endif %}
                            </div>
                            <div class="form-text">Unique identifier for the product</div>
                            {% if not barcode_available %}
                            <small class="text-muted">Barcode scanning not available. Install pyzbar, opencv-python, and Pillow for barcode functionality.</small>
                            {% endif %}
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="product_name" class="form-label">Product Name *</label>
                            <input type="text" class="form-control" id="product_name" name="product_name" required>
                            <div class="form-text">Name of the product</div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="product_price" class="form-label">Price (₹) *</label>
                            <input type="number" class="form-control" id="product_price" name="product_price" required min="0" step="0.01">
                            <div class="form-text">Price in Indian Rupees</div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="quantity" class="form-label">Initial Stock *</label>
                            <input type="number" class="form-control" id="quantity" name="quantity" required min="0">
                            <div class="form-text">Initial quantity in stock</div>
                        </div>
                    </div>
                    
                    <div class="d-flex justify-content-between">
                        <a href="{{ url_for('admin_products') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left me-2"></i>Back to Products
                        </a>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-2"></i>Add Product
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Barcode Scanner Modal -->
{% if barcode_available %}
<div class="modal fade" id="barcodeModal" tabindex="-1" aria-labelledby="barcodeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="barcodeModalLabel">Barcode Scanner</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center">
                <div id="scannerStatus" class="alert alert-info">
                    <i class="fas fa-camera"></i> Position barcode in front of camera
                </div>
                <div id="scannerVideo" style="display: none;">
                    <video id="video" width="100%" height="300" autoplay></video>
                </div>
                <div id="scannerResult" class="alert alert-success" style="display: none;">
                    <i class="fas fa-check"></i> <span id="resultText"></span>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="useBarcodeBtn" style="display: none;">Use This Barcode</button>
            </div>
        </div>
    </div>
</div>
{% endif %}
{% endblock %}

{% block scripts %}
{% if barcode_available %}
<script>
let scannedBarcode = null;

document.getElementById('scanBarcodeBtn').addEventListener('click', function() {
    const modal = new bootstrap.Modal(document.getElementById('barcodeModal'));
    modal.show();
    
    // Start scanning
    startBarcodeScan();
});

function startBarcodeScan() {
    const statusDiv = document.getElementById('scannerStatus');
    const videoDiv = document.getElementById('scannerVideo');
    const resultDiv = document.getElementById('scannerResult');
    const useBtn = document.getElementById('useBarcodeBtn');
    
    statusDiv.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Starting camera...';
    
    // Request camera access
    navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
        .then(function(stream) {
            const video = document.getElementById('video');
            video.srcObject = stream;
            videoDiv.style.display = 'block';
            statusDiv.innerHTML = '<i class="fas fa-camera"></i> Position barcode in front of camera';
            
            // Start scanning for barcodes
            scanBarcode();
        })
        .catch(function(err) {
            statusDiv.innerHTML = '<i class="fas fa-exclamation-triangle"></i> Camera access denied';
            console.error('Camera error:', err);
        });
}

function scanBarcode() {
    // This is a simplified version - in a real implementation, you'd use a barcode scanning library
    // For now, we'll simulate the scanning process
    setTimeout(function() {
        // Simulate barcode detection
        const mockBarcode = Math.floor(Math.random() * 9000) + 1000; // Random 4-digit number
        showBarcodeResult(mockBarcode);
    }, 3000);
}

function showBarcodeResult(barcode) {
    scannedBarcode = barcode;
    const statusDiv = document.getElementById('scannerStatus');
    const resultDiv = document.getElementById('scannerResult');
    const resultText = document.getElementById('resultText');
    const useBtn = document.getElementById('useBarcodeBtn');
    
    statusDiv.style.display = 'none';
    resultDiv.style.display = 'block';
    resultText.textContent = `Barcode detected: ${barcode}`;
    useBtn.style.display = 'block';
}

document.getElementById('useBarcodeBtn').addEventListener('click', function() {
    if (scannedBarcode) {
        document.getElementById('product_id').value = scannedBarcode;
        bootstrap.Modal.getInstance(document.getElementById('barcodeModal')).hide();
        
        // Stop video stream
        const video = document.getElementById('video');
        if (video.srcObject) {
            video.srcObject.getTracks().forEach(track => track.stop());
        }
    }
});

// Clean up when modal is closed
document.getElementById('barcodeModal').addEventListener('hidden.bs.modal', function() {
    const video = document.getElementById('video');
    if (video.srcObject) {
        video.srcObject.getTracks().forEach(track => track.stop());
    }
    
    // Reset modal state
    document.getElementById('scannerStatus').style.display = 'block';
    document.getElementById('scannerVideo').style.display = 'none';
    document.getElementById('scannerResult').style.display = 'none';
    document.getElementById('useBarcodeBtn').style.display = 'none';
    scannedBarcode = null;
});
</script>
{% endif %}
{% endblock %}