@extends('layouts.app')

@section('title', 'Create Quote - Lektrik')

@section('content')
<div class="max-w-4xl mx-auto">
    <form action="{{ route('quotes.store') }}" method="POST" class="space-y-6">
        @csrf

        <!-- Client Information -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 transition-colors duration-200">
            <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                <i class="fas fa-user mr-2 text-primary dark:text-blue-400"></i>Client Information
            </h2>

            <div class="grid grid-cols-1 gap-4">
                <!-- Client Selection/Creation -->
                <div>
                    <label for="client_search" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Client Name <span class="text-red-500">*</span></label>
                    <div class="relative">
                        <input type="text" id="client_search" name="client_name" required 
                               class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                               placeholder="Start typing client name..." autocomplete="off" value="{{ old('client_name') }}">
                        <input type="hidden" id="client_id" name="client_id" value="{{ old('client_id') }}">
                        
                        <!-- Dropdown for search results -->
                        <div id="client_dropdown" class="absolute z-10 w-full bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-lg hidden mt-1 max-h-48 overflow-y-auto">
                            <!-- Search results will be populated here -->
                        </div>
                    </div>
                    @error('client_name')
                        <p class="text-red-500 dark:text-red-400 text-sm mt-1">{{ $message }}</p>
                    @enderror
                    @error('client_id')
                        <p class="text-red-500 dark:text-red-400 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Additional client fields (shown when creating new client) -->
                <div id="new_client_fields" class="space-y-4 hidden">
                    <div class="bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800 rounded-md p-4 transition-colors duration-200">
                        <p class="text-blue-800 dark:text-blue-200 text-sm mb-3">
                            <i class="fas fa-info-circle mr-2"></i>
                            Creating new client. Please fill in additional details:
                        </p>
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                                <label for="client_email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email</label>
                                <input type="email" name="client_email" id="client_email" value="{{ old('client_email') }}"
                                       class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                                       placeholder="client@example.com">
                            </div>
                            <div>
                                <label for="client_phone" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Phone</label>
                                <input type="tel" name="client_phone" id="client_phone" value="{{ old('client_phone') }}"
                                       class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                                       placeholder="011 123 4567">
                            </div>
                        </div>
                        <div class="mt-4">
                            <label for="client_address" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Address</label>
                            <textarea name="client_address" id="client_address" rows="2"
                                      class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                                      placeholder="123 Main Street, Johannesburg, 2000">{{ old('client_address') }}</textarea>
                        </div>
                    </div>
                </div>

                <div>
                    <label for="notes" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Notes (Optional)</label>
                    <textarea name="notes" id="notes" rows="3" 
                              class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                              placeholder="Any additional notes or terms...">{{ old('notes') }}</textarea>
                    @error('notes')
                        <p class="text-red-500 dark:text-red-400 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <div class="mt-4 p-4 bg-gray-100 dark:bg-gray-700 rounded-md transition-colors duration-200">
                <p class="text-sm text-gray-600 dark:text-gray-400">
                    <i class="fas fa-lightbulb mr-2"></i>
                    <strong>Tip:</strong> Start typing to search existing clients or enter a new name to create a new client.
                </p>
            </div>
        </div>

        <!-- Quote Items -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 transition-colors duration-200">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
                    <i class="fas fa-list mr-2 text-primary dark:text-blue-400"></i>Items
                </h2>
                <button type="button" id="add-item" class="bg-primary text-white px-4 py-2 rounded-md hover:bg-blue-600 transition-colors text-sm">
                    <i class="fas fa-plus mr-2"></i>Add Item
                </button>
            </div>

            <div id="items-container" class="space-y-4">
                <!-- Dynamic items will be added here -->
            </div>

            <div class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
                <div class="flex justify-end space-y-2 text-sm">
                    <div class="w-64">
                        <div class="flex justify-between">
                            <span class="font-medium text-gray-900 dark:text-white">Subtotal:</span>
                            <span id="subtotal-display" class="text-gray-900 dark:text-white">R0.00</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="font-medium text-gray-900 dark:text-white">VAT (15%):</span>
                            <span id="vat-display" class="text-gray-900 dark:text-white">R0.00</span>
                        </div>
                        <div class="flex justify-between text-lg font-bold border-t border-gray-300 dark:border-gray-600 pt-2">
                            <span class="text-gray-900 dark:text-white">Total:</span>
                            <span id="total-display" class="text-gray-900 dark:text-white">R0.00</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Form Actions -->
        <div class="flex flex-col sm:flex-row gap-4 justify-end">
            <a href="{{ route('quotes.index') }}" class="w-full sm:w-auto px-6 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors text-center">
                Cancel
            </a>
            <button type="submit" class="w-full sm:w-auto bg-primary text-white px-6 py-2 rounded-md hover:bg-blue-600 transition-colors">
                <i class="fas fa-save mr-2"></i>Create Quote
            </button>
        </div>
    </form>
</div>

