{% extends "base.html" %}

{% block title %}Create Invoice - QuantumQuickSales{% endblock %}

{% block page_title %}Create New Invoice{% endblock %}

{% block content %}
<div class="card shadow">
    <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-primary">Invoice Details</h6>
    </div>
    <div class="card-body">
        <form method="POST" id="invoiceForm">
            <!-- Customer Information -->
            <div class="row mb-4">
                <div class="col-md-6">
                    <label for="customer_name" class="form-label">Customer Name *</label>
                    <input type="text" class="form-control" id="customer_name" name="customer_name" required>
                </div>
                <div class="col-md-6">
                    <label for="customer_phone" class="form-label">Customer Phone *</label>
                    <input type="text" class="form-control" id="customer_phone" name="customer_phone" required pattern="[0-9]{10}">
                </div>
            </div>

            <!-- Products Section -->
            <div class="mb-4">
                <h6 class="font-weight-bold">Products</h6>
                <div id="productsContainer">
                    <div class="row product-row mb-3">
                        <div class="col-md-4">
                            <label class="form-label">Product *</label>
                            <div class="input-group">
                                <select class="form-select product-select" name="products[]" required>
                                    <option value="">Select Product</option>
                                    {% for product in products %}
                                    <option value="{{ product[0] }}" data-price="{{ product[2] }}" data-stock="{{ product[3] }}">
                                        {{ product[1] }} - ₹{{ "%.2f"|format(product[2]) }} (Stock: {{ product[3] }})
                                    </option>
                                    {% endfor %}
                                </select>
                                <button type="button" class="btn btn-outline-secondary scan-barcode-btn" title="Scan Barcode" tabindex="-1">
                                    <i class="fas fa-barcode"></i>
                                </button>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Quantity *</label>
                            <input type="number" class="form-control product-quantity" name="quantities[]" required min="1" value="1">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Price (₹)</label>
                            <input type="text" class="form-control product-price" readonly>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">Total (₹)</label>
                            <input type="text" class="form-control product-total" readonly>
                        </div>
                    </div>
                </div>
                <button type="button" class="btn btn-outline-primary btn-sm" id="addProductBtn">
                    <i class="fas fa-plus me-2"></i>Add Product
                </button>
            </div>

            <!-- Payment Mode Section -->
            <div class="row mb-4">
                <div class="col-md-6">
                    <label for="payment_mode" class="form-label">Payment Mode *</label>
                    <select class="form-select" id="payment_mode" name="payment_mode" required>
                        <option value="">Select Payment Mode</option>
                        <option value="Cash">Cash</option>
                        <option value="UPI">UPI</option>
                        <option value="Hybrid">Hybrid (Cash + UPI)</option>
                    </select>
                </div>
                <div class="col-md-6">
                    <div id="payment_details" style="display: none;">
                        <div class="row">
                            <div class="col-md-6" id="upi_amount_div" style="display: none;">
                                <label for="upi_amount" class="form-label">UPI Amount (₹)</label>
                                <input type="number" class="form-control" id="upi_amount" name="upi_amount" min="0" step="0.01" value="0">
                            </div>
                            <div class="col-md-6" id="cash_amount_div" style="display: none;">
                                <label for="cash_amount" class="form-label">Cash Amount (₹)</label>
                                <input type="number" class="form-control" id="cash_amount" name="cash_amount" min="0" step="0.01" value="0">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Invoice Summary -->
            <div class="row mb-4">
                <div class="col-md-6 offset-md-6">
                    <div class="card bg-light">
                        <div class="card-body">
                            <h6 class="font-weight-bold">Invoice Summary</h6>
                            <div class="d-flex justify-content-between mb-2">
                                <span>Total Amount:</span>
                                <span class="font-weight-bold" id="totalAmount">₹0.00</span>
                            </div>
                            <div class="d-flex justify-content-between mb-2" id="payment_summary" style="display: none;">
                                <span>Payment Mode:</span>
                                <span class="font-weight-bold" id="paymentModeDisplay">-</span>
                            </div>
                            <div class="d-flex justify-content-between" id="upi_summary" style="display: none;">
                                <span>UPI Amount:</span>
                                <span class="font-weight-bold" id="upiAmountDisplay">₹0.00</span>
                            </div>
                            <div class="d-flex justify-content-between" id="cash_summary" style="display: none;">
                                <span>Cash Amount:</span>
                                <span class="font-weight-bold" id="cashAmountDisplay">₹0.00</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="d-flex justify-content-between">
                <a href="{{ url_for('user_dashboard' if not session.is_admin else 'admin_dashboard') }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left me-2"></i>Cancel
                </a>
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-save me-2"></i>Create Invoice
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Barcode Scanner Modal -->
<div class="modal fade" id="barcodeModal" tabindex="-1" aria-labelledby="barcodeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="barcodeModalLabel">Scan Product Barcode</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body text-center">
        <div id="barcode-instructions" class="mb-2">Align the barcode within the frame below:</div>
        <div id="barcode-scanner-preview" style="width:100%;height:240px;background:#222;"></div>
        <div id="barcode-scan-status" class="mt-2 text-muted small"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<!-- QuaggaJS CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/quagga/0.12.1/quagga.min.js"></script>
