@extends('layouts.app')

@section('title', 'Clients')

@section('content')
<div class="px-4 py-6 sm:px-0">
    <div class="flex flex-col md:flex-row justify-between items-center mb-6 gap-4">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">Clients</h1>
            <p class="text-gray-600">Manage your business contacts and invoices</p>
        </div>

        <div class="flex items-center space-x-4 w-full md:w-auto">
            <div class="relative flex-grow md:w-80">
                <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400">
                    <i class="fas fa-search" id="search-icon"></i>
                    <i class="fas fa-spinner fa-spin hidden" id="search-spinner"></i>
                </span>

                <input type="text" id="clientSearch"
                    class="block w-full pl-10 pr-10 py-2 border border-gray-300 rounded-md leading-5 bg-white focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                    placeholder="Search phone or email...">

                <button id="clearSearch" class="hidden absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600">
                    <i class="fas fa-times-circle"></i>
                </button>
            </div>

            <a href="{{ route('clients.create') }}"
                class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 flex items-center shrink-0">
                <i class="fas fa-plus mr-2"></i> New Client
            </a>
        </div>
    </div>

    <div class="bg-white shadow-md rounded-lg overflow-hidden border border-gray-200" id="clients-table-container">
        @include('clients._table')
    </div>
</div>

<script>
    const searchInput = document.getElementById('clientSearch');
    const tableContainer = document.getElementById('clients-table-container');
    const searchIcon = document.getElementById('search-icon');
    const searchSpinner = document.getElementById('search-spinner');
    const clearBtn = document.getElementById('clearSearch');

    // 1. Debounce helper to prevent excessive API calls
    function debounce(func, timeout = 400) {
        let timer;
        return (...args) => {
            clearTimeout(timer);
            timer = setTimeout(() => { func.apply(this, args); }, timeout);
        };
    }

    // 2. Core Fetch Function
    const fetchClients = (url) => {
        searchIcon.classList.add('hidden');
        searchSpinner.classList.remove('hidden');

        fetch(url, {
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        })
        .then(response => response.text())
        .then(html => {
            tableContainer.innerHTML = html;
            searchIcon.classList.remove('hidden');
            searchSpinner.classList.add('hidden');

            // Toggle Clear Button based on input
            if (searchInput.value.length > 0) {
                clearBtn.classList.remove('hidden');
            } else {
                clearBtn.classList.add('hidden');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            searchIcon.classList.remove('hidden');
            searchSpinner.classList.add('hidden');
        });
    };

    // 3. Search Input Listener (Debounced)
    searchInput.addEventListener('input', debounce(() => {
        const query = searchInput.value;
        const url = new URL('{{ route('clients.index') }}');
        url.searchParams.set('search', query);
        fetchClients(url);
    }));

    // 4. Clear Search Click
    clearBtn.addEventListener('click', () => {
        searchInput.value = '';
        const url = new URL('{{ route('clients.index') }}');
        fetchClients(url);
    });

    // 5. AJAX Pagination (intercepting link clicks)
    tableContainer.addEventListener('click', function(e) {
        const link = e.target.closest('.pagination a');
        if (link) {
            e.preventDefault();
            fetchClients(link.href);
            // Optional: Smooth scroll back to top of table
            tableContainer.scrollIntoView({ behavior: 'smooth' });
        }
    });
</script>
@endsection