@extends('layouts.provider')

@section('title', 'Finances')
@section('page-title', 'Finances')

@section('content')
<div class="space-y-3">
    @php
        $currentTab = request('tab', 'factures');
    @endphp
    
    <x-finances-tabs active="{{ $currentTab }}" />

    @if($currentTab === 'factures')
    <!-- Onglet Factures -->
    
    <!-- Onglets de statut -->
    <div class="border-b border-gray-200 dark:border-gray-700 overflow-x-auto scroll-smooth scrollbar-hide" id="status-tabs">
        <nav class="flex space-x-4 md:space-x-8 min-w-max">
            <a href="{{ route('provider.finances.index', array_merge(request()->except(['status', 'unpaid_filter']), ['tab' => 'factures'])) }}" 
               class="{{ !request('status') && !request('unpaid_filter') ? 'text-primary dark:text-primary-400' : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300' }} whitespace-nowrap py-2 px-1 text-sm font-medium transition-colors">
                Tous ({{ $countAll }})
            </a>
            <a href="{{ route('provider.finances.index', array_merge(request()->except(['status', 'unpaid_filter']), ['tab' => 'factures', 'status' => 'draft'])) }}" 
               class="{{ request('status') === 'draft' ? 'text-primary dark:text-primary-400' : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300' }} whitespace-nowrap py-2 px-1 text-sm font-medium transition-colors" id="tab-draft">
                Brouillon ({{ $countDraft }})
            </a>
            <a href="{{ route('provider.finances.index', array_merge(request()->except(['status', 'unpaid_filter']), ['tab' => 'factures', 'status' => 'overdue'])) }}" 
               class="{{ request('status') === 'overdue' ? 'text-primary dark:text-primary-400' : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300' }} whitespace-nowrap py-2 px-1 text-sm font-medium transition-colors" id="tab-overdue">
                En retard ({{ $countOverdue }})
            </a>
            <a href="{{ route('provider.finances.index', array_merge(request()->except(['status', 'unpaid_filter']), ['tab' => 'factures', 'status' => 'due_soon'])) }}" 
               class="{{ request('status') === 'due_soon' ? 'text-primary dark:text-primary-400' : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300' }} whitespace-nowrap py-2 px-1 text-sm font-medium transition-colors" id="tab-due-soon">
                À échéance ({{ $countDueSoon }})
            </a>
            <a href="{{ route('provider.finances.index', array_merge(request()->except(['status', 'unpaid_filter']), ['tab' => 'factures', 'status' => 'payee'])) }}" 
               class="{{ request('status') === 'payee' ? 'text-primary dark:text-primary-400' : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300' }} whitespace-nowrap py-2 px-1 text-sm font-medium transition-colors" id="tab-payee">
                Payé ({{ $countPayee }})
            </a>
            <a href="{{ route('provider.finances.index', array_merge(request()->except(['status', 'unpaid_filter']), ['tab' => 'factures', 'status' => 'partiellement_payee'])) }}" 
               class="{{ request('status') === 'partiellement_payee' || request('unpaid_filter') ? 'text-primary dark:text-primary-400' : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300' }} whitespace-nowrap py-2 px-1 text-sm font-medium transition-colors" id="tab-partiellement">
                Partiellement payé ({{ $countPartiellement }})
            </a>
            <a href="{{ route('provider.finances.index', array_merge(request()->except(['status', 'unpaid_filter']), ['tab' => 'factures', 'status' => 'non_paye'])) }}" 
               class="{{ request('status') === 'non_paye' || request('unpaid_filter') ? 'text-primary dark:text-primary-400' : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300' }} whitespace-nowrap py-2 px-1 text-sm font-medium transition-colors" id="tab-non-paye">
                Non payé ({{ $countNonPaye }})
            </a>
            <a href="{{ route('provider.finances.index', array_merge(request()->except(['status', 'unpaid_filter']), ['tab' => 'factures', 'status' => 'annulee'])) }}" 
               class="{{ request('status') === 'annulee' ? 'text-primary dark:text-primary-400' : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300' }} whitespace-nowrap py-2 px-1 text-sm font-medium transition-colors" id="tab-annulee">
                Annulé ({{ $countAnnulee }})
            </a>
            <a href="{{ route('provider.finances.index', array_merge(request()->except(['status', 'unpaid_filter']), ['tab' => 'factures', 'status' => 'avoir'])) }}" 
               class="{{ request('status') === 'avoir' ? 'text-primary dark:text-primary-400' : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300' }} whitespace-nowrap py-2 px-1 text-sm font-medium transition-colors" id="tab-avoir">
                Avoir ({{ $countAvoir }})
            </a>
        </nav>
    </div>

    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const container = document.getElementById('status-tabs');
        const activeTab = container.querySelector('.text-primary');
        if (activeTab) {
            activeTab.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });
        }
    });
    </script>
    
    <x-card>
        <x-slot name="header">
            <div class="flex justify-between items-center">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Factures ({{ $payments->total() }})</h3>
                <div class="flex gap-2">
                    <a href="{{ route('provider.general-settings.index', ['tab' => 'general']) }}" class="inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 px-4 py-2 text-sm bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500 dark:bg-gray-600 dark:text-white dark:hover:bg-gray-700">
                        <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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                        </svg>
                        <span class="hidden md:inline ml-1">Paramètres</span>
                    </a>
                    <div class="relative" x-data="{ open: false }">
                        <button @click="open = !open" class="inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 px-4 py-2 text-sm bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500 dark:bg-gray-600 dark:text-white dark:hover:bg-gray-700">
                            <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="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                            </svg>
                            <span class="hidden md:inline ml-1">Exporter</span>
                        </button>
                        <div x-show="open" @click.away="open = false" x-transition 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 py-1 z-10" style="display: none;">
                            <a href="{{ route('provider.finances.export.invoices.excel', array_filter(['date_from' => request('date_from'), 'date_to' => request('date_to'), 'status' => request('status')])) }}" class="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                                <svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                                </svg>
                                <span>Excel</span>
                            </a>
                            <a href="{{ route('provider.finances.export.invoices.pdf', array_filter(['date_from' => request('date_from'), 'date_to' => request('date_to'), 'status' => request('status')])) }}" class="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                                <svg class="w-4 h-4 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
                                </svg>
                                <span>Rapport PDF</span>
                            </a>
                        </div>
                    </div>
                    <x-button href="{{ route('provider.payments.create') }}" size="sm">
                        <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="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                        </svg>
                        <span class="hidden md:inline ml-1">Nouvelle</span>
                    </x-button>
                </div>
            </div>
        </x-slot>
        
        <x-invoice-kpis 
            :stats="['count' => $invoiceStats->count, 'total' => $invoiceStats->total, 'unpaid' => $unpaidAmount ?? 0, 'average' => $invoiceStats->average, 'unique_clients' => $invoiceStats->unique_clients]" 
            :currency="$currency" 
            :unpaid-url="route('provider.finances.index', ['tab' => 'factures', 'unpaid_filter' => '1'])" 
        />
        
        <div class="space-y-4">
            <form method="GET" class="space-y-4 mb-4" x-data="{ search: '{{ request('search') }}', showFilters: {{ request()->hasAny(['client_id', 'date_from', 'date_to', 'sort']) ? 'true' : 'false' }} }">
                <input type="hidden" name="tab" value="factures">
                <input type="hidden" name="status" value="{{ request('status') }}">
                
                <!-- 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', 'client_id', 'date_from', 'date_to', 'sort']))
                    <a href="{{ route('provider.finances.index', ['tab' => 'factures', 'status' => request('status')]) }}" 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 flex-col md:flex-row 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="flex gap-2 flex-1">
                        <div class="flex-1">
                            <x-searchable-select 
                                name="client_id" 
                                :options="collect($clients)->sortBy('full_name')->map(fn($client) => [
                                    'value' => $client->id,
                                    'label' => $client->full_name . ($client->phone ? ' - ' . $client->phone : '')
                                ])->values()->toArray()"
                                :selected="request('client_id', '')"
                                placeholder="Client..."
                                onchange="this.form.submit()"
                                class="h-[34px] py-1.5"
                            />
                        </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>
                </div>

            <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" data-payments-list>
                @foreach($payments as $payment)
                    <x-invoice-card :payment="$payment" :currency="$currency" />
                @endforeach
            </div>
                <div class="mt-6" data-payments-pagination>
                    {{ $payments->links() }}
                </div>
            @else
                <div class="text-center py-12">
                    <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                    </svg>
                    <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">Aucune facture</h3>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Aucune facture pour cette période.</p>
                </div>
            @endif
        </div>
    </x-card>

    @elseif($currentTab === 'achats')
    <!-- Onglet Achats -->
    
    <!-- Onglets de statut pour les achats -->
    <div class="border-b border-gray-200 dark:border-gray-700 overflow-x-auto scroll-smooth scrollbar-hide" id="expense-status-tabs">
        <nav class="flex space-x-4 md:space-x-8 min-w-max">
            <a href="{{ route('provider.finances.index', array_merge(request()->except(['expense_status', 'expense_unpaid_filter']), ['tab' => 'achats'])) }}" 
               class="{{ !request('expense_status') && !request('expense_unpaid_filter') ? 'text-primary dark:text-primary-400' : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300' }} whitespace-nowrap py-2 px-1 text-sm font-medium transition-colors">
                Tous ({{ $expenseCountAll }})
            </a>
            <a href="{{ route('provider.finances.index', array_merge(request()->except(['expense_status', 'expense_unpaid_filter']), ['tab' => 'achats', 'expense_status' => 'overdue'])) }}" 
               class="{{ request('expense_status') === 'overdue' ? 'text-primary dark:text-primary-400' : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300' }} whitespace-nowrap py-2 px-1 text-sm font-medium transition-colors" id="tab-expense-overdue">
                En retard ({{ $expenseCountOverdue }})
            </a>
            <a href="{{ route('provider.finances.index', array_merge(request()->except(['expense_status', 'expense_unpaid_filter']), ['tab' => 'achats', 'expense_status' => 'due_soon'])) }}" 
               class="{{ request('expense_status') === 'due_soon' ? 'text-primary dark:text-primary-400' : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300' }} whitespace-nowrap py-2 px-1 text-sm font-medium transition-colors" id="tab-expense-due-soon">
                À échéance ({{ $expenseCountDueSoon }})
            </a>
            <a href="{{ route('provider.finances.index', array_merge(request()->except(['expense_status', 'expense_unpaid_filter']), ['tab' => 'achats', 'expense_status' => 'paid'])) }}" 
               class="{{ request('expense_status') === 'paid' ? 'text-primary dark:text-primary-400' : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300' }} whitespace-nowrap py-2 px-1 text-sm font-medium transition-colors" id="tab-expense-paid">
                Payé ({{ $expenseCountPaid }})
            </a>
            <a href="{{ route('provider.finances.index', array_merge(request()->except(['expense_status', 'expense_unpaid_filter']), ['tab' => 'achats', 'expense_status' => 'partly_paid'])) }}" 
               class="{{ (request('expense_status') === 'partly_paid' || request('expense_unpaid_filter')) ? 'text-primary dark:text-primary-400' : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300' }} whitespace-nowrap py-2 px-1 text-sm font-medium transition-colors" id="tab-expense-partly">
                Partiellement payé ({{ $expenseCountPartlyPaid }})
            </a>
            <a href="{{ route('provider.finances.index', array_merge(request()->except(['expense_status', 'expense_unpaid_filter']), ['tab' => 'achats', 'expense_status' => 'unpaid'])) }}" 
               class="{{ (request('expense_status') === 'unpaid' || request('expense_unpaid_filter')) ? 'text-primary dark:text-primary-400' : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300' }} whitespace-nowrap py-2 px-1 text-sm font-medium transition-colors" id="tab-expense-unpaid">
                Non payé ({{ $expenseCountUnpaid }})
            </a>
            <a href="{{ route('provider.finances.index', array_merge(request()->except(['expense_status', 'expense_unpaid_filter']), ['tab' => 'achats', 'expense_status' => 'cancelled'])) }}" 
               class="{{ request('expense_status') === 'cancelled' ? 'text-primary dark:text-primary-400' : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300' }} whitespace-nowrap py-2 px-1 text-sm font-medium transition-colors" id="tab-expense-cancelled">
                Annulé ({{ $expenseCountCancelled }})
            </a>
        </nav>
    </div>

    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const container = document.getElementById('expense-status-tabs');
        const activeTab = container.querySelector('.text-primary');
        if (activeTab) {
            activeTab.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });
        }
    });
    </script>
    
    <x-card>
        <x-slot name="header">
            <div class="flex justify-between items-center">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Achats ({{ $expenses->total() }})</h3>
                <div class="flex gap-2">
                    <a href="{{ route('provider.expense-settings.index', ['tab' => 'types']) }}" class="inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 px-4 py-2 text-sm bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500 dark:bg-gray-600 dark:text-white dark:hover:bg-gray-700">
                        <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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                        </svg>
                        <span class="hidden md:inline ml-1">Paramètres</span>
                    </a>
                    <div class="relative" x-data="{ open: false }">
                        <button @click="open = !open" class="inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 px-4 py-2 text-sm bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500 dark:bg-gray-600 dark:text-white dark:hover:bg-gray-700">
                            <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="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                            </svg>
                            <span class="hidden md:inline ml-1">Exporter</span>
                        </button>
                        <div x-show="open" @click.away="open = false" x-transition 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 py-1 z-10" style="display: none;">
                            <a href="{{ route('provider.finances.export.expenses.excel', array_filter(['expense_date_from' => request('expense_date_from'), 'expense_date_to' => request('expense_date_to')])) }}" class="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                                <svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                                </svg>
                                <span>Excel</span>
                            </a>
                            <a href="{{ route('provider.finances.export.expenses.pdf', array_filter(['expense_date_from' => request('expense_date_from'), 'expense_date_to' => request('expense_date_to')])) }}" class="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                                <svg class="w-4 h-4 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
                                </svg>
                                <span>Rapport PDF</span>
                            </a>
                        </div>
                    </div>
                    <x-button href="{{ route('provider.expenses.create') }}" size="sm">
                        <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="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                        </svg>
                        <span class="hidden md:inline ml-1">Nouveau</span>
                    </x-button>
                </div>
            </div>
        </x-slot>
        
        <!-- Stats KPI -->
        @if($expenseStats->count > 0)
        <!-- Version mobile : 2 KPIs + bouton -->
        <div class="md:hidden mb-4" x-data="{ showAll: false }">
            <div class="grid grid-cols-2 gap-3 mb-3">
                <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-3">
                    <div class="text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Total</div>
                    <div class="text-xl font-bold text-gray-900 dark:text-white">{{ format_currency($expenseStats->total, $expenseStats->total >= 1000 ? 0 : 3) }}<span class="text-xs font-normal ml-1">{{ $currency }}</span></div>
                </div>
                <a href="{{ route('provider.finances.index', ['tab' => 'achats', 'expense_unpaid_filter' => '1']) }}" class="bg-gray-50 dark:bg-gray-700 rounded-lg p-3 hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors">
                    <div class="text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Impayé</div>
                    <div class="text-xl font-bold text-red-600 dark:text-red-400 underline">{{ format_currency($expenseUnpaidAmount ?? 0, ($expenseUnpaidAmount ?? 0) >= 1000 ? 0 : 3) }}<span class="text-xs font-normal ml-1">{{ $currency }}</span></div>
                </a>
            </div>
            
            <div x-show="showAll" x-collapse style="display: none;" class="grid grid-cols-2 gap-3 mb-3">
                <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-3">
                    <div class="text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Moyenne</div>
                    <div class="text-xl font-bold text-gray-900 dark:text-white">{{ format_currency($expenseStats->average, $expenseStats->average >= 1000 ? 0 : 3) }}<span class="text-xs font-normal ml-1">{{ $currency }}</span></div>
                </div>
                <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-3">
                    <div class="text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Moy. par fournisseur</div>
                    <div class="text-xl font-bold text-gray-900 dark:text-white">{{ format_currency($expenseStats->unique_suppliers > 0 ? $expenseStats->total / $expenseStats->unique_suppliers : 0, ($expenseStats->unique_suppliers > 0 ? $expenseStats->total / $expenseStats->unique_suppliers : 0) >= 1000 ? 0 : 3) }}<span class="text-xs font-normal ml-1">{{ $currency }}</span></div>
                </div>
            </div>
            
            <button 
                x-show="!showAll"
                @click="showAll = true"
                class="w-full py-2 text-xs font-medium text-gray-600 dark:text-gray-300 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 flex items-center justify-center gap-1"
            >
                <span>Voir plus de stats</span>
                <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="M19 9l-7 7-7-7"></path>
                </svg>
            </button>
        </div>
        
        <!-- Version desktop complète -->
        <div class="hidden md:grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-4 mb-6">
            <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-3 md:p-4">
                <div class="text-xs md:text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Total</div>
                <div class="text-base md:text-3xl font-bold text-gray-900 dark:text-white whitespace-nowrap overflow-hidden text-ellipsis">{{ format_currency($expenseStats->total, $expenseStats->total >= 1000 ? 0 : 3) }}<span class="text-xs md:text-lg font-normal ml-1">{{ $currency }}</span></div>
            </div>
            <a href="{{ route('provider.finances.index', ['tab' => 'achats', 'expense_unpaid_filter' => '1']) }}" class="bg-gray-50 dark:bg-gray-700 rounded-lg p-3 md:p-4 hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors">
                <div class="text-xs md:text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Impayé</div>
                <div class="text-base md:text-3xl font-bold text-red-600 dark:text-red-400 underline whitespace-nowrap overflow-hidden text-ellipsis">{{ format_currency($expenseUnpaidAmount ?? 0, ($expenseUnpaidAmount ?? 0) >= 1000 ? 0 : 3) }}<span class="text-xs md:text-lg font-normal ml-1">{{ $currency }}</span></div>
            </a>
            <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-3 md:p-4">
                <div class="text-xs md:text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Moyenne</div>
                <div class="text-base md:text-3xl font-bold text-gray-900 dark:text-white whitespace-nowrap overflow-hidden text-ellipsis">{{ format_currency($expenseStats->average, $expenseStats->average >= 1000 ? 0 : 3) }}<span class="text-xs md:text-lg font-normal ml-1">{{ $currency }}</span></div>
            </div>
            <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-3 md:p-4">
                <div class="text-xs md:text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Moy. par fournisseur</div>
                <div class="text-base md:text-3xl font-bold text-gray-900 dark:text-white whitespace-nowrap overflow-hidden text-ellipsis">{{ format_currency($expenseStats->unique_suppliers > 0 ? $expenseStats->total / $expenseStats->unique_suppliers : 0, ($expenseStats->unique_suppliers > 0 ? $expenseStats->total / $expenseStats->unique_suppliers : 0) >= 1000 ? 0 : 3) }}<span class="text-xs md:text-lg font-normal ml-1">{{ $currency }}</span></div>
            </div>
        </div>
        @endif
        
        <div class="space-y-4">
            <form method="GET" class="space-y-4 mb-4" x-data="{ search: '{{ request('expense_search') }}', showFilters: {{ request()->hasAny(['expense_type_id', 'supplier_id', 'expense_date_from', 'expense_date_to', 'expense_sort']) ? 'true' : 'false' }} }">
                <input type="hidden" name="tab" value="achats">
                <input type="hidden" name="expense_status" value="{{ request('expense_status') }}">
                
                <!-- Barre de recherche -->
                <div class="flex gap-1">
                    <div class="relative flex-1">
                        <input type="text" 
                               name="expense_search" 
                               x-model="search"
                               placeholder="Rechercher..."
                               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=expense_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(['expense_search', 'expense_type_id', 'supplier_id', 'expense_date_from', 'expense_date_to', 'expense_sort']))
                    <a href="{{ route('provider.finances.index', ['tab' => 'achats', 'expense_status' => request('expense_status')]) }}" 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 flex-col md:flex-row 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="expense_date_from" 
                            name-to="expense_date_to" 
                            :value-from="request('expense_date_from', '')" 
                            :value-to="request('expense_date_to', '')"
                        />
                    </div>
                    <div class="flex gap-2 flex-1">
                        <div class="flex-1">
                            <x-searchable-select 
                                name="expense_type_id" 
                                :options="collect($allExpenseTypes)->sortBy('name')->map(fn($type) => [
                                    'value' => $type->id,
                                    'label' => $type->name
                                ])->values()->toArray()"
                                :selected="request('expense_type_id', '')"
                                placeholder="Type..."
                                onchange="this.form.submit()"
                                class="h-[34px] py-1.5"
                            />
                        </div>
                        <div class="flex-1">
                            <x-searchable-select 
                                name="supplier_id" 
                                :options="collect($suppliers)->sortBy('name')->map(fn($supplier) => [
                                    'value' => $supplier->id,
                                    'label' => $supplier->name
                                ])->values()->toArray()"
                                :selected="request('supplier_id', '')"
                                placeholder="Fournisseur..."
                                onchange="this.form.submit()"
                                class="h-[34px] py-1.5"
                            />
                        </div>
                        <div class="relative flex-shrink-0" x-data="{ open: {{ request('expense_sort') && request('expense_sort') !== '' && request('expense_sort') !== 'date_desc' ? 'true' : 'false' }}, hasSort: {{ request('expense_sort') && request('expense_sort') !== '' && request('expense_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('expense_sort') && request('expense_sort') !== '' && request('expense_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="expense_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('expense_sort') == 'date_desc' || !request('expense_sort') ? 'selected' : '' }}>Tri: Récent (par défaut)</option>
                                    <option value="date_asc" {{ request('expense_sort') == 'date_asc' ? 'selected' : '' }}>Tri: Ancien</option>
                                    <option value="amount_desc" {{ request('expense_sort') == 'amount_desc' ? 'selected' : '' }}>Tri: Montant ↓</option>
                                    <option value="amount_asc" {{ request('expense_sort') == 'amount_asc' ? 'selected' : '' }}>Tri: Montant ↑</option>
                                </select>
                            </div>
                        </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('expense_sort') && request('expense_sort') !== '' && request('expense_sort') !== 'date_desc')
                <div class="h-5"></div>
            @endif

            @if($expenses->count() > 0)
            <div class="space-y-3" data-expenses-list>
                @foreach($expenses as $expense)
                    <x-card class="hover:shadow-md transition-shadow {{ $expense->isCancelled() ? 'opacity-60 bg-gray-50 dark:bg-gray-800' : '' }}">
                        <div class="flex justify-between items-start">
                            <div class="flex-1">
                                <div class="font-semibold text-gray-900 dark:text-white mb-1">
                                    {{ $expense->expenseType->name ?? 'N/A' }}
                                </div>
                                <div class="text-sm text-gray-600 dark:text-gray-400">
                                    Faite le {{ $expense->expense_date->format('d/m/Y') }}
                                    @if($expense->due_date)
                                        <br>
                                        Échéance: {{ $expense->due_date->format('d/m/Y') }}
                                    @endif
                                </div>
                                <div class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                                    @if($expense->supplier)
                                        <span class="font-medium text-gray-700 dark:text-gray-300">{{ $expense->supplier->name }}</span>
                                    @else
                                        <span class="text-gray-400 dark:text-gray-500">Sans fournisseur</span>
                                    @endif
                                    @if($expense->supplier_invoice_no)
                                        <span class="text-gray-400 mx-1">·</span>
                                        {{ $expense->supplier_invoice_no }}
                                    @endif
                                    <div class="flex items-center gap-2 flex-wrap mt-1">
                                        @if($expense->isCancelled())
                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300">
                                                Annulé
                                            </span>
                                            @if($expense->cancel_reason)
                                                <span class="text-xs text-red-600 dark:text-red-400">{{ Str::limit($expense->cancel_reason, 50) }}</span>
                                            @endif
                                        @else
                                            @if($expense->isOverdue())
                                                @php
                                                    $daysOverdue = abs(now()->startOfDay()->diffInDays($expense->due_date, false));
                                                @endphp
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200">
                                                    RETARD (-{{ $daysOverdue }}j)
                                                </span>
                                            @elseif($expense->due_date && $expense->due_date >= now()->startOfDay() && $expense->due_date <= now()->addDays(7)->endOfDay() && in_array($expense->status, ['unpaid', 'partly_paid']))
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200">
                                                    À échéance
                                                </span>
                                            @endif
                                            
                                            @switch($expense->status)
                                                @case('unpaid')
                                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">
                                                        Non payé
                                                    </span>
                                                    @break
                                                @case('partly_paid')
                                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
                                                        Part. payé
                                                    </span>
                                                    @break
                                                @case('paid')
                                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
                                                        Payé
                                                    </span>
                                                    @break
                                            @endswitch
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div class="text-right">
                                @if($expense->status === 'paid')
                                    <div class="font-bold text-gray-900 dark:text-white">{{ format_currency($expense->amount) }} {{ $currency }}</div>
                                @else
                                    <div class="text-xs text-gray-500 dark:text-gray-400 mb-1">Total: {{ format_currency($expense->amount) }} {{ $currency }}</div>
                                    <div class="text-xs text-gray-500 dark:text-gray-400 mb-1">Payé: {{ format_currency($expense->totalPaid) }} {{ $currency }}</div>
                                    <div class="font-bold text-gray-900 dark:text-white">Rest: {{ format_currency($expense->remainingAmount) }} {{ $currency }}</div>
                                @endif
                                <div class="flex space-x-2 mt-2 justify-end">
                                    <a href="{{ route('provider.expenses.show', $expense->uuid) }}" class="inline-flex items-center justify-center w-10 h-10 text-sm bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">
                                        <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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                                        </svg>
                                    </a>
                                    @if(!$expense->isCancelled())
                                        @if($expense->payments->where('amount', '>', 0)->count() > 0)
                                        <a href="{{ route('provider.expenses.cancel', $expense->uuid) }}" class="inline-flex items-center justify-center w-10 h-10 text-sm bg-red-100 dark:bg-red-900/20 text-red-600 dark:text-red-400 rounded-lg hover:bg-red-200 dark:hover:bg-red-900/40 transition-colors">
                                            <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>
                                        </a>
                                        @elseif($expense->payments->count() === 0)
                                        <x-delete-confirm 
                                            :action="route('provider.expenses.destroy', $expense->uuid)" 
                                            message="Êtes-vous sûr de vouloir supprimer cette dépense ?"
                                            buttonVariant="icon"
                                            class="inline-flex items-center justify-center w-10 h-10 text-sm bg-red-100 dark:bg-red-900/20 text-red-600 dark:text-red-400 rounded-lg hover:bg-red-200 dark:hover:bg-red-900/40 transition-colors"
                                        />
                                        @endif
                                    @endif
                                </div>
                            </div>
                        </div>
                    </x-card>
                @endforeach
            </div>
            <div class="mt-6" data-expenses-pagination>
                {{ $expenses->appends(request()->query())->links() }}
            </div>
            @else
                <div class="text-center py-12">
                    <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" />
                    </svg>
                    <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">Aucun achat</h3>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Aucun achat pour cette période.</p>
                </div>
            @endif
        </div>
    </x-card>

    @elseif($currentTab === 'types-depense')
    <!-- Onglet Types -->
    <x-card>
        <x-slot name="header">
            <div class="flex justify-between items-center">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Types de dépenses ({{ $expenseTypes->total() }})</h3>
                <x-button href="{{ route('provider.expense-types.create') }}" size="sm">
                    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                    </svg>
                    Nouveau
                </x-button>
            </div>
        </x-slot>
        
        <div class="space-y-6">
            <!-- Filtres -->
            <form method="GET" class="flex gap-2">
                <input type="hidden" name="tab" value="types-depense">
                <input type="text" 
                       name="search" 
                       value="{{ request('search') }}" 
                       placeholder="Rechercher par nom ou description..."
                       class="flex-1 px-4 py-2 text-sm border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                <select name="status" class="w-32 px-4 py-2 text-sm border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white rounded-lg">
                    <option value="">Tous</option>
                    <option value="active" {{ request('status') === 'active' ? 'selected' : '' }}>Actifs</option>
                    <option value="inactive" {{ request('status') === 'inactive' ? 'selected' : '' }}>Inactifs</option>
                </select>
                <button type="submit" class="px-4 py-2 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-5 h-5" 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>
                @if(request('search') || request('status'))
                <a href="{{ route('provider.finances.index', ['tab' => 'types-depense']) }}" class="px-4 py-2 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="Réinitialiser">
                    <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
            </form>

            @if($expenseTypes->count() > 0)
            <div class="space-y-3" data-types-list>
                @foreach($expenseTypes as $type)
                    <x-card class="{{ !$type->is_active ? 'opacity-60' : '' }}">
                        <div class="flex justify-between items-start">
                            <div class="flex-1">
                                <h4 class="font-semibold text-gray-900 dark:text-white">{{ $type->name }}</h4>
                                <p class="text-xs {{ $type->expenses_count > 0 ? 'text-blue-600 dark:text-blue-400' : 'text-gray-400 dark:text-gray-500' }} mt-1">
                                    {{ $type->expenses_count > 0 ? "Utilisé dans {$type->expenses_count} dépense(s)" : 'Pas encore utilisé' }}
                                </p>
                            </div>
                            <div class="flex gap-2">
                                <x-button href="{{ route('provider.expense-types.edit', $type->uuid) }}" variant="secondary" size="sm">
                                    Éditer
                                </x-button>
                                @if($type->expenses_count == 0 && !$type->is_default)
                                    <x-delete-confirm 
                                        :action="route('provider.expense-types.destroy', $type->uuid)" 
                                        message="Êtes-vous sûr de vouloir supprimer ce type de dépense ?"
                                    />
                                @endif
                            </div>
                        </div>
                    </x-card>
                @endforeach
            </div>
            <div class="mt-6" data-types-pagination>
                {{ $expenseTypes->appends(request()->query())->links() }}
            </div>
            @else
                <div class="text-center py-12">
                    <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
                    </svg>
                    <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">Aucun type</h3>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Créez votre premier type de dépense.</p>
                </div>
            @endif
        </div>
    </x-card>

    @elseif($currentTab === 'tresorerie')
    <!-- Onglet Trésorerie -->
    @include('provider.treasury.index')
    @endif
