@extends('layouts.provider')

@section('title', 'Détail de l\'achat')
@section('page-title', 'Finances > Détail de l\'achat')

@section('content')
<div class="space-y-3">
    <x-finances-tabs active="achats" />
    
    @if($expense->isOverdue() && $expense->remainingAmount > 0)
    <div class="alert-item bg-red-50 dark:bg-red-900/20 border-l-4 border-red-500 p-4 rounded-lg shadow-md transition-all duration-300">
        <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($expense->remainingAmount) }} {{ $expense->currency }} impayés depuis {{ $expense->due_date->diffInDays(now()->startOfDay()) }} jours
                </p>
                <p class="text-xs text-red-600 mt-1">Échéance dépassée : {{ $expense->due_date->format('d/m/y') }}</p>
            </div>
        </div>
    </div>
    @elseif($expense->due_date && $expense->due_date >= now()->startOfDay() && $expense->due_date <= now()->addDays(7)->endOfDay() && $expense->remainingAmount > 0)
    <div class="alert-item bg-yellow-50 dark:bg-yellow-900/20 border-l-4 border-yellow-500 p-4 rounded-lg shadow-md transition-all duration-300">
        <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($expense->remainingAmount) }} {{ $expense->currency }} à échéance dans {{ now()->startOfDay()->diffInDays($expense->due_date) }} jour{{ now()->startOfDay()->diffInDays($expense->due_date) > 1 ? 's' : '' }}
                </p>
                <p class="text-xs text-yellow-600 mt-1">Échéance : {{ $expense->due_date->format('d/m/y') }}</p>
            </div>
        </div>
    </div>
    @elseif($expense->remainingAmount > 0 && !$expense->isCancelled())
    <div class="alert-item bg-orange-50 dark:bg-orange-900/20 border-l-4 border-orange-500 p-4 rounded-lg shadow-md transition-all duration-300">
        <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($expense->remainingAmount) }} {{ $expense->currency }} à payer
                </p>
                <p class="text-xs text-orange-600 mt-1">{{ $expense->totalPaid > 0 ? 'Partiellement payé' : 'Achat non payé' }}{{ $expense->due_date ? ' - Échéance : ' . $expense->due_date->format('d/m/y') : '' }}</p>
            </div>
        </div>
    </div>
    @endif
    
    <!-- Bande sticky avec numéro de facture et statut -->
    <div id="expense-header" class="sticky top-[62px] z-[11] px-4 py-3 rounded-lg shadow-sm bg-blue-50 dark:bg-blue-900 transition-all duration-300">
        <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">{{ $expense->supplier_invoice_no ?? 'Sans facture' }}</h1>
                <span class="px-2 py-1 text-xs font-semibold rounded-full whitespace-nowrap {{ $expense->isCancelled() ? 'bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-300' : ($expense->status === 'paid' ? 'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300' : (in_array($expense->status, ['partial', 'partly_paid']) ? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/40 dark:text-yellow-300' : 'bg-orange-100 text-orange-800 dark:bg-orange-900/40 dark:text-orange-300')) }}">
                    {{ $expense->isCancelled() ? 'Annulé' : ($expense->status === 'paid' ? 'Payé' : (in_array($expense->status, ['partial', 'partly_paid']) ? 'Partiellement payé' : 'Impayé')) }}
                </span>
            </div>
        </div>
    </div>
    
    <x-card>
        <div class="mb-3">
            <div class="flex justify-between items-start mb-2">
                <div class="flex-1">
                    <h1 class="text-xl font-bold text-gray-900 dark:text-white">{{ $expense->expenseType->name ?? 'N/A' }}</h1>
                    <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">{{ $expense->supplier->name ?? 'Sans fournisseur' }}</p>
                </div>
                <div class="flex gap-2">
                    <a href="{{ route('provider.finances.index', ['tab' => 'achats']) }}" 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(!$expense->isCancelled())
                    @if(can_access_module('expenses', 'update'))
                    <a href="{{ route('provider.expenses.edit', $expense->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>
                    @endif
                    @if($expense->totalPaid > 0 && can_access_module('expenses', 'cancel'))
                    <a href="{{ route('provider.expenses.cancel', $expense->uuid) }}" class="w-9 h-9 bg-red-100 dark:bg-red-900/20 text-red-600 dark:text-red-400 rounded-lg hover:bg-red-200 dark:hover:bg-red-900/40 flex items-center justify-center" title="Annuler l'achat">
                        <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>
                    @elseif($payments->where('amount', '>', 0)->count() > 0 && can_access_module('expenses', 'cancel'))
                    <a href="{{ route('provider.expenses.cancel', $expense->uuid) }}" class="w-9 h-9 bg-red-100 dark:bg-red-900/20 text-red-600 dark:text-red-400 rounded-lg hover:bg-red-200 dark:hover:bg-red-900/40 flex items-center justify-center" title="Annuler l'achat">
                        <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>
                    @elseif($payments->count() === 0 && can_access_module('expenses', 'delete'))
                    <div class="inline-block">
                        <x-delete-confirm 
                            :action="route('provider.expenses.destroy', $expense->uuid)" 
                            message="Êtes-vous sûr de vouloir supprimer cet achat ?"
                            buttonVariant="icon"
                            class="w-9 h-9 bg-red-100 dark:bg-red-900/20 text-red-600 dark:text-red-400 rounded-lg hover:bg-red-200 dark:hover:bg-red-900/40 flex items-center justify-center"
                        />
                    </div>
                    @endif
                    @endif
                </div>
            </div>
            <div class="flex gap-4 text-xs text-gray-500 dark:text-gray-500 flex-wrap md:flex-nowrap">
                <div class="whitespace-nowrap">
                    <span class="text-gray-400">Date:</span> {{ $expense->expense_date->format('d/m/y') }}
                </div>
                <div class="whitespace-nowrap">
                    <span class="text-gray-400">Facture:</span> {{ $expense->invoice_date ? $expense->invoice_date->format('d/m/y') : '-' }}
                </div>
                <div class="whitespace-nowrap">
                    <span class="text-gray-400">Échéance:</span> <span class="{{ $expense->isOverdue() ? 'text-red-600 dark:text-red-400 font-medium' : '' }}">{{ $expense->due_date ? $expense->due_date->format('d/m/y') : '-' }}</span>
                </div>
            </div>
            @if($expense->notes)
            <p class="text-xs text-gray-600 dark:text-gray-400 mt-2 italic">{{ $expense->notes }}</p>
            @endif
        </div>

        <!-- Montants -->
        @if($expense->status === 'paid')
        <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">Montant</div>
            <div class="text-lg font-bold text-green-600 dark:text-green-400">{{ format_currency($expense->amount) }} {{ $expense->currency }}</div>
        </div>
        @else
        <div class="grid grid-cols-2 md:grid-cols-3 gap-2">
            <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">Montant total</div>
                <div class="text-lg font-bold text-red-600 dark:text-red-400">{{ format_currency($expense->amount) }} {{ $expense->currency }}</div>
            </div>
            
            <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($expense->totalPaid) }} {{ $expense->currency }}</div>
            </div>
            
            <div class="bg-orange-50 dark:bg-orange-900/20 rounded-lg p-3 col-span-2 md:col-span-1">
                <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($expense->remainingAmount) }} {{ $expense->currency }}</div>
            </div>
        </div>
        @endif
    </x-card>

    <!-- Paiements -->
    <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">Paiements ({{ $payments->count() }})</h3>
                @if($expense->remainingAmount > 0 && !$expense->isCancelled() && can_access_module('expenses', 'add_payment'))
                <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>
        </x-slot>

        @if($payments->count() > 0)
        <div class="text-xs text-gray-600 dark:text-gray-400 mb-2">
            Payé: {{ format_currency($expense->totalPaid) }} / {{ format_currency($expense->amount) }} {{ $expense->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: {{ ($expense->totalPaid / $expense->amount) * 100 }}%"></div>
        </div>
        
        <div class="space-y-2">
            @php
                $paymentNumber = 0;
                $paymentNumbers = [];
                foreach($payments->sortBy('id') as $p) {
                    $paymentNumber++;
                    $paymentNumbers[$p->id] = $paymentNumber;
                }
            @endphp
            @foreach($payments->sortByDesc('id') as $payment)
            <div class="flex justify-between items-center text-xs p-2 rounded {{ $payment->isCancellation() ? '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->isCancellation())
                            @php
                                $cancelledPaymentId = $payment->cancelled_payment_id;
                                $cancelledPaymentNumber = str_pad($paymentNumbers[$cancelledPaymentId] ?? 0, 2, '0', STR_PAD_LEFT);
                            @endphp
                            Annulation · <a href="#" data-highlight-payment="{{ $cancelledPaymentId }}" class="text-blue-600 dark:text-blue-400 hover:underline">#{{ $cancelledPaymentNumber }}</a> · {{ $payment->notes }}
                        @else
                            @if($payment->payment_method)
                                @switch($payment->payment_method)
                                    @case('cash') Espèces @break
                                    @case('bank_transfer') Virement @break
                                    @case('check') Chèque @break
                                    @case('card') Carte @break
                                    @default {{ $payment->payment_method }}
                                @endswitch
                            @else
                                -
                            @endif
                            @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 ? 'text-red-600 dark:text-red-400' : 'text-green-600 dark:text-green-400' }}">
                        {{ $payment->amount < 0 ? '-' : '' }}{{ format_currency(abs($payment->amount)) }}
                    </div>
                    @if(!$payment->isCancellation() && !$payment->isReversed() && can_access_module('expenses', 'cancel_payment'))
                    <button 
                        type="button"
                        onclick="document.getElementById('cancel-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>
            </div>
            @endforeach
        </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>
