@extends('layouts.admin')

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

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

@section('content')
<div class="mx-auto max-w-[1200px] flex flex-col gap-6">
    <!-- Actions Panel -->
    <div class="flex flex-col gap-4 rounded-xl border border-gray-200 bg-white p-5 shadow-sm md:flex-row md:items-center md:justify-between">
        <div>
            <h3 class="text-lg font-bold text-gray-900 text-gray-900">All Customers</h3>
            <p class="text-sm text-gray-500">Manage and view your client database</p>
        </div>
        <div class="flex gap-3">
            <button class="inline-flex items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50700">
                <span class="material-symbols-outlined text-[20px]">file_download</span>
                Export
            </button>
            <a href="{{ route('admin.customers.create') }}" class="inline-flex items-center justify-center gap-2 rounded-lg bg-primary px-4 py-2.5 text-sm font-medium text-white shadow-sm hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2">
                <span class="material-symbols-outlined text-[20px]">add</span>
                Add New Customer
            </a>
        </div>
    </div>
    
    <!-- Filter & Search Toolbar -->
    <div class="grid gap-4 md:grid-cols-12">
        <div class="md:col-span-5 relative">
            <form method="GET" action="{{ route('admin.customers.index') }}">
                <span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-[20px] text-gray-400">search</span>
                <input name="search" value="{{ request('search') }}" class="h-11 w-full rounded-lg border border-gray-200 bg-white pl-10 text-sm text-gray-900 placeholder-gray-500 focus:border-primary focus:ring-1 focus:ring-primary text-gray-900" placeholder="Search by name, email, or phone..." type="text"/>
            </form>
        </div>
        <div class="md:col-span-3">
            <div class="relative">
                <form method="GET" action="{{ route('admin.customers.index') }}">
                    @if(request('search'))
                        <input type="hidden" name="search" value="{{ request('search') }}">
                    @endif
                    <span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-[20px] text-gray-400">filter_list</span>
                    <select name="is_active" onchange="this.form.submit()" class="h-11 w-full appearance-none rounded-lg border border-gray-200 bg-white pl-10 pr-8 text-sm text-gray-900 focus:border-primary focus:ring-1 focus:ring-primary text-gray-900">
                        <option value="">Filter by Status</option>
                        <option value="1" {{ request('is_active') == '1' ? 'selected' : '' }}>Active</option>
                        <option value="0" {{ request('is_active') == '0' ? 'selected' : '' }}>Inactive</option>
                    </select>
                    <span class="material-symbols-outlined absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-[20px] text-gray-400">expand_more</span>
                </form>
            </div>
        </div>
        <!-- Spacer on large screens -->
        <div class="hidden md:block md:col-span-4"></div>
    </div>
    
    <!-- Data Table Card -->
    <div class="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm">
        <div class="overflow-x-auto custom-scrollbar">
            <table class="w-full min-w-[1000px] text-left text-sm">
                <thead class="bg-gray-50 text-xs uppercase text-gray-500">
                    <tr>
                        <th class="px-6 py-4 font-semibold" scope="col">Customer Name</th>
                        <th class="px-6 py-4 font-semibold" scope="col">Email & Phone</th>
                        <th class="px-6 py-4 font-semibold text-center" scope="col">Total Invoices</th>
                        <th class="px-6 py-4 font-semibold text-right" scope="col">Outstanding Balance</th>
                        <th class="px-6 py-4 font-semibold text-center" scope="col">Status</th>
                        <th class="px-6 py-4 font-semibold text-right" scope="col">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @forelse($customers as $customer)
                        <tr class="group hover:bg-gray-50800/50">
                            <td class="px-6 py-4">
                                <div class="flex items-center gap-3">
                                    <div class="h-10 w-10 shrink-0 rounded-full bg-cover bg-center bg-gradient-to-br from-primary/20 to-primary/40 flex items-center justify-center text-primary font-bold">
                                        {{ strtoupper(substr($customer->name, 0, 1)) }}
                                    </div>
                                    <div class="font-medium text-gray-900 text-gray-900">{{ $customer->name }}</div>
                                </div>
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex flex-col">
                                    <span class="text-gray-900">{{ $customer->email ?? 'N/A' }}</span>
                                    <span class="text-xs text-gray-500">{{ $customer->phone ?? 'N/A' }}</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 text-center">
                                <span class="inline-flex items-center rounded-md bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-800">{{ $customer->invoices->count() }}</span>
                            </td>
                            <td class="px-6 py-4 text-right">
                                @php
                                    $balance = $customer->invoices->sum('balance');
                                @endphp
                                <div class="font-medium {{ $balance > 0 ? 'text-red-600' : 'text-gray-900 text-gray-900' }}">${{ number_format($balance, 2) }}</div>
                                @if($balance > 0)
                                    <div class="text-xs text-gray-400">Overdue</div>
                                @endif
                            </td>
                            <td class="px-6 py-4 text-center">
                                <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium {{ $customer->is_active ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800' }}">
                                    {{ $customer->is_active ? 'Active' : 'Inactive' }}
                                </span>
                            </td>
                            <td class="px-6 py-4 text-right">
                                <div class="flex items-center justify-end gap-2 opacity-0 transition-opacity group-hover:opacity-100">
                                    <a href="{{ route('admin.customers.show', $customer) }}" class="rounded p-1 text-gray-500 hover:bg-gray-100 hover:text-primary800">
                                        <span class="material-symbols-outlined text-[20px]">visibility</span>
                                    </a>
                                    <a href="{{ route('admin.customers.edit', $customer) }}" class="rounded p-1 text-gray-500 hover:bg-gray-100 hover:text-primary800">
                                        <span class="material-symbols-outlined text-[20px]">edit</span>
                                    </a>
                                    <form method="POST" action="{{ route('admin.customers.destroy', $customer) }}" class="inline" onsubmit="return confirm('Are you sure you want to delete this customer?');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="rounded p-1 text-gray-500 hover:bg-gray-100 hover:text-red-600800">
                                            <span class="material-symbols-outlined text-[20px]">delete</span>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-6 py-8 text-center text-gray-500">No customers found</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <!-- Pagination -->
        @if($customers->hasPages())
            <div class="flex flex-col items-center justify-between gap-4 border-t border-gray-200 bg-white px-6 py-4 md:flex-row">
                <div class="text-sm text-gray-500">
                    Showing <span class="font-medium text-gray-900 text-gray-900">{{ $customers->firstItem() }}</span> to <span class="font-medium text-gray-900 text-gray-900">{{ $customers->lastItem() }}</span> of <span class="font-medium text-gray-900 text-gray-900">{{ $customers->total() }}</span> entries
                </div>
                <div class="flex items-center gap-2">
                    {{ $customers->links() }}
                </div>
            </div>
        @endif
    </div>
</div>

<style>
.custom-scrollbar::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 20px;
}
</style>
@endsection