@extends('frontend.layout_2')

@section('sub_layout')

{{-- Tailwind CDN --}}
<script src="https://cdn.tailwindcss.com"></script>

{{-- Brand color --}}
<script>
    tailwind.config = {
        theme: {
            extend: {
                colors: {
                    brand: '#DD3532'
                }
            }
        }
    }
</script>

<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Hind+Siliguri:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">

<style>
    body {
        font-family: "Hind Siliguri", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        background-color: #eef1f5;
    }

    .title-font {
        font-family: "Merriweather", serif;
    }
</style>

<div class="min-h-screen bg-slate-50 antialiased" style="padding-bottom: 150px;">

    {{-- Slider --}}
    <div class="px-3 mt-4" data-aos="fade-up">
        <div class="rounded-[24px] overflow-hidden">
            <div class="swiper myBankSwiper h-36">
                <div class="swiper-wrapper">

                  
                    
                    
                    @php
            $banners = \App\Models\Banner::query()
                ->where('status', 1)
                ->latest()
                ->get();
        @endphp

        @forelse ($banners as $banner)
            
            
             <div class="swiper-slide">
                        <img src="{{ asset('storage/' . $banner->image) }}" class="w-full h-full object-cover" alt="Banner">
                    </div>
        @empty
           <div class="swiper-slide">
                        <img src="{{ asset('img/banner.png') }}" class="w-full h-full object-cover" alt="Banner">
                    </div>
            </div>
        @endforelse

                </div>

                <div class="swiper-pagination"></div>
            </div>
        </div>
    </div>

    <div class="max-w-lg mx-auto px-4 pb-10"
         x-data="loanApply(@js($plansByTerm), @js($terms), @js($defaultTerm))"
         x-init="init()">

        {{-- Summary Card --}}
        <div class="mt-4 bg-white rounded-[24px] shadow-[0_10px_30px_rgba(15,23,42,0.08)] p-5">
            <div class="text-sm font-semibold text-slate-700 mb-4">ঋণের বিবরণ</div>

            <div class="grid grid-cols-2 gap-3">
                <div class="rounded-2xl border border-slate-100 p-4">
                    <div class="flex items-center gap-2 text-slate-500 text-xs">
                        <span class="inline-flex h-8 w-8 rounded-xl bg-slate-100 items-center justify-center">💳</span>
                        মোট পরিশোধ
                    </div>
                    <div class="mt-2 text-lg font-semibold text-slate-900" x-text="formatNumber(totalPayable)"></div>
                </div>

                <div class="rounded-2xl border border-slate-100 p-4">
                    <div class="flex items-center gap-2 text-slate-500 text-xs">
                        <span class="inline-flex h-8 w-8 rounded-xl bg-slate-100 items-center justify-center">📅</span>
                        কিস্তির সময়কাল
                    </div>
                    <div class="mt-2 text-lg font-semibold text-slate-900" x-text="selectedTerm + ' মাস'"></div>
                </div>
            </div>

            <div class="mt-3 rounded-2xl bg-slate-50 border border-slate-100 px-4 py-3 text-xs text-slate-600"
                 x-show="selectedPlan"
                 x-text="noteText">
            </div>
        </div>

        {{-- Term Selector --}}
        <div class="mt-6 bg-white rounded-[24px] shadow-[0_10px_30px_rgba(15,23,42,0.08)] p-5">
            <div class="text-sm font-semibold text-slate-700 mb-4">ঋণের মেয়াদ নির্বাচন করুন</div>

            <div class="grid grid-cols-3 gap-4">
                <template x-for="t in terms" :key="t">
                    <button type="button"
                            class="h-[118px] rounded-2xl flex flex-col items-center justify-center transition"
                            :class="t === selectedTerm
                                ? 'bg-brand text-white shadow-[0_12px_22px_rgba(221,53,50,0.25)]'
                                : 'bg-white text-brand border border-slate-100 shadow-sm hover:shadow-md'"
                            @click="selectTerm(t)">
                        <div class="text-2xl font-semibold" x-text="t"></div>
                        <div class="text-xs mt-2 opacity-70">মাস</div>
                    </button>
                </template>
            </div>
        </div>

        {{-- Amount List --}}
        <div class="mt-6 bg-white rounded-[24px] shadow-[0_10px_30px_rgba(15,23,42,0.08)] p-5">
            <div class="text-sm font-semibold text-slate-700 mb-4">ঋণের পরিমাণ নির্বাচন করুন</div>

            <div class="space-y-4">
                <template x-for="p in plans" :key="p.id">
                    <button type="button"
                            class="w-full rounded-2xl border border-slate-100 px-4 py-4 flex items-center justify-between transition"
                            :class="selectedPlanId === p.id
                                ? 'bg-brand text-white shadow-[0_10px_18px_rgba(221,53,50,0.25)]'
                                : 'bg-white text-slate-800 shadow-sm hover:shadow-md'"
                            @click="selectPlan(p)">

                        <div class="flex items-center gap-3">
                            <span class="inline-flex h-10 w-10 rounded-full items-center justify-center font-semibold"
                                  :class="selectedPlanId === p.id ? 'bg-white text-brand' : 'bg-brand text-white'">
                                ৳
                            </span>

                            <div class="text-[15px] font-semibold"
                                 :class="selectedPlanId === p.id ? 'text-white' : 'text-brand'"
                                 x-text="formatNumber(p.amount)">
                            </div>
                        </div>

                        <div class="text-right">
                            <div class="text-[11px]"
                                 :class="selectedPlanId === p.id ? 'text-white/80' : 'text-slate-400'">
                                মাসিক কিস্তি
                            </div>

                            <div class="text-[15px] font-semibold"
                                 :class="selectedPlanId === p.id ? 'text-white' : 'text-brand'"
                                 x-text="formatNumber(p.monthly_installment)">
                            </div>
                        </div>
                    </button>
                </template>

                <template x-if="plans.length === 0">
                    <div class="text-sm text-slate-500 bg-slate-50 border border-slate-100 rounded-2xl p-4">
                        এই মেয়াদের জন্য কোনো প্ল্যান নেই।
                    </div>
                </template>
            </div>
        </div>

        {{-- Info Card --}}
        <div class="mt-6 bg-white rounded-[24px] shadow-[0_10px_30px_rgba(15,23,42,0.08)] p-5">
            <div class="text-sm font-semibold text-slate-700 mb-4">ঋণের তথ্য</div>

            <div class="space-y-3">
                <div class="rounded-2xl bg-slate-50 border border-slate-100 p-4 flex gap-3">
                    <div class="h-10 w-10 rounded-full bg-red-100 text-brand flex items-center justify-center font-semibold">%</div>
                    <div>
                        <div class="text-sm font-semibold text-slate-700">সুদের হার</div>
                        <div class="text-xs text-slate-500">
                            বার্ষিক <span x-text="interestText"></span> ফিক্সড
                        </div>
                    </div>
                </div>

                <div class="rounded-2xl bg-slate-50 border border-slate-100 p-4 flex gap-3">
                    <div class="h-10 w-10 rounded-full bg-red-100 text-brand flex items-center justify-center">⏱️</div>
                    <div>
                        <div class="text-sm font-semibold text-slate-700">দ্রুত প্রক্রিয়াকরণ</div>
                        <div class="text-xs text-slate-500">
                            আবেদন জমা দেওয়ার <span x-text="processingHours"></span> ঘণ্টার মধ্যে অনুমোদিত হয়
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Submit --}}
        <form class="mt-6" method="POST" action="{{ route('loan.apply.store') }}" @submit.prevent="submit($event)">
            @csrf

            <input type="hidden" name="erin_loan_plan_id" :value="selectedPlanId">

            <button type="submit"
                    class="w-full h-12 rounded-2xl bg-brand text-white font-semibold shadow-md flex items-center justify-center gap-2 hover:opacity-95 active:opacity-90">
                ▶ আবেদন জমা দিন
            </button>

            @if(session('ok'))
                <div class="mt-3 text-sm text-emerald-700 bg-emerald-50 border border-emerald-100 rounded-xl p-3">
                    {{ session('ok') }}
                </div>
            @endif

            @error('erin_loan_plan_id')
                <div class="mt-3 text-sm text-rose-700 bg-rose-50 border border-rose-100 rounded-xl p-3">
                    {{ $message }}
                </div>
            @enderror
        </form>
    </div>
