@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" />
    
    <x-card>
        <div class="flex justify-between items-start mb-3">
            <div>
                <h1 class="text-xl font-bold text-gray-900 dark:text-white">{{ $invoice->invoice_number ?? $invoice->reference }}</h1>
                <div class="flex items-center gap-2 mt-1">
                    <p class="text-sm text-gray-600 dark:text-gray-400">{{ $invoice->client->full_name ?? 'N/A' }}</p>
                    <x-invoice-status-badge :status="$invoice->invoice_status" />
                </div>
                <div class="flex gap-3 text-xs text-gray-500 dark:text-gray-500 mt-0.5">
                    <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="{{ 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>
                @if($invoice->canBeModified())
                <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
                @if($invoice->canBeModified())
                <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>
                @else
                <button disabled class="w-9 h-9 bg-gray-100 dark:bg-gray-700 text-gray-400 rounded-lg opacity-50 cursor-not-allowed flex items-center justify-center" title="Modification interdite">
                    <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>
                @endif
                @if($invoice->isDraft())
                <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 (générer numéro)"
                    confirmText="Finaliser"
                    buttonColor="green"
                    icon="check"
                />
                @endif
                @if($invoice->isOpen() || $invoice->isInvoicePaid())
                <x-action-confirm 
                    :action="route('provider.payments.create-credit-note', $invoice->uuid)"
                    message="Créer un avoir pour annuler cette facture ? Cette action est irréversible."
                    buttonText="Annuler (créer avoir)"
                    confirmText="Créer l'avoir"
                    buttonColor="red"
                    icon="cancel"
                />
                @endif
                <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-48 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) }}">
                            @csrf
                            <input type="hidden" name="methods[]" value="whatsapp">
                            <button type="submit" class="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">
                                Envoyer WhatsApp
                            </button>
                        </form>
                        <form method="POST" action="{{ route('provider.payments.send', $invoice->uuid) }}">
                            @csrf
                            <input type="hidden" name="methods[]" value="email">
                            <button type="submit" class="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">
                                Envoyer Email
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- Montants -->
        <div class="space-y-2">
            <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
                <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-3">
                    <div class="text-xs text-gray-600 dark:text-gray-400">Total HT</div>
                    <div class="text-lg font-bold text-gray-900 dark:text-white">{{ format_currency($invoice->amount) }} {{ $invoice->currency }}</div>
                </div>
                
                @php
                    $withholdingTaxes = $invoice->invoiceTaxes->filter(function($invoiceTax) {
                        return $invoiceTax->tax && $invoiceTax->tax->is_withholding_tax;
                    });
                    $otherTaxes = $invoice->invoiceTaxes->filter(function($invoiceTax) {
                        return !$invoiceTax->tax || !$invoiceTax->tax->is_withholding_tax;
                    });
                @endphp
                
                @if($invoice->total_vat > 0)
                <div class="bg-green-50 dark:bg-green-900/20 rounded-lg p-3">
                    <div class="text-xs text-green-600 dark:text-green-400">TVA ({{ number_format(($invoice->total_vat / $invoice->amount) * 100, 0) }}%)</div>
                    <div class="text-lg font-bold text-green-600 dark:text-green-400">+{{ format_currency($invoice->total_vat) }} {{ $invoice->currency }}</div>
                </div>
                @endif
                
                <div class="bg-gray-100 dark:bg-gray-600 rounded-lg p-3">
                    <div class="text-xs text-gray-600 dark:text-gray-400">Total TTC</div>
                    <div class="text-lg font-bold text-gray-900 dark:text-white">{{ format_currency($invoice->total_ttc) }} {{ $invoice->currency }}</div>
                </div>
                
                @foreach($withholdingTaxes as $invoiceTax)
                <div class="bg-red-50 dark:bg-red-900/20 rounded-lg p-3">
                    <div class="text-xs text-red-600 dark:text-red-400">
                        {{ $invoiceTax->label_snapshot ?? ucfirst(str_replace('_', ' ', $invoiceTax->name_snapshot)) }}
                        ({{ number_format(abs($invoiceTax->value_snapshot), 2) }}%)
                    </div>
                    <div class="text-lg font-bold text-red-600 dark:text-red-400">{{ $invoiceTax->sign_snapshot }}{{ format_currency(abs($invoiceTax->amount_snapshot)) }} {{ $invoice->currency }}</div>
                </div>
                @endforeach
                
                @foreach($otherTaxes as $invoiceTax)
                <div class="bg-{{ $invoiceTax->sign_snapshot === '+' ? 'purple' : 'red' }}-50 dark:bg-{{ $invoiceTax->sign_snapshot === '+' ? 'purple' : 'red' }}-900/20 rounded-lg p-3">
                    <div class="text-xs text-{{ $invoiceTax->sign_snapshot === '+' ? 'purple' : 'red' }}-600 dark:text-{{ $invoiceTax->sign_snapshot === '+' ? 'purple' : 'red' }}-400">
                        {{ $invoiceTax->label_snapshot ?? ucfirst(str_replace('_', ' ', $invoiceTax->name_snapshot)) }}
                        @if($invoiceTax->type_snapshot === 'percent') ({{ number_format($invoiceTax->value_snapshot, 0) }}%)@endif
                    </div>
                    <div class="text-lg font-bold text-{{ $invoiceTax->sign_snapshot === '+' ? 'purple' : 'red' }}-600 dark:text-{{ $invoiceTax->sign_snapshot === '+' ? 'purple' : 'red' }}-400">{{ $invoiceTax->sign_snapshot }}{{ format_currency($invoiceTax->amount_snapshot) }} {{ $invoice->currency }}</div>
                </div>
                @endforeach
                
                <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-3 col-span-2 sm:col-span-{{ $otherTaxes->count() > 0 ? '3' : '1' }}">
                    <div class="text-xs text-blue-600 dark:text-blue-400">Net à payer</div>
                    <div class="text-lg font-bold text-blue-600 dark:text-blue-400 underline">{{ format_currency($invoice->net_amount) }} {{ $invoice->currency }}</div>
                </div>
            </div>

            <div class="grid grid-cols-2 gap-2">
                <div class="bg-green-50 dark:bg-green-900/20 rounded-lg p-3">
                    <div class="text-xs text-green-600 dark:text-green-400">Payé</div>
                    <div class="text-lg font-bold text-green-600 dark:text-green-400">{{ format_currency($invoice->paid_amount) }} {{ $invoice->currency }}</div>
                </div>
                <div class="bg-orange-50 dark:bg-orange-900/20 rounded-lg p-3">
                    <div class="text-xs text-orange-600 dark:text-orange-400">Restant</div>
                    <div class="text-lg font-bold text-orange-600 dark:text-orange-400">{{ format_currency($invoice->remaining_amount) }} {{ $invoice->currency }}</div>
                </div>
            </div>
        </div>

        <!-- Barre de progression -->
        <div class="mt-3">
            <div class="flex justify-between text-xs mb-1">
                <span class="text-gray-600 dark:text-gray-400">Progression du paiement</span>
                <span class="font-semibold text-gray-900 dark:text-white">{{ number_format($invoice->payment_percentage, 1) }}%</span>
            </div>
            <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                <div class="bg-green-600 h-2 rounded-full transition-all" style="width: {{ $invoice->payment_percentage }}%"></div>
            </div>
        </div>

        <!-- Statut -->
        <div class="mt-3">
            @if($invoice->is_overdue)
                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200">
                    EN RETARD ({{ $invoice->days_overdue }} jours)
                </span>
            @else
                @switch($invoice->status)
                    @case('non_payee')
                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">
                            Non payée
                        </span>
                        @break
                    @case('partiellement_payee')
                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200">
                            Partiellement payée
                        </span>
                        @break
                    @case('payee')
                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
                            Payée
                        </span>
                        @break
                    @case('annulee')
                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300">
                            Annulée
                        </span>
                        @break
                @endswitch
            @endif
        </div>
    </x-card>

    <!-- Rendez-vous et Paiements -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-3">
        <!-- Paiements -->
        <x-card class="lg:col-span-2">
        <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 enregistrés ({{ $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($normalPaymentsCount > 0 || $withholdingCount > 0)
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                    <thead class="bg-gray-50 dark:bg-gray-800">
                        <tr>
                            <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">N°</th>
                            <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Date</th>
                            <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Compte</th>
                            <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Méthode</th>
                            <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Montant</th>
                            <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Référence</th>
                            <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
                        @php
                            $paymentNumber = 0;
                            $paymentNumbers = [];
                            $reversalReferences = [];
                            // Pré-calculer les numéros pour TOUS les paiements (y compris retenues et annulations)
                            foreach($invoice->invoicePayments->sortBy('id') as $p) {
                                $paymentNumber++;
                                $paymentNumbers[$p->id] = $paymentNumber;
                                // Si c'est une annulation, stocker la référence ANN-XX
                                if ($p->isReversal() && $p->reversal_of_payment_id) {
                                    $originalNumber = $paymentNumbers[$p->reversal_of_payment_id] ?? 0;
                                    $reversalReferences[$p->id] = 'ANN-' . str_pad($originalNumber, 2, '0', STR_PAD_LEFT);
                                }
                            }
                        @endphp
                        @foreach($invoice->invoicePayments->sortByDesc('id') as $payment)
                        @if($payment->payment_method !== 'retenue_source')
                        <tr class="{{ $payment->isReversal() ? 'bg-red-50 dark:bg-red-900/10' : ($payment->isReversed() ? 'bg-gray-100 dark:bg-gray-700/50 opacity-75' : '') }}">
                            <td class="px-3 py-2 text-xs font-medium text-gray-900 dark:text-white">
                                @if($payment->isReversal())
                                    <span class="text-red-600 dark:text-red-400">{{ str_pad($paymentNumbers[$payment->id] ?? 0, 2, '0', STR_PAD_LEFT) }}</span>
                                @else
                                    {{ str_pad($paymentNumbers[$payment->id] ?? 0, 2, '0', STR_PAD_LEFT) }}
                                @endif
                            </td>
                            <td class="px-3 py-2 text-xs text-gray-900 dark:text-white">
                                {{ $payment->payment_date->format('d/m/Y') }}
                                @if($payment->isReversed())
                                    <span class="ml-1 text-[10px] text-red-600 dark:text-red-400">(Annulé)</span>
                                @endif
                            </td>
                            <td class="px-3 py-2 text-xs text-gray-900 dark:text-white">
                                {{ $payment->treasuryAccount->name ?? '-' }}
                            </td>
                            <td class="px-3 py-2 text-xs text-gray-900 dark:text-white">
                                @switch($payment->payment_method)
                                    @case('cash') Espèces @break
                                    @case('bank_transfer') Virement @break
                                    @case('check') Chèque @break
                                    @case('card') Carte @break
                                @endswitch
                            </td>
                            <td class="px-3 py-2 text-xs font-semibold {{ $payment->amount < 0 ? 'text-red-600 dark:text-red-400' : 'text-green-600 dark:text-green-400' }} whitespace-nowrap">
                                {{ $payment->amount < 0 ? '-' : '' }}{{ format_currency(abs($payment->amount)) }}<span class="text-[10px] ml-0.5">{{ $invoice->currency }}</span>
                            </td>
                            <td class="px-3 py-2 text-xs text-gray-500 dark:text-gray-400">
                                @if($payment->isReversal())
                                    <span class="text-red-600 dark:text-red-400">{{ $reversalReferences[$payment->id] ?? '' }}</span>
                                @else
                                    {{ $payment->reference ?? '-' }}
                                @endif
                                @if($payment->isReversal() && $payment->reversal_reason)
                                    <div class="text-[10px] text-red-600 dark:text-red-400 mt-0.5" title="{{ $payment->reversal_reason }}">
                                        {{ Str::limit($payment->reversal_reason, 30) }}
                                    </div>
                                @endif
                            </td>
                            <td class="px-3 py-2 text-xs">
                                <div class="flex items-center gap-2">
                                    @if($payment->canBeReversed())
                                        <button 
                                            type="button"
                                            onclick="document.getElementById('reverse-payment-modal-{{ $payment->id }}').classList.remove('hidden')" 
                                            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>
                            </td>
                        </tr>
                        @endif
                        @endforeach
                        @foreach($invoice->invoicePayments->sortByDesc('payment_date')->filter(fn($p) => $p->payment_method === 'retenue_source') as $withholdingPayment)
                        <tr class="bg-red-50 dark:bg-red-900/10">
                            <td class="px-3 py-2 text-xs font-medium text-red-600 dark:text-red-400">
                                {{ str_pad($paymentNumbers[$withholdingPayment->id] ?? 0, 2, '0', STR_PAD_LEFT) }}
                            </td>
                            <td class="px-3 py-2 text-xs text-gray-900 dark:text-white">
                                {{ $withholdingPayment->payment_date->format('d/m/Y') }}
                            </td>
                            <td class="px-3 py-2 text-xs text-gray-500 dark:text-gray-400">
                                -
                            </td>
                            <td class="px-3 py-2 text-xs font-medium">
                                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200">
                                    {{ $withholdingPayment->notes ?? 'Retenue' }}
                                </span>
                            </td>
                            <td class="px-3 py-2 text-xs font-semibold text-red-600 dark:text-red-400 whitespace-nowrap">
                                -{{ format_currency($withholdingPayment->amount) }}<span class="text-[10px] ml-0.5">{{ $invoice->currency }}</span>
                            </td>
                            <td class="px-3 py-2 text-xs text-gray-500 dark:text-gray-400">
                                {{ $withholdingPayment->reference ?? '-' }}
                            </td>
                            <td class="px-3 py-2 text-xs">
                                -
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <div class="text-center py-8">
                <p class="text-sm text-gray-500 dark:text-gray-400">Aucun paiement enregistré</p>
            </div>
        @endif
        </x-card>

        <!-- Rendez-vous -->
        @if($invoice->appointments->count() > 0)
        <x-card>
            <x-slot name="header">
                <h3 class="text-sm font-semibold text-gray-900 dark:text-white">Rendez-vous ({{ $invoice->appointments->count() }})</h3>
            </x-slot>
            <div class="space-y-2">
                @foreach($invoice->appointments as $appointment)
                <a href="{{ route('provider.appointments.calendar', ['date' => $appointment->start_time->format('Y-m-d'), 'highlight' => $appointment->uuid]) }}" class="block p-2 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors">
                    <div class="flex justify-between items-start">
                        <div class="flex-1">
                            <div class="text-sm font-medium text-gray-900 dark:text-white">{{ $appointment->service->name ?? 'Service' }}</div>
                            <div class="text-xs text-gray-500 dark:text-gray-400">{{ $appointment->start_time->format('d/m/Y H:i') }}</div>
                        </div>
                        <div class="text-right">
                            @php
                                $ht = $appointment->price_at_booking;
                                $vatRate = $appointment->service->vat_rate ?? 0;
                                $vat = $ht * ($vatRate / 100);
                                $ttc = $ht + $vat;
                            @endphp
                            <div class="text-xs text-gray-500 dark:text-gray-400">HT: {{ format_currency($ht) }}</div>
                            <div class="text-sm font-semibold text-gray-900 dark:text-white">TTC: {{ format_currency($ttc) }}</div>
                        </div>
                    </div>
                </a>
                @endforeach
            </div>
        </x-card>
        @endif
    </div>

    <!-- Date d'échéance et relance -->
    @if($invoice->is_overdue && $invoice->remaining_amount > 0)
    <x-card>
        <div class="flex justify-between items-center">
            <div>
                <div class="text-sm font-semibold text-red-600 dark:text-red-400">
                    Facture en retard de {{ $invoice->days_overdue }} jours
                </div>
                @if($invoice->reminders->count() > 0)
                    <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                        Dernière relance: {{ $invoice->reminders->last()->sent_at->format('d/m/Y à H:i') }}
                    </div>
                @endif
            </div>
            <form method="POST" action="{{ route('provider.invoices.remind', $invoice->uuid) }}">
                @csrf
                <button type="submit" class="inline-flex items-center px-3 py-1.5 bg-red-600 hover:bg-red-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="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>
                    Relancer client
                </button>
            </form>
        </div>
    </x-card>
    @endif
</div>

<!-- Modal Ajouter paiement -->
<div id="add-payment-modal" class="hidden fixed inset-0 bg-gray-500 bg-opacity-75 z-50 flex items-center justify-center p-4" onclick="if(event.target === this) event.preventDefault()">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full max-h-[90vh] overflow-y-auto">
        <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>

<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 -->
@foreach($invoice->invoicePayments->where('payment_method', '!=', 'retenue_source') as $payment)
@if($payment->canBeReversed())
<div id="reverse-payment-modal-{{ $payment->id }}" 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.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="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 l'annulation
                </x-button>
            </div>
        </form>
    </div>
</div>
@endif
@endforeach
@endsection