@extends('layouts.provider')

@section('title', $client->full_name)
@section('page-title', 'Clients > Détail du client')

@section('content')
@php
    $oldestOverduePayment = $client->payments()
        ->whereIn('status', ['non_payee', 'partiellement_payee'])
        ->where('invoice_status', '!=', 'draft')
        ->where('document_type', '!=', 'credit_note')
        ->whereNull('credit_note_id')
        ->where('due_date', '<', now()->startOfDay())
        ->orderBy('due_date', 'asc')
        ->first();
    $daysOverdue = $oldestOverduePayment ? abs(now()->startOfDay()->diffInDays($oldestOverduePayment->due_date, false)) : 0;
    $totalOverdue = $client->payments()
        ->whereIn('status', ['non_payee', 'partiellement_payee'])
        ->where('invoice_status', '!=', 'draft')
        ->where('document_type', '!=', 'credit_note')
        ->whereNull('credit_note_id')
        ->where('due_date', '<', now()->startOfDay())
        ->get()
        ->sum(function($payment) {
            return $payment->net_amount - $payment->paid_amount;
        });
    
    $hasUnpaidInvoices = $client->payments()
        ->whereIn('status', ['non_payee', 'partiellement_payee'])
        ->where('invoice_status', '!=', 'draft')
        ->where('document_type', '!=', 'credit_note')
        ->whereNull('credit_note_id')
        ->exists();
        
    $totalUnpaid = $client->payments()
        ->whereIn('status', ['non_payee', 'partiellement_payee'])
        ->where('invoice_status', '!=', 'draft')
        ->where('document_type', '!=', 'credit_note')
        ->whereNull('credit_note_id')
        ->get()
        ->sum(function($payment) {
            return $payment->net_amount - $payment->paid_amount;
        });
    
    $unpaidNotOverdue = $totalUnpaid - $totalOverdue;
    
    $upcomingDuePayments = $client->payments()
        ->whereIn('status', ['non_payee', 'partiellement_payee'])
        ->where('invoice_status', '!=', 'draft')
        ->where('document_type', '!=', 'credit_note')
        ->whereNull('credit_note_id')
        ->where('due_date', '>=', now()->startOfDay())
        ->where('due_date', '<=', now()->addDays(7)->endOfDay())
        ->get();
    
    $totalUpcomingDue = $upcomingDuePayments->sum(function($payment) {
        return $payment->net_amount - $payment->paid_amount;
    });
    
    $closestDuePayment = $upcomingDuePayments->sortBy('due_date')->first();
    $daysUntilDue = $closestDuePayment ? now()->startOfDay()->diffInDays($closestDuePayment->due_date, false) : 0;
@endphp

@if($oldestOverduePayment && $daysOverdue > 0)
<a href="{{ route('provider.clients.show', ['client_uuid' => $client->uuid, 'tab' => 'invoices', 'filter' => 'overdue']) }}" class="alert-item block bg-red-50 border-l-4 border-red-500 p-4 mb-4 shadow-md hover:bg-red-100 transition-all duration-300 rounded-lg">
    <div class="flex items-center justify-between">
        <div class="flex items-center gap-3">
            <svg class="w-5 h-5 text-red-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
            </svg>
            <div>
                <p class="text-sm font-semibold text-red-800">
                    {{ format_currency($totalOverdue) }} TND impayés depuis {{ $daysOverdue }} jours
                </p>
                <p class="text-xs text-red-600 mt-1">Facture en retard la plus ancienne : {{ $oldestOverduePayment->due_date->format('d/m/y') }}</p>
            </div>
        </div>
    </div>
</a>
@endif


@if($unpaidNotOverdue > 0)
<a href="{{ route('provider.clients.show', ['client_uuid' => $client->uuid, 'tab' => 'invoices', 'filter' => 'unpaid_all']) }}" class="alert-item block bg-orange-50 border-l-4 border-orange-500 p-4 mb-4 {{ $oldestOverduePayment || $closestDuePayment ? '' : '' }} shadow-md hover:bg-orange-100 transition-all duration-300 rounded-lg">
    <div class="flex items-center justify-between">
        <div class="flex items-center gap-3">
            <svg class="w-5 h-5 text-orange-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            <div>
                <p class="text-sm font-semibold text-orange-800">
                    {{ format_currency($totalUnpaid) }} TND à encaisser
                </p>
                <p class="text-xs text-orange-600 mt-1">Factures non payées ou partiellement payées</p>
            </div>
        </div>
    </div>
</a>
@endif

@if($closestDuePayment && $totalUpcomingDue > 0)
<a href="{{ route('provider.clients.show', ['client_uuid' => $client->uuid, 'tab' => 'invoices', 'filter' => 'due_soon']) }}" class="alert-item block bg-yellow-50 border-l-4 border-yellow-500 p-4 mb-4 {{ $oldestOverduePayment ? '' : '' }} shadow-md hover:bg-yellow-100 transition-all duration-300 rounded-lg">
    <div class="flex items-center justify-between">
        <div class="flex items-center gap-3">
            <svg class="w-5 h-5 text-yellow-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            <div>
                <p class="text-sm font-semibold text-yellow-800">
                    {{ format_currency($totalUpcomingDue) }} TND à échéance dans {{ $daysUntilDue }} jour{{ $daysUntilDue > 1 ? 's' : '' }}
                </p>
                <p class="text-xs text-yellow-600 mt-1">Prochaine échéance : {{ $closestDuePayment->due_date->format('d/m/y') }}</p>
            </div>
        </div>
    </div>