</div>

{{-- Alpine CDN --}}
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

<script>
    function loanApply(plansByTerm, terms, defaultTerm) {
        return {
            terms: terms ?? [],
            selectedTerm: defaultTerm ?? 12,

            plansByTerm: plansByTerm ?? {},
            plans: [],

            selectedPlanId: null,
            selectedPlan: null,

            interestText: '0.3%',
            processingHours: 24,

            totalPayable: 0,

            init() {
                this.refreshPlans(true);
            },

            refreshPlans(autoSelectFirst = false) {
                this.plans = this.plansByTerm[this.selectedTerm] ?? [];

                if (autoSelectFirst && this.plans.length) {
                    this.selectPlan(this.plans[0]);
                } else {
                    this.selectedPlanId = null;
                    this.selectedPlan = null;
                    this.totalPayable = 0;
                }
            },

            selectTerm(t) {
                this.selectedTerm = t;
                this.refreshPlans(true);
            },

            roundToHundred(n) {
                return Math.round(Number(n) / 100) * 100;
            },

            selectPlan(p) {
                this.selectedPlanId = p.id;
                this.selectedPlan = p;

                this.interestText = (p.interest_rate_annual ?? 0.30) + '%';
                this.processingHours = p.processing_time_hours ?? 24;

                const rawTotal = Number(p.monthly_installment) * Number(p.term_months);
                this.totalPayable = this.roundToHundred(rawTotal);
            },

            formatNumber(n) {
                try {
                    return Number(n).toLocaleString('en-US');
                } catch (e) {
                    return n;
                }
            },

            get noteText() {
                if (!this.selectedPlan) return '';

                return `আপনার মাসিক পরিশোধ হবে ${this.formatNumber(this.selectedPlan.monthly_installment)} টাকা ${this.selectedTerm} মাসের জন্য`;
            },

            submit(e) {
                if (!this.selectedPlanId) {
                    alert('অনুগ্রহ করে একটি লোন পরিমাণ নির্বাচন করুন।');
                    return;
                }

                e.target.submit();
            }
        }
    }
</script>

<script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<script>
    AOS.init({
        duration: 600,
        once: true
    });

    new Swiper(".myBankSwiper", {
        loop: true,
        pagination: {
            el: ".swiper-pagination",
            clickable: true
        },
        autoplay: {
            delay: 3000,
            disableOnInteraction: false
        }
    });
</script>

@endsection