</div>

<script>
function loadFinancesPage(url, type) {
    fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
        .then(r => r.text())
        .then(html => {
            const parser = new DOMParser();
            const doc = parser.parseFromString(html, 'text/html');
            
            if (type === 'payments') {
                const newList = doc.querySelector('[data-payments-list]');
                const newPagination = doc.querySelector('[data-payments-pagination]');
                if (newList && newPagination) {
                    document.querySelector('[data-payments-list]').innerHTML = newList.innerHTML;
                    document.querySelector('[data-payments-pagination]').innerHTML = newPagination.innerHTML;
                }
            } else if (type === 'expenses') {
                const newList = doc.querySelector('[data-expenses-list]');
                const newPagination = doc.querySelector('[data-expenses-pagination]');
                if (newList && newPagination) {
                    document.querySelector('[data-expenses-list]').innerHTML = newList.innerHTML;
                    document.querySelector('[data-expenses-pagination]').innerHTML = newPagination.innerHTML;
                }
            } else if (type === 'types') {
                const newList = doc.querySelector('[data-types-list]');
                const newPagination = doc.querySelector('[data-types-pagination]');
                if (newList && newPagination) {
                    document.querySelector('[data-types-list]').innerHTML = newList.innerHTML;
                    document.querySelector('[data-types-pagination]').innerHTML = newPagination.innerHTML;
                }
            }
            
            window.history.pushState({}, '', url);
            window.scrollTo({ top: 0, behavior: 'smooth' });
        });
}

