@extends('frontend.layouts.partials.app')
@section('title', 'Home')
@section('meta', 'Welcome to Goodwill Finance Pvt. Ltd.')
@section('content')

    @if ($popupPaths->isNotEmpty())
        @include('components.modal', ['popupPaths' => $popupPaths])
    @endif

    {{-- ================= SLIDER ================= --}}
    @if ($slider->isNotEmpty())
        <swiper-container pagination="true" pagination-clickable="true" navigation="true" space-between="0"
            centered-slides="true" loop="true" autoplay-delay="2500" autoplay-disable-on-interaction="false"
            slides-per-view="1" grab-cursor="true"
            style="width:100%;
               --swiper-navigation-color:#fff;
               --swiper-pagination-color:#fff;
               --swiper-pagination-bullet-inactive-color:#fff;
               --swiper-pagination-bullet-inactive-opacity:0.5;">

            @foreach ($slider as $slide)
                <swiper-slide>
                    <div class="relative w-full">
                        <img src="{{ asset('storage/' . $slide->photo) }}"
                            alt="{{ $slide->alt_text ?? 'Goodwill Finance' }}"
                            class="w-full object-cover object-center block" style="height: clamp(180px, 50vw, 90vh);"
                            loading="{{ $loop->first ? 'eager' : 'lazy' }}"
                            fetchpriority="{{ $loop->first ? 'high' : 'auto' }}">
                        <div class="absolute inset-0 bg-black/10"></div>

                        @if (!empty($slide->caption))
                            <div class="absolute bottom-8 left-0 right-0 px-4 text-center">
                                <p class="text-white text-sm sm:text-base md:text-lg font-medium drop-shadow-md">
                                    {{ $slide->caption }}
                                </p>
                            </div>
                        @endif
                    </div>
                </swiper-slide>
            @endforeach

        </swiper-container>
    @endif

    {{-- ================= QUICK ACCESS ================= --}}
    @php
        $quickLinks = [
            ['href' => '/publications', 'img' => 'assets/img/png/public-information.png', 'label' => 'Public info'],
            ['href' => route('csr'), 'img' => 'assets/img/png/csr.png', 'label' => 'CSR'],
            ['href' => '/rate-interest-rate', 'img' => 'assets/img/png/interest-rates.png', 'label' => 'Rates'],
            ['href' => '#calculator', 'img' => 'assets/img/png/calculators.png', 'label' => 'Calculators'],
            ['href' => 'https://www.nrb.org.np/forex', 'img' => 'assets/img/png/forex.png', 'label' => 'Forex'],
        ];
    @endphp

    <section class="my-4 md:my-6 -mt-6 z-10 relative flex flex-wrap justify-center items-center gap-2 sm:gap-3 px-3">
        @foreach ($quickLinks as $item)
            <a href="{{ $item['href'] }}"
                class="group flex flex-col items-center justify-center gap-2
                  w-[90px] sm:w-[100px] md:w-[110px]
                  min-h-[90px] md:min-h-[100px]
                  p-3 rounded-xl bg-white
                  border border-gray-100
                  hover:bg-blue-50 hover:border-blue-200
                  hover:-translate-y-0.5
                  transition-all duration-200 ease-in-out
                  shadow-sm">

                <div class="w-11 h-11 flex items-center justify-center">
                    <img src="{{ asset($item['img']) }}" alt="{{ $item['label'] }}"
                        class="h-9 sm:h-10 w-auto object-contain
                           transition-transform duration-200
                           group-hover:scale-110"
                        loading="lazy">
                </div>

                <span
                    class="text-[11px] sm:text-xs text-gray-500
                         text-center font-medium leading-snug">
                    {{ $item['label'] }}
                </span>
            </a>
        @endforeach
    </section>

    <section style="background-image: url('{{ asset('assets/img/whitepattern1.jpg') }}');"
        class="bg-[#f8f9fc] bg-cover bg-center bg-no-repeat py-16 px-4">

        <div class="mx-auto w-full max-w-6xl">

            {{-- ===== EYEBROW ===== --}}
            <div class="mb-4 flex items-center justify-center gap-3">
                <div class="h-px w-10 bg-[#005aab]/40"></div>

                <span class="text-[11px] font-semibold uppercase tracking-[0.12em] text-[#005aab]">
                    Our Services
                </span>

                <div class="h-px w-10 bg-[#005aab]/40"></div>
            </div>

            {{-- ===== HEADING ===== --}}
            <h2 class="mb-3 text-center text-7xl font-bold leading-snug text-[#0f1f3d] sm:text-4xl">
                Explore a range of services from
                {{-- <br class="hidden sm:block"> --}}
                <span class="text-[#EF5824] fontStyle">Goodwill Finance</span>
            </h2>

            <p class="mx-auto mb-4 max-w-xl text-center text-sm text-gray-500 sm:text-base">
                Trusted financial solutions designed to support individuals,
                families, and businesses at every stage.
            </p>

            {{-- ===== ACCENT DIVIDER ===== --}}
            <div class="mx-auto mb-12 h-[3px] w-12 rounded-full bg-[#005aab]"></div>

            {{-- ===== TABS ===== --}}
            <ul id="featureTab" role="tablist" class="flex flex-wrap justify-center gap-2 sm:gap-3">

                @foreach ($featureds as $index => $feature)
                    @php
                        $tabId = Str::slug($feature->name, '');
                        $isActive = $index === 0;
                    @endphp

                    <li role="presentation" class="list-none">
                        <button type="button" role="tab" id="{{ $tabId }}-tab" data-tab="{{ $tabId }}"
                            aria-controls="{{ $tabId }}" aria-selected="{{ $isActive ? 'true' : 'false' }}"
                            class="tab-btn group flex w-[100px] flex-col items-center gap-2 rounded-xl border-[1.5px] bg-white p-3 transition-all duration-200 sm:w-[110px]
                            {{ $isActive
                                ? 'active-tab border-[#005aab] border-b-[3px] shadow-[0_4px_16px_rgba(0,90,171,0.12)] -translate-y-1'
                                : 'border-gray-200 hover:-translate-y-1 hover:border-[#005aab] hover:bg-blue-50' }}">

                            {{-- Feature Image --}}
                            <div class="flex h-11 w-11 items-center justify-center">
                                <img src="{{ asset('storage/' . $feature->photo) }}" alt="{{ $feature->name }}"
                                    loading="lazy"
                                    class="h-10 w-10 object-contain transition-transform duration-200 group-hover:scale-110 sm:h-11 sm:w-11">
                            </div>

                            <span
                                class="tab-label text-center text-[11px] font-semibold leading-tight transition-colors duration-200
                                {{ $isActive ? 'text-[#005aab]' : 'text-gray-600 group-hover:text-[#005aab]' }}">
                                {{ $feature->name }}
                            </span>
                        </button>
                    </li>
                @endforeach
            </ul>

            {{-- ===== TAB DIVIDER ===== --}}
            <div class="relative mb-8 mt-6">
                <div class="flex flex-col justify-between">
                    <div class="flex flex-col w-full">
                        <p class="border-b-2 border-b-brandBlue w-full"></p>
                        <p class="border-b-2 border-b-[#ffff] w-full"></p>
                        <p class="border-b-4 border-b-[#EF5824] w-ful"></p>
                        <p class="border-b-2 border-b-[#ffff] w-full"></p>
                    </div>
                </div>
            </div>

            {{-- ===== TAB PANELS ===== --}}
            <div id="featureContent">

                @foreach ($featureds as $index => $feature)
                    @php
                        $tabId = Str::slug($feature->name, '');
                    @endphp

                    <div id="{{ $tabId }}" role="tabpanel" aria-labelledby="{{ $tabId }}-tab"
                        class="feature-panel {{ $index !== 0 ? 'hidden' : '' }}">

                        @if ($feature->product->isNotEmpty())
                            <div class="flex flex-wrap justify-center gap-4">

                                @foreach ($feature->product as $product)
                                    <a href="{{ strtolower($feature->name . '-' . $product->slug) }}"
                                        class="group flex w-[115px] flex-col items-center gap-2.5 rounded-2xl border-[1.5px] border-gray-200 bg-white p-5 transition-all duration-200 hover:-translate-y-1 hover:border-[#005aab] hover:shadow-[0_8px_24px_rgba(0,90,171,0.1)] sm:w-[130px]">

                                        {{-- Product Image --}}
                                        <div class="flex h-14 w-14 items-center justify-center">
                                            <img src="{{ asset('storage/' . $product->photo) }}"
                                                alt="{{ $product->name }}" loading="lazy"
                                                class="h-12 w-12 object-contain transition-transform duration-200 group-hover:scale-110 sm:h-14 sm:w-14">
                                        </div>

                                        <p
                                            class="line-clamp-2 text-center text-[12px] font-semibold leading-tight text-gray-700 transition-colors duration-200 group-hover:text-[#005aab]">
                                            {{ $product->name }}
                                        </p>

                                        <span
                                            class="-mt-1 text-[10px] font-medium text-[#005aab] opacity-0 transition-opacity duration-200 group-hover:opacity-100">
                                            Learn more →
                                        </span>
                                    </a>
                                @endforeach

                            </div>
                        @else
                            <div class="py-12 text-center">
                                <p class="text-sm text-gray-400">
                                    No products available.
                                </p>
                            </div>
                        @endif

                    </div>
                @endforeach

            </div>

        </div>
    </section>

