@extends('layouts.app')

@section('title', 'Clients')

@section('content')
<div class="px-8 py-8">

    {{-- Flash messages --}}
    @if (session('success'))
        <div class="mb-6 flex items-center gap-3 rounded-xl bg-emerald-50 border border-emerald-100 px-4 py-3 text-sm text-emerald-700">
            <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
            </svg>
            {{ session('success') }}
        </div>
    @endif

    @if (session('error'))
        <div class="mb-6 flex items-center gap-3 rounded-xl bg-red-50 border border-red-100 px-4 py-3 text-sm text-red-600">
            <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            {{ session('error') }}
        </div>
    @endif

    {{-- Page header --}}
    <div class="flex items-center justify-between mb-8">
        <div>
            <h1 class="text-xl font-semibold text-slate-900">Clients</h1>
            <p class="text-sm text-slate-400 mt-0.5">{{ $totalClients }} {{ Str::plural('client', $totalClients) }}</p>
        </div>
        @can('clients.manage')
        <a href="{{ route('clients.create') }}"
           class="inline-flex items-center gap-2 px-4 py-2.5 bg-sky-700 hover:bg-sky-800 text-white text-sm font-medium rounded-lg transition-colors duration-150">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
            </svg>
            Add Client
        </a>
        @endcan
    </div>

    {{-- Stat cards --}}
    @php
        $withOutstanding = $clients->filter(fn ($c) => !empty($c->outstanding_by_currency))->count();
    @endphp
    <div class="grid grid-cols-3 gap-4 mb-8">

        <div data-stat-card class="bg-white border border-slate-100 rounded-xl p-5">
            <p class="text-xs font-medium text-slate-400 uppercase tracking-wider mb-1">Total Clients</p>
            <p class="text-2xl font-semibold text-slate-900">{{ $totalClients }}</p>
        </div>

        <div data-stat-card class="bg-white border border-slate-100 rounded-xl p-5">
            <p class="text-xs font-medium text-slate-400 uppercase tracking-wider mb-1">Total Projects</p>
            @php $totalProjects = $clients->sum('projects_count'); @endphp
            <p class="text-2xl font-semibold {{ $totalProjects > 0 ? 'text-sky-700' : 'text-slate-300' }}">
                {{ $totalProjects }}
            </p>
        </div>

        <div data-stat-card class="bg-white border border-slate-100 rounded-xl p-5">
            <p class="text-xs font-medium text-slate-400 uppercase tracking-wider mb-1">With Outstanding</p>
            <p class="text-2xl font-semibold {{ $withOutstanding > 0 ? 'text-amber-600' : 'text-emerald-600' }}">
                {{ $withOutstanding }}
            </p>
            <p class="text-xs {{ $withOutstanding > 0 ? 'text-amber-500' : 'text-emerald-500' }} font-medium mt-0.5">
                invoices pending
            </p>
        </div>

    </div>

    {{-- Clients table --}}
    <div class="bg-white border border-slate-100 rounded-xl overflow-hidden">

        @if ($clients->isEmpty())
            <div class="py-20 text-center">
                <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-slate-100 mb-4">
                    <svg class="w-6 h-6 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                              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 0z"/>
                    </svg>
                </div>
                <p class="text-sm font-medium text-slate-700">No clients yet</p>
                <p class="text-sm text-slate-400 mt-1">Add your first client to get started</p>
                @can('clients.manage')
                <a href="{{ route('clients.create') }}"
                   class="inline-flex items-center gap-2 mt-4 px-4 py-2 bg-sky-700 hover:bg-sky-800 text-white text-sm font-medium rounded-lg transition-colors duration-150">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                    </svg>
                    Add Client
                </a>
                @endcan
            </div>
        @else
            <table class="w-full">
                <thead class="bg-slate-50 border-b border-slate-100">
                    <tr>
                        <th scope="col" class="px-5 py-3.5 text-left text-xs font-medium text-slate-400 uppercase tracking-wide">Name</th>
                        <th scope="col" class="px-5 py-3.5 text-left text-xs font-medium text-slate-400 uppercase tracking-wide">Contact</th>
                        <th scope="col" class="px-5 py-3.5 text-left text-xs font-medium text-slate-400 uppercase tracking-wide">Projects</th>
                        <th scope="col" class="px-5 py-3.5 text-left text-xs font-medium text-slate-400 uppercase tracking-wide">Proposals</th>
                        <th scope="col" class="px-5 py-3.5 text-left text-xs font-medium text-slate-400 uppercase tracking-wide">Outstanding</th>
                        <th scope="col" class="px-5 py-3.5 text-right text-xs font-medium text-slate-400 uppercase tracking-wide">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-50 bg-white">
                    @foreach ($clients as $client)
                        @php
                            $symMap = ['GBP' => '£', 'USD' => '$', 'PKR' => 'Rs', 'AED' => 'AED'];
                        @endphp
                        <tr data-client-row class="hover:bg-slate-50 transition-colors duration-150">

                            <td class="px-5 py-4 text-sm">
                                <a href="{{ route('clients.show', $client) }}"
                                   class="font-semibold text-slate-900 hover:text-sky-700 transition-colors">
                                    {{ $client->name }}
                                </a>
                            </td>

                            <td class="px-5 py-4 text-sm">
                                <p class="text-slate-500">{{ $client->email }}</p>
                                @if ($client->phone)
                                    <p class="text-slate-400 text-xs mt-0.5">{{ $client->phone }}</p>
                                @endif
                            </td>

                            <td class="px-5 py-4 text-sm">
                                <span class="{{ $client->projects_count > 0 ? 'bg-sky-50 text-sky-700' : 'bg-slate-50 text-slate-400' }} text-xs font-medium px-2 py-0.5 rounded-full">
                                    {{ $client->projects_count }}
                                </span>
                            </td>

                            <td class="px-5 py-4 text-sm">
                                <span class="{{ $client->proposals_count > 0 ? 'bg-emerald-50 text-emerald-700' : 'bg-slate-50 text-slate-400' }} text-xs font-medium px-2 py-0.5 rounded-full">
                                    {{ $client->proposals_count }}
                                </span>
                            </td>

                            <td class="px-5 py-4 text-sm">
                                @if (empty($client->outstanding_by_currency))
                                    <span class="text-xs text-emerald-600 font-medium">Paid up</span>
                                @else
                                    @foreach ($client->outstanding_by_currency as $cur => $total)
                                        <p class="text-sm font-mono font-medium text-amber-600">
                                            {{ $symMap[$cur] ?? $cur }}&nbsp;{{ number_format($total, 2) }}
                                        </p>
                                    @endforeach
                                @endif
                            </td>

                            <td class="px-5 py-4 text-sm text-right">
                                <div class="inline-flex items-center gap-3">
                                    <a href="{{ route('clients.show', $client) }}"
                                       class="text-sky-700 hover:underline">View</a>
                                    @can('clients.manage')
                                    <a href="{{ route('clients.edit', $client) }}"
                                       class="text-slate-500 hover:underline">Edit</a>
                                    <form method="POST" action="{{ route('clients.destroy', $client) }}"
                                          onsubmit="return confirm('Delete this client? This cannot be undone.')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit"
                                                class="text-red-400 hover:text-red-600 transition-colors duration-150 cursor-pointer text-base leading-none"
                                                title="Delete client">
                                            &times;
                                        </button>
                                    </form>
                                    @endcan
                                </div>
                            </td>

                        </tr>
                    @endforeach
                </tbody>
            </table>

            @if ($clients->hasPages())
                <div class="flex items-center justify-between py-4 px-5 border-t border-slate-50">
                    <p class="text-sm text-slate-400">
                        Showing {{ $clients->firstItem() }}&ndash;{{ $clients->lastItem() }} of {{ $clients->total() }}
                    </p>
                    <div class="text-sm">
                        {{ $clients->links() }}
                    </div>
                </div>
            @endif
        @endif

    </div>

</div>

<script>
(function() {
    var prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (prefersReduced) return;
    var Motion = window.Motion;
    if (!Motion) return;

    var cards = document.querySelectorAll('[data-stat-card]');
    if (cards.length) {
        Motion.animate(cards, { opacity: [0, 1], y: [12, 0] }, { delay: Motion.stagger(0.07), duration: 0.25, easing: 'ease-out' });
    }

    var rows = document.querySelectorAll('[data-client-row]');
    if (rows.length) {
        Motion.animate(rows, { opacity: [0, 1], y: [8, 0] }, { delay: Motion.stagger(0.04, { start: 0.15 }), duration: 0.2, easing: 'ease-out' });
    }
})();
</script>
@endsection