document.addEventListener('click', function(e) {
    const paymentsLink = e.target.closest('[data-payments-pagination] a');
    const expensesLink = e.target.closest('[data-expenses-pagination] a');
    const typesLink = e.target.closest('[data-types-pagination] a');
    
    if (paymentsLink && paymentsLink.href) {
        e.preventDefault();
        loadFinancesPage(paymentsLink.href, 'payments');
    } else if (expensesLink && expensesLink.href) {
        e.preventDefault();
        loadFinancesPage(expensesLink.href, 'expenses');
    } else if (typesLink && typesLink.href) {
        e.preventDefault();
        loadFinancesPage(typesLink.href, 'types');
    }
});

document.addEventListener('change', function(e) {
    if (e.target.matches('[data-pagination-select]')) {
        if (e.target.value) {
            const isPayments = e.target.closest('[data-payments-pagination]');
            const isExpenses = e.target.closest('[data-expenses-pagination]');
            const isTypes = e.target.closest('[data-types-pagination]');
            
            if (isPayments) {
                loadFinancesPage(e.target.value, 'payments');
            } else if (isExpenses) {
                loadFinancesPage(e.target.value, 'expenses');
            } else if (isTypes) {
                loadFinancesPage(e.target.value, 'types');
            }
        }
    }
});
</script>

@endsection