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

name('clients');

new class extends Component {
    public $clients;
    public $search = '';

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

    public function loadClients()
    {
        $query = Client::with(['orders', 'payments']);

        if ($this->search) {
            $query->where(function($q) {
                $q->where('firstname', 'like', '%' . $this->search . '%')
                  ->orWhere('lastname', 'like', '%' . $this->search . '%')
                  ->orWhere('phone_number', 'like', '%' . $this->search . '%')
                  ->orWhere('adress', 'like', '%' . $this->search . '%')
                  ->orWhere('taxNumber', 'like', '%' . $this->search . '%');
            });
        }

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

    public function updatedSearch()
    {
        $this->loadClients();
    }

    // Example method if you want to restore delete functionality later:
    public function deleteClient($clientId)
    {
        Client::find($clientId)->delete();
        $this->loadClients();
    }
};
?>

<x-layouts.app>
    @volt('clients')
        <x-app.container class="max-w-full">
            <div class="flex items-center justify-between mb-5">
                <x-app.heading
                    title="Liste des clients"
                    description="Vérifiez vos clients ci-dessous"
                    :border="false"
                />
                <x-button tag="a" href="/client/create">Nouveau client</x-button>
            </div>

        <!-- Filters -->
        <div class="mb-6">
        <div class="flex items-center justify-between mb-5 ">
            <!-- Champ de recherche -->
            <div class="relative w-full md:w-1/2 lg:w-1/2">


            <input type="text" id="search" wire:model.live.debounce.300ms="search"
                placeholder="Rechercher par nom ou numéro de téléphone..."
                class="block w-full pl-10 pr-10 py-2 border border-gray-300 rounded-md shadow-sm
                    focus:border-indigo-400 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
                    transition duration-200 pl-10"  />

            @if($search)
            <button wire:click="$set('search', '')"
                class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 transition">
                <svg class="h-5 w-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" />
                </svg>
            </button>
            @endif
            </div>


            <!-- Résumé du nombre de clients -->
            <div
            class="text-sm text-gray-600 bg-gray-50 px-4 py-2 rounded-md border border-gray-200 shadow-sm w-fit md:ml-auto ml-4 ">
            @if($search)
            🔍 {{ $clients->count() }} client(s) trouvé(s)
            @else
            👥 {{ $clients->count() }} client(s) au total
            @endif
            </div>
        </div>
        </div>

            @if($this->clients?->isEmpty())
                <div class="w-full p-20 text-center bg-gray-100 rounded-xl">
                    @if($search)
                        <div class="text-gray-500">
                            <svg class="mx-auto h-12 w-12 text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                            </svg>
                            <p class="text-lg font-medium text-gray-900 mb-2">Aucun client trouvé</p>
                            <p class="text-gray-500">Aucun client correspond à vos critères de recherche "{{ $search }}"</p>
                            <button 
                                wire:click="$set('search', '')" 
                                class="mt-3 text-indigo-600 hover:text-indigo-500 font-medium"
                            >
                                Effacer la recherche
                            </button>
                        </div>
                    @else
                        <div class="text-gray-500">
                            <svg class="mx-auto h-12 w-12 text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                            </svg>
                            <p class="text-lg font-medium text-gray-900 mb-2">Aucun client pour l'instant</p>
                            <p class="text-gray-500">Commencez par créer votre premier client.</p>
                        </div>
                    @endif
                </div>
            @else
                <div class="overflow-x-auto border rounded-lg">
                    <table class="min-w-full bg-white">
                        <thead class="text-sm bg-gray-200">
                            <tr>
                                <th class="px-4 py-2 text-left">Nom</th>
                                <th class="px-4 py-2 text-left">Numéro de télephone</th>
                                <th class="px-4 py-2 text-left">Adresse</th>
                                <th class="px-4 py-2 text-left">Matricule fiscale</th>
                                <th class="px-4 py-2 text-left">Total des commandes</th>
                                <th class="px-4 py-2 text-left">Paiement total</th>
                                <th class="px-4 py-2 text-left">Crédit restant</th>
                                <th class="px-4 py-2 text-left">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($this->clients as $client)
                                <tr>
                                    <td class="px-4 py-2">{{ $client->firstname . ' ' . $client->lastname }}</td>
                                    <td class="px-4 py-2">{{ $client->phone_number }}</td>
                                    <td class="px-4 py-2">{{ $client->adress ?? '—' }}</td>
                                    <td class="px-4 py-2">{{ $client->taxNumber ?? '—' }}</td>
                                    <td class="px-4 py-2">{{ number_format($client->total_orders, 2) }} DT</td>
                                    <td class="px-4 py-2">{{ number_format($client->total_payments, 2) }} DT</td>
                                    <td class="px-4 py-2">
                                        <span class="px-2 py-1 text-xs rounded-full {{ $client->remaining_credit > 0 ? 'bg-red-100 text-red-800' : ($client->remaining_credit < 0 ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800') }}">
                                            {{ number_format($client->remaining_credit, 2) }} DT
                                        </span>
                                    </td>
                                    <td class="px-4 py-2 text-left">
                                        <div class="flex space-x-2">
                                            <x-button 
                                                tag="a" 
                                                href="/client/{{ $client->id }}/edit"
                                                class="px-3 py-1 text-sm text-white bg-blue-600 rounded hover:bg-blue-700"
                                            >
                                            <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="/client/{{ $client->id }}/payments"
                                                class="px-3 py-1 text-sm text-white bg-green-600 rounded hover:bg-green-700"
                                            >
                                                détails
                                            </x-button>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif

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

