@extends('layout.main')

@section('content')
    <div class="container grid px-6 mx-auto">
        <h2 class="my-6 text-2xl font-semibold text-gray-700 dark:text-gray-200">
            Weekly Projection Of {{ \Carbon\Carbon::parse($data['start_date'])->format('Y/m/d') }} and
            {{ \Carbon\Carbon::parse($data['end_date'])->format('Y/m/d') }}
        </h2>
        @php
            $totalClients = 0;
        @endphp

        <div class="w-full overflow-hidden rounded-lg shadow-xs">
            <div class="w-full overflow-x-auto">
                <x-table.table>
                    <x-table.head>
                        <th class='px-3 py-4 uppercase'>Group / Individual Name</th>
                        <th class='px-3 py-4 uppercase'>Repayment Amount</th>
                        <th class='px-3 py-4 uppercase'>No Of Clients</th>
                        <th class='px-3 py-4 uppercase'>Day Of Collection</th>
                    </x-table.head>
                    <x-table.body>
                        @foreach ($data['weeklyProjections'] as $projection)
                            <x-table.row>
                                <x-table.cell>
                                    @if ($projection?->loan?->loan_category_id == \App\Constants\LoanConstants::INDIVIDUAL_LOAN)
                                        @php $totalClients+=1; @endphp
                                        <div class="flex items-center text-sm">
                                            <!-- Avatar with inset shadow -->
                                            <div class="relative hidden w-8 h-8 mr-3 rounded-full md:block">
                                                <img class="object-cover w-full h-full rounded-full"
                                                    src="{{ Storage::url($projection?->loan?->individualClient?->client?->avatar) }}"
                                                    alt="" loading="lazy" />
                                                <div class="absolute inset-0 rounded-full shadow-inner" aria-hidden="true">
                                                </div>
                                            </div>
                                            <div>
                                                <p class="font-semibold">
                                                    {{ $projection?->loan?->individualClient?->client?->fullname }}
                                                </p>
                                                <p class="text-xs text-gray-600 dark:text-gray-400">
                                                    Individual
                                                </p>
                                            </div>
                                        </div>
                                    @else
                                        @php $totalClients+= $projection?->loan?->groupClients->count(); @endphp
                                        @if ($projection->loan?->groupClients?->isNotEmpty())
                                            <div class="flex items-center">
                                                @foreach ($projection?->loan?->groupClients->take(4) as $groupClient)
                                                    <x-tooltip message="{{ $groupClient?->client?->fullname }}"
                                                        class="-ml-3" position="top" class="-ml-3 first:ml-0">
                                                        <img src="{{ Storage::url($groupClient->client->avatar) }}"
                                                            alt="Avatar"
                                                            class="w-10 h-10 rounded-full border-2 border-gray-900">
                                                    </x-tooltip>
                                                @endforeach

                                                @if ($projection?->loan?->groupClients->count() > 4)
                                                    <div
                                                        class="w-10 h-10 flex items-center justify-center rounded-full bg-gray-700 text-white text-sm font-semibold border-2 border-gray-900 -ml-3">
                                                        +{{ $projection?->loan?->groupClients->count() - 4 }}
                                                    </div>
                                                @endif
                                                <div class="ml-2">
                                                    <p class="font-semibold">
                                                        {{ $projection?->loan?->groupClients?->first()?->group?->name }}
                                                    </p>
                                                    <p class="text-xs text-gray-600 dark:text-gray-400">
                                                        Group
                                                    </p>
                                                </div>
                                            </div>
                                        @endif
                                    @endif
                                </x-table.cell>
                                <x-table.cell>{{ number_format($projection?->amount) }}</x-table.cell>
                                <x-table.cell>

                                    @if ($projection?->loan?->loan_category_id == \App\Constants\LoanConstants::INDIVIDUAL_LOAN)
                                        1
                                    @else
                                        {{ $projection?->loan?->groupClients?->count() }}
                                    @endif
                                </x-table.cell>
                                <x-table.cell>{{ $projection?->date?->format('l') }}</x-table.cell>
                            </x-table.row>
                        @endforeach
                        <x-table.row>
                            <x-table.cell>Total</x-table.cell>
                            <x-table.cell>{{ number_format($data['weeklyProjections']?->sum('amount')) }}</x-table.cell>
                            <x-table.cell>{{ number_format($totalClients) }}</x-table.cell>
                            <x-table.cell></x-table.cell>
                        </x-table.row>
                    </x-table.body>
                </x-table.table>
            </div>

        </div>

    </div>
@endsection