@extends('layouts.admin')

@section('title', 'Customer Management')

@section('content')
<div class="max-w-[1200px] mx-auto">
    <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-10">
        <div>
            <p class="text-xs text-gray-500 mb-1">Customers</p>
            <h1 class="text-2xl font-semibold text-gray-900 tracking-tight">Customer management</h1>
            <p class="text-gray-500 text-sm mt-1">Monitor user engagement, order history, and account details.</p>
        </div>
        <div class="flex items-center gap-3">
            <button onclick="window.print()" class="px-4 py-2 bg-white border border-gray-200 rounded-lg text-sm text-gray-600 hover:text-gray-900 hover:bg-gray-50 transition flex items-center gap-2">
                <i class="fas fa-print text-xs"></i>
                Print
            </button>
            <a href="#" class="inline-flex items-center gap-2 bg-emerald-600 !bg-brand text-white !text-white px-4 py-2 rounded-lg text-sm font-medium shadow-md shadow-brand/20 hover:bg-emerald-700 hover:!bg-brand/90 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/40">
                <i class="fas fa-file-export text-xs"></i>
                Export
            </a>
        </div>
    </div>

    <!-- Stats Grid -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <div class="bg-white p-6 rounded-2xl border border-gray-100 shadow-sm group">
            <div class="flex items-center justify-between mb-4">
                <div class="w-12 h-12 bg-emerald-50 rounded-2xl flex items-center justify-center text-emerald-500 group-hover:bg-brand group-hover:text-white transition-all duration-300">
                    <i class="fas fa-users text-lg"></i>
                </div>
                <div class="text-xs text-emerald-600 bg-emerald-50 px-2.5 py-1 rounded-lg">Database</div>
            </div>
            <p class="text-xs text-gray-500">Total customers</p>
            <h3 class="text-3xl font-semibold text-gray-900 mt-1">{{ number_format($customers->total()) }}</h3>
        </div>

        <div class="bg-white p-6 rounded-2xl border border-gray-100 shadow-sm group">
            <div class="flex items-center justify-between mb-4">
                <div class="w-12 h-12 bg-blue-50 rounded-2xl flex items-center justify-center text-blue-500 group-hover:bg-brand group-hover:text-white transition-all duration-300">
                    <i class="fas fa-user-check text-lg"></i>
                </div>
                <div class="text-xs text-blue-600 bg-blue-50 px-2.5 py-1 rounded-lg">Verified</div>
            </div>
            <p class="text-xs text-gray-500">Verified users</p>
            <h3 class="text-3xl font-semibold text-gray-900 mt-1">{{ number_format($customers->total()) }}</h3>
        </div>

        <div class="bg-white p-6 rounded-2xl border border-gray-100 shadow-sm group">
            <div class="flex items-center justify-between mb-4">
                <div class="w-12 h-12 bg-orange-50 rounded-2xl flex items-center justify-center text-orange-500 group-hover:bg-brand group-hover:text-white transition-all duration-300">
                    <i class="fas fa-user-plus text-lg"></i>
                </div>
                <div class="text-xs text-orange-600 bg-orange-50 px-2.5 py-1 rounded-lg">Growth</div>
            </div>
            <p class="text-xs text-gray-500">New (last 30 days)</p>
            <h3 class="text-3xl font-semibold text-gray-900 mt-1">{{ number_format($customers->where('created_at', '>=', now()->subDays(30))->count()) }}</h3>
        </div>
    </div>

    <!-- Filter Bar -->
    <div class="bg-white p-4 rounded-2xl border border-gray-100 shadow-sm mb-8">
        <form action="{{ route('admin.customers.index') }}" method="GET" class="flex flex-col md:flex-row gap-4">
            <div class="flex-1 relative">
                <i class="fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 text-xs"></i>
                <input type="text" name="search" value="{{ request('search') }}" 
                    class="w-full pl-10 pr-4 py-3 bg-white border border-gray-200 rounded-xl text-sm focus:border-brand focus:ring-2 focus:ring-brand/20 transition placeholder:text-gray-400"
                    placeholder="Search by name, email or phone...">
            </div>
            <div class="flex gap-2">
                <button type="submit" class="bg-brand text-white px-5 py-3 rounded-lg text-sm font-medium hover:bg-brand/90 transition">
                    Apply filter
                </button>
                @if(request('search'))
                    <a href="{{ route('admin.customers.index') }}" class="bg-gray-100 text-gray-600 px-5 py-3 rounded-lg text-sm hover:bg-gray-200 transition flex items-center justify-center">
                        Reset
                    </a>
                @endif
            </div>
        </form>
    </div>

    <!-- Customers Table -->
    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead>
                    <tr class="bg-gray-50 border-b border-gray-100">
                        <th class="px-6 py-4 text-xs font-medium text-gray-500">Customer profile</th>
                        <th class="px-6 py-4 text-xs font-medium text-gray-500">Contact information</th>
                        <th class="px-6 py-4 text-xs font-medium text-gray-500">Joined date</th>
                        <th class="px-6 py-4 text-xs font-medium text-gray-500 text-center">Status</th>
                        <th class="px-6 py-4 text-xs font-medium text-gray-500 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50">
                    @forelse($customers as $customer)
                    <tr class="hover:bg-gray-50 transition-colors group">
                        <td class="px-6 py-4">
                            <div class="flex items-center gap-4">
                                <div class="w-12 h-12 rounded-2xl bg-gray-50 flex items-center justify-center text-gray-500 font-semibold text-sm group-hover:bg-brand/10 group-hover:text-brand transition">
                                    {{ strtoupper(substr($customer->name, 0, 1)) }}
                                </div>
                                <div>
                                    <p class="font-medium text-gray-900 group-hover:text-brand transition-colors">{{ $customer->name }}</p>
                                    <p class="text-xs text-gray-500 mt-0.5">UID-{{ str_pad($customer->id, 5, '0', STR_PAD_LEFT) }}</p>
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            <div class="space-y-1.5">
                                <div class="flex items-center gap-2 text-sm text-gray-700">
                                    <i class="far fa-envelope text-gray-300 text-xs"></i>
                                    <span>{{ $customer->email }}</span>
                                </div>
                                @if($customer->phone)
                                <div class="flex items-center gap-2 text-sm text-gray-700">
                                    <i class="fas fa-phone text-gray-300 text-xs"></i>
                                    <span>{{ $customer->phone }}</span>
                                </div>
                                @endif
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            <div class="flex flex-col">
                                <span class="text-xs font-medium text-gray-900">{{ $customer->created_at->format('M d, Y') }}</span>
                                <span class="text-xs text-gray-500 mt-1">{{ $customer->created_at->diffForHumans() }}</span>
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            <div class="flex justify-center">
                                <span class="px-3 py-1 bg-emerald-50 text-emerald-600 rounded-lg text-xs font-medium inline-flex items-center gap-2">
                                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
                                    Verified
                                </span>
                            </div>
                        </td>
                        <td class="px-6 py-4 text-right">
                            <div class="flex items-center justify-end gap-2">
                                <a href="{{ route('admin.customers.show', $customer->id) }}" 
                                    class="w-9 h-9 flex items-center justify-center bg-gray-50 text-gray-500 rounded-lg hover:bg-brand/10 hover:text-brand transition"
                                    title="View Details">
                                    <i class="fas fa-eye text-xs"></i>
                                </a>
                                <button class="w-9 h-9 flex items-center justify-center bg-gray-50 text-gray-500 rounded-lg hover:bg-red-50 hover:text-red-500 transition"
                                    title="Restrict Account">
                                    <i class="fas fa-ban text-xs"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="5" class="px-6 py-16 text-center">
                            <div class="flex flex-col items-center justify-center">
                                <div class="w-20 h-20 bg-gray-50 rounded-2xl flex items-center justify-center mb-4">
                                    <i class="fas fa-users-slash text-gray-200 text-3xl"></i>
                                </div>
                                <h3 class="text-base font-semibold text-gray-900 mb-1">No customers found</h3>
                                <p class="text-gray-500 text-sm max-w-xs mx-auto">We couldn't find any customers matching your search. Try adjusting filters.</p>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($customers->hasPages())
        <div class="px-6 py-5 bg-gray-50 border-t border-gray-100">
            {{ $customers->links() }}
        </div>
        @endif
    </div>
</div>
@endsection
