@extends('layout.main')

@section('content')
    <div class="container mx-auto px-4 py-8" x-data="{ activeTab: 'active_loans' }">
        <div class="flex items-center mb-8">
            @if ($client->avatar)
                <img class="w-20 h-20 rounded-full mr-4" src="{{ Storage::url($client->avatar) }}" alt="Client Avatar">
            @else
                <div class="w-20 h-20 rounded-full mr-4 bg-gray-200 flex items-center justify-center text-gray-500">
                    No Image
                </div>
            @endif
            <div>
                <h1 class="text-xl font-bold">{{ $client->fullname }}</h1>
                <p class="text-gray-500 text-sm">Client Code: {{ $client->client_code }}</p>
                <p class="text-gray-500 text-sm">ID Number: {{ $client->idnumber }}</p>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
            <div class="bg-gray-100 p-4 rounded-md dark:bg-gray-800">
                <h3 class="font-bold mb-2 text-gray-700 dark:text-gray-300">Personal Information</h3>
                <ul class="space-y-2 text-gray-600 dark:text-gray-400">
                    <li><strong>Gender:</strong> {{ $client->gender ?? 'N/A' }}</li>
                    <li><strong>Phone:</strong> {{ $client->phone ?? 'N/A' }}</li>
                    <li><strong>Location:</strong> {{ $client->location ?? 'N/A' }}</li>
                    <li><strong>Date of Birth:</strong> {{ $client?->dob?->format('d, F Y') ?? 'N/A' }}</li>
                    <li><strong>Sector:</strong> {{ $client->sector?->name ?? 'N/A' }}</li>
                    <li><strong>Job Description:</strong> {{ $client->job_description ?? 'N/A' }}</li>
                    <li><strong>Registration Fee:</strong> {{ $client->charge?->name ?? 'N/A' }}</li>
                </ul>
            </div>
            <div class="bg-gray-100 p-4 rounded-md dark:bg-gray-800">
                <h3 class="font-bold mb-2 text-gray-700 dark:text-gray-300">Referee Information</h3>
                <ul class="space-y-2 text-gray-600 dark:text-gray-400">
                    <li><strong>Name:</strong> {{ $client->referee_name ?? 'N/A' }}</li>
                    <li><strong>ID Number:</strong> {{ $client->referee_id ?? 'N/A' }}</li>
                    <li><strong>Occupation:</strong> {{ $client->referee_job ?? 'N/A' }}</li>
                    <li><strong>Contact:</strong> {{ $client->referee_phone ?? 'N/A' }}</li>
                    <li><strong>Address:</strong> {{ $client->referee_address ?? 'N/A' }}</li>
                    @if ($client->referee_pic)
                        <li>
                            <strong>Picture:</strong>
                            <img src="{{ Storage::url($client->referee_pic) }}" alt="Referee Picture"
                                class="max-w-xs h-auto rounded mt-2" />
                        </li>
                    @endif
                </ul>
            </div>
        </div>

        <div class="mt-8  overflow-x-auto">
            <ul class="flex items-center border-b border-gray-200 dark:border-gray-700 mb-4">
                <li class="inline-block text-gray-500 hover:text-gray-600 hover:border-gray-300 rounded-t-lg py-4 px-4 text-sm font-medium text-center border-transparent border-b-2 dark:text-gray-400 dark:hover:text-gray-300"
                    :class="{ 'border-purple-600 text-purple-600 dark:border-purple-400 dark:text-purple-400': activeTab === 'active_loans' }">
                    <a href="#" @click.prevent="activeTab = 'active_loans'">Active Loans</a>
                </li>
                <li class="inline-block text-gray-500 hover:text-gray-600 hover:border-gray-300 rounded-t-lg py-4 px-4 text-sm font-medium text-center border-transparent border-b-2 dark:text-gray-400 dark:hover:text-gray-300"
                    :class="{ 'border-purple-600 text-purple-600 dark:border-purple-400 dark:text-purple-400': activeTab === 'loan_history' }">
                    <a href="#" @click.prevent="activeTab = 'loan_history'">Loan History</a>
                </li>
            </ul>

            <div class="mt-4">
                <!-- Active Loans Tab -->
                <div x-show="activeTab === 'active_loans'" class="bg-gray-50 p-4 rounded-lg dark:bg-gray-800">
                    <h3 class="text-lg font-semibold mb-4 text-gray-700 dark:text-gray-300">Active Loans</h3>
                    @if ($client->clientLoans->whereIn('loan.payment_status', ['unpaid', 'partial'])?->isEmpty())
                        <p class="text-gray-600 dark:text-gray-400">No active loans found.</p>
                    @else
                        <table class="w-full whitespace-no-wrap">
                            <thead>
                                <tr
                                    class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
                                    <th class="px-4 py-3">Loan Code</th>
                                    <th class="px-4 py-3">Loan Amount</th>
                                    <th class="px-4 py-3">Loan + Interest</th>
                                    <th class="px-4 py-3">Loan Type</th>
                                    <th class="px-4 py-3">Installments</th>
                                    <th class="px-4 py-3">Status</th>
                                    @if (Auth::user()->can('loans-edit') || Auth::user()->can('loans-delete'))
                                        <th class="px-4 py-3">Actions</th>
                                    @endif
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
                                @foreach ($client->clientLoans->whereIn('loan.payment_status', ['unpaid', 'partial']) as $clientLoan)
                                    @if ($clientLoan->loan)
                                        <tr>
                                            <td class="px-4 py-3">{{ $clientLoan->loan->loan_code }}</td>
                                            <td class="px-4 py-3">
                                                {{ number_format($clientLoan->loan->principal_amount, 2) }}</td>
                                            <td class="px-4 py-3">{{ number_format($clientLoan->loan->loan_amount, 2) }}
                                            </td>
                                            <td class="px-4 py-3">{{ $clientLoan->loan->loanType?->product_name ?? 'N/A' }}
                                            </td>
                                            <td class="px-4 py-3">{{ number_format($clientLoan->loan->installments) }}</td>
                                            <td class="px-4 py-3">
                                                @switch($clientLoan->loan->level_status_id)
                                                    @case(\App\Constants\LoanConstants::APPROVED)
                                                        <x-badge color="green">Approved</x-badge>
                                                    @break

                                                    @case(\App\Constants\LoanConstants::PARTIALLY_APPROVED)
                                                        <x-badge color="yellow">partial</x-badge>
                                                    @break

                                                    @case(\App\Constants\LoanConstants::DECLINED)
                                                        <x-badge color="red">rejected</x-badge>
                                                    @break

                                                    @default
                                                        <x-badge color="blue">Pending</x-badge>
                                                @endswitch
                                            </td>
                                            @if (Auth::user()->can('loans-edit') || Auth::user()->can('loans-show') || Auth::user()->can('loans-delete'))
                                                <td class="px-4 py-3">
                                                    <div class="flex items-center space-x-2 text-sm">
                                                        @if (Auth::user()->can('loans-edit'))
                                                            <a href="{{ route('loans.edit', $clientLoan->loan->id) }}"
                                                                title="Edit Loan Product"
                                                                class="flex items-center justify-center px-2 py-2 text-sm font-medium leading-5 text-purple-600 rounded-lg dark:text-purple-400 hover:bg-purple-100 dark:hover:bg-purple-900 focus:outline-none focus:shadow-outline-gray transition-colors duration-150"
                                                                aria-label="Edit">
                                                                <i class="fa fa-pen"></i>
                                                            </a>
                                                        @endif
                                                        @can('loans-show')
                                                            <a href="{{ route('loans.show', $clientLoan->loan->id) }}"
                                                                title="View Details"
                                                                class="flex items-center justify-center px-2 py-2 text-sm font-medium leading-5 text-blue-600 rounded-lg dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-900 focus:outline-none focus:shadow-outline-gray transition-colors duration-150"
                                                                aria-label="View">
                                                                <i class="fa fa-bars"></i>
                                                            </a>
                                                        @endcan
                                                        @if (Auth::user()->can('loans-delete'))
                                                            <form
                                                                action="{{ route('loans.destroy', $clientLoan->loan->id) }}"
                                                                method="POST" class="inline">
                                                                @csrf
                                                                @method('DELETE')
                                                                <button
                                                                    onclick="return confirm('{{ __('Are you sure you want to delete this loan product?') }}')"
                                                                    title="Delete Loan Product"
                                                                    class="flex items-center justify-center px-2 py-2 text-sm font-medium leading-5 text-red-600 rounded-lg dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-900 focus:outline-none focus:shadow-outline-gray transition-colors duration-150"
                                                                    aria-label="Delete">
                                                                    <i class="fa fa-trash"></i>
                                                                </button>
                                                            </form>
                                                        @endif
                                                    </div>
                                                </td>
                                            @endif
                                        </tr>
                                    @endif
                                @endforeach
                            </tbody>
                        </table>
                    @endif
                </div>

                <!-- Loan History Tab -->
                <div x-show="activeTab === 'loan_history'" class="bg-gray-50 p-4 rounded-lg dark:bg-gray-800 overflow-x-auto ">
                    <h3 class="text-lg font-semibold mb-4 text-gray-700 dark:text-gray-300">Loan History</h3>
                    @if ($client?->clientLoans?->isEmpty())
                        <p class="text-gray-600 dark:text-gray-400">No loan history found.</p>
                    @else
                        <table class="w-full whitespace-no-wrap">
                            <thead>
                                <tr
                                    class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
                                    <th class="px-4 py-3">Loan Code</th>
                                    <th class="px-4 py-3">Principal Amount</th>
                                    <th class="px-4 py-3">Interest Rate (%)</th>
                                    <th class="px-4 py-3">Interest Amount</th>
                                    <th class="px-4 py-3">Loan + Interest</th>
                                    <th class="px-4 py-3">Loan Type</th>
                                    <th class="px-4 py-3">Installments</th>
                                    <th class="px-4 py-3">Status</th>
                                    @if (Auth::user()->can('loans-edit') || Auth::user()->can('loans-delete'))
                                        <th class="px-4 py-3">Actions</th>
                                    @endif
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
                                @foreach ($client->clientLoans as $clientLoan)
                                    @if ($clientLoan->loan)
                                        <tr>
                                            <td class="px-4 py-3">{{ $clientLoan->loan->loan_code }}</td>
                                            <td class="px-4 py-3">
                                                {{ number_format($clientLoan->loan->principal_amount, 2) }}</td>
                                            <td class="px-4 py-3">{{ number_format($clientLoan->loan->interest_rate, 2) }}
                                            </td>
                                            <td class="px-4 py-3">
                                                {{ number_format($clientLoan->loan->interest_amount, 2) }}</td>
                                            <td class="px-4 py-3">{{ number_format($clientLoan->loan->loan_amount, 2) }}
                                            </td>
                                            <td class="px-4 py-3">{{ $clientLoan->loan->loanType?->product_name ?? 'N/A' }}
                                            </td>
                                            <td class="px-4 py-3">{{ number_format($clientLoan->loan->installments) }}</td>
                                            <td class="px-4 py-3">
                                                @switch($clientLoan->loan->level_status_id)
                                                    @case(\App\Constants\LoanConstants::APPROVED)
                                                        <x-badge color="green">Approved</x-badge>
                                                    @break

                                                    @case(\App\Constants\LoanConstants::PARTIALLY_APPROVED)
                                                        <x-badge color="yellow">partial</x-badge>
                                                    @break

                                                    @case(\App\Constants\LoanConstants::DECLINED)
                                                        <x-badge color="red">rejected</x-badge>
                                                    @break

                                                    @default
                                                        <x-badge color="blue">Pending</x-badge>
                                                @endswitch
                                            </td>

                                            @if (Auth::user()->can('loans-edit') || Auth::user()->can('loans-show') || Auth::user()->can('loans-delete'))
                                                <td class="px-4 py-3">
                                                    <div class="flex items-center space-x-2 text-sm">
                                                        @if (Auth::user()->can('loans-edit'))
                                                            <a href="{{ route('loans.edit', $clientLoan->loan->id) }}"
                                                                title="Edit Loan Product"
                                                                class="flex items-center justify-center px-2 py-2 text-sm font-medium leading-5 text-purple-600 rounded-lg dark:text-purple-400 hover:bg-purple-100 dark:hover:bg-purple-900 focus:outline-none focus:shadow-outline-gray transition-colors duration-150"
                                                                aria-label="Edit">
                                                                <i class="fa fa-pen"></i>
                                                            </a>
                                                        @endif
                                                        @can('loans-show')
                                                            <a href="{{ route('loans.show', $clientLoan->loan->id) }}"
                                                                title="View Details"
                                                                class="flex items-center justify-center px-2 py-2 text-sm font-medium leading-5 text-blue-600 rounded-lg dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-900 focus:outline-none focus:shadow-outline-gray transition-colors duration-150"
                                                                aria-label="View">
                                                                <i class="fa fa-bars"></i>
                                                            </a>
                                                        @endcan
                                                        @if (Auth::user()->can('loans-delete'))
                                                            <form
                                                                action="{{ route('loans.destroy', $clientLoan->loan->id) }}"
                                                                method="POST" class="inline">
                                                                @csrf
                                                                @method('DELETE')
                                                                <button
                                                                    onclick="return confirm('{{ __('Are you sure you want to delete this loan product?') }}')"
                                                                    title="Delete Loan Product"
                                                                    class="flex items-center justify-center px-2 py-2 text-sm font-medium leading-5 text-red-600 rounded-lg dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-900 focus:outline-none focus:shadow-outline-gray transition-colors duration-150"
                                                                    aria-label="Delete">
                                                                    <i class="fa fa-trash"></i>
                                                                </button>
                                                            </form>
                                                        @endif
                                                    </div>
                                                </td>
                                            @endif
                                        </tr>
                                    @endif
                                @endforeach
                            </tbody>
                        </table>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('tabs', () => ({
                activeTab: 'active_loans'
            }));
        });
    </script>
@endpush