</div>

<!-- Modal Ajouter paiement -->
<div id="add-payment-modal" class="hidden fixed inset-0 bg-gray-500 bg-opacity-75 z-40 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.expense-payments.store', $expense->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 }" x-cloak>
                <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" x-cloak class="text-sm text-red-600 dark:text-red-400 mt-1">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" 
                            id="expense_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 }}" data-balance="{{ $account->current_balance }}" {{ old('treasury_account_id') == $account->id ? 'selected' : '' }}>
                                    {{ $account->name }} ({{ number_format($account->current_balance, 2) }} {{ $account->currency }})
                                </option>
                            @endforeach
                        </select>
                        <p x-show="treasuryError" x-cloak class="text-sm text-red-600 dark:text-red-400 mt-1">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', $expense->remainingAmount) }}"
                        step="0.001"
                        min="1"
                        max="{{ $expense->remainingAmount }}"
                        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($expense->remainingAmount) }} {{ $expense->currency }}</p>
                    <p x-show="amountError" x-cloak class="text-sm text-red-600 dark:text-red-400 mt-1">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" id="expense-submit-btn" 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;
    
    if (!dateInput.value || dateInput.value === '') {
        if (alpineComponent && alpineComponent.__x) {
            alpineComponent.__x.$data.dateError = true;
        }
        hasError = true;
    }
    
    if (!treasuryAccount.value || treasuryAccount.value === '') {
        if (alpineComponent && alpineComponent.__x) {
            alpineComponent.__x.$data.treasuryError = true;
        }
        hasError = true;
    }
    
    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>

