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

name('payments.pending');

new class extends Component {
    public $payments;
    public $filter = 'all'; // all, cheque, trait
    public $dateFrom = '';
    public $dateTo = '';

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

    public function loadPayments()
    {
        $query = Payment::with('client')
            ->whereIn('payment_mode', ['cheque', 'trait']);

        // Filter by payment mode
        if ($this->filter !== 'all') {
            $query->where('payment_mode', $this->filter);
        }

        // Filter by activation date
        if ($this->dateFrom) {
            $query->whereDate('date_activation', '>=', $this->dateFrom);
        }

        if ($this->dateTo) {
            $query->whereDate('date_activation', '<=', $this->dateTo);
        }

        $this->payments = $query->latest()->get();
    }

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

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

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

    public function clearFilters()
    {
        $this->filter = 'all';
        $this->dateFrom = '';
        $this->dateTo = '';
        $this->loadPayments();
    }

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

<x-layouts.app>
    @volt('payments.pending')
        <x-app.container class="max-w-full">

            <div class="flex items-center justify-between mb-5">
                <x-app.heading
                    title="Paiements par chèque et traite"
                    description="Liste consultative des paiements par chèque et traite"
                    :border="false"
                />
                <x-button tag="a" href="/payment/create">Nouveau paiement</x-button>
            </div>

            <!-- Filters -->
            <div class="mb-6">
                <div class="flex flex-wrap items-center gap-6 p-4 bg-gray-50 rounded-lg border border-gray-200">
                    <!-- Payment Mode Filter -->
                    <div class="flex items-center space-x-3">
                        <label for="filter" class="text-sm font-medium text-gray-600 whitespace-nowrap">Mode:</label>
                        <select id="filter" wire:model.live="filter" class="text-sm border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 py-2 px-3 min-w-[120px]">
                            <option value="all">Tous</option>
                            <option value="cheque">Chèque</option>
                            <option value="trait">Trait</option>
                        </select>
                    </div>

                    <!-- Date From Filter -->
                    <div class="flex items-center space-x-3">
                        <label for="dateFrom" class="text-sm font-medium text-gray-600 whitespace-nowrap">De:</label>
                        <input type="date" id="dateFrom" wire:model.live="dateFrom" class="text-sm border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 py-2 px-3 min-w-[140px]">
                    </div>

                    <!-- Date To Filter -->
                    <div class="flex items-center space-x-3">
                        <label for="dateTo" class="text-sm font-medium text-gray-600 whitespace-nowrap">À:</label>
                        <input type="date" id="dateTo" wire:model.live="dateTo" class="text-sm border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 py-2 px-3 min-w-[140px]">
                    </div>

                    <!-- Clear Filters Button -->
                    <button wire:click="clearFilters" class="flex items-center space-x-2 px-4 py-2 text-sm font-medium text-gray-600 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-indigo-500 transition-colors">
                        <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="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    </button>

                    <!-- Results Counter -->
                    <div class="ml-auto text-sm text-gray-500 bg-white px-3 py-2 rounded border">
                        {{ $payments->count() }} paiement(s)
                    </div>
                </div>
            </div>

            

            @if($this->payments?->isEmpty())
                <div class="w-full p-12 text-center bg-gray-50 rounded-lg border border-gray-200">
                    <div class="text-gray-500">
                        <svg class="mx-auto h-10 w-10 text-gray-400 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 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>
                        <p class="text-sm font-medium text-gray-900 mb-1">Aucun paiement par chèque ou traite</p>
                        <p class="text-xs text-gray-500">Aucun paiement ne correspond à vos critères</p>
                        @if($filter !== 'all' || $dateFrom || $dateTo)
                            <button 
                                wire:click="clearFilters" 
                                class="mt-2 text-xs text-indigo-600 hover:text-indigo-500 font-medium"
                            >
                                Effacer les filtres
                            </button>
                        @endif
                    </div>
                </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">Date de création de l'instrument</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date d'échéance</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>
                            </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') : '-' }}
                                    </td>
                                    <td class="px-4 py-3 text-sm text-gray-500">
                                        {{ $payment->date_entree ? $payment->date_entree->format('d/m/Y') : '-' }}
                                    </td>
                                    <td class="px-4 py-3 text-sm text-gray-500">
                                        {{ $payment->date_activation ? $payment->date_activation->format('d/m/Y') : '-' }}
                                    </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>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif

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