{{-- Admin Loan Product Details --}}
<x-app-layout title="Product Details">

    <x-module-hero :title="$loanProduct->name" :description="$loanProduct->interest_rate_display ?? $loanProduct->interest_rate . '% APR'" icon="fa-money-bill-wave">
        <x-slot name="backButton">
            <a href="{{ route('admin.loan-products.index') }}" class="inline-flex items-center gap-2 text-white/80 hover:text-white text-sm transition">
                <i class="fas fa-arrow-left"></i> Back to Products
            </a>
        </x-slot>
        <x-slot name="tabs">
            @can('view loan products')
                <a href="{{ route('admin.loan-products.index') }}" class="module-hero-tab">
                    <i class="fas fa-box"></i> Products
                </a>
            @endcan
            <a href="{{ route('admin.loan-products.show', $loanProduct) }}" class="module-hero-tab active-tab">
                <i class="fas fa-eye"></i> Details
            </a>
            @can('edit loan products')
                <a href="{{ route('admin.loan-products.edit', $loanProduct) }}" class="module-hero-tab">
                    <i class="fas fa-edit"></i> Edit
                </a>
            @endcan
            @can('view loan applications')
                <a href="{{ route('admin.loan-applications.index') }}" class="module-hero-tab">
                    <i class="fas fa-file-alt"></i> Applications
                </a>
            @endcan
            @can('view loan applications')
                <a href="{{ route('admin.loans.active') }}" class="module-hero-tab">
                    <i class="fas fa-check-circle"></i> Active Loans
                </a>
            @endcan
            @can('view loan applications')
                <a href="{{ route('admin.loans.overdue') }}" class="module-hero-tab">
                    <i class="fas fa-exclamation-triangle"></i> Overdue
                </a>
            @endcan
        </x-slot>
    </x-module-hero>

    <div class="p-6">
        @if(session('success'))
            <div class="mb-6 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-center">
                <i class="fas fa-check-circle mr-3"></i> {{ session('success') }}
            </div>
        @endif

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

            {{-- Main Content --}}
            <div class="lg:col-span-2 space-y-6">

                <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                        <h3 class="text-base font-semibold text-gray-900 flex items-center gap-2">
                            <i class="fas fa-info-circle text-green-600"></i> Product Information
                        </h3>
                    </div>
                    <div class="p-6">
                        <p class="text-gray-700 text-sm mb-6">{{ $loanProduct->description ?? 'No description provided.' }}</p>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-xs font-medium text-gray-500 mb-1">Interest Rate</label>
                                <p class="text-2xl font-bold text-green-600">{{ $loanProduct->interest_rate_display ?? $loanProduct->interest_rate . '%' }}</p>
                                <p class="text-xs text-gray-500">{{ ucfirst(str_replace('_', ' ', $loanProduct->interest_type ?? 'fixed')) }}</p>
                            </div>
                            <div>
                                <label class="block text-xs font-medium text-gray-500 mb-1">Amount Range</label>
                                <p class="text-xl font-bold text-gray-900">{{ $loanProduct->formatted_amount_range }}</p>
                                <p class="text-xs text-gray-500">{{ $loanProduct->currency }}</p>
                            </div>
                            <div>
                                <label class="block text-xs font-medium text-gray-500 mb-1">Term Range</label>
                                <p class="text-xl font-bold text-gray-900">{{ $loanProduct->min_term_months }} - {{ $loanProduct->max_term_months }} months</p>
                            </div>
                            <div>
                                <label class="block text-xs font-medium text-gray-500 mb-1">Processing Fee</label>
                                <p class="text-xl font-bold text-gray-900">
                                    @if($loanProduct->processing_fee)
                                        {{ number_format($loanProduct->processing_fee, 2) }} {{ $loanProduct->currency }}
                                    @elseif($loanProduct->processing_fee_percentage)
                                        {{ $loanProduct->processing_fee_percentage }}%
                                    @else
                                        No Fee
                                    @endif
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                        <h3 class="text-base font-semibold text-gray-900 flex items-center gap-2">
                            <i class="fas fa-chart-bar text-green-600"></i> Application Statistics
                        </h3>
                    </div>
                    <div class="p-6 grid grid-cols-2 md:grid-cols-4 gap-4">
                        <div class="text-center p-4 bg-gray-50 rounded-lg">
                            <div class="text-3xl font-bold text-gray-900">{{ $statistics['total_applications'] }}</div>
                            <div class="text-xs text-gray-500 mt-1">Total Applications</div>
                        </div>
                        <div class="text-center p-4 bg-green-50 rounded-lg">
                            <div class="text-3xl font-bold text-green-600">{{ $statistics['approved'] }}</div>
                            <div class="text-xs text-gray-500 mt-1">Approved</div>
                        </div>
                        <div class="text-center p-4 bg-yellow-50 rounded-lg">
                            <div class="text-3xl font-bold text-yellow-600">{{ $statistics['pending'] }}</div>
                            <div class="text-xs text-gray-500 mt-1">Pending</div>
                        </div>
                        <div class="text-center p-4 bg-blue-50 rounded-lg">
                            <div class="text-3xl font-bold text-blue-600">{{ number_format($statistics['total_disbursed'], 0) }}</div>
                            <div class="text-xs text-gray-500 mt-1">Disbursed</div>
                        </div>
                    </div>
                </div>

                @if($loanProduct->requires_collateral || $loanProduct->requires_guarantor || $loanProduct->min_membership_months)
                    <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                        <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                            <h3 class="text-base font-semibold text-gray-900 flex items-center gap-2">
                                <i class="fas fa-clipboard-check text-green-600"></i> Eligibility Requirements
                            </h3>
                        </div>
                        <div class="p-6">
                            <ul class="space-y-2">
                                @if($loanProduct->min_membership_months)
                                    <li class="flex items-center gap-2 text-gray-700 text-sm">
                                        <i class="fas fa-clock text-green-500"></i>
                                        Minimum {{ $loanProduct->min_membership_months }} months of membership
                                    </li>
                                @endif
                                @if($loanProduct->min_contribution_balance)
                                    <li class="flex items-center gap-2 text-gray-700 text-sm">
                                        <i class="fas fa-piggy-bank text-green-500"></i>
                                        Minimum contribution balance: {{ number_format($loanProduct->min_contribution_balance, 2) }} {{ $loanProduct->currency }}
                                    </li>
                                @endif
                                @if($loanProduct->requires_collateral)
                                    <li class="flex items-center gap-2 text-gray-700 text-sm">
                                        <i class="fas fa-file-contract text-green-500"></i>
                                        Collateral required
                                    </li>
                                @endif
                                @if($loanProduct->requires_guarantor)
                                    <li class="flex items-center gap-2 text-gray-700 text-sm">
                                        <i class="fas fa-users text-green-500"></i>
                                        Guarantor required (minimum {{ $loanProduct->min_guarantors ?? 1 }})
                                    </li>
                                @endif
                            </ul>
                        </div>
                    </div>
                @endif
            </div>

            {{-- Sidebar --}}
            <div class="space-y-6">
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                        <h3 class="text-base font-semibold text-gray-900">Quick Info</h3>
                    </div>
                    <div class="p-6 space-y-3">
                        <div class="flex justify-between items-center">
                            <span class="text-gray-500 text-sm">Status</span>
                            <span class="px-2 py-0.5 rounded text-xs font-semibold {{ $loanProduct->is_active ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700' }}">
                                {{ $loanProduct->is_active ? 'Active' : 'Inactive' }}
                            </span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-gray-500 text-sm">Featured</span>
                            <span class="text-gray-900 text-sm">{{ $loanProduct->is_featured ? 'Yes' : 'No' }}</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-gray-500 text-sm">Currency</span>
                            <span class="text-gray-900 text-sm">{{ $loanProduct->currency }}</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-gray-500 text-sm">Created</span>
                            <span class="text-gray-900 text-sm">{{ $loanProduct->created_at->format('M d, Y') }}</span>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                        <h3 class="text-base font-semibold text-gray-900">Actions</h3>
                    </div>
                    <div class="p-6 space-y-3">
                        @can('edit loan products')
                            <a href="{{ route('admin.loan-products.edit', $loanProduct) }}" class="btn-action-edit w-full justify-center">
                                <i class="fas fa-edit"></i> Edit Product
                            </a>
                        @endcan
                        @can('view loan applications')
                            <a href="{{ route('admin.loan-applications.index', ['product_id' => $loanProduct->id]) }}" class="btn-action-view w-full justify-center">
                                <i class="fas fa-file-alt"></i> View Applications
                            </a>
                        @endcan
                        @can('delete loan products')
                            @if($loanProduct->loanApplications()->doesntExist())
                                <form action="{{ route('admin.loan-products.destroy', $loanProduct) }}" method="POST"
                                      onsubmit="return confirm('Are you sure you want to delete this product?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn-action-delete w-full justify-center">
                                        <i class="fas fa-trash"></i> Delete Product
                                    </button>
                                </form>
                            @else
                                <div class="text-center px-4 py-2 bg-gray-100 text-gray-500 rounded text-xs">
                                    <i class="fas fa-lock mr-1"></i> Cannot delete (has applications)
                                </div>
                            @endif
                        @endcan
                    </div>
                </div>
            </div>
        </div>
    </div>

</x-app-layout>
