@extends('layouts.provider')

@section('title', 'Détail de la facture')
@section('page-title', 'Finances > Détail de la facture')

@section('content')
<div class="space-y-3">
    <x-finances-tabs active="factures" />
    
    @if(!$invoice->isCancelledInvoice())
    @if($invoice->is_overdue && $invoice->remaining_amount > 0)
    <div class="alert-item block bg-red-50 border-l-4 border-red-500 p-4 mb-4 shadow-md rounded-lg transition-all duration-300">
        <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($invoice->remaining_amount) }} TND impayés depuis {{ $invoice->days_overdue }} jours
                    </p>
                    <p class="text-xs text-red-600 mt-1">Échéance dépassée : {{ $invoice->due_date->format('d/m/y') }}</p>
                </div>
            </div>
        </div>
    </div>
    @elseif($invoice->due_date && $invoice->due_date >= now()->startOfDay() && $invoice->due_date <= now()->addDays(7)->endOfDay() && $invoice->remaining_amount > 0)
    <div class="alert-item block bg-yellow-50 border-l-4 border-yellow-500 p-4 mb-4 shadow-md rounded-lg transition-all duration-300">
        <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($invoice->remaining_amount) }} TND à échéance dans {{ now()->startOfDay()->diffInDays($invoice->due_date, false) }} jour{{ now()->startOfDay()->diffInDays($invoice->due_date, false) > 1 ? 's' : '' }}
                    </p>
                    <p class="text-xs text-yellow-600 mt-1">Échéance : {{ $invoice->due_date->format('d/m/y') }}</p>
                </div>
            </div>
        </div>
    </div>
    @elseif($invoice->remaining_amount > 0 && !$invoice->isDraft())
    <div class="alert-item block bg-orange-50 border-l-4 border-orange-500 p-4 mb-4 shadow-md rounded-lg transition-all duration-300">
        <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($invoice->remaining_amount) }} TND à encaisser
                    </p>
                    <p class="text-xs text-orange-600 mt-1">{{ $invoice->paid_amount > 0 ? 'Partiellement payée' : 'Facture non payée' }}{{ $invoice->due_date ? ' - Échéance : ' . $invoice->due_date->format('d/m/y') : '' }}</p>
                </div>
            </div>
        </div>
    </div>
    @endif
    @endif
    
    <!-- Bande statut facture -->
    <div id="invoice-header" class="sticky top-[62px] z-[11] px-4 py-3 rounded-lg shadow-sm transition-all duration-300 {{ $invoice->isDraft() ? 'bg-gray-100 dark:bg-gray-700' : ($invoice->isOpen() ? 'bg-blue-50 dark:bg-blue-900' : ($invoice->isInvoicePaid() ? 'bg-green-50 dark:bg-green-900' : 'bg-red-50 dark:bg-red-900')) }}">
        <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-3">
            <div class="flex items-center gap-3 flex-1 min-w-0">
                <h1 class="text-xl font-bold text-gray-900 dark:text-white whitespace-nowrap">{{ $invoice->invoice_number ?? $invoice->reference }}</h1>
                @if($invoice->isCancelledInvoice())
                    <span class="px-3 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400">Annulée</span>
                @elseif($invoice->isDraft())
                    <span class="px-3 py-1 text-xs font-semibold rounded-full bg-gray-100 text-gray-800 border border-gray-300">Brouillon</span>
                @else
                    <x-invoice-status-badge :status="$invoice->isCreditNote() ? 'avoir' : ($invoice->status ?? 'open')" />
                @endif
            </div>
            @if($invoice->isDraft())
            <div class="w-full lg:w-auto lg:flex-shrink-0">
                <x-action-confirm 
                    :action="route('provider.payments.finalize', $invoice->uuid)"
                    message="Finaliser cette facture ? Un numéro chronologique sera généré et la facture ne pourra plus être modifiée."
                    buttonText="Finaliser la facture"
                    confirmText="Finaliser"
                    buttonColor="green"
                    icon="check"
                    :fullWidth="true"
                />
            </div>
            @endif
        </div>
    </div>
    
    <!-- Layout principal -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-3">
        <!-- Colonne droite: Info facture + Paiements (affichée en premier sur mobile, à droite sur desktop) -->
        <div class="space-y-3 lg:col-start-3">
            <!-- Informations facture -->
            <x-card>
                <div class="flex justify-between items-start mb-3">
                    <div>
                        <div class="mb-2">
                            <div class="flex items-center gap-2">
                                @if($invoice->client->type === 'professionnel')
                                    <svg class="w-5 h-5 text-blue-600 dark:text-blue-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                                    </svg>
                                @else
                                    <svg class="w-5 h-5 text-gray-600 dark: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="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>
                                @endif
                                <p class="text-lg font-semibold text-gray-900 dark:text-white truncate" title="{{ $invoice->client->full_name ?? 'N/A' }}">
                                    <a href="{{ route('provider.clients.show', $invoice->client->uuid) }}" class="underline hover:text-blue-600 dark:hover:text-blue-400">
                                        {{ $invoice->client->full_name ?? 'N/A' }}
                                    </a>
                                </p>
                            </div>
                        </div>
                        <div class="flex gap-1 text-xs text-gray-500 dark:text-gray-500">
                            <span>Faite: {{ $invoice->payment_date->format('d/m/y') }}</span>
                            @if($invoice->due_date)
                            <span>·</span>
                            <span class="{{ $invoice->is_overdue ? 'text-red-600 dark:text-red-400 font-medium' : '' }}">Échéance: {{ $invoice->due_date->format('d/m/y') }}</span>
                            @endif
                        </div>
                        @if($invoice->notes)
                        <p class="text-xs text-gray-600 dark:text-gray-400 mt-2 italic">{{ $invoice->notes }}</p>
                        @endif
                    </div>
                    <div class="flex gap-2">
                        <a href="{{ request('from') === 'client' && request('client_uuid') ? route('provider.clients.show', ['client_uuid' => request('client_uuid'), 'tab' => 'invoices']) : route('provider.finances.index', ['tab' => 'factures']) }}" class="w-9 h-9 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 flex items-center justify-center" title="Retour">
                            <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="M15 19l-7-7 7-7"></path>
                            </svg>
                        </a>
                        
                        @php
                            $hasEditAction = true; // Toujours autoriser l'édition
                            
                            // Conditions pour afficher le bouton "Créer un avoir"
                            $canCreateCreditNote = (
                                ($invoice->isOpen() || $invoice->isInvoicePaid() || $invoice->status === 'partiellement_payee')
                                && $invoice->amount > 0  // Pas d'avoir sur avoir (avoir = montant négatif)
                                // TODO: Ajouter condition montant total avoirs < montant total facture
                            );
                            
                            $hasDeleteAction = $invoice->canBeModified();
                        @endphp
                        
                        @if($hasDeleteAction)
                        <x-delete-confirm 
                            :action="route('provider.payments.destroy', $invoice->uuid)" 
                            message="Êtes-vous sûr de vouloir supprimer cette facture brouillon ?"
                            class="w-9 h-9"
                        />
                        @endif
                        <a href="{{ route('provider.payments.edit', $invoice->uuid) }}" class="w-9 h-9 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 flex items-center justify-center" title="Éditer">
                            <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>
                        </a>
                        @if($canCreateCreditNote)
                        <a href="{{ route('provider.invoices.cancel.show', $invoice->uuid) }}" 
                            class="w-9 h-9 bg-red-100 dark:bg-red-900/20 text-red-700 dark:text-red-300 rounded-lg hover:bg-red-200 dark:hover:bg-red-900/40 flex items-center justify-center" 
                            title="Annuler la facture">
                            <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>
                </div>

                <!-- Montants résumé -->
                <div class="grid grid-cols-3 gap-2 mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
                    <div class="text-center">
                        <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">Net à payer</p>
                        <p class="text-sm font-bold text-gray-900 dark:text-white">{{ format_currency($invoice->net_amount) }} <span class="text-xs font-normal">{{ $invoice->currency }}</span></p>
                    </div>
                    <div class="text-center">
                        <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">Payé</p>
                        <p class="text-sm font-bold text-green-600 dark:text-green-400">{{ format_currency($invoice->paid_amount) }} <span class="text-xs font-normal">{{ $invoice->currency }}</span></p>
                    </div>
                    <div class="text-center">
                        <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">Reste</p>
                        <p class="text-sm font-bold text-orange-600 dark:text-orange-400">{{ format_currency($invoice->remaining_amount) }} <span class="text-xs font-normal">{{ $invoice->currency }}</span></p>
                    </div>
                </div>
            </x-card>

            <!-- Facture annulée liée (pour les avoirs) -->
            @if($invoice->isCreditNote())
            <x-card>
                <x-slot name="header">
                    <h3 class="text-base font-semibold text-gray-900 dark:text-white">Facture annulée liée</h3>
                </x-slot>
                
                @if($invoice->cancelledInvoice)
                    <a href="{{ route('provider.invoices.show', $invoice->cancelledInvoice->uuid) }}" class="block p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg hover:bg-red-100 dark:hover:bg-red-900/30 transition-colors">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm font-semibold text-red-900 dark:text-red-300 underline">{{ $invoice->cancelledInvoice->invoice_number }}</p>
                                <p class="text-xs text-red-700 dark:text-red-400 mt-1">Annulée le {{ $invoice->payment_date->format('d/m/Y') }}</p>
                            </div>
                            <div class="text-right">
                                <p class="text-lg font-bold text-red-900 dark:text-red-300">{{ format_currency($invoice->cancelledInvoice->net_amount) }} {{ $invoice->cancelledInvoice->currency }}</p>
                            </div>
                        </div>
                    </a>
                @else
                    <p class="text-sm text-gray-500 dark:text-gray-400 text-center py-4">Aucune facture annulée liée</p>
                @endif
            </x-card>
            @endif

            <!-- Paiements -->
            @if(!$invoice->isCreditNote())
            @if($invoice->isCancelledInvoice())
            <!-- Facture d'avoir liée -->
            <x-card id="credit-note-card">
                <x-slot name="header">
                    <h3 class="text-base font-semibold text-gray-900 dark:text-white">Facture d'avoir liée</h3>
                </x-slot>
                
                @if($invoice->creditNote)
                    <a href="{{ route('provider.invoices.show', $invoice->creditNote->uuid) }}" class="block p-4 bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800 rounded-lg hover:bg-purple-100 dark:hover:bg-purple-900/30 transition-colors">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm font-semibold text-purple-900 dark:text-purple-300 underline">{{ $invoice->creditNote->invoice_number }}</p>
                                <p class="text-xs text-purple-700 dark:text-purple-400 mt-1">Créé le {{ $invoice->creditNote->payment_date->format('d/m/Y') }}</p>
                            </div>
                            <div class="text-right">
                                <p class="text-lg font-bold text-purple-900 dark:text-purple-300">{{ format_currency($invoice->creditNote->net_amount) }} {{ $invoice->creditNote->currency }}</p>
                            </div>
                        </div>
                    </a>
                @else
                    <p class="text-sm text-gray-500 dark:text-gray-400 text-center py-4">Aucune facture d'avoir liée</p>
                @endif
            </x-card>
            @else
            <!-- Paiements -->
            <x-card id="payments-section">
                <x-slot name="header">
                    <div class="flex justify-between items-center">
                        @php
                            $withholdingCount = $invoice->invoicePayments->filter(fn($p) => $p->payment_method === 'retenue_source')->count();
                            $normalPaymentsCount = $invoice->invoicePayments->filter(function($p) {
                                return $p->payment_method !== 'retenue_source';
                            })->count();
                        @endphp
                        <h3 class="text-base font-semibold text-gray-900 dark:text-white">Paiements ({{ $normalPaymentsCount + $withholdingCount }})</h3>
                        <div class="flex gap-1.5">
                            @if($invoice->remaining_amount > 0 && !$invoice->isDraft())
                                <button type="button" onclick="document.getElementById('add-payment-modal').classList.remove('hidden')" class="inline-flex items-center px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-xs font-semibold rounded-lg transition-colors">
                                    <svg class="w-3 h-3 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>
                                    Paiement
                                </button>
                            @endif
                        </div>
                    </div>
                </x-slot>

                @if($invoice->isDraft())
                    <div class="text-center py-6">
                        <svg class="mx-auto h-10 w-10 text-gray-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
                        </svg>
                        <p class="text-xs text-gray-600 dark:text-gray-400 mb-3">Finalisez la facture pour pouvoir enregistrer des paiements.</p>
                    </div>
                @elseif($normalPaymentsCount > 0 || $withholdingCount > 0)
                    <div class="text-xs text-gray-600 dark:text-gray-400 mb-2">
                        Payé: {{ format_currency($invoice->paid_amount) }} / {{ format_currency($invoice->net_amount) }} {{ $invoice->currency }}
                    </div>
                    <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 mb-4">
                        <div class="bg-green-600 h-2 rounded-full transition-all" style="width: {{ $invoice->payment_percentage }}%"></div>
                    </div>
                    
                    <div class="space-y-2">
                        @php
                            $paymentNumber = 0;
                            $paymentNumbers = [];
                            foreach($invoice->invoicePayments->sortBy('id') as $p) {
                                $paymentNumber++;
                                $paymentNumbers[$p->id] = $paymentNumber;
                            }
                        @endphp
                        @foreach($invoice->invoicePayments->sortByDesc('id') as $payment)
                        <div class="flex justify-between items-center text-xs p-2 rounded {{ $payment->payment_method === 'retenue_source' ? 'bg-red-50 dark:bg-red-900/10' : ($payment->isReversal() ? 'bg-red-50 dark:bg-red-900/10' : 'bg-gray-50 dark:bg-gray-700') }}" data-payment-id="{{ $payment->id }}" data-payment-date="{{ $payment->payment_date->format('Y-m-d') }}">
                            <div class="flex-1">
                                <div class="font-medium text-gray-900 dark:text-white">
                                    #{{ str_pad($paymentNumbers[$payment->id] ?? 0, 2, '0', STR_PAD_LEFT) }} - {{ $payment->payment_date->format('d/m/Y') }}
                                    @if($payment->isReversed())
                                        <span class="text-red-600 dark:text-red-400">(Annulé)</span>
                                    @endif
                                </div>
                                <div class="text-gray-500 dark:text-gray-400">
                                    @if($payment->payment_method === 'retenue_source')
                                        {{ $payment->notes ?? 'Retenue' }}
                                    @elseif($payment->isReversal())
                                        @php
                                            $reversedPaymentId = $payment->reversal_of_payment_id;
                                            $reversedPaymentNumber = str_pad($paymentNumbers[$reversedPaymentId] ?? 0, 2, '0', STR_PAD_LEFT);
                                        @endphp
                                        Annulation · <a href="#" data-highlight-payment="{{ $reversedPaymentId }}" class="text-blue-600 dark:text-blue-400 hover:underline">#{{ $reversedPaymentNumber }}</a> · {{ $payment->reversal_reason }}
                                    @else
                                        @switch($payment->payment_method)
                                            @case('cash') Espèces @break
                                            @case('bank_transfer') Virement @break
                                            @case('check') Chèque @break
                                            @case('card') Carte @break
                                        @endswitch
                                        @if($payment->treasuryAccount)
                                            · {{ $payment->treasuryAccount->name }}
                                        @endif
                                        @if($payment->reference)
                                            · Réf: {{ $payment->reference }}
                                        @endif
                                    @endif
                                </div>
                            </div>
                            <div class="flex items-center gap-2">
                                <div class="font-semibold {{ $payment->amount < 0 || $payment->payment_method === 'retenue_source' ? 'text-red-600 dark:text-red-400' : 'text-green-600 dark:text-green-400' }}">
                                    {{ $payment->amount < 0 || $payment->payment_method === 'retenue_source' ? '-' : '' }}{{ format_currency(abs($payment->amount)) }}
                                </div>
                                @if($payment->canBeReversed() && $payment->payment_method !== 'retenue_source')
                                <button 
                                    type="button"
                                    onclick='event.stopPropagation(); console.log("Opening modal for payment {{ $payment->id }}"); document.querySelectorAll("[id^=reverse-payment-modal-]").forEach(m => m.classList.add("hidden")); const modal = document.getElementById("reverse-payment-modal-{{ $payment->id }}"); if(modal) modal.classList.remove("hidden"); else console.error("Modal not found for payment {{ $payment->id }}");' 
                                    class="text-orange-600 hover:text-orange-800 dark:text-orange-400 dark:hover:text-orange-300"
                                    title="Annuler ce paiement"
                                >
                                    <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 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"></path>
                                    </svg>
                                </button>
                                @endif
                            </div>
                        </div>
                        @endforeach
                    </div>
                @else
                    <div class="text-center py-4">
                        <p class="text-sm text-gray-500 dark:text-gray-400">Aucun paiement</p>
                    </div>
                @endif
            </x-card>
            @endif
            @endif
            
            <!-- Activité de la facture -->
            <x-invoice-activity :activities="$invoice->activities" />
        </div>

        <!-- Colonne gauche: Facture (affichée en deuxième sur mobile, à gauche sur desktop) -->
        <div class="lg:col-span-2 lg:col-start-1 lg:row-start-1">
            <x-card>
                <x-slot name="header">
                    <div class="flex justify-between items-center">
                        <h3 class="text-base font-semibold text-gray-900 dark:text-white">Aperçu de la facture</h3>
                        <div class="flex gap-2">
                            <a href="{{ route('provider.payments.pdf', $invoice->uuid) }}" target="_blank" class="w-9 h-9 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 flex items-center justify-center" title="Télécharger PDF">
                                <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 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>
                            </a>
                            <div x-data="{ open: false }" class="relative">
                                <button @click="open = !open" class="w-9 h-9 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 flex items-center justify-center" title="Partager">
                                    <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="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"></path>
                                    </svg>
                                </button>
                                <div x-show="open" @click.away="open = false" class="absolute right-0 mt-2 w-40 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-10" style="display: none;">
                                    <form method="POST" action="{{ route('provider.payments.send', $invoice->uuid) }}" class="m-0">
                                        @csrf
                                        <input type="hidden" name="methods[]" value="whatsapp">
                                        <button type="submit" class="flex items-center gap-2 w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-t-lg">
                                            <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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
                                            </svg>
                                            WhatsApp
                                        </button>
                                    </form>
                                    <form method="POST" action="{{ route('provider.payments.send', $invoice->uuid) }}" class="m-0">
                                        @csrf
                                        <input type="hidden" name="methods[]" value="email">
                                        <button type="submit" class="flex items-center gap-2 w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-b-lg">
                                            <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 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>
                                            Email
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </x-slot>

                <div class="space-y-6">
                    <!-- En-tête facture -->
                    <div class="flex justify-between items-start pb-6 border-b border-gray-200 dark:border-gray-700">
                        <div>
                            <div class="flex items-start gap-4">
                                @if(auth()->user()->provider->logo)
                                    <img src="{{ asset('logos/' . auth()->user()->provider->logo) }}" alt="Logo" class="w-16 h-16 object-contain">
                                @endif
                                <div>
                                    <h1 class="text-2xl font-bold text-blue-600 dark:text-blue-400">{{ auth()->user()->provider->legal_name ?? auth()->user()->provider->business_name }}</h1>
                                    <div class="text-sm text-gray-600 dark:text-gray-400 space-y-1 mt-2">
                                        @if(auth()->user()->provider->tax_id)
                                        <p>Matricule fiscal : {{ auth()->user()->provider->tax_id }}</p>
                                        @endif
                                        @if(auth()->user()->provider->address)
                                        <p>{{ auth()->user()->provider->address }}</p>
                                        @endif
                                        @if(auth()->user()->provider->city || auth()->user()->provider->country)
                                        <p>{{ auth()->user()->provider->city }}{{ auth()->user()->provider->city && auth()->user()->provider->country ? ', ' : '' }}{{ auth()->user()->provider->country }}</p>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="text-right">
                            <h1 class="text-3xl font-bold text-blue-600 dark:text-blue-400">
                                FACTURE
                                @if($invoice->isCreditNote())
                                    <br><span class="text-2xl">D'AVOIR</span>
                                @elseif($invoice->isCancelledInvoice())
                                    <br><span class="text-2xl text-red-600">ANNULÉE</span>
                                @endif
                            </h1>
                        </div>
                    </div>

            <!-- Informations facture et client -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
                    <h4 class="text-sm font-bold text-blue-600 dark:text-blue-400 mb-3">Client</h4>
                    <div class="text-sm text-gray-900 dark:text-white space-y-1">
                        <p class="font-semibold">{{ $invoice->client->full_name }}</p>
                        @if($invoice->client->is_vat_subject && $invoice->client->matricule_fiscal)
                        <p>Matricule fiscal : {{ $invoice->client->matricule_fiscal }}</p>
                        @endif
                        @if($invoice->client->phone)
                        <p>Tél : {{ $invoice->client->phone }}</p>
                        @endif
                        @if($invoice->client->email)
                        <p>Email : {{ $invoice->client->email }}</p>
                        @endif
                        @if($invoice->client->address)
                        <p>Adresse : {{ $invoice->client->address }}</p>
                        @endif
                    </div>
                </div>

                <div class="text-right">
                    <div class="text-sm text-gray-600 dark:text-gray-400 space-y-1">
                        <p><strong>N° Facture :</strong> {{ $invoice->invoice_number ?? $invoice->reference }}</p>
                        <p><strong>Date :</strong> {{ $invoice->payment_date->format('d/m/Y') }}</p>
                        @if($invoice->due_date)
                        <p><strong>Échéance :</strong> {{ $invoice->due_date->format('d/m/Y') }}</p>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Tableau des prestations -->
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                    <thead class="bg-blue-600 text-white">
                        <tr>
                            <th class="px-4 py-3 text-left text-xs font-medium uppercase">Description</th>
                            <th class="px-4 py-3 text-center text-xs font-medium uppercase" style="width: 100px;">Quantité</th>
                            <th class="px-4 py-3 text-right text-xs font-medium uppercase" style="width: 120px;">HT ({{ $invoice->currency }})</th>
                            <th class="px-4 py-3 text-center text-xs font-medium uppercase" style="width: 80px;">% TVA</th>
                            <th class="px-4 py-3 text-right text-xs font-medium uppercase" style="width: 120px;">TVA ({{ $invoice->currency }})</th>
                            <th class="px-4 py-3 text-right text-xs font-medium uppercase" style="width: 120px;">Montant TTC ({{ $invoice->currency }})</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
                        @if($invoice->invoiceItems && $invoice->invoiceItems->count() > 0)
                            @foreach($invoice->invoiceItems as $item)
                            <tr>
                                <td class="px-4 py-3">
                                    @if($item->appointment_id)
                                    <a href="{{ route('provider.appointments.calendar', ['date' => $item->service_date->format('Y-m-d'), 'highlight' => $item->appointment->uuid]) }}" class="block hover:bg-gray-50 dark:hover:bg-gray-800 -m-3 p-3 rounded transition-colors">
                                        <div class="text-sm font-medium text-blue-600 dark:text-blue-400 hover:underline">{{ $item->description }}</div>
                                        <div class="text-xs text-gray-500 dark:text-gray-400">{{ $item->service_date->format('d/m/Y') }}</div>
                                        <div class="text-xs text-gray-500 dark:text-gray-400">{{ $item->service_time }}</div>
                                    </a>
                                    @else
                                    <div class="text-sm font-medium text-gray-900 dark:text-white">{{ $item->description }}</div>
                                    <div class="text-xs text-gray-500 dark:text-gray-400">{{ $item->service_date->format('d/m/Y') }}</div>
                                    @if($item->service_time)
                                    <div class="text-xs text-gray-500 dark:text-gray-400">{{ $item->service_time }}</div>
                                    @endif
                                    @endif
                                </td>
                                <td class="px-4 py-3 text-center text-sm text-gray-900 dark:text-white">{{ $item->quantity }}</td>
                                <td class="px-4 py-3 text-right text-sm text-gray-900 dark:text-white">{{ format_currency($item->unit_price) }}</td>
                                <td class="px-4 py-3 text-center text-sm text-gray-900 dark:text-white">{{ number_format($item->vat_rate, 0) }}%</td>
                                <td class="px-4 py-3 text-right text-sm text-gray-900 dark:text-white">{{ format_currency($item->vat_amount) }}</td>
                                <td class="px-4 py-3 text-right text-sm text-gray-900 dark:text-white">{{ format_currency($item->total_ttc) }}</td>
                            </tr>
                            @endforeach
                        @elseif($invoice->appointments && $invoice->appointments->count() > 0)
                            @foreach($invoice->appointments as $appointment)
                            <tr>
                                <td class="px-4 py-3">
                                    <a href="{{ route('provider.appointments.calendar', ['date' => $appointment->start_time->format('Y-m-d'), 'highlight' => $appointment->uuid]) }}" class="block hover:bg-gray-50 dark:hover:bg-gray-800 -m-3 p-3 rounded transition-colors">
                                        <div class="text-sm font-medium text-blue-600 dark:text-blue-400 hover:underline">{{ $appointment->service->name ?? 'Service' }}</div>
                                        <div class="text-xs text-gray-500 dark:text-gray-400">{{ $appointment->start_time->format('d/m/Y') }}</div>
                                        <div class="text-xs text-gray-500 dark:text-gray-400">{{ $appointment->start_time->format('H:i') }} - {{ $appointment->end_time ? $appointment->end_time->format('H:i') : $appointment->start_time->addHour()->format('H:i') }}</div>
                                    </a>
                                </td>
                                <td class="px-4 py-3 text-center text-sm text-gray-900 dark:text-white">
                                    @php
                                        $duration = $appointment->end_time ? $appointment->start_time->diffInMinutes($appointment->end_time) : 60;
                                        $hours = floor($duration / 60);
                                        $minutes = $duration % 60;
                                    @endphp
                                    {{ $hours }}h{{ $minutes > 0 ? str_pad($minutes, 2, '0', STR_PAD_LEFT) : '' }}
                                </td>
                                @php
                                    // price_at_booking est le prix HT
                                    $priceHT = $appointment->price_at_booking;
                                    $vatAmount = $appointment->vat_rate > 0 ? ($priceHT * $appointment->vat_rate / 100) : 0;
                                    $priceTTC = round($priceHT + $vatAmount, 2);
                                @endphp
                                <td class="px-4 py-3 text-right text-sm text-gray-900 dark:text-white">{{ format_currency($priceHT) }}</td>
                                <td class="px-4 py-3 text-center text-sm text-gray-900 dark:text-white">{{ number_format($appointment->vat_rate, 0) }}%</td>
                                <td class="px-4 py-3 text-right text-sm text-gray-900 dark:text-white">{{ format_currency($vatAmount) }}</td>
                                <td class="px-4 py-3 text-right text-sm text-gray-900 dark:text-white">{{ format_currency($priceTTC) }}</td>
                            </tr>
                            @endforeach
                        @else
                            <tr>
                                <td class="px-4 py-3 text-sm text-gray-900 dark:text-white">Prestation de service</td>
                                <td class="px-4 py-3 text-center text-sm text-gray-900 dark:text-white">-</td>
                                <td class="px-4 py-3 text-right text-sm text-gray-900 dark:text-white">{{ format_currency($invoice->amount) }}</td>
                                <td class="px-4 py-3 text-center text-sm text-gray-900 dark:text-white">0%</td>
                                <td class="px-4 py-3 text-right text-sm text-gray-900 dark:text-white">0,00</td>
                                <td class="px-4 py-3 text-right text-sm text-gray-900 dark:text-white">{{ format_currency($invoice->amount) }}</td>
                            </tr>
                        @endif
                    </tbody>
                </table>
            </div>

            @php
                // Calculer le total HT, TVA et TTC depuis les lignes du tableau
                $totalHT = 0;
                $totalVAT = 0;
                $totalTTC = 0;
                $vatByRate = [];
                
                if($invoice->invoiceItems && $invoice->invoiceItems->count() > 0) {
                    foreach($invoice->invoiceItems as $item) {
                        $totalHT += $item->unit_price;
                        $totalVAT += $item->vat_amount;
                        $totalTTC += $item->total_ttc;
                        
                        // Grouper par taux de TVA
                        $rate = $item->vat_rate;
                        if (!isset($vatByRate[$rate])) {
                            $vatByRate[$rate] = ['base' => 0, 'amount' => 0];
                        }
                        $vatByRate[$rate]['base'] += $item->unit_price;
                        $vatByRate[$rate]['amount'] += $item->vat_amount;
                    }
                } elseif($invoice->appointments && $invoice->appointments->count() > 0) {
                    foreach($invoice->appointments as $appointment) {
                        // price_at_booking est le prix HT
                        $priceHT = $appointment->price_at_booking;
                        $vatAmount = $appointment->vat_rate > 0 ? ($priceHT * $appointment->vat_rate / 100) : 0;
                        $priceTTC = round($priceHT + $vatAmount, 2);
                        $totalHT += $priceHT;
                        $totalVAT += $vatAmount;
                        $totalTTC += $priceTTC;
                        
                        // Grouper par taux de TVA
                        $rate = $appointment->vat_rate;
                        if (!isset($vatByRate[$rate])) {
                            $vatByRate[$rate] = ['base' => 0, 'amount' => 0];
                        }
                        $vatByRate[$rate]['base'] += $priceHT;
                        $vatByRate[$rate]['amount'] += $vatAmount;
                    }
                } else {
                    $totalHT = $invoice->amount;
                    $totalTTC = $invoice->amount;
                }
                
                $vatTax = $invoice->invoiceTaxes->where('is_vat_snapshot', true)->first();
                $taxesBeforeVat = $invoice->invoiceTaxes->where('is_vat_snapshot', false)->where('apply_before_vat_snapshot', true);
                $withholdingTaxes = $invoice->invoiceTaxes->filter(fn($t) => $t->sign_snapshot === '-' && !$t->is_vat_snapshot && !$t->apply_before_vat_snapshot);
                $taxesAfterVat = $invoice->invoiceTaxes->filter(fn($t) => !$t->is_vat_snapshot && !$t->apply_before_vat_snapshot && !$withholdingTaxes->contains('id', $t->id));
            @endphp

            <!-- Bloc TVA et Totaux -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
                <!-- Bloc TVA à gauche -->
                <div>
                    @if($totalVAT != 0)
                    <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-4">
                        <h4 class="text-sm font-bold text-gray-900 dark:text-white mb-3">Détail TVA</h4>
                        <table class="w-full text-sm">
                            <thead>
                                <tr class="border-b border-gray-200 dark:border-gray-700">
                                    <th class="text-left py-2 text-gray-600 dark:text-gray-400">Taux</th>
                                    <th class="text-right py-2 text-gray-600 dark:text-gray-400">Base HT</th>
                                    <th class="text-right py-2 text-gray-600 dark:text-gray-400">Montant TVA</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($vatByRate as $rate => $data)
                                <tr class="border-b border-gray-100 dark:border-gray-700">
                                    <td class="py-2 text-gray-900 dark:text-white">{{ number_format($rate, 0) }}%</td>
                                    <td class="text-right py-2 text-gray-900 dark:text-white">{{ format_currency($data['base']) }}</td>
                                    <td class="text-right py-2 text-gray-900 dark:text-white">{{ format_currency($data['amount']) }}</td>
                                </tr>
                                @endforeach
                                <tr class="font-semibold">
                                    <td class="py-2 text-gray-900 dark:text-white">Total</td>
                                    <td class="text-right py-2 text-gray-900 dark:text-white">{{ format_currency($totalHT) }}</td>
                                    <td class="text-right py-2 text-gray-900 dark:text-white">{{ format_currency($totalVAT) }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    @endif
                </div>

                <!-- Bloc Totaux à droite -->
                <div>
                    <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-4">
                        <h4 class="text-sm font-bold text-gray-900 dark:text-white mb-3">Totaux</h4>
                        <table class="w-full text-sm">
                            <tbody>
                                <tr class="border-b border-gray-200 dark:border-gray-700">
                                    <td class="py-2 text-gray-900 dark:text-white">Total HT</td>
                                    <td class="text-right py-2 text-gray-900 dark:text-white">{{ format_currency($totalHT) }}</td>
                                </tr>
                                <tr class="border-b border-gray-200 dark:border-gray-700">
                                    <td class="py-2 text-gray-900 dark:text-white">Total TVA</td>
                                    <td class="text-right py-2 text-gray-900 dark:text-white">{{ format_currency($totalVAT) }}</td>
                                </tr>
                                @foreach($taxesBeforeVat as $tax)
                                <tr class="border-b border-gray-200 dark:border-gray-700">
                                    <td class="py-2 text-gray-900 dark:text-white">{{ $tax->label_snapshot ?? ucfirst(str_replace('_', ' ', $tax->name_snapshot)) }} @if($tax->type_snapshot === 'percent')({{ number_format($tax->value_snapshot, 2) }}%)@endif</td>
                                    <td class="text-right py-2 {{ $tax->sign_snapshot === '+' ? 'text-green-600' : 'text-red-600' }}">{{ $tax->sign_snapshot }}{{ format_currency($tax->amount_snapshot) }}</td>
                                </tr>
                                @endforeach
                                <tr class="border-t-2 border-gray-400 dark:border-gray-400">
                                    <td class="py-2 font-semibold text-gray-900 dark:text-white">Total TTC</td>
                                    <td class="text-right py-2 font-semibold text-gray-900 dark:text-white">{{ format_currency($invoice->total_ttc) }}</td>
                                </tr>
                                @foreach($withholdingTaxes as $tax)
                                <tr class="border-b border-gray-200 dark:border-gray-700">
                                    <td class="py-2 text-gray-900 dark:text-white">{{ $tax->label_snapshot ?? ucfirst(str_replace('_', ' ', $tax->name_snapshot)) }} @if($tax->type_snapshot === 'percent')({{ number_format($tax->value_snapshot, 2) }}%)@endif</td>
                                    <td class="text-right py-2 {{ $tax->sign_snapshot === '+' ? 'text-green-600' : 'text-red-600' }}">{{ $tax->sign_snapshot }}{{ format_currency($tax->amount_snapshot) }}</td>
                                </tr>
                                @endforeach
                                @foreach($taxesAfterVat as $tax)
                                <tr class="border-b border-gray-200 dark:border-gray-700">
                                    <td class="py-2 text-gray-900 dark:text-white">{{ $tax->label_snapshot ?? ucfirst(str_replace('_', ' ', $tax->name_snapshot)) }} @if($tax->type_snapshot === 'percent')({{ number_format($tax->value_snapshot, 2) }}%)@endif</td>
                                    <td class="text-right py-2 {{ $tax->sign_snapshot === '+' ? 'text-green-600' : 'text-red-600' }}">{{ $tax->sign_snapshot === '-' ? '-' : '' }}{{ format_currency($tax->amount_snapshot) }}</td>
                                </tr>
                                @endforeach
                                <tr class="border-t-2 border-gray-900 dark:border-white">
                                    <td class="py-3 text-base font-bold text-gray-900 dark:text-white">NET À PAYER</td>
                                    <td class="text-right py-3 text-base font-bold text-gray-900 dark:text-white">{{ format_currency($invoice->net_amount) }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="bg-gray-50 dark:bg-gray-800 p-3 rounded border border-gray-200 dark:border-gray-700 mt-4">
                <p class="text-xs text-gray-600 dark:text-gray-400 mb-1">Arrête la présente facture à la somme de :</p>
                <div class="bg-white dark:bg-gray-900 p-2 rounded">
                    <p class="text-xs font-bold text-gray-900 dark:text-white">{{ \App\Helpers\NumberToWordsHelper::convert($invoice->net_amount) }}</p>
                </div>
            </div>

            @php
                $paymentMethods = $invoice->invoicePayments
                    ->where('payment_method', '!=', 'retenue_source')
                    ->pluck('payment_method')
                    ->unique()
                    ->map(fn($method) => match($method) {
                        'cash' => 'Espèces',
                        'bank_transfer' => 'Virement',
                        'check' => 'Chèque',
                        'card' => 'Carte',
                        default => ucfirst($method)
                    })
                    ->join(', ');
            @endphp

            @if(auth()->user()->provider->defaultBankAccount)
            <div class="bg-blue-50 dark:bg-blue-900/20 border-l-4 border-blue-600 p-3 rounded">
                <h4 class="text-sm font-bold text-blue-600 dark:text-blue-400 mb-2">Coordonnées bancaires</h4>
                <div class="text-xs text-gray-700 dark:text-gray-300">
                    <p><strong>Banque :</strong> {{ auth()->user()->provider->defaultBankAccount->name }}@if(auth()->user()->provider->defaultBankAccount->reference) · <strong>Référence :</strong> {{ auth()->user()->provider->defaultBankAccount->reference }}@endif</p>
                </div>
            </div>
            @endif

            @if(auth()->user()->provider->billing_settings['invoice_footer'] ?? null)
            <div class="bg-gray-50 dark:bg-gray-800 p-3 rounded text-xs text-gray-600 dark:text-gray-400">
                {!! nl2br(e(auth()->user()->provider->billing_settings['invoice_footer'])) !!}
            </div>
            @endif

            <div class="text-center text-xs text-gray-500 dark:text-gray-500 pt-4 border-t border-gray-200 dark:border-gray-700">
                <p>Facture générée le {{ now()->format('d/m/Y à H:i') }}</p>
                <p>{{ config('app.name') }} - Tous droits réservés</p>
            </div>
        </div>
    </x-card>

        </div>
    </div>
</div>

<!-- Modal Ajouter paiement -->
<div id="add-payment-modal" class="hidden fixed inset-0 bg-gray-500 bg-opacity-75 z-50 overflow-y-auto">
    <div class="flex min-h-full items-center justify-center p-4 pb-20">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full">
        <form method="POST" action="{{ route('provider.invoices.payments.store', $invoice->uuid) }}" class="p-6" id="payment-form" onsubmit="return validatePaymentForm(event);">
            @csrf
            <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Ajouter un paiement</h2>
            
            <div class="space-y-4" x-data="{ accountType: '', treasuryError: false, amountError: false, dateError: false }">
                <div class="grid grid-cols-3 gap-4">
                    <div class="col-span-2">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                            Date du paiement
                            <span class="text-red-500">*</span>
                        </label>
                        <input 
                            type="date" 
                            name="payment_date" 
                            value="{{ old('payment_date', now()->format('Y-m-d')) }}"
                            required
                            @input="dateError = false"
                            :class="dateError ? 'border-red-300 focus:border-red-500 focus:ring-red-500' : 'border-gray-300 focus:border-primary focus:ring-primary'"
                            class="mt-1 block w-full rounded-md shadow-sm sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white"
                        />
                        <p x-show="dateError" class="text-sm text-red-600 dark:text-red-400 mt-1" style="display: none;">La date du paiement est requise.</p>
                    </div>

                    <x-input 
                        type="text" 
                        name="reference" 
                        label="Référence" 
                        value="{{ old('reference') }}"
                    />
                </div>

                <div class="grid grid-cols-3 gap-4">
                    <div class="col-span-2">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                            Compte de trésorerie
                            <span class="text-red-500">*</span>
                        </label>
                        <select 
                            name="treasury_account_id" 
                            required 
                            @change="accountType = $event.target.selectedOptions[0].dataset.type; treasuryError = false; updatePaymentMethods($event.target.selectedOptions[0].dataset.type)"
                            :class="treasuryError ? 'border-red-300 focus:border-red-500 focus:ring-red-500' : 'border-gray-300 focus:border-primary focus:ring-primary'"
                            class="mt-1 block w-full rounded-md shadow-sm sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white"
                        >
                            <option value="">Sélectionner un compte...</option>
                            @foreach($treasuryAccounts as $account)
                                <option value="{{ $account->id }}" data-type="{{ $account->type }}" {{ old('treasury_account_id') == $account->id ? 'selected' : '' }}>
                                    {{ $account->name }} ({{ number_format($account->current_balance, 2) }} {{ $account->currency }})
                                </option>
                            @endforeach
                        </select>
                        <p x-show="treasuryError" class="text-sm text-red-600 dark:text-red-400 mt-1" style="display: none;">Le compte de trésorerie est requis.</p>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                            Paiement en
                            <span class="text-red-500">*</span>
                        </label>
                        <select 
                            name="payment_method" 
                            required
                            id="payment-method-select"
                            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white"
                        >
                            <option value="">Sélectionner d'abord un compte...</option>
                        </select>
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                        Montant
                        <span class="text-red-500">*</span>
                    </label>
                    <input 
                        type="number" 
                        name="amount" 
                        value="{{ old('amount', $invoice->remaining_amount) }}"
                        step="0.001"
                        min="1"
                        max="{{ $invoice->remaining_amount }}"
                        required
                        @input="amountError = false"
                        :class="amountError ? 'border-red-300 focus:border-red-500 focus:ring-red-500' : 'border-gray-300 focus:border-primary focus:ring-primary'"
                        class="mt-1 block w-full rounded-md shadow-sm sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white"
                    />
                    <p x-show="!amountError" class="text-xs text-gray-500 dark:text-gray-400 mt-1">Maximum: {{ format_currency($invoice->remaining_amount) }} {{ $invoice->currency }}</p>
                    <p x-show="amountError" class="text-sm text-red-600 dark:text-red-400 mt-1" style="display: none;">Le montant doit être supérieur ou égal à 1.</p>
                </div>
            </div>

            <div class="flex gap-3 mt-6">
                <x-button type="button" onclick="document.getElementById('add-payment-modal').classList.add('hidden')" variant="secondary" class="flex-1">
                    Annuler
                </x-button>
                <x-button type="submit" class="flex-1">
                    Enregistrer
                </x-button>
            </div>
        </form>
    </div>
    </div>
</div>

<script>
function updatePaymentMethods(accountType) {
    const select = document.getElementById('payment-method-select');
    select.innerHTML = '';
    
    if (accountType === 'cash') {
        select.innerHTML = '<option value="cash">Espèces</option>';
        select.value = 'cash';
    } else if (accountType === 'bank') {
        select.innerHTML = `
            <option value="">Sélectionner...</option>
            <option value="bank_transfer">Virement bancaire</option>
            <option value="check">Chèque</option>
            <option value="card">Carte bancaire</option>
        `;
    } else {
        select.innerHTML = '<option value="">Sélectionner d\'abord un compte...</option>';
    }
}

function validatePaymentForm(event) {
    const form = event.target;
    const treasuryAccount = form.querySelector('[name="treasury_account_id"]');
    const amountInput = form.querySelector('[name="amount"]');
    const dateInput = form.querySelector('[name="payment_date"]');
    const alpineComponent = form.querySelector('[x-data]');
    
    let hasError = false;
    
    // Validation de la date
    if (!dateInput.value || dateInput.value === '') {
        if (alpineComponent && alpineComponent.__x) {
            alpineComponent.__x.$data.dateError = true;
        }
        hasError = true;
    }
    
    // Validation du compte de trésorerie
    if (!treasuryAccount.value || treasuryAccount.value === '') {
        if (alpineComponent && alpineComponent.__x) {
            alpineComponent.__x.$data.treasuryError = true;
        }
        hasError = true;
    }
    
    // Validation du montant
    const amountValue = parseFloat(amountInput.value);
    if (!amountInput.value || isNaN(amountValue) || amountValue < 1) {
        if (alpineComponent && alpineComponent.__x) {
            alpineComponent.__x.$data.amountError = true;
        }
        hasError = true;
    }
    
    if (hasError) {
        event.preventDefault();
        event.stopPropagation();
        return false;
    }
    
    return true;
}
</script>

<!-- Modal Ajouter retenue à la source -->
<div id="add-withholding-modal" class="hidden fixed inset-0 bg-gray-500 bg-opacity-75 z-50 flex items-center justify-center p-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full">
        <form method="POST" action="{{ route('provider.invoices.add-withholding', $invoice->uuid) }}" class="p-6">
            @csrf
            <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Ajouter une retenue à la source</h2>
            
            <div class="space-y-4">
                <div>
                    <x-input 
                        type="number" 
                        name="withholding_tax_rate" 
                        label="Taux de retenue (%)" 
                        value="{{ old('withholding_tax_rate', '1') }}"
                        step="0.01"
                        min="0"
                        max="100"
                        required
                    />
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                        Montant total: {{ format_currency($invoice->amount) }} {{ $invoice->currency }}
                    </p>
                </div>

                <div class="bg-red-50 dark:bg-red-900/20 rounded-lg p-4">
                    <p class="text-sm text-red-600 dark:text-red-400">
                        La retenue à la source sera déduite du montant net à payer.
                    </p>
                </div>
            </div>

            <div class="flex gap-3 mt-6">
                <x-button type="button" onclick="document.getElementById('add-withholding-modal').classList.add('hidden')" variant="secondary" class="flex-1">
                    Annuler
                </x-button>
                <x-button type="submit" class="flex-1 bg-red-600 hover:bg-red-700">
                    Ajouter
                </x-button>
            </div>
        </form>
    </div>
</div>

<!-- Modals d'annulation de paiement -->
@php $modalIndex = 0; @endphp
@foreach($invoice->invoicePayments->sortByDesc('id')->where('payment_method', '!=', 'retenue_source') as $payment)
@if($payment->canBeReversed())
@php $modalIndex++; @endphp
<div id="reverse-payment-modal-{{ $payment->id }}" class="hidden fixed inset-0 bg-gray-500 bg-opacity-75 overflow-y-auto" style="z-index: {{ 60 + $modalIndex }};" onclick="if(event.target === this) this.classList.add('hidden')">
    <div class="flex min-h-full items-center justify-center p-4 pb-4">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full" onclick="event.stopPropagation()">
        <form method="POST" action="{{ route('provider.invoice-payments.reverse', $payment->id) }}" class="p-6">
            @csrf
            <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Annuler le paiement</h2>
            
            <div class="space-y-4">
                <div class="bg-orange-50 dark:bg-orange-900/20 rounded-lg p-4">
                    <p class="text-sm text-orange-600 dark:text-orange-400">
                        Montant: {{ format_currency($payment->amount) }} {{ $invoice->currency }}<br>
                        Date: {{ $payment->payment_date->format('d/m/Y') }}<br>
                        Compte: {{ $payment->treasuryAccount->name ?? '-' }}
                    </p>
                </div>

                <x-input 
                    type="date" 
                    name="date" 
                    label="Date d'annulation" 
                    value="{{ old('date', now()->format('Y-m-d')) }}"
                />

                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                        Raison de l'annulation <span class="text-red-500">*</span>
                    </label>
                    <textarea 
                        name="reason" 
                        rows="3" 
                        required
                        class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white"
                        placeholder="Ex: Erreur de saisie, paiement en double, etc."
                    >{{ old('reason') }}</textarea>
                </div>

                <div class="bg-red-50 dark:bg-red-900/20 rounded-lg p-4">
                    <p class="text-sm text-red-600 dark:text-red-400">
                        Cette action créera une contre-écriture avec un montant négatif. Le paiement original ne sera pas supprimé.
                    </p>
                </div>
            </div>

            <div class="flex gap-3 mt-6">
                <x-button type="button" onclick="event.stopPropagation(); document.getElementById('reverse-payment-modal-{{ $payment->id }}').classList.add('hidden')" variant="secondary" class="flex-1">
                    Annuler
                </x-button>
                <x-button type="submit" class="flex-1 bg-orange-600 hover:bg-orange-700">
                    Confirmer
                </x-button>
            </div>
        </form>
    </div>
    </div>
</div>
@endif
@endforeach
@endsection

<script>
document.addEventListener('DOMContentLoaded', function() {
    const urlParams = new URLSearchParams(window.location.search);
    let highlight = urlParams.get('highlight');
    
    // Check for highlight from session (passed via with())
    @if(session('highlight'))
        highlight = '{{ session('highlight') }}';
    @endif
    
    if (highlight === 'credit-note') {
        const creditNoteCard = document.querySelector('#credit-note-card');
        if (creditNoteCard) {
            setTimeout(() => {
                creditNoteCard.scrollIntoView({ behavior: 'smooth', block: 'center' });
            }, 300);
            
            creditNoteCard.classList.add('ring-2', 'ring-purple-500', '!bg-purple-50', 'dark:!bg-purple-900/40');
            
            setTimeout(() => {
                creditNoteCard.classList.remove('ring-2', 'ring-purple-500', '!bg-purple-50', 'dark:!bg-purple-900/40');
            }, 3000);
        }
    } else if (highlight && highlight.startsWith('payment-')) {
        const paymentId = highlight.replace('payment-', '');
        const paymentRow = document.querySelector(`[data-payment-id="${paymentId}"]`);
        
        if (paymentRow) {
            setTimeout(() => {
                paymentRow.scrollIntoView({ behavior: 'smooth', block: 'center' });
                paymentRow.classList.add('ring-2', 'ring-blue-500', '!bg-blue-100', 'dark:!bg-blue-900/40');
                
                setTimeout(() => {
                    paymentRow.classList.remove('ring-2', 'ring-blue-500', '!bg-blue-100', 'dark:!bg-blue-900/40');
                    
                    const url = new URL(window.location);
                    url.searchParams.delete('highlight');
                    window.history.replaceState({}, '', url);
                }, 3000);
            }, 300);
        }
    }

    // Gestionnaire pour les liens de surlignage
    document.addEventListener('click', function(e) {
        const link = e.target.closest('[data-highlight-payment]');
        if (link) {
            e.preventDefault();
            const paymentId = link.getAttribute('data-highlight-payment');
            const el = document.querySelector(`[data-payment-id="${paymentId}"]`);
            if (el) {
                el.scrollIntoView({behavior: 'smooth', block: 'center'});
                el.classList.add('ring-2', 'ring-blue-500', '!bg-blue-100', 'dark:!bg-blue-900/40');
                setTimeout(() => {
                    el.classList.remove('ring-2', 'ring-blue-500', '!bg-blue-100', 'dark:!bg-blue-900/40');
                }, 3000);
            }
        }
    });
});
</script>