@extends('layouts.public')

@section('title', $loanType->name . ' | Vishwas Bank')

@section('content')
<div class="bg-navy text-white py-14 border-b-2 border-gold relative">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <span class="text-xs uppercase tracking-widest text-gold font-bold">पारदर्शी ऋण सुविधा</span>
        <h1 class="text-3xl sm:text-5xl font-extrabold font-heading mt-2">{{ $loanType->name }}</h1>
        <p class="text-gray-300 text-sm sm:text-base mt-2 max-w-2xl">
            वार्षिक ब्याज दर मात्र {{ $loanType->annual_interest_rate }}% से शुरू। आसान किस्तें एवं न्यूनतम औपचारिकताओं के साथ।
        </p>
    </div>
</div>

<div class="py-16 bg-[#FAF7F2]">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-12">
        
        <!-- Overview & Interactive Calculator Grid -->
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-10 items-start">
            
            <!-- Left Info -->
            <div class="lg:col-span-7 space-y-6">
                <div class="bg-white rounded-2xl p-6 sm:p-8 border border-gold/30 shadow-md space-y-4">
                    <span class="text-xs uppercase tracking-widest text-gold font-bold">ऋण परिचय एवं लाभ</span>
                    <h2 class="text-2xl font-bold text-navy font-heading">{{ $loanType->name }} के प्रमुख लाभ</h2>
                    <p class="text-sm text-gray-700 leading-relaxed">
                        {{ $loanType->description }}
                    </p>

                    <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 pt-3">
                        <div class="p-3 bg-gray-50 rounded-xl border border-gray-200 text-center">
                            <span class="text-xs text-gray-500">ब्याज दर</span>
                            <p class="text-base font-bold text-forest">{{ $loanType->annual_interest_rate }}% p.a.</p>
                        </div>
                        <div class="p-3 bg-gray-50 rounded-xl border border-gray-200 text-center">
                            <span class="text-xs text-gray-500">अवधि सीमा</span>
                            <p class="text-base font-bold text-navy">{{ $loanType->min_tenure_months }} - {{ $loanType->max_tenure_months }} माह</p>
                        </div>
                        <div class="p-3 bg-gray-50 rounded-xl border border-gray-200 text-center">
                            <span class="text-xs text-gray-500">प्रोसेसिंग शुल्क</span>
                            <p class="text-base font-bold text-navy">{{ $loanType->processing_fee_percent }}%</p>
                        </div>
                    </div>
                </div>

                <!-- Eligibility & Documents -->
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                    <div class="bg-white p-6 rounded-2xl border border-gold/30 shadow-sm space-y-3">
                        <h4 class="font-bold text-navy text-sm flex items-center gap-2">
                            <i class="fa-solid fa-user-check text-gold"></i> पात्रता (Eligibility)
                        </h4>
                        <ul class="text-xs text-gray-600 space-y-2">
                            <li><i class="fa-solid fa-check text-forest mr-1.5"></i> भारतीय नागरिक (आयु 21 से 65 वर्ष)।</li>
                            <li><i class="fa-solid fa-check text-forest mr-1.5"></i> नियमित आय स्रोत (वेतनभोगी, कृषक या व्यवसायी)।</li>
                            <li><i class="fa-solid fa-check text-forest mr-1.5"></i> न्यूनतम मासिक आय ₹10,000।</li>
                        </ul>
                    </div>

                    <div class="bg-white p-6 rounded-2xl border border-gold/30 shadow-sm space-y-3">
                        <h4 class="font-bold text-navy text-sm flex items-center gap-2">
                            <i class="fa-solid fa-file-shield text-gold"></i> आवश्यक दस्तावेज
                        </h4>
                        <ul class="text-xs text-gray-600 space-y-2">
                            <li><i class="fa-solid fa-check text-forest mr-1.5"></i> आधार कार्ड एवं पैन कार्ड।</li>
                            <li><i class="fa-solid fa-check text-forest mr-1.5"></i> आय प्रमाण (वेतन पर्ची / बैंक पासबुक / खसरा)।</li>
                            <li><i class="fa-solid fa-check text-forest mr-1.5"></i> 2 पासपोर्ट साइज फोटो।</li>
                        </ul>
                    </div>
                </div>

                <div class="pt-2">
                    <a href="{{ route('customer.loans.apply', ['type' => $loanType->slug]) }}" class="inline-flex items-center gap-2 px-8 py-3.5 bg-navy hover:bg-royal text-white font-bold rounded-xl shadow-lg transition text-sm border border-gold/40">
                        <i class="fa-solid fa-paper-plane text-gold"></i> इस ऋण हेतु ऑनलाइन आवेदन करें
                    </a>
                </div>
            </div>

            <!-- Right: Live EMI Calculator Widget -->
            <div class="lg:col-span-5 bg-white rounded-3xl p-6 sm:p-8 border-2 border-gold shadow-xl space-y-5" x-data="{
                principal: {{ $loanType->min_amount * 2 }},
                rate: {{ $loanType->annual_interest_rate }},
                tenure: 24,
                get emi() {
                    let p = parseFloat(this.principal);
                    let r = (parseFloat(this.rate) / 12) / 100;
                    let n = parseInt(this.tenure);
                    if (p <= 0 || n <= 0) return 0;
                    let f = Math.pow(1 + r, n);
                    return Math.round((p * r * f) / (f - 1));
                },
                get total() { return this.emi * parseInt(this.tenure); },
                get interest() { return this.total - parseFloat(this.principal); }
            }">
                <div class="text-center pb-2 border-b border-gray-100">
                    <span class="text-xs uppercase text-gold font-bold">मासिक किस्त अनुमान</span>
                    <h3 class="text-xl font-bold text-navy mt-1">ईएमआई कैलकुलेटर</h3>
                </div>

                <div>
                    <div class="flex justify-between text-xs font-bold text-gray-700 mb-1">
                        <span>ऋण राशि (₹)</span>
                        <span class="text-navy font-extrabold">₹ <span x-text="Number(principal).toLocaleString('en-IN')"></span></span>
                    </div>
                    <input type="range" min="{{ $loanType->min_amount }}" max="{{ $loanType->max_amount }}" step="5000" x-model="principal" class="w-full accent-navy cursor-pointer">
                </div>

                <div>
                    <div class="flex justify-between text-xs font-bold text-gray-700 mb-1">
                        <span>अवधि (Months)</span>
                        <span class="text-navy font-extrabold"><span x-text="tenure"></span> माह</span>
                    </div>
                    <input type="range" min="{{ $loanType->min_tenure_months }}" max="{{ $loanType->max_tenure_months }}" step="6" x-model="tenure" class="w-full accent-gold cursor-pointer">
                </div>

                <div class="bg-navy text-white p-5 rounded-2xl text-center space-y-2 shadow-inner">
                    <span class="text-[11px] uppercase tracking-wider text-gold font-bold">अनुमानित मासिक ईएमआई</span>
                    <div class="text-3xl font-extrabold text-gold font-heading">
                        ₹ <span x-text="Number(emi).toLocaleString('en-IN')"></span>
                    </div>
                    <div class="border-t border-navy-light pt-2 text-xs flex justify-between text-gray-300">
                        <span>कुल ब्याज: ₹ <span x-text="Number(interest).toLocaleString('en-IN')"></span></span>
                        <span>कुल देय: ₹ <span x-text="Number(total).toLocaleString('en-IN')"></span></span>
                    </div>
                </div>

                <a href="{{ route('customer.loans.apply', ['type' => $loanType->slug]) }}" class="block w-full py-3 bg-gold text-navy text-center font-bold rounded-xl text-xs uppercase tracking-wider hover:bg-gold-dark shadow transition">
                    तुरंत ऋण आवेदन करें
                </a>
            </div>

        </div>

    </div>
</div>
@endsection