@extends('layouts.app')

@section('title', 'Quotes - Lektrik')

@section('content')
<div class="space-y-6">
    @if($quotes->count() > 0)
        <!-- Search and New Quote Button -->
        <div class="flex items-center gap-4 justify-between">
            <form method="GET" action="{{ route('quotes.index') }}" class="search-container">
                <div class="relative">
                    <input type="text" 
                           name="search" 
                           value="{{ request('search') }}"
                           class="search-input w-24 focus:w-56 pl-10 pr-10 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 transition-all duration-300 ease-in-out">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <i class="fas fa-search text-gray-400 dark:text-gray-500 transition-colors duration-200"></i>
                    </div>
                    @if(request('search'))
                        <a href="{{ route('quotes.index') }}" class="absolute inset-y-0 right-0 pr-3 flex items-center group">
                            <i class="fas fa-times text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-200"></i>
                        </a>
                    @endif
                </div>
            </form>
            <a href="{{ route('quotes.create') }}" class="bg-primary text-white px-4 py-2 rounded-md hover:bg-blue-600 transition-all duration-200 whitespace-nowrap hover:shadow-md transform hover:-translate-y-0.5">
                <i class="fas fa-plus mr-2"></i>New Quote
            </a>
        </div>

        @if(request('search'))
            @include('quotes.partials.search-info', ['search' => request('search'), 'total' => $quotes->total()])
        @endif

        <!-- Quotes List -->
        @include('quotes.partials.quotes-list')

        <!-- Pagination -->
        @if($quotes->hasPages())
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 transition-colors duration-200">
                {{ $quotes->links() }}
            </div>
        @endif
    @else
        @include('quotes.partials.quotes-list')
    @endif
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.querySelector('.search-input');
    const searchForm = searchInput.closest('form');
    const quotesContainer = document.querySelector('[data-quotes-container]');
    const searchResultsInfo = document.querySelector('.bg-blue-50');
    let searchTimeout;

    // AJAX search function
    function performSearch(query) {
        // Show loading state
        const loadingDiv = document.createElement('div');
        loadingDiv.className = 'flex items-center justify-center py-8';
        loadingDiv.innerHTML = '<i class="fas fa-spinner fa-spin text-primary text-2xl"></i><span class="ml-2 text-gray-600">Searching...</span>';
        
        if (quotesContainer) {
            quotesContainer.innerHTML = '';
            quotesContainer.appendChild(loadingDiv);
        }

        // Perform AJAX request
        fetch(`${window.location.pathname}?search=${encodeURIComponent(query)}`, {
            method: 'GET',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            // Update the quotes container with new results
            if (quotesContainer) {
                quotesContainer.outerHTML = data.quotes_html;
            }
            
            // Update search results info
            const existingInfo = document.querySelector('.bg-blue-50.border.border-blue-200, .dark\\:bg-blue-900\\/30.dark\\:border-blue-800');
            if (existingInfo) {
                existingInfo.remove();
            }
            
            if (query && data.search_info_html) {
                const searchInfoDiv = document.createElement('div');
                searchInfoDiv.innerHTML = data.search_info_html;
                quotesContainer.parentNode.insertBefore(searchInfoDiv.firstElementChild, quotesContainer);
            }
            
            // Update URL without page reload
            const newUrl = query ? `${window.location.pathname}?search=${encodeURIComponent(query)}` : window.location.pathname;
            window.history.pushState({}, '', newUrl);
            
            // Re-attach event listeners to new elements
            attachQuoteCardListeners();
        })
        .catch(error => {
            console.error('Search error:', error);
            if (quotesContainer) {
                quotesContainer.innerHTML = '<div class="p-8 text-center text-red-600 dark:text-red-400">Search failed. Please try again.</div>';
            }
        });
    }

    // Auto-search with AJAX
    searchInput.addEventListener('input', function() {
        clearTimeout(searchTimeout);
        const query = this.value.trim();
        
        searchTimeout = setTimeout(function() {
            if (query.length >= 2 || query.length === 0) {
                performSearch(query);
            }
        }, 300); // Reduced timeout for better responsiveness
    });

    // Expand search on focus
    searchInput.addEventListener('focus', function() {
        this.style.width = '14rem'; // w-56 equivalent
    });

    // Contract search on blur if empty
    searchInput.addEventListener('blur', function() {
        if (!this.value) {
            this.style.width = '6rem'; // w-24 equivalent
        }
    });

    // Animate search icon color on focus
    searchInput.addEventListener('focus', function() {
        const icon = this.parentElement.querySelector('.fa-search');
        icon.style.color = '#3B82F6';
    });

    searchInput.addEventListener('blur', function() {
        const icon = this.parentElement.querySelector('.fa-search');
        const isDark = document.documentElement.classList.contains('dark');
        icon.style.color = isDark ? '#6B7280' : '#9CA3AF';
    });

    // Function to re-attach event listeners to dynamically loaded content
    function attachQuoteCardListeners() {
        // Re-attach hover animations and other interactions
        const quoteCards = document.querySelectorAll('.quote-card');
        quoteCards.forEach(card => {
            card.addEventListener('mouseenter', function() {
                this.style.transform = 'translateY(-2px)';
                this.style.boxShadow = '0 8px 25px -8px rgba(0, 0, 0, 0.1)';
            });
            
            card.addEventListener('mouseleave', function() {
                this.style.transform = 'translateY(0)';
                this.style.boxShadow = '';
            });
        });
    }

    // Initial attachment of listeners
    attachQuoteCardListeners();
});
</script>

@endsection