@extends('layouts.admin')

@section('header', 'Create New Invoice')

@section('content')
    <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <!-- Enhanced Breadcrumb -->
        <nav class="flex mb-8" aria-label="Breadcrumb">
            <ol class="inline-flex items-center space-x-1 md:space-x-3">
                <li class="inline-flex items-center">
                    <a href="{{ route('admin.dashboard') }}" class="text-gray-600 hover:text-rose-600 text-sm font-medium transition-colors duration-200 flex items-center">
                        <i class="fas fa-home mr-2 text-gray-500"></i>
                        Dashboard
                    </a>
                </li>
                <li>
                    <div class="flex items-center">
                        <i class="fas fa-chevron-right text-gray-400 mx-2 text-xs"></i>
                        <a href="{{ route('admin.invoices.index') }}" class="text-gray-600 hover:text-rose-600 text-sm font-medium transition-colors duration-200">
                            Invoices
                        </a>
                    </div>
                </li>
                <li aria-current="page">
                    <div class="flex items-center">
                        <i class="fas fa-chevron-right text-gray-400 mx-2 text-xs"></i>
                        <span class="text-gray-500 text-sm font-medium">
                            Create Invoice
                        </span>
                    </div>
                </li>
            </ol>
        </nav>
        
        <!-- Header Section -->
        <div class="flex items-center justify-between mb-8">
            <div>
                <h1 class="text-2xl font-bold text-gray-900 sm:text-3xl">Create New Invoice</h1>
                <p class="mt-2 text-sm text-gray-500">Fill in the information below to generate a professional invoice for your client</p>
            </div>
            <div class="flex items-center space-x-3">
                <div class="w-12 h-12 bg-rose-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-file-invoice text-rose-600 text-lg"></i>
                </div>
            </div>
        </div>
        
        <form action="{{ route('admin.invoices.store') }}" method="POST" id="invoiceForm" class="space-y-8">
            @csrf
            
            <!-- Client & Invoice Details -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                    <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                        <i class="fas fa-info-circle text-rose-500 mr-2"></i>
                        Invoice Details
                    </h3>
                </div>
                <div class="p-6 space-y-6">
                    <!-- Client Selection -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label for="client_id" class="block text-sm font-medium text-gray-700 mb-2">
                                <i class="fas fa-user text-gray-400 mr-1"></i>
                                Client <span class="text-red-500">*</span>
                            </label>
                            <div class="relative">
                                <select name="client_id" id="client_id" required
                                        class="block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-rose-500 focus:border-rose-500 transition duration-200 sm:text-sm appearance-none bg-white">
                                    <option value="">Select a client</option>
                                    @foreach($clients ?? [] as $client)
                                        <option value="{{ $client->id }}" {{ old('client_id') == $client->id ? 'selected' : '' }}>
                                            {{ $client->name }}
                                        </option>
                                    @endforeach
                                </select>
                                <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                                    <i class="fas fa-chevron-down text-gray-400"></i>
                                </div>
                            </div>
                            @error('client_id')
                                <div class="mt-2 flex items-center text-sm text-red-600">
                                    <i class="fas fa-exclamation-circle mr-1"></i>
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>

                        <div>
                            <label for="invoice_number" class="block text-sm font-medium text-gray-700 mb-2">
                                <i class="fas fa-hashtag text-gray-400 mr-1"></i>
                                Invoice Number <span class="text-red-500">*</span>
                            </label>
                            <input type="text" name="invoice_number" id="invoice_number" 
                                   value="{{ old('invoice_number', 'INV-' . date('Y') . '-' . str_pad(1, 4, '0', STR_PAD_LEFT)) }}" 
                                   required
                                   class="block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:border-rose-500 transition duration-200 sm:text-sm">
                            @error('invoice_number')
                                <div class="mt-2 flex items-center text-sm text-red-600">
                                    <i class="fas fa-exclamation-circle mr-1"></i>
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>
                    </div>

                    <!-- Invoice Dates -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label for="invoice_date" class="block text-sm font-medium text-gray-700 mb-2">
                                <i class="fas fa-calendar text-gray-400 mr-1"></i>
                                Invoice Date <span class="text-red-500">*</span>
                            </label>
                            <input type="date" name="invoice_date" id="invoice_date" 
                                   value="{{ old('invoice_date', date('Y-m-d')) }}" 
                                   required
                                   class="block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-rose-500 focus:border-rose-500 transition duration-200 sm:text-sm">
                            @error('invoice_date')
                                <div class="mt-2 flex items-center text-sm text-red-600">
                                    <i class="fas fa-exclamation-circle mr-1"></i>
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>

                        <div>
                            <label for="due_date" class="block text-sm font-medium text-gray-700 mb-2">
                                <i class="fas fa-calendar-alt text-gray-400 mr-1"></i>
                                Due Date <span class="text-red-500">*</span>
                            </label>
                            <input type="date" name="due_date" id="due_date" 
                                   value="{{ old('due_date', date('Y-m-d', strtotime('+30 days'))) }}" 
                                   required
                                   class="block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-rose-500 focus:border-rose-500 transition duration-200 sm:text-sm">
                            @error('due_date')
                                <div class="mt-2 flex items-center text-sm text-red-600">
                                    <i class="fas fa-exclamation-circle mr-1"></i>
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>
                    </div>

                    <!-- Status and Terms -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label for="status" class="block text-sm font-medium text-gray-700 mb-2">
                                <i class="fas fa-flag text-gray-400 mr-1"></i>
                                Status
                            </label>
                            <div class="relative">
                                <select name="status" id="status"
                                        class="block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-rose-500 focus:border-rose-500 transition duration-200 sm:text-sm appearance-none bg-white">
                                    <option value="draft" {{ old('status', 'draft') == 'draft' ? 'selected' : '' }}>Draft</option>
                                    <option value="pending" {{ old('status') == 'pending' ? 'selected' : '' }}>Pending</option>
                                    <option value="paid" {{ old('status') == 'paid' ? 'selected' : '' }}>Paid</option>
                                    <option value="overdue" {{ old('status') == 'overdue' ? 'selected' : '' }}>Overdue</option>
                                    <option value="cancelled" {{ old('status') == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                                </select>
                                <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                                    <i class="fas fa-chevron-down text-gray-400"></i>
                                </div>
                            </div>
                            @error('status')
                                <div class="mt-2 flex items-center text-sm text-red-600">
                                    <i class="fas fa-exclamation-circle mr-1"></i>
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>

                        <div>
                            <label for="payment_terms" class="block text-sm font-medium text-gray-700 mb-2">
                                <i class="fas fa-handshake text-gray-400 mr-1"></i>
                                Payment Terms
                            </label>
                            <input type="text" name="payment_terms" id="payment_terms" 
                                   value="{{ old('payment_terms', 'Net 30') }}" 
                                   placeholder="e.g., Net 30, Due on receipt"
                                   class="block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:border-rose-500 transition duration-200 sm:text-sm">
                            @error('payment_terms')
                                <div class="mt-2 flex items-center text-sm text-red-600">
                                    <i class="fas fa-exclamation-circle mr-1"></i>
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>
                    </div>

                    <!-- Notes -->
                    <div>
                        <label for="notes" class="block text-sm font-medium text-gray-700 mb-2">
                            <i class="fas fa-sticky-note text-gray-400 mr-1"></i>
                            Notes
                        </label>
                        <textarea name="notes" id="notes" rows="3" 
                                  placeholder="Add any additional notes or special instructions..."
                                  class="block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:border-rose-500 transition duration-200 sm:text-sm resize-none">{{ old('notes') }}</textarea>
                        @error('notes')
                            <div class="mt-2 flex items-center text-sm text-red-600">
                                <i class="fas fa-exclamation-circle mr-1"></i>
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                </div>
            </div>
            
            <!-- Invoice Items Section -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                    <div class="flex items-center justify-between">
                        <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                            <i class="fas fa-list text-rose-500 mr-2"></i>
                            Invoice Items
                        </h3>
                        <button type="button" id="addItem" class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-lg text-white bg-rose-600 hover:bg-rose-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rose-500 transition duration-200">
                            <i class="fas fa-plus mr-2"></i>
                            Add Item
                        </button>
                    </div>
                </div>
                <div class="p-6">
                    <div id="invoiceItems" class="space-y-4">
                        <!-- Items will be dynamically added here -->
                    </div>
                    
                    <!-- Empty State -->
                    <div id="emptyState" class="text-center py-12 hidden">
                        <div class="text-gray-400">
                            <i class="fas fa-inbox text-3xl mb-3"></i>
                            <p class="text-sm font-medium text-gray-500">No items added yet</p>
                            <p class="text-xs text-gray-400">Click "Add Item" to start building your invoice</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Invoice Totals -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                    <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                        <i class="fas fa-calculator text-rose-500 mr-2"></i>
                        Invoice Summary
                    </h3>
                </div>
                <div class="p-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="space-y-4">
                            <div>
                                <label for="tax_rate" class="block text-sm font-medium text-gray-700 mb-2">
                                    <i class="fas fa-percentage text-gray-400 mr-1"></i>
                                    Tax Rate (%)
                                </label>
                                <input type="number" name="tax_rate" id="tax_rate" min="0" max="100" step="0.01" 
                                       class="calc-trigger focus:ring-rose-500 focus:border-rose-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-lg" 
                                       value="0" placeholder="Enter tax rate">
                            </div>
                            <div>
                                <label for="discount" class="block text-sm font-medium text-gray-700 mb-2">
                                    <i class="fas fa-tag text-gray-400 mr-1"></i>
                                    Discount Amount
                                </label>
                                <input type="number" name="discount" id="discount" min="0" step="0.01" 
                                       class="calc-trigger focus:ring-rose-500 focus:border-rose-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-lg" 
                                       value="0" placeholder="Enter discount amount">
                            </div>
                        </div>
                        
                        <div class="bg-gray-50 rounded-lg p-4 space-y-3">
                            <div class="flex justify-between items-center">
                                <span class="text-sm font-medium text-gray-600">Subtotal:</span>
                                <div class="flex items-center">
                                    <span class="text-gray-500 mr-1">$</span>
                                    <input type="number" name="subtotal" id="subtotal" 
                                           class="text-sm font-medium text-gray-900 bg-transparent border-none p-0 w-20 text-right" 
                                           value="0.00" readonly>
                                </div>
                            </div>
                            
                            <div class="flex justify-between items-center">
                                <span class="text-sm font-medium text-gray-600">Tax Amount:</span>
                                <div class="flex items-center">
                                    <span class="text-gray-500 mr-1">$</span>
                                    <input type="number" name="tax_amount" id="tax_amount" 
                                           class="text-sm font-medium text-gray-900 bg-transparent border-none p-0 w-20 text-right" 
                                           value="0.00" readonly>
                                </div>
                            </div>
                            
                            <div class="flex justify-between items-center">
                                <span class="text-sm font-medium text-gray-600">Discount:</span>
                                <div class="flex items-center">
                                    <span class="text-gray-500 mr-1">-$</span>
                                    <span class="text-sm font-medium text-gray-900" id="discountDisplay">0.00</span>
                                </div>
                            </div>
                            
                            <div class="border-t border-gray-200 pt-3">
                                <div class="flex justify-between items-center">
                                    <span class="text-base font-bold text-gray-900">Total:</span>
                                    <div class="flex items-center">
                                        <span class="text-gray-700 mr-1 text-lg">$</span>
                                        <input type="number" name="total" id="total" 
                                               class="text-lg font-bold text-rose-600 bg-transparent border-none p-0 w-24 text-right" 
                                               value="0.00" readonly>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Form Actions -->
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-end space-y-3 sm:space-y-0 sm:space-x-3">
                <a href="{{ route('admin.invoices.index') }}" 
                   class="inline-flex items-center justify-center px-6 py-3 border border-gray-300 text-sm font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rose-500 transition duration-200">
                    <i class="fas fa-times mr-2"></i>
                    Cancel
                </a>
                <button type="button" 
                        class="inline-flex items-center justify-center px-6 py-3 border border-gray-300 text-sm font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rose-500 transition duration-200">
                    <i class="fas fa-save mr-2"></i>
                    Save as Draft
                </button>
                <button type="submit" 
                        class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-sm font-medium rounded-lg shadow-sm text-white bg-rose-600 hover:bg-rose-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rose-500 transition duration-200">
                    <i class="fas fa-file-invoice mr-2"></i>
                    Create Invoice
                </button>
            </div>
        </form>
    </div>
@endsection

@push('scripts')
<script>
    // Initialize form with dynamic invoice items
    document.addEventListener('DOMContentLoaded', function() {
        // Add event listener to add new item button
        document.getElementById('addItem').addEventListener('click', function() {
            addNewItem();
        });
        
        // Initialize with one empty item if no items exist
        if (document.querySelectorAll('.invoice-item').length === 0) {
            addNewItem();
        }
        
        // Set up the form to recalculate totals when values change
        document.getElementById('invoiceForm').addEventListener('input', function(e) {
            if (e.target.classList.contains('calc-trigger')) {
                calculateAllTotals();
            }
        });
        
        // Initialize calculations
        calculateAllTotals();
        updateEmptyState();
    });
    
    function addNewItem() {
        const itemsContainer = document.getElementById('invoiceItems');
        const itemCount = document.querySelectorAll('.invoice-item').length;
        
        const itemHtml = `
            <div class="invoice-item bg-gray-50 border border-gray-200 rounded-lg p-6 transition-all duration-200 hover:shadow-sm">
                <div class="flex justify-between items-center mb-4">
                    <h4 class="text-sm font-semibold text-gray-900 flex items-center">
                        <i class="fas fa-box text-gray-400 mr-2"></i>
                        Item #${itemCount + 1}
                    </h4>
                    <button type="button" class="remove-item text-red-600 hover:text-red-800 hover:bg-red-50 p-2 rounded-lg transition-colors duration-200" title="Remove Item">
                        <i class="fas fa-trash text-sm"></i>
                    </button>
                </div>
                
                <div class="space-y-4">
                    <div>
                        <label for="items[${itemCount}][description]" class="block text-sm font-medium text-gray-700 mb-2">
                            <i class="fas fa-align-left text-gray-400 mr-1"></i>
                            Description
                        </label>
                        <textarea name="items[${itemCount}][description]" rows="3" 
                                  class="focus:ring-rose-500 focus:border-rose-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-lg" 
                                  placeholder="Describe the product or service..." required></textarea>
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                        <div>
                            <label for="items[${itemCount}][quantity]" class="block text-sm font-medium text-gray-700 mb-2">
                                <i class="fas fa-hashtag text-gray-400 mr-1"></i>
                                Quantity
                            </label>
                            <input type="number" name="items[${itemCount}][quantity]" min="0.01" step="0.01" 
                                   class="calc-trigger quantity focus:ring-rose-500 focus:border-rose-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-lg" 
                                   value="1" placeholder="0" required>
                        </div>
                        
                        <div>
                            <label for="items[${itemCount}][unit_price]" class="block text-sm font-medium text-gray-700 mb-2">
                                <i class="fas fa-dollar-sign text-gray-400 mr-1"></i>
                                Unit Price
                            </label>
                            <input type="number" name="items[${itemCount}][unit_price]" min="0" step="0.01" 
                                   class="calc-trigger unit-price focus:ring-rose-500 focus:border-rose-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-lg" 
                                   value="0.00" placeholder="0.00" required>
                        </div>
                        
                        <div>
                            <label for="items[${itemCount}][amount]" class="block text-sm font-medium text-gray-700 mb-2">
                                <i class="fas fa-calculator text-gray-400 mr-1"></i>
                                Amount
                            </label>
                            <div class="relative">
                                <span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">$</span>
                                <input type="number" name="items[${itemCount}][amount]" min="0" step="0.01" 
                                       class="amount focus:ring-rose-500 focus:border-rose-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-lg pl-7" 
                                       value="0.00" readonly required>
                            </div>
                        </div>
                        
                        <div class="flex items-end">
                            <button type="button" class="remove-item w-full px-3 py-2 border border-red-300 text-sm font-medium rounded-lg text-red-700 bg-white hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition duration-200">
                                <i class="fas fa-trash mr-1"></i>
                                Remove
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        `;
        
        // Insert the new item
        const tempDiv = document.createElement('div');
        tempDiv.innerHTML = itemHtml.trim();
        const newItem = tempDiv.firstElementChild;
        
        // Add event listeners to remove buttons
        const removeButtons = newItem.querySelectorAll('.remove-item');
        removeButtons.forEach(btn => {
            btn.addEventListener('click', function() {
                if (document.querySelectorAll('.invoice-item').length > 1) {
                    newItem.remove();
                    renumberItems();
                    calculateAllTotals();
                    updateEmptyState();
                } else {
                    // Show a toast/notification instead of alert
                    showNotification('You need at least one item on the invoice.', 'warning');
                }
            });
        });
        
        // Add the item to the container
        itemsContainer.appendChild(newItem);
        
        // Update calculations and empty state
        calculateItemTotal(newItem);
        calculateAllTotals();
        updateEmptyState();
        
        // Focus on the description field of the new item
        const descriptionField = newItem.querySelector('textarea');
        if (descriptionField) {
            descriptionField.focus();
        }
    }
    
    function renumberItems() {
        const items = document.querySelectorAll('.invoice-item');
        items.forEach((item, index) => {
            // Update the item number in the heading
            const header = item.querySelector('h4');
            if (header) {
                const icon = header.querySelector('i');
                const iconHTML = icon ? icon.outerHTML : '<i class="fas fa-box text-gray-400 mr-2"></i>';
                header.innerHTML = `${iconHTML} Item #${index + 1}`;
            }
            
            // Update the field names with the new index
            const inputs = item.querySelectorAll('input, textarea');
            inputs.forEach(input => {
                const name = input.getAttribute('name');
                if (name) {
                    const newName = name.replace(/items\[\d+\]/, `items[${index}]`);
                    input.setAttribute('name', newName);
                    input.setAttribute('id', newName);
                }
            });
            
            // Update labels
            const labels = item.querySelectorAll('label');
            labels.forEach(label => {
                const forAttr = label.getAttribute('for');
                if (forAttr) {
                    const newFor = forAttr.replace(/items\[\d+\]/, `items[${index}]`);
                    label.setAttribute('for', newFor);
                }
            });
        });
    }
    
    function updateEmptyState() {
        const itemsContainer = document.getElementById('invoiceItems');
        const emptyState = document.getElementById('emptyState');
        const hasItems = document.querySelectorAll('.invoice-item').length > 0;
        
        if (hasItems) {
            emptyState.classList.add('hidden');
            itemsContainer.classList.remove('hidden');
        } else {
            emptyState.classList.remove('hidden');
            itemsContainer.classList.add('hidden');
        }
    }
    
    function calculateItemTotal(itemElement) {
        const quantityInput = itemElement.querySelector('.quantity');
        const priceInput = itemElement.querySelector('.unit-price');
        const amountInput = itemElement.querySelector('.amount');
        
        const quantity = parseFloat(quantityInput.value) || 0;
        const price = parseFloat(priceInput.value) || 0;
        const amount = quantity * price;
        
        amountInput.value = amount.toFixed(2);
    }
    
    function calculateAllTotals() {
        // Calculate each item's total
        const items = document.querySelectorAll('.invoice-item');
        items.forEach(item => {
            calculateItemTotal(item);
        });
        
        // Calculate invoice subtotal
        let subtotal = 0;
        document.querySelectorAll('.amount').forEach(amountInput => {
            subtotal += parseFloat(amountInput.value) || 0;
        });
        
        // Update subtotal field
        const subtotalInput = document.getElementById('subtotal');
        subtotalInput.value = subtotal.toFixed(2);
        
        // Calculate tax if applicable
        const taxRateInput = document.getElementById('tax_rate');
        const taxAmountInput = document.getElementById('tax_amount');
        const taxRate = parseFloat(taxRateInput.value) || 0;
        const taxAmount = subtotal * (taxRate / 100);
        taxAmountInput.value = taxAmount.toFixed(2);
        
        // Get discount
        const discountInput = document.getElementById('discount');
        const discountDisplay = document.getElementById('discountDisplay');
        const discount = parseFloat(discountInput.value) || 0;
        discountDisplay.textContent = discount.toFixed(2);
        
        // Calculate total
        const totalInput = document.getElementById('total');
        const total = subtotal + taxAmount - discount;
        totalInput.value = total.toFixed(2);
    }
    
    function showNotification(message, type = 'info') {
        // Simple notification function - you can enhance this with a proper toast library
        const notification = document.createElement('div');
        notification.className = `fixed top-4 right-4 z-50 p-4 rounded-lg shadow-lg ${
            type === 'warning' ? 'bg-yellow-100 text-yellow-800 border border-yellow-200' :
            type === 'error' ? 'bg-red-100 text-red-800 border border-red-200' :
            'bg-blue-100 text-blue-800 border border-blue-200'
        }`;
        notification.innerHTML = `
            <div class="flex items-center">
                <i class="fas fa-${type === 'warning' ? 'exclamation-triangle' : type === 'error' ? 'times-circle' : 'info-circle'} mr-2"></i>
                ${message}
            </div>
        `;
        
        document.body.appendChild(notification);
        
        setTimeout(() => {
            notification.remove();
        }, 3000);
    }
</script>
@endpush