<script>
    let itemCount = 0;
    let searchTimeout;
    let selectedClient = null;

    // Client search functionality
    const clientSearch = document.getElementById('client_search');
    const clientDropdown = document.getElementById('client_dropdown');
    const clientIdInput = document.getElementById('client_id');
    const newClientFields = document.getElementById('new_client_fields');

    clientSearch.addEventListener('input', function() {
        const query = this.value.trim();
        
        // Clear previous timeout
        clearTimeout(searchTimeout);
        
        // Reset client selection
        clientIdInput.value = '';
        selectedClient = null;
        
        if (query.length < 2) {
            clientDropdown.classList.add('hidden');
            newClientFields.classList.add('hidden');
            return;
        }
        
        // Debounce search
        searchTimeout = setTimeout(() => {
            searchClients(query);
        }, 300);
    });

    function searchClients(query) {
        fetch(`/api/clients/search?q=${encodeURIComponent(query)}`)
            .then(response => response.json())
            .then(clients => {
                if (clients.length > 0) {
                    showClientDropdown(clients);
                    newClientFields.classList.add('hidden');
                } else {
                    // No existing clients found, show new client fields
                    clientDropdown.classList.add('hidden');
                    newClientFields.classList.remove('hidden');
                }
            })
            .catch(error => {
                console.error('Error searching clients:', error);
                clientDropdown.classList.add('hidden');
                newClientFields.classList.remove('hidden');
            });
    }

    function showClientDropdown(clients) {
        clientDropdown.innerHTML = '';
        
        clients.forEach(client => {
            const item = document.createElement('div');
            item.className = 'px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer border-b border-gray-100 dark:border-gray-700 last:border-b-0 text-gray-900 dark:text-white transition-colors duration-200';
            item.innerHTML = `
                <div class="font-medium text-gray-900">${client.name}</div>
                <div class="text-sm text-gray-600">${client.email || 'No email'} ${client.phone ? '• ' + client.phone : ''}</div>
            `;
            
            item.addEventListener('click', () => selectClient(client));
            clientDropdown.appendChild(item);
        });
        
        clientDropdown.classList.remove('hidden');
    }

    function selectClient(client) {
        selectedClient = client;
        clientSearch.value = client.name;
        clientIdInput.value = client.id;
        clientDropdown.classList.add('hidden');
        newClientFields.classList.add('hidden');
    }

    // Hide dropdown when clicking outside
    document.addEventListener('click', function(event) {
        if (!clientSearch.contains(event.target) && !clientDropdown.contains(event.target)) {
            clientDropdown.classList.add('hidden');
        }
    });

    // Add item functionality
    document.getElementById('add-item').addEventListener('click', function() {
        addItem();
    });

    function addItem(description = '', quantity = 1, unitPrice = 0) {
        const container = document.getElementById('items-container');
        const itemDiv = document.createElement('div');
        itemDiv.className = 'border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 rounded-lg p-4 transition-colors duration-200';
        itemDiv.innerHTML = `
            <div class="flex items-start justify-between mb-3">
                <h4 class="font-medium text-gray-900 dark:text-white">Item ${itemCount + 1}</h4>
                <button type="button" onclick="removeItem(this)" class="text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300">
                    <i class="fas fa-trash text-sm"></i>
                </button>
            </div>
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                <div class="sm:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Description</label>
                    <input type="text" name="items[${itemCount}][description]" value="${description}" required 
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                           placeholder="e.g., Electrical panel installation">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Quantity</label>
                    <input type="number" name="items[${itemCount}][quantity]" value="${quantity}" min="1" required 
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent item-quantity"
                           onchange="calculateTotals()">
                </div>
            </div>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Unit Price (R)</label>
                    <input type="number" name="items[${itemCount}][unit_price]" value="${unitPrice}" min="0" step="0.01" required 
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent item-price"
                           onchange="calculateTotals()">
                </div>
                <div class="flex items-end">
                    <div class="w-full">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Total</label>
                        <div class="px-3 py-2 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md text-gray-700 dark:text-gray-300 item-total transition-colors duration-200">
                            R${(quantity * unitPrice).toFixed(2)}
                        </div>
                    </div>
                </div>
            </div>
        `;
        container.appendChild(itemDiv);
        itemCount++;
        calculateTotals();
    }

    function removeItem(button) {
        button.closest('.border').remove();
        calculateTotals();
    }

    function calculateTotals() {
        let subtotal = 0;
        
        document.querySelectorAll('.item-quantity').forEach((qtyInput, index) => {
            const priceInput = document.querySelectorAll('.item-price')[index];
            const totalDiv = document.querySelectorAll('.item-total')[index];
            
            if (qtyInput && priceInput && totalDiv) {
                const qty = parseFloat(qtyInput.value) || 0;
                const price = parseFloat(priceInput.value) || 0;
                const total = qty * price;
                
                totalDiv.textContent = `R${total.toFixed(2)}`;
                subtotal += total;
            }
        });
        
        const vat = subtotal * 0.15;
        const total = subtotal + vat;
        
        document.getElementById('subtotal-display').textContent = `R${subtotal.toFixed(2)}`;
        document.getElementById('vat-display').textContent = `R${vat.toFixed(2)}`;
        document.getElementById('total-display').textContent = `R${total.toFixed(2)}`;
    }

    // Add initial item
    addItem('Electrical panel installation', 1, 500);
</script>
@endsection