{{-- resources/views/clients/index.blade.php --}}
@extends('layouts.finance.finance')

@section('content')
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

        {{-- Page Header --}}
        <div class="flex justify-between items-center mb-8">
            <h1 class="text-2xl font-semibold text-gray-800">Client Directory & Financials</h1>
        </div>

        {{-- Summary Cards --}}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
            <div class="bg-white rounded-lg shadow p-6 border border-gray-200">
                <h3 class="text-lg font-medium text-gray-500">Total Unique Clients</h3>
                <p class="text-4xl font-bold text-blue-600 mt-2">{{ $totalClients ?? 0 }}</p>
            </div>

            <div class="bg-white rounded-lg shadow p-6 border border-gray-200">
                <h3 class="text-lg font-medium text-gray-500">Total Active Projects</h3>
                <p class="text-4xl font-bold text-green-600 mt-2">{{ $activeProjectsCount ?? 0 }}</p>
            </div>
        </div>

        {{-- Clients Financial Table --}}
        <div class="bg-white rounded-lg shadow overflow-hidden border border-gray-200">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-xl font-semibold text-gray-800">Client Overview</h2>
            </div>

            <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Client Name</th>
                        <th scope="col" class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Total Projects</th>
                        <th scope="col" class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Projects in Execution</th>
                        <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Total Invoiced</th>
                        <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Total Collected</th>
                        <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Balance Due</th>
                        {{-- THIS IS THE NEW HEADER FOR THE BUTTON --}}
                        <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Action</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                @forelse ($clients as $clientName => $clientProjects)
                                    @php
                    $totalProjects = $clientProjects->count();

                    // ADDED 'omd-active' right here:
                    $executionProjects = $clientProjects->whereIn('status', ['active', 'in-progress', 'execution', 'Pending', 'omd-active'])->count();

                    $totalInvoiced = $clientProjects->flatMap->invoices->sum('amount') ?? 0;
                    $totalCollected = $clientProjects->flatMap->receivableSchedules->where('status', 'paid')->sum('amount') ?? 0;

                    $balanceDue = $totalInvoiced - $totalCollected;
                                    @endphp

                                            <tr class="hover:bg-gray-50 transition-colors duration-200">
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 font-medium">
                                                    <div class="flex items-center">
                                                        <div
                                                            class="h-8 w-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center font-bold mr-3">
                                                            {{ strtoupper(substr($clientName, 0, 1)) }}
                                                        </div>
                                                        <div>{{ $clientName }}</div>
                                                    </div>
                                                </td>

                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-center text-gray-600 font-medium">
                                                    {{ $totalProjects }}
                                                </td>

                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-center">
                                                    <span
                                                        class="px-2 py-1 text-xs font-semibold rounded-full {{ $executionProjects > 0 ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-600' }}">
                                                        {{ $executionProjects }} Running
                                                    </span>
                                                </td>

                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-right font-medium text-gray-900">
                                                    Rs {{ number_format($totalInvoiced, 2) }}
                                                </td>

                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-right font-medium text-green-600">
                                                    Rs {{ number_format($totalCollected, 2) }}
                                                </td>

                                                <td
                                                    class="px-6 py-4 whitespace-nowrap text-sm text-right font-bold {{ $balanceDue > 0 ? 'text-red-500' : 'text-gray-500' }}">
                                                    Rs {{ number_format(max(0, $balanceDue), 2) }}
                                                </td>

                                                {{-- THIS IS THE NEW VIEW BUTTON --}}
                                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                                    <a href="{{ route('finance.client.show', ['name' => $clientName]) }}"
                                                        class="inline-flex items-center px-3 py-1.5 border border-indigo-200 text-xs font-medium rounded-md text-indigo-700 bg-indigo-50 hover:bg-indigo-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors">
                                                        View
                                                    </a>
                                                </td>
                                            </tr>
                @empty
                        <tr>
                            <td colspan="7" class="px-6 py-8 whitespace-nowrap text-sm text-gray-500 text-center">
                                No clients found.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
            </div>
        </div>

    </div>
@endsection