@extends('layout.main')

@section('content')
    <div class="container mx-auto px-4 py-8" x-data="loanDetailsTabs()">
        <!-- Page Header -->
        <div class="flex justify-between items-center mb-6">
            <div>
                <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Loan Details</h1>
                <p class="text-gray-600 dark:text-gray-400">{{ $loan->loan_code }}</p>
            </div>
            <div class="flex items-center space-x-2">
                <span
                    class="px-3 py-1 text-sm font-semibold rounded-full
                    {{ $loan->level_status_id == \App\Constants\LoanConstants::APPROVED
                        ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
                        : ($loan->level_status_id == \App\Constants\LoanConstants::PENDING
                            ? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200'
                            : 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200') }}">
                    {{ \App\Constants\LoanConstants::getStatusName($loan->level_status_id) }}
                </span>
            </div>
        </div>

        <!-- Client Information Card -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 mb-6">
            <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Client Information</h2>
            <div class="overflow-x-auto">
                <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 border-2 border-gray-300"
                                            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 border-2 border-gray-300"
                                                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>

        <!-- Action Buttons -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 mb-6">
            <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Actions</h2>
            <div class="flex flex-wrap gap-3">
                @if (Auth::user()->can('loans-edit') && $loan->level_status_id == \App\Constants\LoanConstants::PENDING)
                    <a href="{{ route('loans.edit', $loan->id) }}"
                        class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-purple-600 border border-transparent rounded-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 transition-colors">
                        <i class="fa fa-edit mr-2"></i>
                        Edit Loan
                    </a>
                @endif

                @if (Auth::user()->can('loans-approve') &&
                        $loan->level_status_id != \App\Constants\LoanConstants::DECLINED &&
                        $loan->level_status_id != \App\Constants\LoanConstants::APPROVED)
                    <a href="{{ route('loans.get-update-status', $loan->id) }}"
                        class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors">
                        <i class="fa fa-check-circle mr-2"></i>
                        Update Status
                    </a>
                @endif

                @if (Auth::user()->can('loans-approve') &&
                        $loan->level_status_id == \App\Constants\LoanConstants::APPROVED &&
                        is_null($loan->disbursement_on))
                    <div x-data="{ open: false }">
                        <button @click="open = true"
                            class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-green-600 border border-transparent rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 transition-colors">
                            <i class="fa fa-money-bill-wave mr-2"></i>
                            Disburse Loan
                        </button>

                        <!-- Disburse Modal -->
                        <div x-show="open" x-cloak
                            class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
                            <div @click.outside="open = false"
                                class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-xl max-w-md w-full">
                                <h2 class="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Disburse Loan</h2>
                                <p class="text-gray-600 dark:text-gray-400 mb-4">
                                    Make sure there is enough funds on the funds account. Disbursing the loan will deduct
                                    the loan principal amount from this account.
                                    <br><br>Are you sure you want to disburse this loan?
                                </p>
                                <div class="flex justify-end space-x-3">
                                    <button @click="open = false"
                                        class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 transition-colors">
                                        Cancel
                                    </button>
                                    <form action="{{ route('loans.disburse', $loan->id) }}" method="POST" class="inline">
                                        @csrf
                                        @method('PUT')
                                        <button type="submit"
                                            class="px-4 py-2 text-sm font-medium text-white bg-green-600 rounded-md hover:bg-green-700 transition-colors">
                                            Confirm Disbursement
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif

                @if (Auth::user()->can('loan-payment'))
                    <a href="{{ route('loans.repayment-schedule.index', ['loan' => $loan->id]) }}"
                        class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-colors">
                        <i class="fa fa-calendar-alt mr-2"></i>
                        View Schedule
                    </a>
                @endif

                @if (Auth::user()->can('loan-payment') &&
                        $loan->level_status_id == \App\Constants\LoanConstants::APPROVED &&
                        !is_null($loan->disbursement_on))
                    <a href="{{ route('loan.payment.details', $loan->id) }}"
                        class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-teal-600 border border-transparent rounded-md hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-teal-500 transition-colors">
                        <i class="fa fa-credit-card mr-2"></i>
                        Payment Details
                    </a>
                @endif

                @if (Auth::user()->can('file-create'))
                    <a href="{{ route('loan.file.add', $loan->id) }}"
                        class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors">
                        <i class="fa fa-upload mr-2"></i>
                        Add Files
                    </a>
                @endif

                @if (Auth::user()->can('penalty-show') && !is_null($loan->disbursement_on) && $loan->level_status_id == 1)
                    <a href="{{ route('loan.fines', $loan->id) }}"
                        class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-red-600 border border-transparent rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 transition-colors relative">
                        <i class="fa fa-exclamation-triangle mr-2"></i>
                        Manage Fines
                        @if ($loan->hasPendingPenalties())
                            <span
                                class="absolute -top-1 -right-1 inline-block w-3 h-3 bg-yellow-400 border-2 border-white rounded-full"></span>
                        @endif
                    </a>
                @endif

                @if (Auth::user()->can('loans-create'))
                    <a href="{{ route('loans.loan-collaterals.create', $loan->id) }}"
                        class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-gray-600 border border-transparent rounded-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 transition-colors">
                        <i class="fa fa-plus mr-2"></i>
                        Add Collateral
                    </a>
                @endif
            </div>
        </div>

        <!-- Tabs Navigation -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md mb-6">
            <div class="border-b border-gray-200 dark:border-gray-700">
                <ul class="flex flex-wrap -mb-px">
                    <li class="mr-2">
                        <a href="#" @click.prevent="setActiveTab('details')"
                            class="inline-block p-4 border-b-2 rounded-t-lg transition-colors"
                            :class="activeTab === 'details' ?
                                'text-purple-600 border-purple-600 active dark:text-purple-400 dark:border-purple-400' :
                                'text-gray-500 border-transparent hover:text-gray-600 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'">
                            <i class="fa fa-info-circle mr-2"></i>
                            Loan Details
                        </a>
                    </li>
                    <li class="mr-2">
                        <a href="#" @click.prevent="setActiveTab('files')"
                            class="inline-block p-4 border-b-2 rounded-t-lg transition-colors"
                            :class="activeTab === 'files' ?
                                'text-purple-600 border-purple-600 active dark:text-purple-400 dark:border-purple-400' :
                                'text-gray-500 border-transparent hover:text-gray-600 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'">
                            <i class="fa fa-file-alt mr-2"></i>
                            Files ({{ $loan->loanFiles->count() }})
                        </a>
                    </li>
                    <li class="mr-2">
                        <a href="#" @click.prevent="setActiveTab('collaterals')"
                            class="inline-block p-4 border-b-2 rounded-t-lg transition-colors"
                            :class="activeTab === 'collaterals' ?
                                'text-purple-600 border-purple-600 active dark:text-purple-400 dark:border-purple-400' :
                                'text-gray-500 border-transparent hover:text-gray-600 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'">
                            <i class="fa fa-shield-alt mr-2"></i>
                            Collaterals ({{ $loan->collaterals->count() }})
                        </a>
                    </li>
                    <li class="mr-2">
                        <a href="#" @click.prevent="setActiveTab('charges')"
                            class="inline-block p-4 border-b-2 rounded-t-lg transition-colors"
                            :class="activeTab === 'charges' ?
                                'text-purple-600 border-purple-600 active dark:text-purple-400 dark:border-purple-400' :
                                'text-gray-500 border-transparent hover:text-gray-600 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'">
                            <i class="fa fa-money-bill mr-2"></i>
                            Charges
                        </a>
                    </li>
                    @if ($loan->level_status_id == 1)
                        <li class="mr-2">
                            <a href="#" @click.prevent="setActiveTab('schedule')"
                                class="inline-block p-4 border-b-2 rounded-t-lg transition-colors"
                                :class="activeTab === 'schedule' ?
                                    'text-purple-600 border-purple-600 active dark:text-purple-400 dark:border-purple-400' :
                                    'text-gray-500 border-transparent hover:text-gray-600 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'">
                                <i class="fa fa-calendar mr-2"></i>
                                Schedule
                            </a>
                        </li>
                    @endif
                </ul>
            </div>

            <!-- Tab Content -->
            <div class="p-6">
                <!-- Loan Details Tab -->
                <div x-show="activeTab === 'details'" 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">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Basic Information -->
                        <div class="space-y-4">
                            <h3 class="text-lg font-semibold text-gray-900 dark:text-white border-b pb-2">Basic Information
                            </h3>

                            <div class="space-y-3">
                                <div class="flex justify-between">
                                    <span class="text-gray-600 dark:text-gray-400">Loan Code:</span>
                                    <span class="font-medium text-gray-900 dark:text-white">{{ $loan->loan_code }}</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-600 dark:text-gray-400">Loan Status:</span>
                                    <span
                                        class="font-medium text-gray-900 dark:text-white">{{ \App\Constants\LoanConstants::getStatusName($loan->level_status_id) }}</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-600 dark:text-gray-400">Loan Type:</span>
                                    <span
                                        class="font-medium text-gray-900 dark:text-white">{{ $loan->loanType->product_name }}</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-600 dark:text-gray-400">Loan Officer:</span>
                                    <span
                                        class="font-medium text-gray-900 dark:text-white">{{ $loan?->officers?->fullname ?? 'N/A' }}</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-600 dark:text-gray-400">Interest Type:</span>
                                    <span
                                        class="font-medium text-gray-900 dark:text-white">{{ \App\Constants\LoanConstants::getInterestTypeName($loan->loanType->interest_method) }}</span>
                                </div>
                            </div>
                        </div>

                        <!-- Financial Information -->
                        <div class="space-y-4">
                            <h3 class="text-lg font-semibold text-gray-900 dark:text-white border-b pb-2">Financial
                                Information</h3>

                            <div class="space-y-3">
                                <div class="flex justify-between">
                                    <span class="text-gray-600 dark:text-gray-400">Principal Amount:</span>
                                    <span
                                        class="font-medium text-green-600 dark:text-green-400">{{ formatCurrencyDecimals($loan->principal_amount) }}</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-600 dark:text-gray-400">Interest Rate:</span>
                                    <span
                                        class="font-medium text-gray-900 dark:text-white">{{ formatAmount($loan->interest_rate) }}%</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-600 dark:text-gray-400">Interest Amount:</span>
                                    <span class="font-medium text-blue-600 dark:text-blue-400">
                                        @if (
                                            $loan->loanType->interest_method == \App\Constants\LoanConstants::DECLINING_BALANCE &&
                                                $loan->level_status_id == \App\Constants\LoanConstants::PENDING)
                                            To be calculated
                                        @else
                                            {{ formatCurrencyDecimals($loan->interest_amount) }}
                                        @endif
                                    </span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-600 dark:text-gray-400">Total Loan Amount:</span>
                                    <span class="font-medium text-purple-600 dark:text-purple-400">
                                        @if (
                                            $loan->loanType->interest_method == \App\Constants\LoanConstants::DECLINING_BALANCE &&
                                                $loan->level_status_id == \App\Constants\LoanConstants::PENDING)
                                            To be calculated
                                        @else
                                            {{ formatCurrencyDecimals($loan->loan_amount) }}
                                        @endif
                                    </span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-600 dark:text-gray-400">Current Balance:</span>
                                    <span class="font-medium text-red-600 dark:text-red-400">
                                        @if (
                                            $loan->loanType->interest_method == \App\Constants\LoanConstants::DECLINING_BALANCE &&
                                                $loan->level_status_id == \App\Constants\LoanConstants::PENDING)
                                            To be calculated
                                        @else
                                            {{ formatCurrencyDecimals($loan->repaymentSchedules->sum('balance')) }}
                                        @endif
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Additional Information -->
                    <div class="mt-8 space-y-4">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white border-b pb-2">Additional
                            Information</h3>

                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                            <div>
                                <span class="text-gray-600 dark:text-gray-400">Number of Installments:</span>
                                <p class="font-medium text-gray-900 dark:text-white">
                                    {{ formatAmount($loan->installments) }}</p>
                            </div>
                            <div>
                                <span class="text-gray-600 dark:text-gray-400">First Installment Date:</span>
                                <p class="font-medium text-gray-900 dark:text-white">
                                    {{ date('d M, Y (D)', strtotime($loan->first_installment_date)) }}</p>
                            </div>
                        </div>

                        @if (!is_null($loan->disbursement_on))
                            <div class="bg-green-50 dark:bg-green-900 rounded-lg p-4 mt-4">
                                <h4 class="font-semibold text-green-800 dark:text-green-200 mb-2">Disbursement Information
                                </h4>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div>
                                        <span class="text-green-600 dark:text-green-400">Disbursed On:</span>
                                        <p class="font-medium text-green-800 dark:text-green-200">
                                            {{ $loan->disbursement_on?->format('l, d F Y') }}</p>
                                    </div>
                                </div>
                            </div>
                        @endif

                        @if ($loan->comment)
                            <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
                                <h4 class="font-semibold text-gray-800 dark:text-gray-200 mb-2">Comments</h4>
                                <p class="text-gray-700 dark:text-gray-300">{{ $loan->comment }}</p>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Files Tab -->
                <div x-show="activeTab === 'files'" 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">
                    @if ($loan->loanFiles->count() > 0)
                        <div class="overflow-x-auto">
                            <x-table.table>
                                <x-table.head>
                                    <th class="px-4 py-3">File Name</th>
                                    <th class="px-4 py-3">Upload Date</th>
                                    @if (Auth::user()->can('file-delete') || Auth::user()->can('file-show'))
                                        <th class="px-4 py-3">Actions</th>
                                    @endif
                                </x-table.head>
                                <x-table.body>
                                    @foreach ($loan->loanFiles as $file)
                                        <x-table.row>
                                            <x-table.cell>
                                                <div class="flex items-center">
                                                    <i class="fa fa-file-alt text-gray-400 mr-3"></i>
                                                    {{ $file->file_name }}
                                                </div>
                                            </x-table.cell>
                                            <x-table.cell>{{ $file->created_at?->format('d M, Y H:i') ?? 'N/A' }}</x-table.cell>
                                            <x-table.cell>
                                                <div class="flex items-center space-x-3">
                                                    @if (Auth::user()->can('file-show'))
                                                        <x-tooltip message="Download file" position="left">
                                                            <x-link route="{{ route('loan-files.download', $file) }}"
                                                                class="text-blue-600 hover:text-blue-800">
                                                                <i class="fas fa-download"></i>
                                                            </x-link>
                                                        </x-tooltip>
                                                    @endif
                                                    @if (Auth::user()->can('file-delete'))
                                                        <x-tooltip message="Delete file" position="left">
                                                            <x-delete-button
                                                                route="{{ route('loan.files.delete', ['loan' => $loan->id, 'file' => $file->id]) }}" />
                                                        </x-tooltip>
                                                    @endif
                                                </div>
                                            </x-table.cell>
                                        </x-table.row>
                                    @endforeach
                                </x-table.body>
                            </x-table.table>
                        </div>
                    @else
                        <div class="text-center py-12">
                            <i class="fa fa-file-alt text-6xl text-gray-300 dark:text-gray-600 mb-4"></i>
                            <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">No files uploaded</h3>
                            <p class="text-gray-500 dark:text-gray-400 mb-4">This loan doesn't have any files yet.</p>
                            @if (Auth::user()->can('file-create'))
                                <a href="{{ route('loan.file.add', $loan->id) }}"
                                    class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-md hover:bg-purple-700">
                                    <i class="fa fa-upload mr-2"></i>
                                    Upload Files
                                </a>
                            @endif
                        </div>
                    @endif
                </div>

                <!-- Collaterals Tab -->
                <div x-show="activeTab === 'collaterals'" 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">
                    @if ($loan->collaterals->count() > 0)
                        <div class="overflow-x-auto">
                            <x-table.table>
                                <x-table.head>
                                    <th class="px-4 py-3">Collateral Type</th>
                                    <th class="px-4 py-3">Collateral Name</th>
                                    <th class="px-4 py-3">Estimated Value ({{ getCurrencyCode() }})</th>
                                    @if (Auth::user()->can('loans-edit') || Auth::user()->can('loans-delete'))
                                        <th class="px-4 py-3">Actions</th>
                                    @endif
                                </x-table.head>
                                <x-table.body>
                                    @foreach ($loan->collaterals as $collateral)
                                        <x-table.row>
                                            <x-table.cell>
                                                <span
                                                    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
                                                    {{ $collateral->type }}
                                                </span>
                                            </x-table.cell>
                                            <x-table.cell>{{ $collateral->name }}</x-table.cell>
                                            <x-table.cell>
                                                <span class="font-semibold text-green-600 dark:text-green-400">
                                                    {{ formatAmount($collateral->estimated_value) }}
                                                </span>
                                            </x-table.cell>
                                            <x-table.cell>
                                                <div class="flex items-center space-x-3">
                                                    @if (Auth::user()->can('loans-edit'))
                                                        <x-tooltip message="View details" position="left">
                                                            <x-link
                                                                route="{{ route('loans.loan-collaterals.show', ['loan' => $loan->id, 'loan_collateral' => $collateral->id]) }}"
                                                                class="text-blue-600 hover:text-blue-800">
                                                                <i class="fas fa-eye"></i>
                                                            </x-link>
                                                        </x-tooltip>
                                                        <x-tooltip message="Edit collateral" position="left">
                                                            <x-link
                                                                route="{{ route('loans.loan-collaterals.edit', ['loan' => $loan->id, 'loan_collateral' => $collateral->id]) }}"
                                                                class="text-yellow-600 hover:text-yellow-800">
                                                                <i class="fas fa-edit"></i>
                                                            </x-link>
                                                        </x-tooltip>
                                                    @endif
                                                    @if (Auth::user()->can('loans-delete'))
                                                        <x-tooltip message="Delete collateral" position="left">
                                                            <x-delete-button
                                                                route="{{ route('loans.loan-collaterals.destroy', ['loan' => $loan->id, 'loan_collateral' => $collateral->id]) }}" />
                                                        </x-tooltip>
                                                    @endif
                                                </div>
                                            </x-table.cell>
                                        </x-table.row>
                                    @endforeach
                                </x-table.body>
                            </x-table.table>
                        </div>

                        <!-- Collateral Summary -->
                        <div class="mt-6 bg-blue-50 dark:bg-blue-900 rounded-lg p-4">
                            <h4 class="font-semibold text-blue-800 dark:text-blue-200 mb-2">Collateral Summary</h4>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <span class="text-blue-600 dark:text-blue-400">Total Items:</span>
                                    <p class="font-medium text-blue-800 dark:text-blue-200">
                                        {{ $loan->collaterals->count() }}</p>
                                </div>
                                <div>
                                    <span class="text-blue-600 dark:text-blue-400">Total Estimated Value:</span>
                                    <p class="font-medium text-blue-800 dark:text-blue-200">
                                        {{ formatCurrencyDecimals($loan->collaterals->sum('estimated_value')) }}</p>
                                </div>
                            </div>
                        </div>
                    @else
                        <div class="text-center py-12">
                            <i class="fa fa-shield-alt text-6xl text-gray-300 dark:text-gray-600 mb-4"></i>
                            <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">No collaterals added</h3>
                            <p class="text-gray-500 dark:text-gray-400 mb-4">This loan doesn't have any collateral items
                                yet.</p>
                            @if (Auth::user()->can('loans-create'))
                                <a href="{{ route('loans.loan-collaterals.create', $loan->id) }}"
                                    class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-md hover:bg-purple-700">
                                    <i class="fa fa-plus mr-2"></i>
                                    Add Collateral
                                </a>
                            @endif
                        </div>
                    @endif
                </div>

                <!-- Charges Tab -->
                <div x-show="activeTab === 'charges'" 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">

                    <!-- Loan Charges -->
                    <div class="space-y-6">
                        <!-- Primary Loan Charge -->
                        @if ($loan->charges)
                            <div class="bg-purple-50 dark:bg-purple-900 rounded-lg p-6">
                                <h4 class="font-semibold text-purple-800 dark:text-purple-200 mb-4 flex items-center">
                                    <i class="fa fa-money-bill mr-2"></i>
                                    Loan Charges
                                </h4>
                                <x-table.table>
                                    <x-table.head>
                                        <th class="px-4 py-3">Charge Name</th>
                                        <th class="px-4 py-3">Charge Type</th>
                                        <th class="px-4 py-3">Charge Amount ({{ getCurrencyCode() }})</th>
                                    </x-table.head>
                                    <x-table.body>
                                        @forelse($loan->charges as $charge)
                                            <x-table.row>
                                                <x-table.cell>{{ $charge->name }}</x-table.cell>
                                                <x-table.cell>{{ $charge->format == 'rate' ? 'Rate' . ' ' . $charge->amount . '%' : 'Fixed' }}</x-table.cell>
                                                <x-table.cell>{{ formatAmount($charge->pivot->amount) }}</x-table.cell>
                                            </x-table.row>
                                        @empty
                                            <x-table.row>
                                                <x-table.cell colspan="3" class="text-center text-gray-500">No charges
                                                    applied</x-table.cell>
                                            </x-table.row>
                                        @endforelse
                                    </x-table.body>
                                </x-table.table>

                            </div>
                        @endif

                        <!-- Penalty Charges (if any) -->
                        @if ($loan->penalties && $loan->penalties->count() > 0)
                            <div class="bg-red-50 dark:bg-red-900 rounded-lg p-6">
                                <h4 class="font-semibold text-red-800 dark:text-red-200 mb-4 flex items-center">
                                    <i class="fa fa-exclamation-triangle mr-2"></i>
                                    Penalty Charges
                                </h4>
                                <div class="overflow-x-auto">
                                    <table class="min-w-full">
                                        <thead>
                                            <tr class="border-b border-red-200 dark:border-red-700">
                                                <th class="text-left py-2 text-red-600 dark:text-red-400">Date</th>
                                                <th class="text-left py-2 text-red-600 dark:text-red-400">Type</th>
                                                <th class="text-left py-2 text-red-600 dark:text-red-400">Amount
                                                    ({{ getCurrencyCode() }})</th>
                                                <th class="text-left py-2 text-red-600 dark:text-red-400">Status</th>
                                            </tr>
                                        </thead>
                                        <tbody class="divide-y divide-red-200 dark:divide-red-700">
                                            @foreach ($loan->penalties as $penalty)
                                                <tr>
                                                    <td class="py-2 text-red-800 dark:text-red-200">
                                                        {{ $penalty->created_at?->format('d M, Y') }}</td>
                                                    <td class="py-2 text-red-800 dark:text-red-200">
                                                        {{ $penalty->type ?? 'Late Payment' }}</td>
                                                    <td class="py-2 text-red-800 dark:text-red-200">
                                                        {{ formatAmount($penalty->amount) }}</td>
                                                    <td class="py-2">
                                                        <span
                                                            class="px-2 py-1 text-xs rounded-full {{ $penalty->status === 'paid' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                                                            {{ ucfirst($penalty->status ?? 'pending') }}
                                                        </span>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                                <div class="mt-4 text-right">
                                    <span class="text-red-600 dark:text-red-400">Total Penalties:</span>
                                    <span
                                        class="font-bold text-red-800 dark:text-red-200">{{ formatCurrencyDecimals($loan->penalties->sum('amount')) }}</span>
                                </div>
                            </div>
                        @endif

                        <!-- Total Charges Summary -->
                        <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-6">
                            <h4 class="font-semibold text-gray-800 dark:text-gray-200 mb-4 flex items-center">
                                <i class="fa fa-calculator mr-2"></i>
                                Total Charges Summary
                            </h4>
                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                                <div class="text-center">
                                    <span class="text-gray-600 dark:text-gray-400">Loan Charge:</span>
                                    <p class="font-bold text-purple-600 dark:text-purple-400">
                                        {{ formatCurrencyDecimals(
                                            $loan->charges->sum(function ($charge) {
                                                return $charge->pivot->amount;
                                            }),
                                        ) }}
                                    </p>
                                </div>
                                <div class="text-center border-l-2 border-gray-300 dark:border-gray-600">
                                    <span class="text-gray-600 dark:text-gray-400">Penalties:</span>
                                    <p class="font-bold text-red-600 dark:text-red-400">
                                        {{ formatCurrencyDecimals($loan->penalties?->sum('amount') ?? 0) }}</p>
                                </div>
                                <div class="text-center border-l-2 border-gray-300 dark:border-gray-600">
                                    <span class="text-gray-600 dark:text-gray-400">Total Charges:</span>
                                    @php
                                        $totalCharges =
                                            $loan->charges->sum(function ($charge) {
                                                return $charge->pivot->amount;
                                            }) +
                                            ($loan->penalties?->sum('amount') ?? 0);
                                    @endphp
                                    <p class="font-bold text-gray-800 dark:text-gray-200 text-lg">
                                        {{ formatCurrencyDecimals($totalCharges) }}</p>
                                </div>
                            </div>
                        </div>

                        @if (!$loan->charge && !$loan->loanDisbursementFees && (!$loan->penalties || $loan->penalties->count() === 0))
                            <div class="text-center py-12">
                                <i class="fa fa-money-bill text-6xl text-gray-300 dark:text-gray-600 mb-4"></i>
                                <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">No charges applied</h3>
                                <p class="text-gray-500 dark:text-gray-400">This loan doesn't have any charges or fees yet.
                                </p>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Schedule Tab -->
                @if ($loan->level_status_id == 1)
                    <div x-show="activeTab === 'schedule'" 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">

                        @if ($loan->repaymentSchedules->count() > 0)
                            <!-- Schedule Summary Cards -->
                            <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
                                <div class="bg-blue-50 dark:bg-blue-900 rounded-lg p-4 text-center">
                                    <h6 class="text-sm font-medium text-blue-600 dark:text-blue-400">Total Installments
                                    </h6>
                                    <p class="text-2xl font-bold text-blue-700 dark:text-blue-300">
                                        {{ $loan->repaymentSchedules->count() }}</p>
                                </div>
                                <div class="bg-green-50 dark:bg-green-900 rounded-lg p-4 text-center">
                                    <h6 class="text-sm font-medium text-green-600 dark:text-green-400">Paid</h6>
                                    <p class="text-2xl font-bold text-green-700 dark:text-green-300">
                                        {{ $loan->repaymentSchedules->where('status', 'paid')->count() }}</p>
                                </div>
                                <div class="bg-yellow-50 dark:bg-yellow-900 rounded-lg p-4 text-center">
                                    <h6 class="text-sm font-medium text-yellow-600 dark:text-yellow-400">Partial</h6>
                                    <p class="text-2xl font-bold text-yellow-700 dark:text-yellow-300">
                                        {{ $loan->repaymentSchedules->where('status', 'partial')->count() }}</p>
                                </div>
                                <div class="bg-red-50 dark:bg-red-900 rounded-lg p-4 text-center">
                                    <h6 class="text-sm font-medium text-red-600 dark:text-red-400">Pending</h6>
                                    <p class="text-2xl font-bold text-red-700 dark:text-red-300">
                                        {{ $loan->repaymentSchedules->where('status', 'pending')->count() }}</p>
                                </div>
                            </div>

                            <div class="overflow-x-auto">
                                <x-table.table>
                                    <x-table.head>
                                        <th class="px-4 py-3">#</th>
                                        <th class="px-4 py-3">Date</th>
                                        <th class="px-4 py-3">Installment Amount</th>
                                        <th class="px-4 py-3">Principal Paid</th>
                                        <th class="px-4 py-3">Interest Paid</th>
                                        <th class="px-4 py-3">Balance</th>
                                        <th class="px-4 py-3">Days in Arrears</th>
                                        <th class="px-4 py-3">Status</th>
                                        <th class="px-4 py-3">Actions</th>
                                    </x-table.head>
                                    <x-table.body>
                                        @foreach ($loan->repaymentSchedules as $index => $schedule)
                                            <x-table.row
                                                class="{{ $schedule->status === 'paid' ? 'bg-green-50 dark:bg-green-900' : ($schedule->status === 'partial' ? 'bg-yellow-50 dark:bg-yellow-900' : '') }}">
                                                <x-table.cell>{{ $index + 1 }}</x-table.cell>
                                                <x-table.cell>{{ $schedule->date?->format('d M, Y') ?? 'N/A' }}</x-table.cell>
                                                <x-table.cell>{{ formatAmount($schedule->amount) }}</x-table.cell>
                                                <x-table.cell>
                                                    <span
                                                        class="text-green-600 dark:text-green-400">{{ formatAmount($schedule->principal_paid) }}</span>
                                                </x-table.cell>
                                                <x-table.cell>
                                                    <span
                                                        class="text-blue-600 dark:text-blue-400">{{ formatAmount($schedule->interest_paid) }}</span>
                                                </x-table.cell>
                                                <x-table.cell>
                                                    <span
                                                        class="text-red-600 dark:text-red-400">{{ formatAmount($schedule->balance) }}</span>
                                                </x-table.cell>
                                                <x-table.cell>{{ formatAmount($schedule->days_in_arrears ?? 0) }}</x-table.cell>
                                                <x-table.cell>
                                                    <span
                                                        class="px-2 py-1 text-xs font-semibold rounded-full 
                                                        {{ $schedule->status === 'paid'
                                                            ? 'text-green-800 bg-green-100 dark:bg-green-200 dark:text-green-900'
                                                            : ($schedule->status === 'partial'
                                                                ? 'text-yellow-800 bg-yellow-100 dark:bg-yellow-200 dark:text-yellow-900'
                                                                : 'text-red-800 bg-red-100 dark:bg-red-200 dark:text-red-900') }}">
                                                        {{ ucfirst($schedule->status) }}
                                                    </span>
                                                </x-table.cell>
                                                <x-table.cell>
                                                    @if (Auth::user()->can('loans-edit'))
                                                        <x-tooltip message="View schedule details" position="left">
                                                            <a href="{{ route('loans.repayment-schedule.show', [$loan, $schedule]) }}"
                                                                class="text-blue-600 hover:text-blue-800 dark:text-blue-400">
                                                                <i class="fa fa-eye"></i>
                                                            </a>
                                                        </x-tooltip>
                                                    @endif
                                                </x-table.cell>
                                            </x-table.row>
                                        @endforeach

                                        <!-- Totals Row -->
                                        <x-table.row class="bg-gray-100 dark:bg-gray-700 font-semibold">
                                            <x-table.cell colspan="2" class="text-center">Loan Totals</x-table.cell>
                                            <x-table.cell>{{ formatAmount($loan->repaymentSchedules()->sum('amount')) }}</x-table.cell>
                                            <x-table.cell
                                                class="text-green-600 dark:text-green-400">{{ formatAmount($loan->repaymentSchedules()->sum('principal_paid')) }}</x-table.cell>
                                            <x-table.cell
                                                class="text-blue-600 dark:text-blue-400">{{ formatAmount($loan->repaymentSchedules()->sum('interest_paid')) }}</x-table.cell>
                                            <x-table.cell
                                                class="text-red-600 dark:text-red-400">{{ formatAmount($loan->repaymentSchedules()->sum('balance')) }}</x-table.cell>
                                            <x-table.cell></x-table.cell>
                                            <x-table.cell></x-table.cell>
                                            <x-table.cell></x-table.cell>
                                        </x-table.row>
                                    </x-table.body>
                                </x-table.table>
                            </div>
                        @else
                            <div class="text-center py-12">
                                <i class="fa fa-calendar-alt text-6xl text-gray-300 dark:text-gray-600 mb-4"></i>
                                <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">No repayment schedule
                                </h3>
                                <p class="text-gray-500 dark:text-gray-400">This loan doesn't have a repayment schedule
                                    yet.</p>
                            </div>
                        @endif
                    </div>
                @endif
            </div>
        </div>
    </div>

    <script>
        function loanDetailsTabs() {
            return {
                activeTab: 'details', // Default to details tab

                init() {
                    // Load saved tab from localStorage
                    const savedTab = localStorage.getItem('loanDetailsActiveTab');
                    if (savedTab) {
                        this.activeTab = savedTab;
                    }
                },

                setActiveTab(tab) {
                    this.activeTab = tab;
                    // Save to localStorage
                    localStorage.setItem('loanDetailsActiveTab', tab);
                }
            }
        }
    </script>
@endsection