<script>
$(document).ready(function() {
    // Add product row
    $('#addProductBtn').click(function() {
        const newRow = $('.product-row:first').clone();
        newRow.find('select, input').val('');
        newRow.find('.product-price, .product-total').val('');
        $('#productsContainer').append(newRow);
        updateTotal();
    });

    // Handle product selection and quantity changes
    $(document).on('change', '.product-select', function() {
        const row = $(this).closest('.product-row');
        const option = $(this).find('option:selected');
        const price = option.data('price') || 0;
        const quantity = row.find('.product-quantity').val() || 1;
        
        row.find('.product-price').val('₹' + price.toFixed(2));
        row.find('.product-total').val('₹' + (price * quantity).toFixed(2));
        updateTotal();
    });

    $(document).on('input', '.product-quantity', function() {
        const row = $(this).closest('.product-row');
        const option = row.find('.product-select option:selected');
        const price = option.data('price') || 0;
        const quantity = $(this).val() || 0;
        
        row.find('.product-total').val('₹' + (price * quantity).toFixed(2));
        updateTotal();
    });

    // Barcode scan button handler (improved with modal and QuaggaJS)
    let currentProductRow = null;
    $(document).on('click', '.scan-barcode-btn', function() {
        currentProductRow = $(this).closest('.product-row');
        $('#barcodeModal').modal('show');
        startBarcodeScanner();
    });

    // Stop scanner when modal is closed
    $('#barcodeModal').on('hidden.bs.modal', function () {
        stopBarcodeScanner();
        $('#barcode-scan-status').text('');
    });

    function startBarcodeScanner() {
        $('#barcode-scan-status').text('Starting camera...');
        Quagga.init({
            inputStream: {
                name: 'Live',
                type: 'LiveStream',
                target: document.querySelector('#barcode-scanner-preview'),
                constraints: {
                    width: 320,
                    height: 240,
                    facingMode: 'environment'
                },
            },
            decoder: {
                readers: ['ean_reader', 'code_128_reader', 'upc_reader', 'code_39_reader']
            },
            locate: true
        }, function(err) {
            if (err) {
                $('#barcode-scan-status').text('Camera error: ' + err.message);
                return;
            }
            Quagga.start();
            $('#barcode-scan-status').text('Point the barcode at the camera.');
        });

        Quagga.offDetected(); // Remove previous listeners
        Quagga.onDetected(function(result) {
            if (result && result.codeResult && result.codeResult.code) {
                const code = result.codeResult.code;
                $('#barcode-scan-status').text('Barcode detected: ' + code);
                // Try to select the product in the dropdown
                if (currentProductRow) {
                    const select = currentProductRow.find('.product-select');
                    let found = false;
                    select.find('option').each(function() {
                        if ($(this).val() == code) {
                            select.val(code).trigger('change');
                            found = true;
                            return false;
                        }
                    });
                    if (!found) {
                        $('#barcode-scan-status').text('Product not found for barcode: ' + code);
                        return;
                    }
                }
                // Stop scanner and close modal
                setTimeout(function() {
                    $('#barcodeModal').modal('hide');
                }, 700);
            }
        });
    }

    function stopBarcodeScanner() {
        if (Quagga) {
            Quagga.stop();
        }
        $('#barcode-scanner-preview').empty();
    }

    function updateTotal() {
        let total = 0;
        $('.product-total').each(function() {
            const value = $(this).val().replace('₹', '') || 0;
            total += parseFloat(value);
        });
        $('#totalAmount').text('₹' + total.toFixed(2));
    }

    // Payment mode handling
    $('#payment_mode').change(function() {
        const mode = $(this).val();
        const totalAmount = parseFloat($('#totalAmount').text().replace('₹', '')) || 0;
        
        // Hide all payment detail fields initially
        $('#payment_details').hide();
        $('#upi_amount_div, #cash_amount_div').hide();
        $('#payment_summary, #upi_summary, #cash_summary').hide();
        
        if (mode === 'Cash') {
            $('#cash_amount_div').show();
            $('#payment_details').show();
            $('#payment_summary').show();
            $('#cash_summary').show();
            $('#cashAmountDisplay').text('₹' + totalAmount.toFixed(2));
            $('#paymentModeDisplay').text('Cash');
            $('#cash_amount').val(totalAmount.toFixed(2));
            $('#upi_amount').val('0');
        } else if (mode === 'UPI') {
            $('#upi_amount_div').show();
            $('#payment_details').show();
            $('#payment_summary').show();
            $('#upi_summary').show();
            $('#upiAmountDisplay').text('₹' + totalAmount.toFixed(2));
            $('#paymentModeDisplay').text('UPI');
            $('#upi_amount').val(totalAmount.toFixed(2));
            $('#cash_amount').val('0');
        } else if (mode === 'Hybrid') {
            $('#upi_amount_div, #cash_amount_div').show();
            $('#payment_details').show();
            $('#payment_summary').show();
            $('#upi_summary, #cash_summary').show();
            $('#paymentModeDisplay').text('Hybrid');
            $('#upi_amount, #cash_amount').val('0');
            $('#upiAmountDisplay').text('₹0.00');
            $('#cashAmountDisplay').text('₹0.00');
        }
    });

    // Handle payment amount changes for hybrid mode
    $('#upi_amount, #cash_amount').on('input', function() {
        const mode = $('#payment_mode').val();
        if (mode === 'Hybrid') {
            const upiAmount = parseFloat($('#upi_amount').val()) || 0;
            const cashAmount = parseFloat($('#cash_amount').val()) || 0;
            const totalAmount = parseFloat($('#totalAmount').text().replace('₹', '')) || 0;
            
            $('#upiAmountDisplay').text('₹' + upiAmount.toFixed(2));
            $('#cashAmountDisplay').text('₹' + cashAmount.toFixed(2));
            
            // Validate total
            if (Math.abs((upiAmount + cashAmount) - totalAmount) > 0.01) {
                $(this).addClass('is-invalid');
            } else {
                $(this).removeClass('is-invalid');
            }
        }
    });

    // Form validation
    $('#invoiceForm').submit(function(e) {
        let hasProducts = false;
        $('.product-select').each(function() {
            if ($(this).val()) {
                hasProducts = true;
                return false;
            }
        });
        
        if (!hasProducts) {
            e.preventDefault();
            alert('Please add at least one product to the invoice.');
            return false;
        }

        // Validate payment mode
        const paymentMode = $('#payment_mode').val();
        if (!paymentMode) {
            e.preventDefault();
            alert('Please select a payment mode.');
            return false;
        }

        // Validate hybrid payment amounts
        if (paymentMode === 'Hybrid') {
            const upiAmount = parseFloat($('#upi_amount').val()) || 0;
            const cashAmount = parseFloat($('#cash_amount').val()) || 0;
            const totalAmount = parseFloat($('#totalAmount').text().replace('₹', '')) || 0;
            
            if (Math.abs((upiAmount + cashAmount) - totalAmount) > 0.01) {
                e.preventDefault();
                alert('For hybrid payment, UPI amount + Cash amount must equal the total amount.');
                return false;
            }
            
            if (upiAmount <= 0 && cashAmount <= 0) {
                e.preventDefault();
                alert('For hybrid payment, at least one payment method must have an amount greater than 0.');
                return false;
            }
        }
    });
});
</script>
{% endblock %}