@props(['payments', 'summary', 'clientUuid' => null, 'currency' => 'TND', 'stats' => null])

<div data-payments-table>
    @if($summary)
        <div class="mb-6">
            <div class="flex gap-2 mb-4 overflow-x-auto pb-2 scrollbar-hide" id="invoice-filters">
                <a href="{{ route('provider.clients.show', ['client_uuid' => $clientUuid, 'tab' => 'invoices']) }}" 
                   class="flex-shrink-0 px-3 py-1.5 text-sm rounded-lg whitespace-nowrap {{ !request('filter') ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200' }}" {{ !request('filter') ? 'id=active-filter' : '' }}>
                    Tous ({{ $summary['count'] }})
                </a>
                <a href="{{ route('provider.clients.show', ['client_uuid' => $clientUuid, 'tab' => 'invoices', 'filter' => 'draft']) }}" 
                   class="flex-shrink-0 px-3 py-1.5 text-sm rounded-lg whitespace-nowrap {{ request('filter') === 'draft' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200' }}" {{ request('filter') === 'draft' ? 'id=active-filter' : '' }}>
                    Brouillon ({{ $summary['draft'] ?? 0 }})
                </a>
                <a href="{{ route('provider.clients.show', ['client_uuid' => $clientUuid, 'tab' => 'invoices', 'filter' => 'overdue']) }}" 
                   class="flex-shrink-0 px-3 py-1.5 text-sm rounded-lg whitespace-nowrap {{ request('filter') === 'overdue' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200' }}" {{ request('filter') === 'overdue' ? 'id=active-filter' : '' }}>
                    En retard ({{ $summary['overdue'] ?? 0 }})
                </a>
                <a href="{{ route('provider.clients.show', ['client_uuid' => $clientUuid, 'tab' => 'invoices', 'filter' => 'due_soon']) }}" 
                   class="flex-shrink-0 px-3 py-1.5 text-sm rounded-lg whitespace-nowrap {{ request('filter') === 'due_soon' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200' }}" {{ request('filter') === 'due_soon' ? 'id=active-filter' : '' }}>
                    À échéance ({{ $summary['due_soon'] ?? 0 }})
                </a>
                <a href="{{ route('provider.clients.show', ['client_uuid' => $clientUuid, 'tab' => 'invoices', 'filter' => 'payee']) }}" 
                   class="flex-shrink-0 px-3 py-1.5 text-sm rounded-lg whitespace-nowrap {{ request('filter') === 'payee' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200' }}" {{ request('filter') === 'payee' ? 'id=active-filter' : '' }}>
                    Payé ({{ $summary['payee'] ?? 0 }})
                </a>
                <a href="{{ route('provider.clients.show', ['client_uuid' => $clientUuid, 'tab' => 'invoices', 'filter' => 'partiellement_payee']) }}" 
                   class="flex-shrink-0 px-3 py-1.5 text-sm rounded-lg whitespace-nowrap {{ request('filter') === 'partiellement_payee' || request('filter') === 'unpaid_all' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200' }}" {{ request('filter') === 'partiellement_payee' || request('filter') === 'unpaid_all' ? 'id=active-filter' : '' }}>
                    Partiellement payé ({{ $summary['partiellement_payee'] ?? 0 }})
                </a>
                <a href="{{ route('provider.clients.show', ['client_uuid' => $clientUuid, 'tab' => 'invoices', 'filter' => 'non_payee']) }}" 
                   class="flex-shrink-0 px-3 py-1.5 text-sm rounded-lg whitespace-nowrap {{ request('filter') === 'non_payee' || request('filter') === 'unpaid_all' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200' }}" {{ request('filter') === 'non_payee' || request('filter') === 'unpaid_all' ? 'id=active-filter' : '' }}>
                    Non payé ({{ $summary['non_payee'] ?? 0 }})
                </a>
                <a href="{{ route('provider.clients.show', ['client_uuid' => $clientUuid, 'tab' => 'invoices', 'filter' => 'annulee']) }}" 
                   class="flex-shrink-0 px-3 py-1.5 text-sm rounded-lg whitespace-nowrap {{ request('filter') === 'annulee' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200' }}" {{ request('filter') === 'annulee' ? 'id=active-filter' : '' }}>
                    Annulé ({{ $summary['annulee'] ?? 0 }})
                </a>
                <a href="{{ route('provider.clients.show', ['client_uuid' => $clientUuid, 'tab' => 'invoices', 'filter' => 'avoir']) }}" 
                   class="flex-shrink-0 px-3 py-1.5 text-sm rounded-lg whitespace-nowrap {{ request('filter') === 'avoir' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200' }}" {{ request('filter') === 'avoir' ? 'id=active-filter' : '' }}>
                    Avoir ({{ $summary['avoir'] ?? 0 }})
                </a>
            </div>
            
            @if($stats && $stats['count'] > 0)
            <x-invoice-kpis 
                :stats="$stats" 
                :currency="$currency" 
                :unpaid-url="route('provider.clients.show', ['client_uuid' => $clientUuid, 'tab' => 'invoices', 'filter' => 'unpaid_all'])" 
            />
            @endif
        </div>
    @endif

    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Liste des factures</h3>
    
    <!-- Recherche et Filtres -->
    <form method="GET" class="space-y-4 mb-4" x-data="{ search: '{{ request('search') }}', showFilters: {{ request()->hasAny(['date_from', 'date_to', 'sort']) ? 'true' : 'false' }} }">
        <input type="hidden" name="tab" value="invoices">
        <input type="hidden" name="filter" value="{{ request('filter') }}">
        
        <!-- Barre de recherche -->
        <div class="flex gap-1">
            <div class="relative flex-1">
                <input type="text" 
                       name="search" 
                       x-model="search"
                       placeholder="Rechercher par N° facture..."
                       class="w-full px-3 pr-12 py-2 text-sm border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                <div class="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-1">
                    <button type="button" x-show="search" style="display: none;" @click="search = ''; $el.closest('form').querySelector('input[name=search]').value = ''" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 p-1">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    </button>
                    <button type="submit" class="flex items-center justify-center p-1 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700" title="Rechercher">
                        <svg class="w-6 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                        </svg>
                    </button>
                </div>
            </div>
            <button type="button" 
                    @click="showFilters = !showFilters"
                    class="md:hidden flex items-center justify-center px-3 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path>
                </svg>
            </button>
            @if(request()->hasAny(['search', 'date_from', 'date_to', 'sort']))
            <a href="{{ route('provider.clients.show', ['client_uuid' => $clientUuid, 'tab' => 'invoices', 'filter' => request('filter')]) }}" class="flex items-center justify-center px-3 py-2 border border-red-300 dark:border-red-600 text-red-600 dark:text-red-400 rounded-xl hover:bg-red-50 dark:hover:bg-red-900/20">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </a>
            @endif
        </div>
        
        <!-- Filtres en ligne -->
        <div class="flex gap-2" :class="showFilters ? 'flex' : 'hidden md:flex'" style="display: none;" x-show="showFilters || window.innerWidth >= 768">
            <div class="flex-1">
                <x-date-range-picker 
                    name-from="date_from" 
                    name-to="date_to" 
                    :value-from="request('date_from', '')" 
                    :value-to="request('date_to', '')"
                />
            </div>
            
            <div class="relative flex-shrink-0" x-data="{ open: {{ request('sort') && request('sort') !== '' && request('sort') !== 'date_desc' ? 'true' : 'false' }}, hasSort: {{ request('sort') && request('sort') !== '' && request('sort') !== 'date_desc' ? 'true' : 'false' }} }" @sort-toggle.window="if ($event.detail.open === false) open = false">
                <button type="button" 
                        @click="if (!hasSort) { open = !open; $dispatch('sort-toggle', { open: open }); }"
                        class="flex items-center justify-center px-3 py-1.5 h-[34px] border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700" 
                        title="Tri">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12"></path>
                    </svg>
                </button>
                <div x-show="open" @click.away="if (!hasSort) open = false" style="{{ request('sort') && request('sort') !== '' && request('sort') !== 'date_desc' ? 'display: block;' : '' }}" class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-10 mb-4">
                    <select name="sort" onchange="this.form.submit()" class="w-full px-3 py-1.5 text-sm border-0 dark:bg-gray-800 dark:text-white rounded-lg focus:ring-0">
                        <option value="date_desc" {{ request('sort') == 'date_desc' || !request('sort') ? 'selected' : '' }}>Tri: Récent (par défaut)</option>
                        <option value="date_asc" {{ request('sort') == 'date_asc' ? 'selected' : '' }}>Tri: Ancien</option>
                        <option value="amount_desc" {{ request('sort') == 'amount_desc' ? 'selected' : '' }}>Tri: Montant ↓</option>
                        <option value="amount_asc" {{ request('sort') == 'amount_asc' ? 'selected' : '' }}>Tri: Montant ↑</option>
                    </select>
                </div>
            </div>
        </div>
    </form>
    
    <div x-data="{ sortOpen: false }" 
         @sort-toggle.window="sortOpen = $event.detail.open"
         x-show="sortOpen"
         style="display: none;"
         class="h-5"></div>
    
    @if(request('sort') && request('sort') !== '' && request('sort') !== 'date_desc')
        <div class="h-5"></div>
    @endif

    @if($payments->count() > 0)
        <div class="space-y-3">
            @foreach($payments as $payment)
                <x-invoice-card :payment="$payment" :currency="$payment->currency" :fromClient="true" />
            @endforeach
        </div>
        <div class="mt-4" data-pagination>{{ $payments->links() }}</div>
    @else
        <p class="text-gray-500 dark:text-gray-400 text-center py-8">Aucun paiement</p>
    @endif
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const activeFilter = document.getElementById('active-filter');
    if (activeFilter) {
        activeFilter.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });
    }
});

document.addEventListener('click', function(e) {
    const link = e.target.closest('[data-payments-table] [data-pagination] a');
    if (link) {
        e.preventDefault();
        let url = link.href;
        // Ajouter tab=invoices si absent
        if (!url.includes('tab=')) {
            url += (url.includes('?') ? '&' : '?') + 'tab=invoices';
        }
        fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
            .then(r => r.text())
            .then(html => {
                const parser = new DOMParser();
                const doc = parser.parseFromString(html, 'text/html');
                const newTable = doc.querySelector('[data-payments-table]');
                if (newTable) document.querySelector('[data-payments-table]').innerHTML = newTable.innerHTML;
            });
    }
});
</script>