@if($errors->any())
<script>
    document.addEventListener('DOMContentLoaded', function() {
        document.getElementById('add-payment-modal').classList.remove('hidden');
    });
</script>
@endif

<!-- Modals d'annulation de paiement -->
@foreach($payments as $payment)
@if(!$payment->isCancellation() && !$payment->isReversed())
<div id="cancel-payment-modal-{{ $payment->id }}" 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.expense-payments.cancel', [$expense->uuid, $payment->uuid]) }}" 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) }} {{ $expense->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="notes" 
                        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."
                    ></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('cancel-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

<x-insufficient-balance-modal 
    accountSelectId="expense_treasury_account_id" 
    submitButtonId="expense-submit-btn" 
    :amount="$expense->remainingAmount" 
/>


@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const urlParams = new URLSearchParams(window.location.search);
    const highlight = urlParams.get('highlight');
    
    if (highlight && highlight.startsWith('payment-')) {
        const paymentId = highlight.replace('payment-', '');
        const paymentRow = document.querySelector(`[data-payment-id="${paymentId}"]`);
        
        if (paymentRow) {
            // Scroll to the payment row
            setTimeout(() => {
                paymentRow.scrollIntoView({ behavior: 'smooth', block: 'center' });
            }, 300);
            
            // Add highlight effect
            paymentRow.classList.add('ring-2', 'ring-blue-500', '!bg-blue-100', 'dark:!bg-blue-900/40');
            
            // Remove highlight after 3 seconds
            setTimeout(() => {
                paymentRow.classList.remove('ring-2', 'ring-blue-500', '!bg-blue-100', 'dark:!bg-blue-900/40');
                
                // Clean URL
                const url = new URL(window.location);
                url.searchParams.delete('highlight');
                window.history.replaceState({}, '', url);
            }, 3000);
        }
    }

    // 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>
@endpush