</a>
@endif


<div class="space-y-6 max-w-full">
    <x-client.header :client="$client" />

    <x-client.tabs 
        :active="$tab" 
        :clientUuid="$client->uuid"
        :appointmentsCount="$kpis['total_appointments']"
        :paymentsCount="$paymentsSummary['count']"
        :activitiesCount="$tab === 'activity' ? $activityKpis['total'] : $client->activities()->count()"
    >
        @if($tab === 'overview')
            <div class="flex items-center justify-between gap-2 text-xs text-gray-500 mb-4">
                @if($client->tags->count() > 0)
                {{-- Tags avec limite mobile --}}
                <div class="flex flex-wrap items-center gap-2 flex-1" x-data="{ showAllTags: false }">
                    @php
                        $visibleTags = $client->tags->take(2);
                        $hiddenTagsCount = max(0, $client->tags->count() - 2);
                    @endphp
                    
                    {{-- Icône tag --}}
                    @if($client->tags->count() > 0)
                        <svg class="w-4 h-4 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <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"></path>
                        </svg>
                    @endif
                    
                    {{-- Tags visibles (2 max sur mobile) --}}
                    @foreach($visibleTags as $tag)
                        <span class="flex items-center gap-1.5 px-2 py-1 bg-gray-50 rounded">
                            <span class="w-2 h-2 rounded-full" style="background-color: {{ $tag->color }}"></span>
                            {{ $tag->name }}
                        </span>
                    @endforeach
                    
                    {{-- Badge +N sur mobile uniquement --}}
                    @if($hiddenTagsCount > 0)
                        <button 
                            @click="showAllTags = !showAllTags" 
                            x-show="!showAllTags"
                            class="md:hidden flex items-center gap-1.5 px-2 py-1 bg-blue-50 text-blue-700 rounded hover:bg-blue-100"
                            aria-label="Voir {{ $hiddenTagsCount }} tag(s) supplémentaire(s)"
                        >
                            <div class="flex items-center -space-x-1">
                                @foreach($client->tags->skip(2)->take(3) as $tag)
                                    <span class="inline-block w-3 h-3 rounded-full border border-white" style="background-color: {{ $tag->color }}"></span>
                                @endforeach
                            </div>
                            <span>+{{ $hiddenTagsCount }}</span>
                        </button>
                        
                        {{-- Tags cachés affichés inline sur mobile --}}
                        <template x-if="showAllTags">
                            <div class="md:hidden flex flex-wrap items-center gap-2">
                                @foreach($client->tags->skip(2) as $tag)
                                    <span class="flex items-center gap-1.5 px-2 py-1 bg-gray-50 rounded">
                                        <span class="w-2 h-2 rounded-full" style="background-color: {{ $tag->color }}"></span>
                                        {{ $tag->name }}
                                    </span>
                                @endforeach
                            </div>
                        </template>
                        
                        {{-- Tags cachés sur desktop --}}
                        <div class="hidden md:flex flex-wrap items-center gap-2">
                            @foreach($client->tags->skip(2) as $tag)
                                <span class="flex items-center gap-1.5 px-2 py-1 bg-gray-50 rounded">
                                    <span class="w-2 h-2 rounded-full" style="background-color: {{ $tag->color }}"></span>
                                    {{ $tag->name }}
                                </span>
                            @endforeach
                        </div>
                    @endif
                </div>
                @else
                <div class="flex items-center gap-2">
                    <svg class="w-4 h-4 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <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"></path>
                    </svg>
                    <a href="{{ route('provider.clients.edit', $client->uuid) }}" class="text-blue-600 hover:text-blue-800 underline font-medium">
                        Ajouter un tag
                    </a>
                </div>
                @endif
                
                {{-- Lien Notes (X) --}}
                @if($notesCount > 0)
                    <button 
                        onclick="scrollToNotes(true)" 
                        class="flex-shrink-0 flex items-center gap-1.5 px-3 py-1.5 bg-blue-50 text-blue-700 rounded-full hover:bg-blue-100 transition-colors font-medium"
                        aria-label="Aller aux notes"
                    >
                        <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="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>
                        Notes ({{ $notesCount }})
                    </button>
                @else
                    <button 
                        onclick="scrollToNotes(false)" 
                        class="flex-shrink-0 flex items-center gap-1.5 px-3 py-1.5 bg-gray-100 text-gray-600 rounded-full hover:bg-gray-200 transition-colors font-medium"
                        aria-label="Ajouter votre première note"
                    >
                        <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 4v16m8-8H4"></path>
                        </svg>
                        Notes (0)
                    </button>
                @endif
            </div>
            {{-- Layout Principal: 2 colonnes + sidebar --}}
            <div class="grid grid-cols-1 lg:grid-cols-[60%_40%] gap-4">
                {{-- Colonne principale gauche (60%) --}}
                <div class="space-y-4">
                    {{-- Bloc Profil Client --}}
                    @include('provider.clients.partials.profile-summary')

                    {{-- Section Situation financière --}}
                    <div class="bg-white border border-gray-200 rounded-lg p-4">
                        <h3 class="text-base font-semibold mb-3">Situation financière</h3>
                        <div class="flex flex-col md:flex-row md:items-center md:justify-around gap-2 md:gap-0">
                            <div class="text-sm flex justify-between md:block">
                                <span class="text-gray-500">CA Total:</span>
                                <span class="font-semibold ml-1">{{ format_currency($kpis['total_revenue']) }} TND</span>
                            </div>
                            <div class="hidden md:block h-6 w-px bg-gray-300"></div>
                            <div class="text-sm flex justify-between md:block">
                                <span class="text-gray-500">Reçu:</span>
                                <span class="font-semibold text-green-600 ml-1">{{ format_currency($kpis['paid_amount']) }} TND</span>
                            </div>
                            <div class="hidden md:block h-6 w-px bg-gray-300"></div>
                            <div class="text-md flex justify-between md:block">
                                <span class="text-gray-500">Impayé actuel:</span>
                                <a href="{{ route('provider.clients.show', ['client_uuid' => $client->uuid, 'tab' => 'invoices', 'filter' => 'unpaid_all']) }}" class="font-semibold text-red-600 ml-1 underline hover:text-red-800">{{ format_currency($kpis['remaining_amount']) }} TND</a>
                            </div>
                        </div>
                        @php
                            $paymentPercentage = $kpis['total_revenue'] > 0 ? round(($kpis['paid_amount'] / $kpis['total_revenue']) * 100) : 0;
                        @endphp
                        <div class="mt-4">
                            <div class="flex justify-between text-xs text-gray-600 mb-1">
                                <span>Taux de paiement</span>
                                <span class="font-semibold">{{ $paymentPercentage }}%</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="bg-green-600 h-2 rounded-full transition-all" style="width: {{ $paymentPercentage }}%"></div>
                            </div>
                        </div>
                        @php
                            $lastInvoicePayment = \App\Models\InvoicePayment::whereHas('invoice', function($q) use ($client) {
                                $q->where('client_id', $client->id)
                                  ->where('invoice_status', '!=', 'draft');
                            })->with('invoice')->orderBy('id', 'desc')->first();
                            $overduePayments = $client->payments()->whereIn('status', ['non_payee', 'partiellement_payee'])->where('invoice_status', '!=', 'draft')->where('document_type', '!=', 'credit_note')->whereNull('credit_note_id')->where('due_date', '<', now()->startOfDay())->count();
                            $oldestOverduePayment = $client->payments()->whereIn('status', ['non_payee', 'partiellement_payee'])->where('invoice_status', '!=', 'draft')->where('document_type', '!=', 'credit_note')->whereNull('credit_note_id')->where('due_date', '<', now()->startOfDay())->orderBy('due_date', 'asc')->first();
                            $daysOverdue = $oldestOverduePayment ? now()->startOfDay()->diffInDays($oldestOverduePayment->due_date) : 0;
                        @endphp
                        <div class="mt-3 pt-3 border-t border-gray-200 flex items-center justify-between text-xs">
                            <div class="text-gray-600">
                                Dernier paiement: 
                                @if($lastInvoicePayment)
                                    <a href="{{ route('provider.invoices.show', $lastInvoicePayment->invoice->uuid) }}?highlight=payment-{{ $lastInvoicePayment->id }}" class="font-medium text-blue-600 hover:text-blue-800 underline">
                                        {{ $lastInvoicePayment->payment_date->format('d/m/y') }}
                                    </a>
                                @else
                                    <span class="text-gray-400">Aucun</span>
                                @endif
                            </div>
                            @if($overduePayments > 0)
                                @php
                                    $oldestOverdue = $client->payments()
                                        ->whereIn('status', ['non_payee', 'partiellement_payee'])
                                        ->where('invoice_status', '!=', 'draft')
                                        ->where('document_type', '!=', 'credit_note')
                                        ->whereNull('credit_note_id')
                                        ->where('due_date', '<', now()->startOfDay())
                                        ->orderBy('due_date', 'asc')
                                        ->first();
                                    $daysOverdue = $oldestOverdue ? abs(now()->startOfDay()->diffInDays($oldestOverdue->due_date, false)) : 0;
                                @endphp
                                <a href="{{ route('provider.clients.show', ['client_uuid' => $client->uuid, 'tab' => 'invoices', 'filter' => 'overdue']) }}" class="text-red-600 hover:text-red-800 font-semibold">
                                    {{ $overduePayments }} facture{{ $overduePayments > 1 ? 's' : '' }} en retard (-{{ $daysOverdue }} jour{{ $daysOverdue > 1 ? 's' : '' }})
                                </a>
                            @else
                                <span class="text-green-600 font-medium">Pas de facture en retard</span>
                            @endif
                        </div>
                    </div>

                    {{-- KPIs Compacts - 3 cartes statistiques RDV --}}
                    <div class="bg-white border border-gray-200 rounded-lg p-4">
                        <h3 class="text-base font-semibold mb-3">Statistiques RDV</h3>
                        <div class="grid grid-cols-3 gap-2">
                        <a href="{{ route('provider.clients.show', ['client_uuid' => $client->uuid, 'tab' => 'appointments']) }}" class="bg-white border border-gray-200 rounded-lg p-3 flex flex-col gap-1 hover:bg-gray-50 transition-colors cursor-pointer">
                            <span class="text-xs text-gray-500">Total RDV</span>
                            <span class="text-xl font-semibold text-gray-900 underline">{{ $kpis['total_appointments'] }}</span>
                        </a>
                        <a href="{{ route('provider.clients.show', ['client_uuid' => $client->uuid, 'tab' => 'appointments', 'status' => 'complete', 'range' => '']) }}" class="bg-white border border-gray-200 rounded-lg p-3 flex flex-col gap-1 hover:bg-gray-50 transition-colors cursor-pointer">
                            <span class="text-xs text-gray-500">RDV terminés</span>
                            <span class="text-xl font-semibold text-gray-900 underline">{{ $kpis['completed_appointments'] }}</span>
                        </a>
                        <a href="{{ route('provider.clients.show', ['client_uuid' => $client->uuid, 'tab' => 'appointments', 'status' => 'cancelled', 'range' => '']) }}" class="bg-white border border-gray-200 rounded-lg p-3 flex flex-col gap-1 hover:bg-gray-50 transition-colors cursor-pointer">
                            <span class="text-xs text-gray-500">RDV annulés</span>
                            <span class="text-xl font-semibold text-gray-900 underline">{{ $kpis['cancelled_appointments'] }}</span>
                        </a>
                        </div>
                    </div>
                    
                    {{-- Section Informations compactée --}}
                    <div class="bg-white border border-gray-200 rounded-lg p-4">
                        <h3 class="text-base font-semibold mb-3">Informations</h3>
                        <div class="grid grid-cols-2 md:grid-cols-3 gap-x-4 gap-y-2 text-sm">
                            @if($client->type === 'particulier' && $client->tax_id)
                            <div class="flex items-center gap-1 min-w-0" x-data="{ copied: false }">
                                <svg class="w-4 h-4 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2"></path>
                                </svg>
                                <span class="text-gray-600">CIN: {{ $client->tax_id }}</span>
                                <button @click="navigator.clipboard.writeText('{{ $client->tax_id }}'); copied = true; setTimeout(() => copied = false, 2000)" class="flex-shrink-0 p-1 text-gray-400 hover:text-blue-600" :title="copied ? 'Copié !' : 'Copier le CIN'">
                                    <svg x-show="!copied" x-cloak 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="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
                                    </svg>
                                    <svg x-show="copied" x-cloak 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="M5 13l4 4L19 7"></path>
                                    </svg>
                                </button>
                            </div>
                            @endif
                            
                            @if($client->type === 'particulier' && $client->birth_date)
                            <div class="flex items-center gap-2">
                                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 15.546c-.523 0-1.046.151-1.5.454a2.704 2.704 0 01-3 0 2.704 2.704 0 00-3 0 2.704 2.704 0 01-3 0 2.704 2.704 0 00-3 0 2.704 2.704 0 01-3 0 2.701 2.701 0 00-1.5-.454M9 6v2m3-2v2m3-2v2M9 3h.01M12 3h.01M15 3h.01M21 21v-7a2 2 0 00-2-2H5a2 2 0 00-2 2v7h18zm-3-9v-2a2 2 0 00-2-2H8a2 2 0 00-2 2v2h12z"></path>
                                </svg>
                                <span class="text-gray-600">{{ \Carbon\Carbon::parse($client->birth_date)->format('d/m/Y') }}</span>
                            </div>
                            @endif
                           
                            @if($client->type === 'professionnel' && $client->matricule_fiscal && $client->is_vat_subject)
                            <div class="flex items-center gap-1 min-w-0" x-data="{ copied: false }">
                                <svg class="w-4 h-4 text-gray-400 flex-shrink-0" 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>
                                <div class="relative min-w-0 group">
                                    <span class="text-gray-600" title="{{ $client->matricule_fiscal }}">MF: {{ format_matricule_ellipsis($client->matricule_fiscal) }}</span>
                                    <div class="absolute left-0 top-full mt-1 hidden group-hover:block z-10 px-2 py-1 text-xs text-white bg-gray-900 rounded shadow-lg whitespace-nowrap">{{ $client->matricule_fiscal }}</div>
                                </div>
                                <button @click="navigator.clipboard.writeText('{{ $client->matricule_fiscal }}'); copied = true; setTimeout(() => copied = false, 2000)" class="flex-shrink-0 p-1 text-gray-400 hover:text-blue-600" :title="copied ? 'Copié !' : 'Copier le MF'">
                                    <svg x-show="!copied" x-cloak 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="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
                                    </svg>
                                    <svg x-show="copied" x-cloak 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="M5 13l4 4L19 7"></path>
                                    </svg>
                                </button>
                            </div>
                            @endif
                            
                            @if($client->type === 'professionnel' && $client->rib)
                            <div class="flex items-center gap-2">
                                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                                </svg>
                                <span class="text-gray-600">{{ $client->rib }}</span>
                            </div>
                            @endif

                            <div class="flex items-center gap-2">
                                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                                </svg>
                                @if($client->phone)
                                    <a href="tel:{{ $client->phone }}" class="text-blue-600 hover:underline">{{ format_phone($client->phone) }}</a>
                                    <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', $client->phone) }}" target="_blank" class="p-1 text-green-500 hover:text-green-600" style="margin-top: -5px;" title="WhatsApp">
                                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                                            <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
                                        </svg>
                                    </a>
                                @else
                                    <span class="text-gray-400">Non renseigné</span>
                                @endif
                            </div>
                            
                            @if($client->email)
                            <div class="flex items-center gap-1 min-w-0" x-data="{ copied: false }">
                                <svg class="w-4 h-4 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                                </svg>
                                <div class="relative min-w-0 group">
                                    <a href="mailto:{{ $client->email }}" class="text-blue-600 hover:underline" title="{{ $client->email }}">{{ format_email_ellipsis($client->email) }}</a>
                                    <div class="absolute left-0 top-full mt-1 hidden group-hover:block z-10 px-2 py-1 text-xs text-white bg-gray-900 rounded shadow-lg whitespace-nowrap">{{ $client->email }}</div>
                                </div>
                                <button @click="navigator.clipboard.writeText('{{ $client->email }}'); copied = true; setTimeout(() => copied = false, 2000)" class="flex-shrink-0 p-1 text-gray-400 hover:text-blue-600" :title="copied ? 'Copié !' : 'Copier l\'email'">
                                    <svg x-show="!copied" x-cloak 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="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
                                    </svg>
                                    <svg x-show="copied" x-cloak 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="M5 13l4 4L19 7"></path>
                                    </svg>
                                </button>
                            </div>
                            @endif
                            
                            {{-- Statut TVA --}}
                            @if($client->type === 'professionnel')
                            <div class="flex items-center gap-2">
                                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                </svg>
                                <span class="text-gray-600">
                                    {{ $client->is_vat_subject ? 'Assujetti à la TVA' : 'Non assujetti à la TVA' }}
                                </span>
                            </div>
                            @endif
                            
                            
                            @if($client->address)
                            <div class="flex items-center gap-2 col-span-2 md:col-span-3">
                                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                </svg>
                                <span class="text-gray-600">{{ $client->address }}</span>
                            </div>
                            @endif
                        </div>
                        
                        {{-- Bouton modifier --}}
                        <a href="{{ route('provider.clients.edit', $client->uuid) }}" class="mt-4 w-full py-2 text-sm border border-gray-300 rounded hover:bg-gray-50 flex items-center justify-center gap-2">
                            <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                            </svg>
                            Modifier les coordonnées
                        </a>
                    </div>
                </div>
                
                {{-- Sidebar droite (40%) --}}
                <div class="space-y-4">
                    {{-- Section Notes compactée --}}
                    <div class="bg-white border border-gray-200 rounded-lg p-4" x-data="{}" id="notes-section">
                        <h3 class="text-base font-semibold mb-3">Notes</h3>
                        <div class="space-y-3">
                            {{-- Message d'aide pour première note --}}
                            @if($notesCount === 0)
                                <p class="text-sm text-blue-600 mb-2 flex items-center gap-2" id="first-note-hint">
                                    <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="M13 10V3L4 14h7v7l9-11h-7z"></path>
                                    </svg>
                                    Ajoutez votre première note
                                </p>
                            @endif
                            
                            {{-- Input toujours visible --}}
                            <form @submit.prevent="addNote($el)" id="add-note-form" class="flex gap-2">
                                <input 
                                    type="text" 
                                    name="content"
                                    id="note-input"
                                    placeholder="Ajouter une note..." 
                                    class="flex-1 px-3 py-2 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                    required
                                />
                                <button type="submit" class="px-4 py-2 text-sm bg-blue-600 text-white rounded hover:bg-blue-700">
                                    Ajouter
                                </button>
                            </form>
                            
                            {{-- Liste des notes ou état vide --}}
                            @php
                                $pinnedNotes = $notes->where('is_pinned', true);
                                $regularNotes = $notes->where('is_pinned', false);
                            @endphp
                            
                            @if($pinnedNotes->count() > 0)
                                <div class="mb-3">
                                    <h4 class="text-xs font-semibold text-gray-700 mb-2">Épinglées ({{ $pinnedNotes->count() }})</h4>
                                    <div class="space-y-2" id="pinned-notes-list">
                                        @foreach($pinnedNotes as $note)
                                            @include('provider.clients.partials.note-card', ['note' => $note])
                                        @endforeach
                                    </div>
                                </div>
                            @endif
                            
                            @if($regularNotes->count() > 0)
                                <div>
                                    <h4 class="text-xs font-semibold text-gray-700 mb-2">Toutes les notes ({{ $regularNotes->count() }})</h4>
                                    <div class="space-y-2 max-h-64 overflow-y-auto" id="notes-list">
                                        @foreach($regularNotes as $note)
                                            @include('provider.clients.partials.note-card', ['note' => $note])
                                        @endforeach
                                    </div>
                                </div>
                            @endif
                            
                            @if($pinnedNotes->count() === 0 && $regularNotes->count() === 0)
                            @endif
                        </div>
                    </div>
                    
                    {{-- Section Services Préférés --}}
                    <div class="bg-white border border-gray-200 rounded-lg p-4">
                        <h3 class="text-base font-semibold mb-3">Services préférés</h3>
                        @if(empty($preferredServices) || count($preferredServices) === 0)
                            <p class="text-sm text-gray-500 italic">Données insuffisantes (besoin de 3 RDV minimum)</p>
                        @else
                            <div class="space-y-3">
                                @foreach($preferredServices as $stat)
                                    <div>
                                        <div class="flex items-center justify-between mb-1">
                                            <span class="text-sm font-medium text-gray-900">{{ $stat['service']->name }}</span>
                                            <div class="flex gap-2">
                                                <span class="text-xs px-2 py-1 bg-blue-100 text-blue-700 rounded">{{ $stat['count'] }} fois</span>
                                                <span class="text-xs px-2 py-1 bg-green-100 text-green-700 rounded">{{ $stat['percentage'] }}% de ses visites</span>
                                            </div>
                                        </div>
                                        <div class="w-full bg-gray-200 rounded-full h-2">
                                            <div class="bg-blue-500 h-2 rounded-full transition-all" style="width: {{ min($stat['percentage'], 100) }}%"></div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </div>
                    
                    {{-- Activités récentes --}}
                    <div class="bg-white border border-gray-200 rounded-lg p-4">
                        <h3 class="text-base font-semibold mb-3">Activités récentes <span class="text-sm font-normal text-gray-500">({{ $client->activities()->count() }})</span></h3>
                        
                        @if($recentActivities && $recentActivities->count() > 0)
                            <div class="space-y-2 max-h-96 overflow-y-auto">
                                @foreach($recentActivities as $activity)
                                    @php
                                        $activityLink = null;
                                        if(str_contains($activity->type, 'payment') && isset($activity->metadata['payment_id'])) {
                                            $payment = \App\Models\Payment::find($activity->metadata['payment_id']);
                                            if($payment) {
                                                $activityLink = route('provider.invoices.show', $payment->uuid);
                                            }
                                        } elseif(str_contains($activity->type, 'appointment') && isset($activity->metadata['date'])) {
                                            $activityLink = route('provider.appointments.calendar', ['date' => \Carbon\Carbon::parse($activity->metadata['date'])->format('Y-m-d')]);
                                        }
                                    @endphp
                                    <div class="flex gap-2 p-2 hover:bg-gray-50 rounded {{ $activityLink ? 'cursor-pointer' : '' }}" @if($activityLink) onclick="window.location.href='{{ $activityLink }}'" @endif>
                                        <div class="w-8 h-8 flex-shrink-0 bg-primary/10 rounded-full flex items-center justify-center mt-0.5">
                                            @if(str_contains($activity->type, 'appointment'))
                                                <svg class="w-4 h-4 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                                                </svg>
                                            @elseif(str_contains($activity->type, 'payment'))
                                                <svg class="w-4 h-4 text-primary" 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>
                                            @else
                                                <svg class="w-4 h-4 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                                                </svg>
                                            @endif
                                        </div>
                                        <div class="flex-1 min-w-0">
                                            <div class="flex items-center justify-between gap-2">
                                                <p class="text-sm font-medium text-gray-900 truncate">{{ $activity->description }}</p>
                                                <span class="text-xs text-gray-500 flex-shrink-0 whitespace-nowrap">{{ $activity->created_at->format('d/m/y H:i') }}</span>
                                            </div>
                                            @if($activity->metadata && (isset($activity->metadata['service']) || isset($activity->metadata['date']) || isset($activity->metadata['sessions_count']) || isset($activity->metadata['net_to_pay'])))
                                                <div class="text-xs text-gray-600 mt-0.5">
                                                    @if(isset($activity->metadata['sessions_count']) && $activity->metadata['sessions_count'] > 0)
                                                        <span class="font-medium">{{ $activity->metadata['sessions_count'] }} séance{{ $activity->metadata['sessions_count'] > 1 ? 's' : '' }}</span>
                                                    @endif
                                                    @if(isset($activity->metadata['net_to_pay']))
                                                        <span class="{{ isset($activity->metadata['sessions_count']) && $activity->metadata['sessions_count'] > 0 ? 'ml-1' : '' }}">{{ format_currency($activity->metadata['net_to_pay']) }} TND</span>
                                                    @endif
                                                    @if(isset($activity->metadata['service']))
                                                        <span class="{{ (isset($activity->metadata['sessions_count']) || isset($activity->metadata['net_to_pay'])) ? '' : '' }}">{{ $activity->metadata['service'] }}</span>
                                                    @endif
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <p class="text-sm text-gray-500 text-center py-4">Aucune activité récente</p>
                        @endif
                        
                        @if($recentActivities && $recentActivities->count() > 0)
                        <a href="{{ route('provider.clients.show', ['client_uuid' => $client->uuid, 'tab' => 'activity']) }}" class="mt-3 w-full py-1.5 text-xs text-gray-600 hover:text-gray-900 flex items-center justify-center gap-1">
                            Voir toutes les activités
                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                            </svg>
                        </a>
                        @endif
                    </div>
                </div>
            </div>

        @elseif($tab === 'appointments')
            <x-client.appointment-table :appointments="$appointments" :clientUuid="$client->uuid" :summary="$appointmentsSummary" :clientServices="$clientServices" />

        @elseif($tab === 'invoices')
            @php
                $invoiceStats = [
                    'count' => $paymentsSummary['count'],
                    'total' => $client->payments()
                        ->where('invoice_status', '!=', 'draft')
                        ->where('document_type', '!=', 'credit_note')
                        ->where('status', '!=', 'annulee')
                        ->whereNull('credit_note_id')
                        ->sum('net_to_pay'),
                    'unpaid' => $client->payments()
                        ->whereIn('status', ['non_payee', 'partiellement_payee'])
                        ->where('invoice_status', '!=', 'draft')
                        ->where('document_type', '!=', 'credit_note')
                        ->whereNull('credit_note_id')
                        ->get()
                        ->sum(function($payment) {
                            return $payment->net_amount - $payment->paid_amount;
                        }),
                    'average' => $paymentsSummary['count'] > 0 ? $client->payments()
                        ->where('invoice_status', '!=', 'draft')
                        ->where('document_type', '!=', 'credit_note')
                        ->where('status', '!=', 'annulee')
                        ->whereNull('credit_note_id')
                        ->avg('net_to_pay') : 0,
                ];
                $currency = auth()->user()->provider->generalSettings['currency'] ?? 'TND';
            @endphp
            <x-client.invoice-table :payments="$payments" :summary="$paymentsSummary" :clientUuid="$client->uuid" :stats="$invoiceStats" :currency="$currency" />

        @elseif($tab === 'activity')
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
                <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
                    <div class="text-2xl font-bold text-gray-900 dark:text-white">{{ $activityKpis['total'] }}</div>
                    <div class="text-sm text-gray-600 dark:text-gray-400">Total activités</div>
                </div>
                <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
                    <div class="text-2xl font-bold text-gray-900 dark:text-white">{{ $activityKpis['appointments'] }}</div>
                    <div class="text-sm text-gray-600 dark:text-gray-400">Rendez-vous</div>
                </div>
                <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
                    <div class="text-2xl font-bold text-gray-900 dark:text-white">{{ $activityKpis['payments'] }}</div>
                    <div class="text-sm text-gray-600 dark:text-gray-400">Factures</div>
                </div>
                <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
                    <div class="text-2xl font-bold text-gray-900 dark:text-white">{{ $activityKpis['notes'] }}</div>
                    <div class="text-sm text-gray-600 dark:text-gray-400">Notes</div>
                </div>
            </div>
            
            <div data-activity-container>
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Historique complet</h3>
                
                <form method="GET" class="mb-4">
                    <input type="hidden" name="tab" value="activity">
                    <div class="flex gap-2">
                        <select name="type" class="rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-sm">
                            <option value="">Tous</option>
                            <option value="appointment" {{ request('type') === 'appointment' ? 'selected' : '' }}>RDV</option>
                            <option value="payment" {{ request('type') === 'payment' ? 'selected' : '' }}>Factures</option>
                            <option value="note" {{ request('type') === 'note' ? 'selected' : '' }}>Notes</option>
                        </select>
                        <button type="submit" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 text-sm">Filtrer</button>
                        @if(request('type'))
                            <a href="{{ route('provider.clients.show', ['client_uuid' => $client->uuid, 'tab' => 'activity']) }}" class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-300 text-sm">Réinitialiser</a>
                        @endif
                    </div>
                </form>
                
                @if($activities)
                    <x-client.activity-timeline :activities="$activities" />
                    <div class="mt-6" data-pagination>{{ $activities->links() }}</div>
                @endif
            </div>
        @endif
    </x-client.tabs>
</div>

<script>
// Scroll vers Notes avec highlight ou focus
function scrollToNotes(hasNotes) {
    const notesSection = document.getElementById('notes-section');
    if (!notesSection) return;
    
    notesSection.scrollIntoView({ behavior: 'smooth', block: 'center' });
    
    if (hasNotes) {
        // Highlight temporaire si notes existantes
        notesSection.classList.add('ring-2', 'ring-blue-400', 'ring-offset-2');
        setTimeout(() => {
            notesSection.classList.remove('ring-2', 'ring-blue-400', 'ring-offset-2');
        }, 1000);
    } else {
        // Focus sur l'input si aucune note
        setTimeout(() => {
            const input = document.getElementById('note-input');
            if (input) input.focus();
        }, 500);
    }
}

function cleanUrl(url) {
    const urlObj = new URL(url);
    urlObj.searchParams.delete('page');
    return urlObj.toString();
}

function loadActivityPage(url) {
    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 newContainer = doc.querySelector('[data-activity-container]');
            if (newContainer) {
                document.querySelector('[data-activity-container]').innerHTML = newContainer.innerHTML;
                window.history.pushState({}, '', cleanUrl(url));
            }
        });
}

