@extends('layouts.public')

@section('title', 'ईएमआई कैलकुलेटर (Loan EMI Calculator) | 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">ऋण ईएमआई कैलकुलेटर</h1>
        <p class="text-gray-300 text-sm sm:text-base mt-2 max-w-2xl">
            ऋण लेने से पूर्व अपनी मासिक किस्त, कुल ब्याज और मासिक भुगतान तालिका (Amortization Schedule) का सटीक अनुमान लगाएं।
        </p>
    </div>
</div>

<div class="py-16 bg-[#FAF7F2]">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 space-y-12">
        
        <!-- Interactive Tool -->
        <div class="bg-white rounded-3xl p-6 sm:p-10 border-2 border-gold shadow-xl">
            <form action="{{ route('calculator.emi') }}" method="GET" class="space-y-6">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div>
                        <label class="block text-xs font-bold text-gray-700 uppercase mb-2">ऋण राशि (Loan Amount ₹)</label>
                        <input type="number" name="principal" min="5000" step="5000" value="{{ $principal }}" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm font-bold text-navy focus:ring-2 focus:ring-gold">
                    </div>

                    <div>
                        <label class="block text-xs font-bold text-gray-700 uppercase mb-2">वार्षिक ब्याज दर (% p.a.)</label>
                        <input type="number" name="rate" min="1" max="30" step="0.25" value="{{ $rate }}" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm font-bold text-navy focus:ring-2 focus:ring-gold">
                    </div>

                    <div>
                        <label class="block text-xs font-bold text-gray-700 uppercase mb-2">ऋण अवधि (Tenure in Months)</label>
                        <input type="number" name="tenure" min="3" max="120" step="1" value="{{ $tenure }}" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm font-bold text-navy focus:ring-2 focus:ring-gold">
                    </div>
                </div>

                <div class="flex justify-center">
                    <button type="submit" class="px-8 py-3 bg-navy text-white font-bold rounded-xl hover:bg-royal transition text-sm shadow">
                        <i class="fa-solid fa-calculator text-gold mr-1"></i> ईएमआई की गणना करें
                    </button>
                </div>
            </form>

            @if(isset($result) && $result['monthly_emi'] > 0)
            <!-- Output Summary -->
            <div class="mt-10 pt-8 border-t border-gray-200">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-center">
                    <div class="bg-navy text-white p-6 rounded-2xl shadow">
                        <span class="text-xs uppercase text-gold font-bold">मासिक किस्त (Monthly EMI)</span>
                        <p class="text-3xl font-extrabold text-gold mt-1">₹ {{ number_format($result['monthly_emi'], 2) }}</p>
                    </div>

                    <div class="bg-gray-50 border border-gray-200 p-6 rounded-2xl shadow-sm">
                        <span class="text-xs uppercase text-gray-500 font-bold">कुल ब्याज (Total Interest)</span>
                        <p class="text-2xl font-bold text-navy mt-1">₹ {{ number_format($result['total_interest'], 2) }}</p>
                    </div>

                    <div class="bg-gray-50 border border-gray-200 p-6 rounded-2xl shadow-sm">
                        <span class="text-xs uppercase text-gray-500 font-bold">कुल देय राशि (Total Payable)</span>
                        <p class="text-2xl font-bold text-navy mt-1">₹ {{ number_format($result['total_payable'], 2) }}</p>
                    </div>
                </div>

                <!-- Amortization Schedule Table -->
                <div class="mt-10">
                    <h3 class="text-lg font-bold text-navy mb-4 font-heading">मासिक पुनर्भुगतान अनुसूची (Monthly Amortization Schedule)</h3>
                    <div class="overflow-x-auto max-h-96 border border-gray-200 rounded-xl">
                        <table class="w-full text-left text-xs sm:text-sm">
                            <thead class="bg-navy text-white sticky top-0 text-xs uppercase font-bold">
                                <tr>
                                    <th class="p-3">किस्त माह</th>
                                    <th class="p-3">ईएमआई (₹)</th>
                                    <th class="p-3">मूलधन (Principal)</th>
                                    <th class="p-3">ब्याज (Interest)</th>
                                    <th class="p-3">शेष मूलधन (Balance)</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-100">
                                @foreach($result['schedule'] as $item)
                                <tr class="hover:bg-gold/5">
                                    <td class="p-3 font-bold text-navy">{{ $item['month'] }}</td>
                                    <td class="p-3 font-semibold">₹{{ number_format($item['emi'], 2) }}</td>
                                    <td class="p-3 text-forest">₹{{ number_format($item['principal'], 2) }}</td>
                                    <td class="p-3 text-amber-700">₹{{ number_format($item['interest'], 2) }}</td>
                                    <td class="p-3 text-gray-700 font-medium">₹{{ number_format($item['balance'], 2) }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            @endif
        </div>

    </div>
</div>
@endsection