@extends('layouts.provider')

@section('title', 'Paiements - Achat')
@section('page-title', 'Finances > Achats > Paiements')

@section('content')
<div class="space-y-6">
    <!-- Informations de la facture -->
    <x-card>
        <div class="flex justify-between items-start">
            <div class="flex-1">
                <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-2">
                    Facture {{ $expense->supplier->name ?? 'N/A' }}
                </h2>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
                    <div>
                        <span class="text-gray-500 dark:text-gray-400">Type:</span>
                        <span class="font-medium text-gray-900 dark:text-white ml-1">{{ $expense->expenseType->name }}</span>
                    </div>
                    @if($expense->supplier_invoice_no)
                    <div>
                        <span class="text-gray-500 dark:text-gray-400">N° Facture:</span>
                        <span class="font-medium text-gray-900 dark:text-white ml-1">{{ $expense->supplier_invoice_no }}</span>
                    </div>
                    @endif
                    <div>
                        <span class="text-gray-500 dark:text-gray-400">Date:</span>
                        <span class="font-medium text-gray-900 dark:text-white ml-1">{{ ($expense->invoice_date ?? $expense->expense_date)->format('d/m/Y') }}</span>
                    </div>
                    @if($expense->due_date)
                    <div>
                        <span class="text-gray-500 dark:text-gray-400">Échéance:</span>
                        <span class="font-medium {{ $expense->isOverdue() ? 'text-red-600' : 'text-gray-900 dark:text-white' }} ml-1">{{ $expense->due_date->format('d/m/Y') }}</span>
                    </div>
                    @endif
                </div>
            </div>
            <x-button href="{{ route('provider.finances.index', ['tab' => 'achats']) }}" variant="secondary" size="sm">
                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                </svg>
                Retour
            </x-button>
        </div>
    </x-card>

    <!-- Résumé financier -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <x-card>
            <div class="text-center">
                <p class="text-sm text-gray-500 dark:text-gray-400 mb-1">Montant total</p>
                <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ format_currency($expense->amount) }} {{ $expense->currency }}</p>
            </div>
        </x-card>
        <x-card>
            <div class="text-center">
                <p class="text-sm text-gray-500 dark:text-gray-400 mb-1">Montant payé</p>
                <p class="text-2xl font-bold text-green-600 dark:text-green-400">{{ format_currency($expense->totalPaid) }} {{ $expense->currency }}</p>
            </div>
        </x-card>
        <x-card>
            <div class="text-center">
                <p class="text-sm text-gray-500 dark:text-gray-400 mb-1">Restant à payer</p>
                <p class="text-2xl font-bold {{ $expense->remainingAmount > 0 ? 'text-red-600 dark:text-red-400' : 'text-gray-900 dark:text-white' }}">{{ format_currency($expense->remainingAmount) }} {{ $expense->currency }}</p>
            </div>
        </x-card>
    </div>

    <!-- Liste des paiements -->
    <x-card>
        <x-slot name="header">
            <div class="flex justify-between items-center">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Paiements ({{ $payments->count() }})</h3>
                @if($expense->remainingAmount > 0 && $expense->status !== 'cancelled')
                <button onclick="document.getElementById('payment-form').classList.toggle('hidden')" class="inline-flex items-center px-4 py-2 bg-primary text-white text-sm font-medium rounded-lg hover:bg-primary-600">
                    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                    </svg>
                    Ajouter un paiement
                </button>
                @endif
            </div>
        </x-slot>

        <!-- Formulaire d'ajout de paiement (masqué par défaut) -->
        @if($expense->remainingAmount > 0 && $expense->status !== 'cancelled')
        <div id="payment-form" class="hidden mb-6 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
            <form action="{{ route('provider.expense-payments.store', $expense->uuid) }}" method="POST" class="space-y-4">
                @csrf
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <x-input 
                        type="number" 
                        name="amount" 
                        label="Montant" 
                        value="{{ old('amount', $expense->remainingAmount) }}"
                        step="0.001"
                        max="{{ $expense->remainingAmount }}"
                        required
                        error="{{ $errors->first('amount') }}"
                    />
                    <x-input 
                        type="date" 
                        name="payment_date" 
                        label="Date de paiement" 
                        value="{{ old('payment_date', date('Y-m-d')) }}"
                        required
                        error="{{ $errors->first('payment_date') }}"
                    />
                    <x-select name="treasury_account_id" label="Compte de trésorerie" required error="{{ $errors->first('treasury_account_id') }}">
                        <option value="">-- Sélectionner --</option>
                        @foreach($treasuryAccounts as $account)
                            <option value="{{ $account->id }}" {{ old('treasury_account_id') == $account->id ? 'selected' : '' }}>
                                {{ $account->name }} ({{ format_currency($account->balance) }} {{ $account->currency }})
                            </option>
                        @endforeach
                    </x-select>
                    <x-select name="payment_method" label="Mode de paiement" error="{{ $errors->first('payment_method') }}">
                        <option value="">-- Sélectionner --</option>
                        <option value="cash" {{ old('payment_method') === 'cash' ? 'selected' : '' }}>Espèces</option>
                        <option value="check" {{ old('payment_method') === 'check' ? 'selected' : '' }}>Chèque</option>
                        <option value="bank_transfer" {{ old('payment_method') === 'bank_transfer' ? 'selected' : '' }}>Virement</option>
                        <option value="card" {{ old('payment_method') === 'card' ? 'selected' : '' }}>Carte</option>
                        <option value="other" {{ old('payment_method') === 'other' ? 'selected' : '' }}>Autre</option>
                    </x-select>
                    <x-input 
                        type="text" 
                        name="reference" 
                        label="Référence" 
                        value="{{ old('reference') }}"
                        placeholder="N° chèque, virement..."
                        error="{{ $errors->first('reference') }}"
                    />
                    <div class="md:col-span-2">
                        <x-textarea 
                            name="notes" 
                            label="Notes" 
                            rows="2"
                            value="{{ old('notes') }}"
                            error="{{ $errors->first('notes') }}"
                        />
                    </div>
                </div>
                <div class="flex gap-2">
                    <x-button type="submit">Enregistrer le paiement</x-button>
                    <x-button type="button" variant="secondary" onclick="document.getElementById('payment-form').classList.add('hidden')">Annuler</x-button>
                </div>
            </form>
        </div>
        @endif

        @if($payments->count() > 0)
        <div class="space-y-3">
            @foreach($payments as $payment)
            <div class="p-4 border border-gray-200 dark:border-gray-700 rounded-lg {{ $payment->isCancellation() ? 'bg-red-50 dark:bg-red-900/10' : '' }}">
                <div class="flex justify-between items-start">
                    <div class="flex-1">
                        <div class="flex items-center gap-2 mb-2">
                            <span class="text-lg font-bold {{ $payment->isCancellation() ? 'text-red-600 dark:text-red-400' : 'text-gray-900 dark:text-white' }}">
                                {{ $payment->isCancellation() ? '-' : '' }}{{ format_currency(abs($payment->amount)) }} {{ $expense->currency }}
                            </span>
                            @if($payment->isCancellation())
                                <span class="px-2 py-0.5 text-xs bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200 rounded-full">Annulation</span>
                            @endif
                        </div>
                        <div class="text-sm text-gray-600 dark:text-gray-400 space-y-1">
                            <p><strong>Date:</strong> {{ $payment->payment_date->format('d/m/Y') }}</p>
                            <p><strong>Compte:</strong> {{ $payment->treasuryAccount->name }}</p>
                            @if($payment->payment_method)
                                <p><strong>Mode:</strong> 
                                    @switch($payment->payment_method)
                                        @case('cash') Espèces @break
                                        @case('check') Chèque @break
                                        @case('bank_transfer') Virement @break
                                        @case('card') Carte @break
                                        @default {{ $payment->payment_method }}
                                    @endswitch
                                </p>
                            @endif
                            @if($payment->reference)
                                <p><strong>Référence:</strong> {{ $payment->reference }}</p>
                            @endif
                            @if($payment->notes)
                                <p><strong>Notes:</strong> {{ $payment->notes }}</p>
                            @endif
                        </div>
                    </div>
                    @if(!$payment->isCancellation() && !$payment->isReversed())
                    <button 
                        type="button"
                        onclick="document.getElementById('cancel-payment-modal-{{ $payment->id }}').classList.remove('hidden')"
                        class="inline-flex items-center px-3 py-1.5 bg-orange-600 hover:bg-orange-700 text-white text-xs font-semibold rounded-lg transition-colors"
                    >
                        Annuler
                    </button>
                    @endif
                </div>
            </div>
            @endforeach
        </div>
        @else
        <div class="text-center py-12">
            <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" />
            </svg>
            <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">Aucun paiement</h3>
            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Cette facture n'a pas encore été payée.</p>
        </div>
        @endif
    </x-card>
</div>

@if($errors->any())
<script>
    document.addEventListener('DOMContentLoaded', function() {
        document.getElementById('payment-form').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 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.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>

                <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 l'annulation
                </x-button>
            </div>
        </form>
    </div>
</div>
@endif
@endforeach
@endsection