document.addEventListener('click', function(e) {
    const activityLink = e.target.closest('[data-activity-container] [data-pagination] a');
    const appointmentPaginationLink = e.target.closest('[data-appointments-table] [data-pagination] a');
    const paymentPaginationLink = e.target.closest('[data-payments-table] [data-pagination] a');
    
    if (activityLink && activityLink.href) {
        e.preventDefault();
        loadActivityPage(activityLink.href);
    } else if (appointmentPaginationLink && appointmentPaginationLink.href) {
        e.preventDefault();
        window.scrollTo({ top: 0, behavior: 'smooth' });
        fetch(appointmentPaginationLink.href, { 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-appointments-table]');
                if (newTable) {
                    document.querySelector('[data-appointments-table]').innerHTML = newTable.innerHTML;
                }
            });
    } else if (paymentPaginationLink && paymentPaginationLink.href) {
        e.preventDefault();
        window.scrollTo({ top: 0, behavior: 'smooth' });
        fetch(paymentPaginationLink.href, { 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;
                }
            });
    }
});

// Gestion globale des selects de pagination
document.addEventListener('change', function(e) {
    if (e.target.matches('[data-pagination-select]')) {
        console.log('Select changed:', e.target.value);
        console.log('Closest container:', e.target.closest('[data-activity-container]') ? 'activity' : e.target.closest('[data-appointments-table]') ? 'appointments' : e.target.closest('[data-payments-table]') ? 'payments' : 'unknown');
        
        if (!e.target.value) return;
        
        // Activités
        if (e.target.closest('[data-activity-container]')) {
            loadActivityPage(e.target.value);
        }
        // Rendez-vous
        else if (e.target.closest('[data-appointments-table]')) {
            fetch(e.target.value, { 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-appointments-table]');
                    if (newTable) {
                        document.querySelector('[data-appointments-table]').innerHTML = newTable.innerHTML;
                        window.scrollTo({ top: 0, behavior: 'smooth' });
                    }
                });
        }
        // Factures
        else if (e.target.closest('[data-payments-table]')) {
            let url = e.target.value;
            // 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;
                        window.scrollTo({ top: 0, behavior: 'smooth' });
                    }
                });
        }
    }
});
</script>

