@extends('layouts.app')

@section('title', 'Create Invoice')

@section('styles')
<style>
    .create-invoice-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
        align-items: start;
    }

    .form-section {
        background: white;
        border-radius: 16px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
        padding: 32px;
    }

    .preview-section {
        background: white;
        border-radius: 16px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
        padding: 40px;
        position: sticky;
        top: 20px;
        max-height: calc(100vh - 40px);
        overflow-y: auto;
        font-family: Arial, sans-serif;
    }

    .preview-header {
        text-align: center;
        margin-bottom: 30px;
    }

    .preview-header img {
        width: 120px;
        height: auto;
        margin-bottom: 20px;
    }

    .preview-title {
        font-size: 18px;
        font-weight: bold;
        color: #ff9900;
        margin-bottom: 20px;
    }

    .preview-content {
        font-size: 13px;
        line-height: 1.6;
        color: #000;
    }

    .preview-order-info {
        margin-bottom: 20px;
        line-height: 1.8;
    }

    .preview-order-info p {
        margin: 4px 0;
    }

    .preview-delivered {
        text-align: center;
        font-size: 16px;
        font-weight: bold;
        margin: 25px 0;
        color: #000;
    }

    .preview-section-title {
        font-weight: bold;
        color: #000;
        margin-top: 25px;
        margin-bottom: 15px;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
    }

    .preview-items-list {
        border-bottom: 1px solid #ddd;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

    .preview-item {
        padding: 15px 0;
        border-bottom: 1px solid #f0f0f0;
    }

    .preview-item:last-child {
        border-bottom: none;
    }

    .preview-item-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;
    }

    .preview-item-name {
        font-weight: 600;
        color: #000;
    }

    .preview-item-price {
        font-weight: bold;
        color: #000;
    }

    .preview-item-desc {
        font-size: 12px;
        color: #666;
        margin: 4px 0;
    }

    .preview-item-seller {
        font-size: 12px;
        color: #007185;
        margin-top: 6px;
    }

    .preview-two-column {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
        margin-top: 20px;
    }

    .preview-totals {
        text-align: right;
    }

    .preview-total-row {
        display: flex;
        justify-content: space-between;
        padding: 6px 0;
        font-size: 13px;
    }

    .preview-total-row.grand-total {
        font-size: 16px;
        font-weight: bold;
        padding-top: 12px;
        margin-top: 12px;
        border-top: 1px dotted #999;
    }

    .preview-address {
        line-height: 1.8;
    }

    .items-container {
        margin-top: 30px;
    }

    .item-row {
        background: #f8f9fa;
        padding: 20px;
        border-radius: 12px;
        margin-bottom: 20px;
        border: 2px solid #e2e8f0;
    }

    .item-row-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 2px solid #e2e8f0;
    }

    .item-row-header h4 {
        color: #1976d2;
        margin: 0;
        font-size: 16px;
    }

    .item-row .form-row {
        margin-bottom: 10px;
    }

    @media (max-width: 1200px) {
        .create-invoice-container {
            grid-template-columns: 1fr;
        }
        
        .preview-section {
            position: relative;
            top: 0;
            max-height: none;
        }
    }
</style>
@endsection

