@extends('layouts.public')

@section('title', 'आवर्ती जमा योजना (Recurring Deposit) | 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">विश्वास आवर्ती जमा (Recurring Deposit)</h1>
        <p class="text-gray-300 text-sm sm:text-base mt-2 max-w-2xl">
            मात्र ₹500 प्रतिमाह से शुरू करें। 7.50% तक सुनिश्चित ब्याज और घर बैठे एजेंट द्वारा मासिक किस्त जमा करने की अनूठी सुविधा।
        </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">
        
        <!-- Live RD Calculator -->
        <div class="bg-white rounded-3xl p-6 sm:p-10 border-2 border-gold shadow-xl" x-data="{
            monthly: 2000,
            rate: 7.5,
            months: 24,
            get totalInvested() {
                return parseFloat(this.monthly) * parseInt(this.months);
            },
            get maturity() {
                let p = parseFloat(this.monthly);
                let n = parseInt(this.months);
                let r = parseFloat(this.rate) / 100 / 4;
                let sum = 0;
                for(let m = 1; m <= n; m++) {
                    let q = (n - m + 1) / 3;
                    sum += p * Math.pow(1 + r, q);
                }
                return Math.round(sum);
            },
            get interest() {
                return this.maturity - this.totalInvested;
            }
        }">
            <div class="text-center mb-8">
                <span class="text-xs uppercase tracking-widest text-gold font-bold">मासिक बचत गणना</span>
                <h2 class="text-2xl sm:text-3xl font-extrabold text-navy font-heading mt-1">आरडी कैलकुलेटर (RD Calculator)</h2>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
                <div class="lg:col-span-7 space-y-5">
                    <div>
                        <div class="flex justify-between text-sm font-bold text-gray-700 mb-1">
                            <span>मासिक जमा राशि (Monthly Installment)</span>
                            <span class="text-navy font-extrabold text-base">₹ <span x-text="Number(monthly).toLocaleString('en-IN')"></span>/माह</span>
                        </div>
                        <input type="range" min="500" max="50000" step="500" x-model="monthly" class="w-full accent-navy cursor-pointer">
                    </div>

                    <div>
                        <div class="flex justify-between text-sm font-bold text-gray-700 mb-1">
                            <span>अवधि (Tenure in Months)</span>
                            <span class="text-navy font-extrabold text-base"><span x-text="months"></span> माह</span>
                        </div>
                        <select x-model="months" class="w-full p-2.5 border border-gray-300 rounded-lg text-sm bg-white font-medium">
                            <option value="12">12 माह (1 वर्ष) @ 7.00%</option>
                            <option value="24" selected>24 माह (2 वर्ष) @ 7.50%</option>
                            <option value="36">36 माह (3 वर्ष) @ 7.75%</option>
                            <option value="60">60 माह (5 वर्ष) @ 8.00%</option>
                        </select>
                    </div>
                </div>

                <div class="lg:col-span-5 bg-gradient-to-br from-navy to-royal text-white p-6 rounded-2xl text-center space-y-3 shadow-lg border border-gold/40">
                    <span class="text-xs uppercase text-gold font-bold tracking-wider">परिपक्वता पर कुल राशि (Maturity Amount)</span>
                    <div class="text-3xl sm:text-4xl font-extrabold text-gold font-heading">
                        ₹ <span x-text="Number(maturity).toLocaleString('en-IN')"></span>
                    </div>
                    <div class="border-t border-navy-light pt-3 text-xs space-y-1.5 text-gray-300">
                        <div class="flex justify-between">
                            <span>आपके द्वारा कुल जमा:</span>
                            <span class="font-bold text-white">₹ <span x-text="Number(totalInvested).toLocaleString('en-IN')"></span></span>
                        </div>
                        <div class="flex justify-between">
                            <span>कुल अनुमानित ब्याज:</span>
                            <span class="font-bold text-gold">₹ <span x-text="Number(interest).toLocaleString('en-IN')"></span></span>
                        </div>
                    </div>
                    <a href="{{ route('customer.deposits') }}" class="block w-full py-2.5 bg-gold text-navy font-bold rounded-lg text-xs uppercase tracking-wider hover:bg-gold-dark transition mt-4">
                        ऑनलाइन RD शुरू करें
                    </a>
                </div>
            </div>
        </div>

    </div>
</div>
@endsection