<?php
use function Laravel\Folio\{middleware, name};
use App\Models\Payment;
use Livewire\Volt\Component;
middleware('auth');

name('payments');

new class extends Component {
    public $payments;

    public function mount()
    {
        $this->loadPayments();
    }

    
    public function loadPayments()
    {
        $this->payments = Payment::with('client')->latest()->get();
    }

    public function deletePayment($paymentId)
    {
        Payment::find($paymentId)->delete();
        $this->loadPayments();
    }

    // No validate/reject actions anymore
};
?>

<x-layouts.app>
    @volt('payments')
        <x-app.container class="max-w-full">
            <div class="flex items-center justify-between mb-5">
                <x-app.heading
                    title="Liste des paiements"
                    description="Vérifiez vos paiements ci-dessous"
                    :border="false"
                />
                <div class="flex space-x-3">
                    <x-button tag="a" href="/payment/pending" class="bg-yellow-600 hover:bg-yellow-700">
                        Chèques & Traites
                    </x-button>
                    <x-button tag="a" href="/payment/create">Nouveau paiement</x-button>
                </div>
            </div>

            

            @if(session('error'))
                <div class="mb-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded">
                    {{ session('error') }}
                </div>
            @endif

            @if($this->payments?->isEmpty())
                <div class="w-full p-20 text-center bg-gray-100 rounded-xl">
                    <p class="text-gray-500">Vous n'avez pas encore de paiements.</p>
                </div>
            @else
                <div class="overflow-x-auto border rounded-lg">
                    <table class="min-w-full bg-white">
                        <thead class="bg-gray-200">
                            <tr>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Client</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Montant (DT)</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Mode de paiement</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date du paiement</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Propriétaire</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">N° instrument</th>
                                <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($this->payments as $payment)
                                <tr class="border-b border-gray-200">
                                    <td class="px-4 py-3">
                                        <div class="font-medium text-gray-900">
                                            {{ $payment->client->firstname }} {{ $payment->client->lastname }}
                                        </div>
                                        <div class="text-sm text-gray-500">
                                            {{ $payment->client->phone_number }}
                                        </div>
                                    </td>
                                    <td class="px-4 py-3">
                                        <span class="font-medium text-gray-900">
                                            {{ number_format($payment->amount, 2) }} DT
                                        </span>
                                    </td>
                                    <td class="px-4 py-3">
                                        <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">
                                            {{ ucfirst(str_replace('_', ' ', $payment->payment_mode)) }}
                                        </span>
                                    </td>
                                    <td class="px-4 py-3 text-sm text-gray-500">
                                        {{ $payment->creation_date ? $payment->creation_date->format('d/m/Y') : '-' }}
                                        <!-- <br><small class="text-gray-400">Enregistré le {{ $payment->created_at->format('d/m/Y à H:i') }}</small> -->
                                        @if($payment->date_entree)
                                            <br><small class="text-gray-400">Création instrument: {{ $payment->date_entree->format('d/m/Y') }}</small>
                                        @endif
                                        @if($payment->date_activation)
                                            <br><small class="text-gray-400">Échéance: {{ $payment->date_activation->format('d/m/Y') }}</small>
                                        @endif
                                    </td>
                                    <td class="px-4 py-3 text-sm text-gray-500">{{ $payment->instrument_owner ?? '-' }}</td>
                                    <td class="px-4 py-3 text-sm text-gray-500">{{ $payment->instrument_number ?? '-' }}</td>
                                    <td class="px-4 py-3 text-right">
                                        <div class="flex space-x-2 justify-end">
                                            <x-button 
                                                tag="a" 
                                                href="/payment/{{ $payment->id }}/edit"
                                                class="p-2 text-white bg-blue-600 rounded hover:bg-blue-700 transition-colors"
                                                title="Modifier le paiement"
                                            >
                                                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                                                </svg>
                                            </x-button>

                                            <x-button
                                                tag="a"
                                                href="/payment/{{ $payment->id }}/pdf"
                                                class="p-2 text-white bg-green-600 rounded hover:bg-green-700 transition-colors"
                                                title="Générer le PDF du paiement"
                                            >
                                                <svg class="h-4 w-4" 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>
                                            </x-button>

                                            <button 
                                                type="button" 
                                                wire:click="deletePayment({{ $payment->id }})"
                                                wire:confirm="Êtes-vous sûr de vouloir supprimer ce paiement ?"
                                                class="p-2 text-white bg-red-600 rounded hover:bg-red-700 transition-colors"
                                                title="Supprimer le paiement"
                                            >
                                                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                                                </svg>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif

        </x-app.container>
    @endvolt
</x-layouts.app>