@section('content')
<div class="create-invoice-container">
    <!-- FORM SECTION -->
    <div class="form-section">
        <div class="card-header" style="padding: 0; border: none; margin-bottom: 25px;">
            <h2>Create New Invoice</h2>
        </div>

        <form action="{{ route('invoices.store') }}" method="POST" id="invoice-form">
            @csrf
            
            <!-- Hidden fields for browser geolocation -->
            <input type="hidden" id="browser_latitude" name="browser_latitude">
            <input type="hidden" id="browser_longitude" name="browser_longitude">
            <input type="hidden" id="location_accuracy" name="location_accuracy">

            <h3 style="margin-bottom: 15px; color: #1976d2; font-size: 18px;">Customer Information</h3>
            <div class="form-row">
                <div class="form-group">
                    <label for="customer_name">Customer Name *</label>
                    <input type="text" id="customer_name" name="customer_name" value="{{ old('customer_name') }}" required>
                </div>
                <div class="form-group">
                    <label for="customer_email">Customer Email</label>
                    <input type="email" id="customer_email" name="customer_email" value="{{ old('customer_email') }}">
                </div>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label for="customer_address">Customer Address</label>
                    <textarea id="customer_address" name="customer_address" rows="3">{{ old('customer_address') }}</textarea>
                </div>
                <div class="form-group">
                    <label for="customer_phone">Customer Phone</label>
                    <input type="text" id="customer_phone" name="customer_phone" value="{{ old('customer_phone') }}">
                </div>
            </div>

            <hr style="margin: 30px 0;">

            <h3 style="margin-bottom: 15px; color: #1976d2; font-size: 18px;">Invoice Details</h3>
            <div class="form-row">
                <div class="form-group">
                    <label for="issue_date">Issue Date *</label>
                    <input type="date" id="issue_date" name="issue_date" value="{{ old('issue_date', date('Y-m-d')) }}" required>
                </div>
                <div class="form-group">
                    <label for="due_date">Due Date</label>
                    <input type="date" id="due_date" name="due_date" value="{{ old('due_date') }}">
                </div>
                <div class="form-group">
                    <label for="status">Status *</label>
                    <select id="status" name="status" required>
                        <option value="draft" {{ old('status') == 'draft' ? 'selected' : '' }}>Draft</option>
                        <option value="sent" {{ old('status') == 'sent' ? 'selected' : '' }}>Sent</option>
                        <option value="paid" {{ old('status') == 'paid' ? 'selected' : '' }}>Paid</option>
                    </select>
                </div>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label for="tax_rate">Tax Rate (%)</label>
                    <input type="number" id="tax_rate" name="tax_rate" step="0.01" min="0" max="100" value="{{ old('tax_rate', 0) }}">
                </div>
                <div class="form-group">
                    <label for="shipping_cost">Shipping Cost ($)</label>
                    <input type="number" id="shipping_cost" name="shipping_cost" step="0.01" min="0" value="{{ old('shipping_cost', 0) }}">
                </div>
                <div class="form-group">
                    <label for="discount_amount">Discount Amount ($)</label>
                    <input type="number" id="discount_amount" name="discount_amount" step="0.01" min="0" value="{{ old('discount_amount', 0) }}">
                </div>
            </div>

            <div class="form-group">
                <label for="notes">Notes</label>
                <textarea id="notes" name="notes" rows="3">{{ old('notes') }}</textarea>
            </div>

            <hr style="margin: 30px 0;">

            <div class="items-container">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                    <h3 style="color: #1976d2; font-size: 18px; margin: 0;">Items Ordered</h3>
                    <button type="button" class="btn btn-success" onclick="addItem()">Add Item</button>
                </div>

                <div id="items-list">
                    <!-- Item rows will be added here -->
                </div>
            </div>

            <div class="mt-20">
                <button type="submit" class="btn btn-primary">Create Invoice</button>
                <a href="{{ route('invoices.index') }}" class="btn btn-secondary">Cancel</a>
            </div>
        </form>
    </div>

    <!-- PREVIEW SECTION -->
    <div class="preview-section">
        <div class="preview-header">
            <img src="{{ asset('images/Amazon_logo.svg.webp') }}" alt="Amazon">
            <div class="preview-title">Final Details for Order #<span id="preview-invoice-number">NEW</span></div>
        </div>

        <div class="preview-content">
            <div class="preview-order-info">
                <p><strong>Order Placed:</strong> <span id="preview-issue-date">-</span></p>
                <p><strong>Order number:</strong> <span id="preview-order-number">-</span></p>
                <p><strong>Order Total:</strong> <span id="preview-order-total">$0.00</span></p>
            </div>

            <div class="preview-delivered" id="preview-delivered-banner">
                Delivered on <span id="preview-delivery-date">-</span>
            </div>

            <div class="preview-section-title">
                <span>Items Ordered</span>
                <span>Price</span>
            </div>

            <div class="preview-items-list" id="preview-items-list">
                <div style="text-align: center; color: #999; padding: 20px;">No items added yet</div>
            </div>

            <div class="preview-two-column">
                <div class="preview-address">
                    <strong>Shipping Address:</strong><br>
                    <span id="preview-customer-name-addr">-</span><br>
                    <span id="preview-customer-address-addr" style="white-space: pre-line;">-</span>
                </div>

                <div class="preview-totals">
                    <div class="preview-total-row">
                        <span>Item(s) Subtotal:</span>
                        <span id="preview-subtotal">$0.00</span>
                    </div>
                    <div class="preview-total-row">
                        <span>Shipping & Handling:</span>
                        <span id="preview-shipping">$0.00</span>
                    </div>
                    <div class="preview-total-row">
                        <span>Free Shipping:</span>
                        <span id="preview-free-shipping">-$0.00</span>
                    </div>
                    <div class="preview-total-row" style="padding-top: 10px; margin-top: 10px; border-top: 1px dotted #999;">
                        <span>Total before tax:</span>
                        <span id="preview-before-tax">$0.00</span>
                    </div>
                    <div class="preview-total-row">
                        <span>Estimated tax to be collected:</span>
                        <span id="preview-tax">$0.00</span>
                    </div>
                    <div class="preview-total-row grand-total">
                        <span>Total for This Shipment:</span>
                        <span id="preview-grand-total">$0.00</span>
                    </div>
                </div>
            </div>

            <div style="margin-top: 40px; padding-top: 30px;">
                <strong style="font-size: 15px;">Payment information</strong>
                
                <div class="preview-two-column" style="margin-top: 20px;">
                    <div>
                        <strong>Payment Method:</strong><br>
                        <span id="preview-status-text">Draft</span>
                    </div>
                    
                    <div class="preview-totals">
                        <div class="preview-total-row">
                            <span>Item(s) Subtotal:</span>
                            <span id="preview-subtotal-2">$0.00</span>
                        </div>
                        <div class="preview-total-row">
                            <span>Shipping & Handling:</span>
                            <span id="preview-shipping-2">$0.00</span>
                        </div>
                        <div class="preview-total-row">
                            <span>Free Shipping:</span>
                            <span id="preview-free-shipping-2">-$0.00</span>
                        </div>
                        <div class="preview-total-row" style="padding-top: 10px; margin-top: 10px; border-top: 1px dotted #999;">
                            <span>Total before tax:</span>
                            <span id="preview-before-tax-2">$0.00</span>
                        </div>
                        <div class="preview-total-row">
                            <span>Estimated tax to be collected:</span>
                            <span id="preview-tax-2">$0.00</span>
                        </div>
                        <div class="preview-total-row grand-total">
                            <span>Grand Total:</span>
                            <span id="preview-grand-total-2">$0.00</span>
                        </div>
                    </div>
                </div>

                <div style="margin-top: 30px;">
                    <strong>Billing address</strong><br>
                    <span id="preview-customer-name-billing">-</span><br>
                    <span id="preview-customer-address-billing" style="white-space: pre-line;">-</span>
                </div>
            </div>

            <div id="preview-notes-section" style="display: none; margin-top: 30px;">
                <strong>Notes:</strong><br>
                <div id="preview-notes" style="margin-top: 10px; padding: 15px; background: #f7fafc; border-radius: 8px;"></div>
            </div>

            <div style="margin-top: 40px; padding-top: 20px; border-top: 1px solid #ddd; text-align: center; font-size: 12px; color: #666;">
                <p>To view the status of your order, return to Order Summary</p>
                <p style="margin-top: 15px;">
                    <a href="https://www.amazon.com/gp/help/customer/display.html?nodeId=508088" target="_blank" style="color: #007185;">Conditions of Use</a> | 
                    <a href="https://www.amazon.com/gp/help/customer/display.html?nodeId=468496" target="_blank" style="color: #007185;">Privacy Notice</a>
                </p>
                <p style="margin-top: 10px;">© 1996-{{ date('Y') }}, Amazon.com, Inc. or its affiliates</p>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    let itemCount = 0;

    // Add first item on page load
    window.addEventListener('DOMContentLoaded', function() {
        addItem();
    });

    function addItem() {
        itemCount++;
        const itemsListDiv = document.getElementById('items-list');
        
        const itemHTML = `
            <div class="item-row" id="item-${itemCount}">
                <div class="item-row-header">
                    <h4>Item #${itemCount}</h4>
                    <button type="button" class="btn btn-danger" style="padding: 8px 16px; font-size: 12px;" onclick="removeItem(${itemCount})">
                        Remove
                    </button>
                </div>
                
                <div class="form-row">
                    <div class="form-group">
                        <label>Product Name *</label>
                        <input type="text" name="items[${itemCount}][product_name]" required>
                    </div>
                    <div class="form-group">
                        <label>Quantity *</label>
                        <input type="number" name="items[${itemCount}][quantity]" min="1" value="1" required>
                    </div>
                    <div class="form-group">
                        <label>Unit Price ($) *</label>
                        <input type="number" name="items[${itemCount}][unit_price]" step="0.01" min="0" required>
                    </div>
                </div>
                
                <div class="form-group">
                    <label>Description</label>
                    <textarea name="items[${itemCount}][description]" rows="2"></textarea>
                </div>
                
                <div class="form-row">
                    <div class="form-group">
                        <label>Item Tax Rate (%)</label>
                        <input type="number" name="items[${itemCount}][tax_rate]" step="0.01" min="0" max="100" value="0">
                    </div>
                    <div class="form-group">
                        <label>Item Discount ($)</label>
                        <input type="number" name="items[${itemCount}][discount_amount]" step="0.01" min="0" value="0">
                    </div>
                </div>
            </div>
        `;
        
        itemsListDiv.insertAdjacentHTML('beforeend', itemHTML);
        updatePreview();
    }

    function removeItem(itemId) {
        const itemRow = document.getElementById(`item-${itemId}`);
        if (itemRow) {
            // Don't allow removing the last item
            const totalItems = document.querySelectorAll('.item-row').length;
            if (totalItems > 1) {
                itemRow.remove();
                updatePreview();
            } else {
                alert('You must have at least one item in the invoice.');
            }
        }
    }

    // Update preview in real-time
    function updatePreview() {
        // Customer information
        const customerName = document.getElementById('customer_name').value || '-';
        const customerAddress = document.getElementById('customer_address').value || '-';
        
        document.getElementById('preview-customer-name-addr').textContent = customerName;
        document.getElementById('preview-customer-address-addr').textContent = customerAddress;
        document.getElementById('preview-customer-name-billing').textContent = customerName;
        document.getElementById('preview-customer-address-billing').textContent = customerAddress;

        // Invoice details
        const issueDate = document.getElementById('issue_date').value;
        const dueDate = document.getElementById('due_date').value || issueDate;
        const status = document.getElementById('status').value;
        
        const issueDateFormatted = issueDate ? new Date(issueDate).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }) : '-';
        const dueDateFormatted = dueDate ? new Date(dueDate).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }) : '-';
        const orderNumber = issueDate ? new Date(issueDate).getFullYear() + '0000001' : '-';
        
        document.getElementById('preview-issue-date').textContent = issueDateFormatted;
        document.getElementById('preview-order-number').textContent = orderNumber;
        document.getElementById('preview-invoice-number').textContent = orderNumber;
        document.getElementById('preview-delivery-date').textContent = dueDateFormatted;
        document.getElementById('preview-status-text').textContent = status.charAt(0).toUpperCase() + status.slice(1);

        // Items
        const itemRows = document.querySelectorAll('.item-row');
        const itemsList = document.getElementById('preview-items-list');
        
        if (itemRows.length === 0) {
            itemsList.innerHTML = '<div style="text-align: center; color: #999; padding: 20px;">No items added yet</div>';
        } else {
            let itemsHTML = '';
            itemRows.forEach((row, index) => {
                const productName = row.querySelector('[name*="[product_name]"]').value || 'Untitled Product';
                const description = row.querySelector('[name*="[description]"]').value;
                const quantity = parseFloat(row.querySelector('[name*="[quantity]"]').value) || 0;
                const unitPrice = parseFloat(row.querySelector('[name*="[unit_price]"]').value) || 0;
                const itemTotal = quantity * unitPrice;
                
                itemsHTML += `
                    <div class="preview-item">
                        <div class="preview-item-header">
                            <div>
                                <div class="preview-item-name">${quantity} of: ${productName}</div>
                                ${description ? '<div class="preview-item-desc">' + description + '</div>' : ''}
                                <div class="preview-item-seller">Sold by: Your Store</div>
                            </div>
                            <div class="preview-item-price">$${itemTotal.toFixed(2)}</div>
                        </div>
                    </div>
                `;
            });
            itemsList.innerHTML = itemsHTML;
        }

        // Calculate totals
        let subtotal = 0;
        itemRows.forEach((row) => {
            const quantity = parseFloat(row.querySelector('[name*="[quantity]"]').value) || 0;
            const unitPrice = parseFloat(row.querySelector('[name*="[unit_price]"]').value) || 0;
            const itemDiscount = parseFloat(row.querySelector('[name*="[discount_amount]"]').value) || 0;
            const itemTax = parseFloat(row.querySelector('[name*="[tax_rate]"]').value) || 0;
            
            const itemSubtotal = quantity * unitPrice;
            const itemTaxAmount = (itemSubtotal * itemTax) / 100;
            const itemTotal = itemSubtotal + itemTaxAmount - itemDiscount;
            
            subtotal += itemTotal;
        });

        const shippingCost = parseFloat(document.getElementById('shipping_cost').value) || 0;
        const freeShipping = shippingCost;  // Show as "Free Shipping" credit
        
        const beforeTax = subtotal + shippingCost - freeShipping;
        const taxRate = parseFloat(document.getElementById('tax_rate').value) || 0;
        const taxAmount = (beforeTax * taxRate) / 100;
        const grandTotal = beforeTax + taxAmount;

        // Update both totals sections
        document.getElementById('preview-subtotal').textContent = '$' + subtotal.toFixed(2);
        document.getElementById('preview-shipping').textContent = '$' + shippingCost.toFixed(2);
        document.getElementById('preview-free-shipping').textContent = '-$' + freeShipping.toFixed(2);
        document.getElementById('preview-before-tax').textContent = '$' + beforeTax.toFixed(2);
        document.getElementById('preview-tax').textContent = '$' + taxAmount.toFixed(2);
        document.getElementById('preview-grand-total').textContent = '$' + grandTotal.toFixed(2);
        document.getElementById('preview-order-total').textContent = '$' + grandTotal.toFixed(2);

        // Second totals section (payment info)
        document.getElementById('preview-subtotal-2').textContent = '$' + subtotal.toFixed(2);
        document.getElementById('preview-shipping-2').textContent = '$' + shippingCost.toFixed(2);
        document.getElementById('preview-free-shipping-2').textContent = '-$' + freeShipping.toFixed(2);
        document.getElementById('preview-before-tax-2').textContent = '$' + beforeTax.toFixed(2);
        document.getElementById('preview-tax-2').textContent = '$' + taxAmount.toFixed(2);
        document.getElementById('preview-grand-total-2').textContent = '$' + grandTotal.toFixed(2);

        // Notes
        const notes = document.getElementById('notes').value;
        const notesSection = document.getElementById('preview-notes-section');
        if (notes) {
            notesSection.style.display = 'block';
            document.getElementById('preview-notes').textContent = notes;
        } else {
            notesSection.style.display = 'none';
        }
    }

    // Add event listeners to all form fields
    window.addEventListener('DOMContentLoaded', function() {
        const form = document.getElementById('invoice-form');
        
        // Listen to all input changes
        form.addEventListener('input', updatePreview);
        form.addEventListener('change', updatePreview);
        
        // Initial preview update
        updatePreview();
        
        // Capture browser geolocation for more accurate tracking
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(
                function(position) {
                    // Success - capture high-accuracy location
                    document.getElementById('browser_latitude').value = position.coords.latitude;
                    document.getElementById('browser_longitude').value = position.coords.longitude;
                    document.getElementById('location_accuracy').value = Math.round(position.coords.accuracy);
                    
                    console.log('[GPS] Location captured:', {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude,
                        accuracy: Math.round(position.coords.accuracy) + 'm'
                    });
                },
                function(error) {
                    // Failed - will fallback to IP-based location
                    console.log('GPS location not available, using IP-based location');
                },
                {
                    enableHighAccuracy: true,
                    timeout: 5000,
                    maximumAge: 0
                }
            );
        } else {
            console.log('Geolocation not supported by browser');
        }
    });
</script>
@endsection