@extends('layout.main')

@section('content')
    <div class="container mx-auto px-4 py-8" x-data="paymentTabs()">
        <div class="flex items-center mb-4">
            <h1 class="text-xl font-bold dark:text-white">PAYMENT DETAILS</h1>
        </div>
        <div class="flex flex-row gap-1 flex-wrap mb-8 space-y-4 md:flex-row md:items-end md:space-x-4">
            @if (Auth::user()->can('loans-create'))
                <a href="{{ route('loan.add.payment', $loan->id) }}"
                    class="flex items-center justify-between px-4 py-2 gap-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">
                    <span>Add Payment Details </span>
                    <i class="fa fa-plus"></i>
                </a>
            @endif
            @if (Auth::user()->can('loans-show'))
                <x-link route="{{ route('loans.show', $loan->id) }}" isButton class="bg-purple-600">View Loan
                    Details</x-link>
            @endif
        </div>
        <div class="mt-8">
            <ul class="flex items-center border-b border-gray-200 dark:border-gray-700 mb-4 dark:text-white">
                <li class="inline-block">
                    <a href="#" 
                       @click.prevent="setActiveTab('payments')"
                       class="inline-block py-4 px-4 text-sm font-medium text-center border-transparent border-b-2 transition-colors duration-200"
                       :class="activeTab === 'payments' ? 'text-purple-600 border-purple-600 active dark:text-purple-400 dark:border-purple-400' : 'text-gray-500 hover:text-gray-600 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'">
                        Payments
                    </a>
                </li>
                <li class="inline-block">
                    <a href="#" 
                       @click.prevent="setActiveTab('client')"
                       class="inline-block py-4 px-4 text-sm font-medium text-center border-transparent border-b-2 transition-colors duration-200"
                       :class="activeTab === 'client' ? 'text-purple-600 border-purple-600 active dark:text-purple-400 dark:border-purple-400' : 'text-gray-500 hover:text-gray-600 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'">
                        Client Information
                    </a>
                </li>
                <li class="inline-block">
                    <a href="#" 
                       @click.prevent="setActiveTab('loan')"
                       class="inline-block py-4 px-4 text-sm font-medium text-center border-transparent border-b-2 transition-colors duration-200"
                       :class="activeTab === 'loan' ? 'text-purple-600 border-purple-600 active dark:text-purple-400 dark:border-purple-400' : 'text-gray-500 hover:text-gray-600 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'">
                        Loan Information
                    </a>
                </li>
            </ul>

            <div class="mt-4">
                {{-- Payments Details --}}
                <div x-show="activeTab === 'payments'" 
                     x-transition:enter="transition ease-out duration-200"
                     x-transition:enter-start="opacity-0 transform translate-y-2"
                     x-transition:enter-end="opacity-100 transform translate-y-0"
                     class="bg-gray-50 p-4 rounded-lg dark:bg-gray-800">
                    
                    <!-- Payment Summary Cards -->
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
                        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow">
                            <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">Total Payments</h3>
                            <p class="text-2xl font-bold text-blue-600 dark:text-blue-400">{{ $loan->loanDeposits->count() }}</p>
                        </div>
                        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow">
                            <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">Amount Paid</h3>
                            <p class="text-2xl font-bold text-green-600 dark:text-green-400">{{ formatCurrencyDecimals($loan->loanDeposits->sum('amount')) }}</p>
                        </div>
                        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow">
                            <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">Remaining Balance</h3>
                            @php
                                $remainingBalance = $loan->loan_amount - $loan->loanDeposits->sum('amount');
                            @endphp
                            <p class="text-2xl font-bold text-red-600 dark:text-red-400">{{ formatCurrencyDecimals(max(0, $remainingBalance)) }}</p>
                        </div>
                    </div>

                    <!-- Payments Table -->
                    <x-table.table>
                        <x-table.head>
                            <th>{{ __('Receipt No') }}</th>
                            <th>{{ __('Deposit Date') }}</th>
                            <th>{{ __('Amount') }} ({{ getCurrencyCode() }})</th>
                            <th>{{ __('Deposited By') }}</th>
                            <th>{{ __('Actions') }}</th>
                        </x-table.head>
                        <x-table.body>
                            @forelse ($loan->loanDeposits as $payment)
                                <x-table.row>
                                    <x-table.cell>
                                        <span class="font-medium text-gray-900 dark:text-gray-100">
                                            {{ $payment->slug ?? 'N/A' }}
                                        </span>
                                    </x-table.cell>
                                    <x-table.cell>{{ \Carbon\Carbon::parse($payment->deposit_date)->format('d M, Y') }}</x-table.cell>
                                    <x-table.cell>
                                        <span class="font-semibold text-green-600 dark:text-green-400">
                                            {{ formatAmount($payment->amount) }}
                                        </span>
                                    </x-table.cell>
                                    <x-table.cell>{{ $payment->createdBy->name ?? 'System' }}</x-table.cell>
                                    <x-table.cell>
                                        <div class="flex items-center space-x-2 text-sm">
                                            <x-tooltip message="View payment details" position="left">
                                                <a href="{{ route('loan.payment.show', [$loan, $payment]) }}"
                                                    class="px-2 py-1 text-xs font-medium text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">
                                                    <i class="fa fa-eye"></i>
                                                </a>
                                            </x-tooltip>
                                            <x-tooltip message="Edit payment date" position="left">
                                                <a href="{{ route('loan.payment.edit', [$loan, $payment]) }}"
                                                    class="px-2 py-1 text-xs font-medium text-yellow-600 hover:text-yellow-800 dark:text-yellow-400 dark:hover:text-yellow-300">
                                                    <i class="fa fa-pen"></i>
                                                </a>
                                            </x-tooltip>
                                            <x-tooltip message="Download receipt PDF" position="left">
                                                <a href="{{ route('loan.payment.download', [$loan, $payment]) }}"
                                                    class="px-2 py-1 text-xs font-medium text-green-600 hover:text-green-800 dark:text-green-400 dark:hover:text-green-300">
                                                    <i class="fa fa-file-pdf"></i>
                                                </a>
                                            </x-tooltip>
                                        </div>
                                    </x-table.cell>
                                </x-table.row>
                            @empty
                                <x-table.row>
                                    <x-table.cell colspan="5" class="text-center text-gray-500 dark:text-gray-400 py-8">
                                        <div class="flex flex-col items-center">
                                            <i class="fa fa-receipt text-4xl mb-4 text-gray-300 dark:text-gray-600"></i>
                                            <p class="text-lg font-medium">No payments found</p>
                                            <p class="text-sm">This loan has no payment records yet.</p>
                                        </div>
                                    </x-table.cell>
                                </x-table.row>
                            @endforelse
                        </x-table.body>
                    </x-table.table>
                </div>

                {{-- Client Information --}}
                <div x-show="activeTab === 'client'" 
                     x-transition:enter="transition ease-out duration-200"
                     x-transition:enter-start="opacity-0 transform translate-y-2"
                     x-transition:enter-end="opacity-100 transform translate-y-0"
                     class="bg-gray-50 p-4 rounded-lg dark:bg-gray-800">
                    <div class="flex items-center mb-8">
                        <x-table.table>
                            <x-table.head>
                                <th class="px-4 py-3">Avatar</th>
                                <th class="px-4 py-3">Fullname</th>
                                <th class="px-4 py-3">Gender</th>
                                <th class="px-4 py-3">Phone</th>
                                <th class="px-4 py-3">ID No</th>
                                <th class="px-4 py-3">Location</th>
                            </x-table.head>
                            <x-table.body>
                                @if ($loan->loan_category_id == \App\Constants\LoanConstants::INDIVIDUAL_LOAN)
                                    <x-table.row>
                                        <x-table.cell>
                                            <div class="flex items-center">
                                                <img class="object-cover rounded-full"
                                                    src="{{ Storage::url($loan->individualClient->client->avatar) }}"
                                                    alt="Profile Picture" width="48" height="48">
                                            </div>
                                        </x-table.cell>
                                        <x-table.cell>{{ $loan->individualClient->client->fullname }}</x-table.cell>
                                        <x-table.cell>{{ $loan->individualClient->client->gender }}</x-table.cell>
                                        <x-table.cell>{{ $loan->individualClient->client->phone }}</x-table.cell>
                                        <x-table.cell>{{ $loan->individualClient->client->idnumber }}</x-table.cell>
                                        <x-table.cell>{{ $loan->individualClient->client->location }}</x-table.cell>
                                    </x-table.row>
                                @else
                                    @foreach ($loan->groupClients as $groupClient)
                                        <x-table.row>
                                            <x-table.cell>
                                                <div class="flex items-center">
                                                    <img class="object-cover rounded-full"
                                                        src="{{ Storage::url($groupClient->client->avatar) }}"
                                                        alt="Profile Picture" width="48" height="48">
                                                </div>
                                            </x-table.cell>
                                            <x-table.cell>{{ $groupClient->client->fullname }}</x-table.cell>
                                            <x-table.cell>{{ $groupClient->client->gender }}</x-table.cell>
                                            <x-table.cell>{{ $groupClient->client->phone }}</x-table.cell>
                                            <x-table.cell>{{ $groupClient->client->idnumber }}</x-table.cell>
                                            <x-table.cell>{{ $groupClient->client->location }}</x-table.cell>
                                        </x-table.row>
                                    @endforeach
                                @endif
                            </x-table.body>
                        </x-table.table>
                    </div>
                </div>

                {{--  Loan Information --}}
                <div x-show="activeTab === 'loan'" 
                     x-transition:enter="transition ease-out duration-200"
                     x-transition:enter-start="opacity-0 transform translate-y-2"
                     x-transition:enter-end="opacity-100 transform translate-y-0"
                     class="bg-gray-50 p-4 rounded-lg dark:bg-gray-800">
                    <x-table.table>
                        <x-table.body>
                            <x-table.row>
                                <x-table.cell>{{ __('Loan Code') }}</x-table.cell>
                                <x-table.cell>{{ $loan->loan_code }}</x-table.cell>
                            </x-table.row>
                            <x-table.row>
                                <x-table.cell>{{ __('Principal Amount') }}</x-table.cell>
                                <x-table.cell>{{ formatCurrencyDecimals($loan->principal_amount) }}</x-table.cell>
                            </x-table.row>
                            <x-table.row>
                                <x-table.cell>{{ __('Interest Rate') }}</x-table.cell>
                                <x-table.cell>{{ number_format($loan->interest_rate) }} %</x-table.cell>
                            </x-table.row>
                            <x-table.row>
                                <x-table.cell>{{ __('Loan + Interest') }}</x-table.cell>
                                <x-table.cell>{{ formatCurrencyDecimals($loan->loan_amount) }}</x-table.cell>
                            </x-table.row>
                            <x-table.row>
                                <x-table.cell>{{ __('Interest Amount') }}</x-table.cell>
                                <x-table.cell>{{ formatCurrencyDecimals($loan->interest_amount) }}</x-table.cell>
                            </x-table.row>
                            <x-table.row>
                                <x-table.cell>{{ __('Installments') }}</x-table.cell>
                                <x-table.cell>{{ number_format($loan->installments) }}</x-table.cell>
                            </x-table.row>
                            <x-table.row>
                                <x-table.cell>{{ __('Loan Type') }}</x-table.cell>
                                <x-table.cell>{{ $loan->loanType->product_name }}</x-table.cell>
                            </x-table.row>
                            <x-table.row>
                                <x-table.cell>{{ __('No. of Installments') }}</x-table.cell>
                                <x-table.cell>{{ number_format($loan->installments) }}</x-table.cell>
                            </x-table.row>
                            <x-table.row>
                                <x-table.cell>{{ __('Interest Type') }}</x-table.cell>
                                <x-table.cell>{{ \App\Constants\LoanConstants::getInterestTypeName($loan->loanType->interest_method) }}</x-table.cell>
                            </x-table.row>
                            <x-table.row>
                                <x-table.cell>{{ __('First Installment Date') }}</x-table.cell>
                                <x-table.cell>{{ date('d M , Y. D', strtotime($loan->first_installment_date)) }}</x-table.cell>
                            </x-table.row>
                        </x-table.body>
                    </x-table.table>
                </div>
            </div>
        </div>
    </div>

    <script>
        function paymentTabs() {
            return {
                activeTab: 'payments', // Default to payments tab
                
                init() {
                    // Load saved tab from localStorage
                    const savedTab = localStorage.getItem('paymentDetailsActiveTab');
                    if (savedTab) {
                        this.activeTab = savedTab;
                    }
                },
                
                setActiveTab(tab) {
                    this.activeTab = tab;
                    // Save to localStorage
                    localStorage.setItem('paymentDetailsActiveTab', tab);
                }
            }
        }
    </script>
@endsection