@extends('layouts.admin')

@section('title', 'Klanten & Profielen | Jouwdriedee Beheer')

@section('content')
<div class="space-y-6">

    <!-- Header Section -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between pb-6 border-b border-slate-200/80 gap-4">
        <div>
            <div class="inline-flex items-center space-x-1.5 text-xs text-slate-500 font-medium mb-1">
                <i data-lucide="users" class="w-3.5 h-3.5"></i>
                <span>Relatiebeheer &amp; Accounts</span>
            </div>
            <h1 class="text-2xl font-bold tracking-tight text-slate-900">Klanten &amp; Profielen</h1>
            <p class="text-xs text-slate-500 mt-1">
                Overzicht van geregistreerde klanten ({{ $totalRegistered }}) en gastkopers ({{ $totalGuests }}).
            </p>
        </div>

        <div class="flex items-center space-x-2">
            <a href="{{ route('admin.communications.index') }}" class="px-3.5 py-2 rounded-xl bg-slate-900 hover:bg-slate-800 text-white text-xs font-medium transition flex items-center space-x-1.5 shadow-xs">
                <i data-lucide="message-square" class="w-3.5 h-3.5 text-slate-400"></i>
                <span>Communicatie Inbox</span>
            </a>
        </div>
    </div>

    <!-- Search Bar -->
    <div class="flex items-center justify-between">
        <form action="{{ route('admin.customers.index') }}" method="GET" class="flex items-center space-x-2 w-full sm:w-80">
            <div class="relative w-full">
                <input 
                    type="text" 
                    name="q" 
                    value="{{ $search }}" 
                    placeholder="Zoek klant op naam of e-mail..." 
                    class="w-full pl-8 pr-3 py-2 bg-white border border-slate-200/80 rounded-xl text-xs text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-1 focus:ring-slate-900 focus:border-slate-900"
                >
                <i data-lucide="search" class="w-3.5 h-3.5 text-slate-400 absolute left-2.5 top-1/2 -translate-y-1/2"></i>
            </div>
            @if($search)
                <a href="{{ route('admin.customers.index') }}" class="px-2.5 py-2 text-xs text-slate-500 hover:text-slate-800 transition">
                    Wissen
                </a>
            @endif
        </form>
    </div>

    <!-- Customers Table Card -->
    <div class="rounded-2xl bg-white border border-slate-200/80 overflow-hidden shadow-2xs">
        <div class="overflow-x-auto">
            <table class="w-full text-left text-xs text-slate-700">
                <thead class="bg-slate-50/80 text-[11px] uppercase tracking-wider text-slate-500 font-semibold border-b border-slate-200/70">
                    <tr>
                        <th class="py-3 px-4">Klant</th>
                        <th class="py-3 px-4">Type</th>
                        <th class="py-3 px-4">Bestellingen</th>
                        <th class="py-3 px-4">Communicatie / Vragen</th>
                        <th class="py-3 px-4">Actief sinds</th>
                        <th class="py-3 px-4 text-right">Profiel</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 font-medium">
                    @forelse($customers as $customer)
                        <tr class="hover:bg-slate-50/60 transition">
                            
                            <!-- Naam & E-mail -->
                            <td class="py-3.5 px-4">
                                <div class="flex items-center space-x-3">
                                    <div class="w-8 h-8 rounded-xl bg-slate-900 text-white flex items-center justify-center font-bold text-xs shrink-0">
                                        {{ strtoupper(substr($customer->name, 0, 1)) }}
                                    </div>
                                    <div>
                                        <a href="{{ route('admin.customers.show', $customer->id ?? $customer->email) }}" class="font-bold text-slate-900 hover:underline">
                                            {{ $customer->name }}
                                        </a>
                                        <div class="text-[11px] text-slate-400 font-normal">
                                            {{ $customer->email }}
                                        </div>
                                    </div>
                                </div>
                            </td>

                            <!-- Type -->
                            <td class="py-3.5 px-4">
                                @if($customer->is_registered)
                                    <span class="px-2 py-0.5 rounded-full text-[10px] font-semibold bg-emerald-50 text-emerald-700 border border-emerald-200/60">
                                        Geregistreerd account
                                    </span>
                                @else
                                    <span class="px-2 py-0.5 rounded-full text-[10px] font-semibold bg-slate-100 text-slate-600 border border-slate-200/60">
                                        Gastkoper
                                    </span>
                                @endif
                            </td>

                            <!-- Bestellingen -->
                            <td class="py-3.5 px-4">
                                <span class="px-2 py-0.5 rounded-md bg-slate-100 text-slate-700 text-[11px] font-medium">
                                    {{ $customer->orders_count }} order(s)
                                </span>
                            </td>

                            <!-- Communicatie -->
                            <td class="py-3.5 px-4">
                                @if($customer->communications_count > 0)
                                    <span class="inline-flex items-center space-x-1 px-2 py-0.5 rounded-md bg-indigo-50 text-indigo-700 text-[11px] font-semibold border border-indigo-200/60">
                                        <i data-lucide="message-square" class="w-3 h-3"></i>
                                        <span>{{ $customer->communications_count }} bericht(en)</span>
                                    </span>
                                @else
                                    <span class="text-slate-400 text-[11px]">0 berichten</span>
                                @endif
                            </td>

                            <!-- Actief sinds -->
                            <td class="py-3.5 px-4 text-slate-500 whitespace-nowrap">
                                {{ $customer->created_at instanceof \Carbon\Carbon ? $customer->created_at->format('d-m-Y') : date('d-m-Y', strtotime((string)$customer->created_at)) }}
                            </td>

                            <!-- Actie -->
                            <td class="py-3.5 px-4 text-right whitespace-nowrap">
                                <a href="{{ route('admin.customers.show', $customer->id ?? $customer->email) }}" class="inline-flex items-center space-x-1 px-2.5 py-1 rounded-lg bg-slate-100 hover:bg-slate-900 text-slate-700 hover:text-white text-xs font-medium transition">
                                    <span>Bekijk profiel</span>
                                    <i data-lucide="chevron-right" class="w-3 h-3"></i>
                                </a>
                            </td>

                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="py-12 text-center text-slate-400">
                                Geen klanten gevonden die voldoen aan de zoekopdracht.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($customers->hasPages())
            <div class="p-4 border-t border-slate-100">
                {{ $customers->links() }}
            </div>
        @endif
    </div>

</div>
@endsection