<section class="my-4 sm:my-8 md:my-12 lg:my-20 xl:my-32">
        <div class="container mx-auto px-4 flex flex-col-reverse lg:flex-row items-center justify-center gap-10 lg:gap-24">

            <!-- Text Content -->
            <div class="flex flex-col items-center lg:items-start space-y-5 text-center lg:text-left max-w-2xl">
                <h3 class="text-[#004d6e] text-lg sm:text-xl font-bold">About us</h3>
                <h4 class="text-xl sm:text-2xl lg:text-4xl leading-snug font-extrabold text-start">
                    Our mission, value and goal is for your
                    <span class="text-[#EF5824] fontStyle">wellbeing</span>
                </h4>
                <p class="text-sm sm:text-base md:text-sm lg:text-xl text-justify">
                    Goodwill Finance Limited is the leading provider of financial solutions with a unique mix of dedication
                    and perfect execution. With the vision of providing the best financial services for success, Goodwill
                    Finance Limited started its operation as financial institution under the license from Nepal Rastra Bank
                    in 1995. It is a public limited company established under the Financial Company Act 2042, on 2051 BS.
                    <br><br>
                    The Authorized Capital of the company is Rupees 1,000,000,000/- and the Issued Capital is Rs.
                    946,115,200.00/-. 51% of the Paid-Up Capital is held by the promoter and the remaining 49% is held by
                    the general public. The shares of the company are listed at Nepal Stock Exchange Limited (NEPSE).
                </p>
                <a href="{{ route('about') }}"
                    class="py-2 px-6 w-44 rounded-lg bg-gradient-to-r from-[#005aab] to-[#00accc] text-white font-bold text-sm sm:text-base text-center">
                    About Us
                </a>
            </div>

            <!-- Image Section -->
            <div class="hidden lg:block relative flex justify-center">
                <div class="flex space-x-4 relative">
                    <!-- Main Image -->
                    <img src="{{ asset('assets/img/mission-photo.jpg') }}"
                        class="hidden lg:block rounded-2xl z-30 w-[220px] sm:w-[300px] md:w-[340px] lg:w-[385px] h-auto object-cover"
                        alt="">

                    <!-- Secondary Image -->
                    <img src="{{ asset('assets/img/mission-photo-2.jpg') }}"
                        class="hidden lg:block rounded-2xl lg:absolute lg:-right-10 lg:-bottom-24 z-40 w-[180px] lg:w-[285px] h-auto object-cover"
                        alt="">
                </div>

                <!-- Experience Tag -->
                <div id="experience"
                    class="hidden lg:block absolute top-full mt-12 lg:mt--[90%] lg:top-[90%] lg:-right-8 flex z-50 justify-center items-center px-4 bg-gradient-to-r from-[#005aab] to-[#00accc] rounded-md w-48 sm:w-56 py-2 sm:py-8">
                    <div class="flex space-x-4 sm:space-x-6 items-center">
                        <p class="text-2xl sm:text-3xl text-white font-extrabold">31</p>
                        <p class="text-sm sm:text-base lg:text-lg text-white font-bold">Years of experience</p>
                    </div>
                </div>

                <!-- Decorative Shapes -->
                <img src="{{ asset('assets/img/shape-1.png') }}" class="hidden lg:block absolute -bottom-12 -left-24"
                    alt="">

                <img src="{{ asset('assets/img/shape-2.png') }}" class="hidden lg:block absolute right-0 mt-24 h-24 z-20"
                    alt="">
            </div>


        </div>
    </section>


    <section class="relative mt-12 sm:mt-16 lg:mt-20">

        {{-- Background image --}}
        <img src="{{ asset('assets/img/background_2.jpg') }}" class="absolute inset-0 w-full h-full object-cover"
            alt="Goodwill Finance Expertise" loading="lazy">

        {{-- Overlay --}}
        <div class="absolute inset-0 bg-[#0a3d62]/20"></div>

        {{-- Content — drives the section height --}}
        <div
            class="relative z-10 w-full max-w-7xl mx-auto
                px-4 sm:px-8 lg:px-10
                py-12 sm:py-16 lg:py-20
                flex flex-col items-center gap-6 text-center">

            {{-- Heading --}}
            <h2 class="text-white text-2xl sm:text-3xl lg:text-4xl font-bold">
                Our Expertise
            </h2>

            {{-- Paragraph --}}
            <p class="text-white/90 text-sm sm:text-base leading-7 max-w-3xl">
                Goodwill Finance Limited is one of Nepal's leading financing organizations,
                committed to delivering reliable, innovative, and customer-focused financial
                services. Listed on the Nepal Stock Exchange (NEPSE), we empower individuals,
                entrepreneurs, and businesses through secure financing, savings solutions,
                and modern banking support.
            </p>

            {{-- White content box --}}
            @php
                $items = [
                    [
                        'img' => 'assets/img/plan.png',
                        'title' => 'Vision to Plan',
                        'text' =>
                            'We help customers achieve financial stability through strategic planning, flexible financing solutions, and customer-centric services. Our expert team supports confident financial decisions for sustainable growth in Nepal\'s evolving economy.',
                    ],
                    [
                        'img' => 'assets/img/analysis.png',
                        'title' => 'Plan to Market',
                        'text' =>
                            'Supporting entrepreneurs, SMEs, and enterprises with dependable financing designed to accelerate business growth through transparent processes, innovative products, and market-driven strategies.',
                    ],
                    [
                        'img' => 'assets/img/trend.png',
                        'title' => 'Market to Growth',
                        'text' =>
                            'By integrating modern financial technology and customer-focused innovation, we enhance accessibility, security, and efficiency — building long-term value for customers, investors, and Nepal\'s communities.',
                    ],
                ];
            @endphp

            <div
                class="bg-white text-[#333] rounded-xl w-full
                    p-6 sm:p-8 lg:p-10
                    shadow-xl">
                <div
                    class="flex flex-col lg:flex-row
                        divide-y lg:divide-y-0 lg:divide-x divide-gray-100
                        gap-0">

                    @foreach ($items as $index => $item)
                        <div
                            class="flex flex-col gap-4 flex-1 text-left
                py-6 lg:py-0
                {{ $index === 0 ? 'pt-0' : '' }}
                {{ $index === count($items) - 1 ? 'pb-0' : '' }}
                lg:px-8
                {{ $index === 0 ? 'lg:pl-0' : '' }}
                {{ $index === count($items) - 1 ? 'lg:pr-0' : '' }}">

                            {{-- Image + Title in Same Line --}}
                            <div class="flex items-center gap-4 sm:gap-5">
                                <img src="{{ asset($item['img']) }}"
                                    class="w-14 h-14 sm:w-16 sm:h-16 lg:w-20 lg:h-20
                       object-contain shrink-0"
                                    alt="{{ $item['title'] }}" loading="lazy">

                                <h4
                                    class="uppercase text-sm sm:text-base lg:text-lg
                       font-bold text-[#0A3D62] tracking-wide">
                                    {{ $item['title'] }}
                                </h4>
                            </div>

                            {{-- Description Full Width --}}
                            <p class="text-gray-500 text-sm sm:text-base leading-7 w-full">
                                {{ $item['text'] }}
                            </p>

                        </div>
                    @endforeach

                </div>
            </div>

        </div>
    </section>

    <section class="bg-[#F6F6F6] px-6 py-12 xl:flex xl:justify-center" id="calculator">
        <div class="flex flex-col-reverse gap-10 lg:flex-row lg:items-center lg:gap-28 lg:ml-28 lg:pt-10">
            <!-- Left Side (Form & Text) -->
            <div class="flex flex-col lg:w-[40%] gap-5">
                <div class="space-y-3">
                    <h3 class="text-[#EF5824] uppercase text-2xl font-semibold">Calculate Loan</h3>
                    <h4 class="text-2xl lg:text-4xl font-bold text-brandBlue">Online EMI Calculator</h4>
                    <p class="text-base lg:text-lg text-gray-700">
                        Use the Goodwill Finance EMI Calculator to quickly estimate your loan EMIs, interest rate, and
                        remaining balance. Just input your loan amount, interest rate, and loan duration for instant
                        results.
                    </p>
                </div>

                <form class="flex flex-col gap-5">
                    <input type="number"
                        class="rounded-lg px-4 py-3 placeholder:text-[#a3a3a3] w-full bg-white outline-none"
                        placeholder="Loan amount" id="f_loan_amt">

                    <input type="number"
                        class="rounded-lg px-4 py-3 placeholder:text-[#a3a3a3] w-full bg-white outline-none"
                        placeholder="Interest rate (%)" id="f_rate">

                    <input type="number"
                        class="rounded-lg px-4 py-3 placeholder:text-[#a3a3a3] w-full bg-white outline-none"
                        placeholder="Number of months" id="f_month">

                    <input type="number"
                        class="rounded-lg px-4 py-3 placeholder:text-[#a3a3a3] w-full bg-gray-100 outline-none"
                        placeholder="Monthly Installment" id="f_result" disabled readonly>

                    <div class="flex gap-3 flex-wrap">
                        <button type="button"
                            class=" w-32 py-2 bg-[#005aab] text-white font-bold rounded-xl hover:bg-gradient-to-r hover:from-[#004d6e] hover:to-[#00accc] transition duration-200"
                            id="footerCalculateEmiBtn">
                            Calculate
                        </button>
                        <button type="button"
                            class=" w-32 py-2 border-2 border-[#005aab] text-[#005aab] font-bold rounded-xl hover:bg-[#005aab] hover:text-white transition duration-200"
                            id="resetBtn">
                            Reset Data
                        </button>
                    </div>
                </form>
            </div>

            <!-- Right Side (Map) -->
            <iframe
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d56536.26716072661!2d85.29305949177649!3d27.67042092711654!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39eb1906629bf3b7%3A0xc696cf8906c9150c!2sGoodwill%20Finance%20Ltd.!5e0!3m2!1sen!2snp!4v1705993528532!5m2!1sen!2snp"
                class="w-1/3 rounded-xl hidden lg:block" height="400" style="border:0;" allowfullscreen loading="lazy"
                referrerpolicy="no-referrer-when-downgrade">
            </iframe>
        </div>
    </section>


    <section class="m-10 flex justify-center items-center">
        <div
            class="flex flex-col space-y-5 lg:space-y-0 lg:flex-row lg:space-x-10 lg:items-center justify-center items-center w-full max-w-6xl px-4">
            <div class="w-full md:w-1/2 flex justify-center items-center">
                <img src="{{ asset('assets/img/mobile-App.jpg') }}" class="rounded-full max-w-full h-auto"
                    alt="mobile banking" />
            </div>
            <div class="w-full md:w-1/2 flex flex-col space-y-8 justify-center items-center text-center md:text-left">
                <h2 class="text-2xl sm:text-3xl md:text-4xl font-semibold max-w-xl leading-snug">
                    <span class="text-[#EF5824] fontStyle">Enjoy easy banking</span> from your hand held devices, from
                    anywhere
                    anytime.
                </h2>
                <p class="max-w-2xl text-xl sm:text-lg">
                    Manage and use your Bank Account on the move and around the clock with this secure Mobile Banking App
                    from Goodwill Finance.
                </p>
                <div class="w-full flex justify-center md:justify-start items-center space-x-8">
                    <a href="https://play.google.com/store/apps/details?id=com.f1soft.banksmart.goodwillfinance">
                        <img src="{{ asset('assets/img/download (1).png') }}" class="w-full max-w-[200px]"
                            alt="Download on Google Play" />
                    </a>
                    <a href="https://apps.apple.com/np/app/goodwill-finance-smart/id1588923021">
                        <img class="w-full max-w-[200px]" src="{{ asset('assets/img/download.png') }}"
                            alt="Download on App Store" />
                    </a>
                </div>
            </div>
        </div>
    </section>


    @if ($teamMembers->isNotEmpty())
        <section class="mx-10 flex flex-col items-center mb-12">
            <div class="container mx-auto">
                <div class="text-center mb-6 p-4">
                    <h3 class="text-[#EF5824] uppercase text-2xl mt-5 lg:mt-0 font-semibold">
                        Team
                    </h3>
                    <h4 class="text-2xl lg:text-3xl font-bold">Some of the people you'll be working with</h4>

                    <div class="text-gray-900 text-3xl md:text-4xl font-bold"></div>
                </div>

                <div class="flex flex-col lg:flex-row gap-6 flex-wrap justify-center mx-auto items-center text-center">

                    @foreach ($teamMembers as $team)
                        <div
                            class="overflow-hidden flex flex-col justify-between items-center gap-2 p-5 bg-gray-100 border-gray-100 rounded-2xl h-[480px] w-[300px] md:w-[400px] shadow-md">
                            <div class="text-brandBlue leading-tight font-bold m-1 line-clamp-2">
                                {{ $team->designation->name }}</div>

                            <img src="{{ asset('storage' . $team->photo) }}"
                                class="w-48 h-48 rounded-full object-cover border-gray-400 border-2">
                            <div class="text-gray-900 text-lg font-bold leading-tight">{{ $team->name }}</div>
                            {{-- <div class="text-gray-600 text-center leading-tight">Executive Manager</div> --}}
                            <div class="flex flex-col items-start gap-3 mt-2 w-auto h-auto text-gray-600 leading-tight">
                                <div class="flex space-x-3 items-center">
                                    <img src="{{ asset('assets/img/location-footer.png') }}" class="w-5"
                                        alt="location" />
                                    <p class="max-w-xs">{{ $team->address }}</p>
                                </div>
                                <div class="flex space-x-3 items-center">
                                    <img src="{{ asset('assets/img/phone.png') }}" class="w-5" alt="phone" />
                                    <p class="max-w-xs">{{ $team->contact }}</p>
                                </div>
                                <div class="flex space-x-3 items-center">
                                    <img src="{{ asset('assets/img/email(2).png') }}" class="w-5" alt="email" />
                                    <p class="max-w-xs">{{ $team->email }}</p>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
    @endif
@endsection


@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', () => {

            const tabs = document.querySelectorAll('.tab-btn');
            const panels = document.querySelectorAll('.feature-panel');

            const ACTIVE_CLASSES = [
                'border-[#005aab]',
                'border-b-[3px]',
                'shadow-[0_4px_16px_rgba(0,90,171,0.12)]',
                '-translate-y-1'
            ];

            function resetTabs() {
                tabs.forEach(tab => {
                    tab.classList.remove(...ACTIVE_CLASSES);
                    tab.classList.add('border-gray-200');
                    tab.setAttribute('aria-selected', 'false');

                    const label = tab.querySelector('.tab-label');

                    label?.classList.remove('text-[#005aab]');
                    label?.classList.add('text-gray-600');
                });
            }

            function hidePanels() {
                panels.forEach(panel => panel.classList.add('hidden'));
            }

            function activateTab(tab) {

                resetTabs();
                hidePanels();

                tab.classList.add(...ACTIVE_CLASSES);
                tab.classList.remove('border-gray-200');
                tab.setAttribute('aria-selected', 'true');

                const label = tab.querySelector('.tab-label');

                label?.classList.remove('text-gray-600');
                label?.classList.add('text-[#005aab]');

                const targetPanel = document.getElementById(tab.dataset.tab);

                targetPanel?.classList.remove('hidden');
            }

            tabs.forEach(tab => {
                tab.addEventListener('click', () => activateTab(tab));
            });

        });
    </script>

    {{-- ================= EMI CALCULATOR (SAFE JQUERY) ================= --}}
    <script>
        $(function() {

            /* ================= EMI CALC ================= */
            $('#footerCalculateEmiBtn').on('click', function(e) {
                e.preventDefault();

                const p = parseFloat($('#f_loan_amt').val());
                const r = parseFloat($('#f_rate').val());
                const n = parseFloat($('#f_month').val());

                if (!p || !r || !n) return;

                const monthlyRate = (r / 100) / 12;

                const emi =
                    (p * monthlyRate * Math.pow(1 + monthlyRate, n)) /
                    (Math.pow(1 + monthlyRate, n) - 1);

                $('#f_result').val(isFinite(emi) ? emi.toFixed(2) : '');
            });


            /* ================= RESET ================= */
            $('#resetBtn').on('click', function() {
                $('#f_loan_amt').val('');
                $('#f_rate').val('');
                $('#f_month').val('');
                $('#f_result').val('');
            });

        });
    </script>
@endpush