{{-- Public Loan Product Details --}}
<x-site-layout title="{{ $loanProduct->name }}">
    
    {{-- Hero Section --}}
    <section class="relative bg-gradient-to-r from-green-600 to-green-700">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
            <div class="text-center">
                @if($loanProduct->is_featured)
                    <span class="inline-block bg-yellow-400 text-yellow-900 text-sm px-3 py-1 rounded-full font-semibold mb-4">
                        Featured Product
                    </span>
                @endif
                <h1 class="text-4xl md:text-5xl font-bold text-white mb-4">
                    {{ $loanProduct->name }}
                </h1>
                <p class="text-xl text-green-100 max-w-5xl mx-auto mb-6">
                    {{ $loanProduct->description ?? 'Flexible financing solutions tailored to your needs' }}
                </p>
                <div class="flex justify-center gap-8 text-white">
                    <div>
                        <div class="text-3xl font-bold">{{ $loanProduct->interest_rate_display ?? $loanProduct->interest_rate . '%' }}</div>
                        <div class="text-green-100 text-sm">Interest Rate</div>
                    </div>
                    <div>
                        <div class="text-3xl font-bold">{{ $loanProduct->formatted_amount_range }}</div>
                        <div class="text-green-100 text-sm">Amount Range</div>
                    </div>
                    <div>
                        <div class="text-3xl font-bold">{{ $loanProduct->min_term_months }}-{{ $loanProduct->max_term_months }}</div>
                        <div class="text-green-100 text-sm">Months Term</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- Breadcrumb --}}
    <div class="bg-gray-50 border-b border-gray-200">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
            <nav class="flex items-center space-x-2 text-sm text-gray-600" aria-label="Breadcrumb">
                <a href="{{ url('/') }}" class="hover:text-green-600 transition flex items-center">
                    <i class="fas fa-home mr-1"></i>Home
                </a>
                <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
                <a href="{{ route('loans.index') }}" class="hover:text-green-600 transition">
                    Loan Products
                </a>
                <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
                <span class="text-gray-900 font-medium">{{ $loanProduct->name }}</span>
            </nav>
        </div>
    </div>

    {{-- Main Content --}}
    <section class="py-16 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                
                {{-- Main Content --}}
                <div class="lg:col-span-2 space-y-8">
                    
                    {{-- Product Details --}}
                    <div class="theme-card rounded-xl shadow-lg overflow-hidden">
                        <div class="bg-gray-50 px-6 py-4 border-b border-gray-200">
                            <h2 class="text-xl font-semibold text-gray-900 flex items-center">
                                <i class="fas fa-info-circle text-green-600 mr-3"></i>
                                Product Details
                            </h2>
                        </div>
                        <div class="p-6">
                            <p class="text-gray-700 leading-relaxed mb-6">
                                {{ $loanProduct->description ?? 'This loan product offers flexible financing options designed to meet your personal or business financial needs. With competitive interest rates and customizable repayment terms, we make borrowing simple and affordable.' }}
                            </p>

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div class="p-4 bg-gray-50 rounded-lg">
                                    <div class="text-sm text-gray-500 mb-1">Interest Rate</div>
                                    <div class="text-2xl font-bold text-green-600">
                                        {{ $loanProduct->interest_rate_display ?? $loanProduct->interest_rate . '% APR' }}
                                    </div>
                                    <div class="text-xs text-gray-400 mt-1">{{ ucfirst(str_replace('_', ' ', $loanProduct->interest_type ?? 'fixed')) }}</div>
                                </div>
                                <div class="p-4 bg-gray-50 rounded-lg">
                                    <div class="text-sm text-gray-500 mb-1">Loan Amount</div>
                                    <div class="text-2xl font-bold text-green-600">
                                        {{ $loanProduct->formatted_amount_range }}
                                    </div>
                                    <div class="text-xs text-gray-400 mt-1">{{ $loanProduct->currency }}</div>
                                </div>
                                <div class="p-4 bg-gray-50 rounded-lg">
                                    <div class="text-sm text-gray-500 mb-1">Repayment Term</div>
                                    <div class="text-2xl font-bold text-green-600">
                                        {{ $loanProduct->min_term_months }} - {{ $loanProduct->max_term_months }} months
                                    </div>
                                </div>
                                <div class="p-4 bg-gray-50 rounded-lg">
                                    <div class="text-sm text-gray-500 mb-1">Processing Fee</div>
                                    <div class="text-2xl font-bold text-green-600">
                                        @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
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

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

                    {{-- Terms and Conditions --}}
                    @if($loanProduct->terms_and_conditions)
                        <div class="theme-card rounded-xl shadow-lg overflow-hidden">
                            <div class="bg-gray-50 px-6 py-4 border-b border-gray-200">
                                <h2 class="text-xl font-semibold text-gray-900 flex items-center">
                                    <i class="fas fa-file-alt text-green-600 mr-3"></i>
                                    Terms & Conditions
                                </h2>
                            </div>
                            <div class="p-6">
                                <div class="prose prose-sm text-gray-700">
                                    {{ $loanProduct->terms_and_conditions }}
                                </div>
                            </div>
                        </div>
                    @endif

                    {{-- Loan Calculator --}}
                    <div class="theme-card rounded-xl shadow-lg overflow-hidden">
                        <div class="bg-gray-50 px-6 py-4 border-b border-gray-200">
                            <h2 class="text-xl font-semibold text-gray-900 flex items-center">
                                <i class="fas fa-calculator text-green-600 mr-3"></i>
                                Loan Calculator
                            </h2>
                        </div>
                        <div class="p-6">
                            <form id="calculator-form" class="space-y-4">
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">
                                            Loan Amount
                                        </label>
                                        <input type="number" 
                                               id="calc-amount"
                                               min="{{ $loanProduct->min_amount }}"
                                               max="{{ $loanProduct->max_amount }}"
                                               value="{{ $loanProduct->default_amount ?? $loanProduct->min_amount }}"
                                               step="100"
                                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">
                                            Term (months)
                                        </label>
                                        <input type="number" 
                                               id="calc-term"
                                               min="{{ $loanProduct->min_term_months }}"
                                               max="{{ $loanProduct->max_term_months }}"
                                               value="{{ $loanProduct->default_term_months ?? $loanProduct->min_term_months }}"
                                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500">
                                    </div>
                                </div>
                                <button type="button" 
                                        onclick="calculateLoan()"
                                        class="w-full px-4 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition font-medium">
                                    <i class="fas fa-calculator mr-2"></i>
                                    Calculate
                                </button>
                            </form>

                            {{-- Results --}}
                            <div id="calc-results" class="hidden mt-6 p-4 bg-green-50 rounded-lg border border-green-200">
                                <h3 class="font-semibold text-green-900 mb-4">Calculation Results</h3>
                                <div class="grid grid-cols-2 gap-4">
                                    <div>
                                        <div class="text-sm text-green-600">Monthly Payment</div>
                                        <div id="result-monthly" class="text-xl font-bold text-green-900">-</div>
                                    </div>
                                    <div>
                                        <div class="text-sm text-green-600">Total Interest</div>
                                        <div id="result-interest" class="text-xl font-bold text-green-900">-</div>
                                    </div>
                                    <div>
                                        <div class="text-sm text-green-600">Total Repayment</div>
                                        <div id="result-total" class="text-xl font-bold text-green-900">-</div>
                                    </div>
                                    <div>
                                        <div class="text-sm text-green-600">Processing Fee</div>
                                        <div id="result-fee" class="text-xl font-bold text-green-900">-</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Sidebar --}}
                <div class="space-y-6">
                    
                    {{-- Apply CTA --}}
                    <div class="theme-card rounded-xl shadow-lg overflow-hidden sticky top-4">
                        <div class="bg-gradient-to-r from-green-600 to-green-700 p-6 text-white text-center">
                            <h3 class="text-xl font-bold mb-2">Ready to Apply?</h3>
                            <p class="text-green-100 text-sm mb-4">Members can apply for this loan product</p>
                            @auth
                                @php
                                    $isMemberApplicant = \App\Models\Member::where('user_id', auth()->id())
                                        ->where('status', 'active')
                                        ->exists();
                                @endphp
                                @if($isMemberApplicant)
                                    <a href="{{ route('member.loans.apply', $loanProduct) }}"
                                       class="inline-block px-6 py-3 bg-white text-green-700 rounded-lg font-semibold hover:bg-green-50 transition">
                                        <i class="fas fa-paper-plane mr-2"></i>
                                        Apply Now
                                    </a>
                                @else
                                    <p class="text-green-100 text-sm">
                                        Your membership must be active and approved to apply for loans.
                                    </p>
                                @endif
                            @else
                                <a href="{{ route('membership.apply') }}"
                                   class="inline-block px-6 py-3 bg-white text-green-700 rounded-lg font-semibold hover:bg-green-50 transition">
                                    <i class="fas fa-user-plus mr-2"></i>
                                    Become a Member
                                </a>
                            @endauth
                        </div>
                    </div>

                    {{-- Quick Info --}}
                    <div class="theme-card rounded-xl shadow-lg overflow-hidden">
                        <div class="bg-gray-50 px-6 py-4 border-b border-gray-200">
                            <h3 class="text-lg font-semibold text-gray-900">Quick Info</h3>
                        </div>
                        <div class="p-6 space-y-4">
                            <div class="flex items-center justify-between">
                                <span class="text-gray-600">Currency</span>
                                <span class="font-bold text-gray-900">{{ $loanProduct->currency }}</span>
                            </div>
                            <div class="flex items-center justify-between">
                                <span class="text-gray-600">Interest Type</span>
                                <span class="font-medium text-gray-900">{{ ucfirst(str_replace('_', ' ', $loanProduct->interest_type ?? 'fixed')) }}</span>
                            </div>
                            <div class="flex items-center justify-between">
                                <span class="text-gray-600">Late Payment Fee</span>
                                <span class="font-medium text-gray-900">
                                    @if($loanProduct->late_payment_penalty)
                                        {{ number_format($loanProduct->late_payment_penalty, 2) }}
                                    @else
                                        Contact us
                                    @endif
                                </span>
                            </div>
                        </div>
                    </div>

                    {{-- Questions --}}
                    <div class="bg-blue-50 border border-blue-200 rounded-xl p-6">
                        <h3 class="font-semibold text-blue-900 mb-3">
                            <i class="fas fa-question-circle mr-2"></i>
                            Need Help?
                        </h3>
                        <p class="text-blue-700 text-sm mb-4">
                            Contact our support team for assistance with your loan application.
                        </p>
                        <a href="#" class="text-blue-600 hover:underline text-sm font-medium">
                            Contact Support <i class="fas fa-arrow-right ml-1"></i>
                        </a>
                    </div>

                </div>
            </div>

        </div>
    </section>