<script>
// Gestion des notes en AJAX
function addNote(form) {
    const formData = new FormData(form);
    const content = formData.get('content');
    
    fetch('{{ route('provider.clients.notes.store', $client->uuid) }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        },
        body: JSON.stringify({ content })
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            const notesList = document.getElementById('notes-list');
            const emptyState = document.querySelector('.text-xs.text-gray-400.italic');
            if (emptyState) emptyState.remove();
            const firstNoteHint = document.getElementById('first-note-hint');
            if (firstNoteHint) firstNoteHint.remove();
            
            const noteHtml = `
                <div class="p-3 bg-gray-50 rounded border-l-4 border-blue-500" x-data="{ editing: false, showDeleteModal: false }" data-note-id="${data.note.id}">
                    <div x-show="!editing" class="flex justify-between items-center gap-2">
                        <div class="flex-1">
                            <p class="text-sm text-gray-900 note-content">${data.note.content}</p>
                            <p class="text-xs text-gray-500 mt-1 note-date">${data.note.created_at}</p>
                        </div>
                        <div class="flex gap-2 items-center">
                            <button @click="togglePin(${data.note.id})" class="text-gray-400 hover:text-yellow-600 p-1" title="Épingler">
                                <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="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"></path>
                                </svg>
                            </button>
                            <button @click="editing = true" class="text-gray-400 hover:text-blue-600 p-1">
                                <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
                            </button>
                            <button @click="showDeleteModal = true" class="text-gray-400 hover:text-red-600 p-1">
                                <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
                            </button>
                        </div>
                    </div>
                    <form x-show="editing" @submit.prevent="updateNote($el, ${data.note.id})">
                        <div class="flex gap-2 items-center">
                            <input type="text" name="content" value="${data.note.content}" required class="flex-1 px-3 py-2 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
                            <button type="submit" class="text-green-600 hover:text-green-800" title="Enregistrer"><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="M5 13l4 4L19 7"/></svg></button>
                            <button type="button" @click="editing = false" class="text-gray-600 hover:text-gray-800" title="Annuler"><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"/></svg></button>
                        </div>
                    </form>
                    <div x-show="showDeleteModal" x-cloak class="fixed inset-0 z-50 overflow-y-auto">
                        <div class="flex items-center justify-center min-h-screen px-4 py-4">
                            <div @click="showDeleteModal = false" class="fixed inset-0 bg-gray-500 bg-opacity-75"></div>
                            <div class="inline-block overflow-hidden text-left align-bottom bg-white rounded-lg shadow-xl sm:my-8 sm:align-middle sm:max-w-lg sm:w-full relative z-50">
                                <div class="px-4 pt-5 pb-4 bg-white sm:p-6 sm:pb-4">
                                    <div class="sm:flex sm:items-start">
                                        <div class="flex items-center justify-center flex-shrink-0 w-12 h-12 mx-auto bg-red-100 rounded-full sm:mx-0 sm:h-10 sm:w-10">
                                            <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
                                        </div>
                                        <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                                            <h3 class="text-lg font-medium leading-6 text-gray-900">Supprimer la note</h3>
                                            <div class="mt-2"><p class="text-sm text-gray-500">Êtes-vous sûr de vouloir supprimer cette note ? Cette action est irréversible.</p></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="px-4 py-3 bg-gray-50 sm:px-6">
                                    <div class="flex gap-3">
                                        <button @click="showDeleteModal = false" class="flex-shrink-0 px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50">Annuler</button>
                                        <button @click="deleteNote(${data.note.id})" class="flex-1 px-4 py-2 text-sm font-medium text-white bg-red-600 border border-transparent rounded-lg hover:bg-red-700">Supprimer</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>`;
            
            if (notesList) {
                notesList.insertAdjacentHTML('afterbegin', noteHtml);
                Alpine.initTree(notesList.firstElementChild);
            } else {
                const notesSection = document.querySelector('#add-note-form').parentElement;
                notesSection.insertAdjacentHTML('beforeend', `<div class="space-y-2 max-h-64 overflow-y-auto" id="notes-list">${noteHtml}</div>`);
                Alpine.initTree(document.getElementById('notes-list').firstElementChild);
            }
            
            form.reset();
            showToast(data.message);
        }
    });
}

function updateNote(form, noteId) {
    const formData = new FormData(form);
    const content = formData.get('content');
    
    fetch(`/laravel/public/provider/clients/{{ $client->uuid }}/notes/${noteId}`, {
        method: 'PUT',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        },
        body: JSON.stringify({ content })
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            const noteDiv = document.querySelector(`[data-note-id="${noteId}"]`);
            noteDiv.querySelector('.note-content').textContent = content;
            Alpine.evaluate(noteDiv, 'editing = false');
            showToast(data.message);
        }
    });
}

function deleteNote(noteId) {
    fetch(`/laravel/public/provider/clients/{{ $client->uuid }}/notes/${noteId}`, {
        method: 'DELETE',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json'
        }
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            location.reload();
        }
    });
}

function showToast(message) {
    window.dispatchEvent(new CustomEvent('toast', {
        detail: { message, type: 'success' }
    }));
}

function togglePin(noteId) {
    fetch(`/laravel/public/provider/clients/{{ $client->uuid }}/notes/${noteId}/toggle-pin`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json'
        }
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            location.reload();
            showToast(data.message);
        }
    });
}
</script>
@endsection