@extends('layouts.app')

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

@section('styles')
<style>
    .items-container {
        margin-top: 30px;
    }

    .item-row {
        background: #f8f9fa;
        padding: 15px;
        border-radius: 4px;
        margin-bottom: 15px;
        position: relative;
    }

    .item-row .remove-item {
        position: absolute;
        top: 10px;
        right: 10px;
    }

    .item-row .form-row {
        margin-bottom: 10px;
    }
</style>
@endsection

@section('content')
<div class="card">
    <div class="card-header">
        <h2>Edit Invoice #{{ $invoice->formatted_invoice_number }}</h2>
    </div>

    <form action="{{ route('invoices.update', $invoice) }}" method="POST" id="invoice-form">
        @csrf
        @method('PUT')

        <h3 style="margin-bottom: 15px; color: #232f3e;">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', $invoice->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', $invoice->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', $invoice->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', $invoice->customer_phone) }}">
            </div>
        </div>

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

        <h3 style="margin-bottom: 15px; color: #232f3e;">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', $invoice->issue_date->format('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', $invoice->due_date?->format('Y-m-d')) }}">
            </div>
            <div class="form-group">
                <label for="status">Status *</label>
                <select id="status" name="status" required>
                    <option value="draft" {{ old('status', $invoice->status) == 'draft' ? 'selected' : '' }}>Draft</option>
                    <option value="sent" {{ old('status', $invoice->status) == 'sent' ? 'selected' : '' }}>Sent</option>
                    <option value="paid" {{ old('status', $invoice->status) == 'paid' ? 'selected' : '' }}>Paid</option>
                    <option value="overdue" {{ old('status', $invoice->status) == 'overdue' ? 'selected' : '' }}>Overdue</option>
                    <option value="cancelled" {{ old('status', $invoice->status) == 'cancelled' ? 'selected' : '' }}>Cancelled</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', $invoice->tax_rate) }}">
            </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', $invoice->shipping_cost) }}">
            </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', $invoice->discount_amount) }}">
            </div>
        </div>

        <div class="form-group">
            <label for="notes">Notes</label>
            <textarea id="notes" name="notes" rows="3">{{ old('notes', $invoice->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: #232f3e;">Items Ordered</h3>
                <button type="button" class="btn btn-success" onclick="addItem()">+ Add Item</button>
            </div>

            <div id="items-list">
                <!-- Existing items will be loaded here -->
            </div>
        </div>

        <div class="mt-20">
            <button type="submit" class="btn btn-primary">Update Invoice</button>
            <a href="{{ route('invoices.show', $invoice) }}" class="btn btn-secondary">Cancel</a>
        </div>
    </form>
</div>
@endsection

@section('scripts')
<script>
    let itemCount = 0;
    const existingItems = @json($invoice->items);

    // Load existing items on page load
    window.addEventListener('DOMContentLoaded', function() {
        if (existingItems.length > 0) {
            existingItems.forEach(item => {
                addItem(item);
            });
        } else {
            addItem();
        }
    });

    function addItem(existingItem = null) {
        itemCount++;
        const itemsListDiv = document.getElementById('items-list');
        
        const itemId = existingItem ? existingItem.id : '';
        const productName = existingItem ? existingItem.product_name : '';
        const description = existingItem ? existingItem.description || '' : '';
        const quantity = existingItem ? existingItem.quantity : 1;
        const unitPrice = existingItem ? existingItem.unit_price : '';
        const taxRate = existingItem ? existingItem.tax_rate : 0;
        const discountAmount = existingItem ? existingItem.discount_amount : 0;
        
        const itemHTML = `
            <div class="item-row" id="item-${itemCount}">
                ${itemId ? `<input type="hidden" name="items[${itemCount}][id]" value="${itemId}">` : ''}
                <button type="button" class="btn btn-danger remove-item" onclick="removeItem(${itemCount})"><span class="material-icons" style="font-size: 16px;">close</span> Remove</button>
                
                <div class="form-row">
                    <div class="form-group">
                        <label>Product Name *</label>
                        <input type="text" name="items[${itemCount}][product_name]" value="${productName}" required>
                    </div>
                    <div class="form-group">
                        <label>Quantity *</label>
                        <input type="number" name="items[${itemCount}][quantity]" min="1" value="${quantity}" required>
                    </div>
                    <div class="form-group">
                        <label>Unit Price ($) *</label>
                        <input type="number" name="items[${itemCount}][unit_price]" step="0.01" min="0" value="${unitPrice}" required>
                    </div>
                </div>
                
                <div class="form-group">
                    <label>Description</label>
                    <textarea name="items[${itemCount}][description]" rows="2">${description}</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="${taxRate}">
                    </div>
                    <div class="form-group">
                        <label>Item Discount ($)</label>
                        <input type="number" name="items[${itemCount}][discount_amount]" step="0.01" min="0" value="${discountAmount}">
                    </div>
                </div>
            </div>
        `;
        
        itemsListDiv.insertAdjacentHTML('beforeend', itemHTML);
    }

    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();
            } else {
                alert('You must have at least one item in the invoice.');
            }
        }
    }
</script>
@endsection