</x-site-layout>

@push('scripts')
<script>
    function calculateLoan() {
        const amount = parseFloat(document.getElementById('calc-amount').value);
        const term = parseInt(document.getElementById('calc-term').value);
        const rate = {{ $loanProduct->interest_rate }};
        const currency = '{{ $loanProduct->currency }}';
        const processingFee = {{ $loanProduct->processing_fee ?? 0 }};
        const processingFeePct = {{ $loanProduct->processing_fee_percentage ?? 0 }};

        if (!amount || !term) return;

        // Calculate monthly payment (simple interest for demonstration)
        const totalInterest = (amount * rate / 100) * (term / 12);
        const totalRepayable = amount + totalInterest;
        const monthlyPayment = totalRepayable / term;
        const fee = processingFee || (amount * processingFeePct / 100);

        // Display results
        document.getElementById('result-monthly').textContent = formatCurrency(monthlyPayment, currency);
        document.getElementById('result-interest').textContent = formatCurrency(totalInterest, currency);
        document.getElementById('result-total').textContent = formatCurrency(totalRepayable, currency);
        document.getElementById('result-fee').textContent = formatCurrency(fee, currency);
        document.getElementById('calc-results').classList.remove('hidden');
    }

    function formatCurrency(amount, currency) {
        return currency + ' ' + amount.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
    }
</script>
@endpush
