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

@section('content')
    {{-- Hero Section --}}
    <section class="lg:h-[350px] h-[250px] p-6 md:p-10 text-white bg-gradient-to-r from-[#004d6e] to-[#00accc]">
        <div class="h-full flex flex-col justify-center space-y-4">
            <h1 class="text-2xl md:text-3xl font-bold">
                Standard Tariff</h1>
            <div class="flex items-center space-x-2 text-white/90 text-sm md:text-base">
                <a href="{{ route('homepage') }}" class="hover:underline font-medium">Home</a>
                <span>›</span>
                <a href="{{ URL::previous() }}" class="hover:underline font-medium">Rates</a>
                <span>›</span>
                <span class="font-semibold">
                    Standard Tariff</span>
            </div>
        </div>
    </section>

    {{-- Main Content --}}
    <section class="-mt-10 md:-mt-16 mb-10 flex justify-center px-4 md:px-6">
        <div class="w-full max-w-7xl bg-white shadow-2xl rounded-xl p-6 md:p-10">
            <div class="text-center space-y-4">
                <p class="uppercase tracking-wider text-sm text-[#004d6e] font-semibold">Published Information</p>
                <h2 class="text-2xl md:text-3xl font-extrabold text-[#004d6e]">
                    Goodwill Finance Nepal -
                    Standard Tariff
                </h2>
            </div>

            {{-- Table --}}
            <div class="mt-8 rounded-xl border border-gray-200 sm:border overflow-x-hidden px-4 sm:px-6">
                <section class="m-0 my-2 md:m-6 lg:m-12 grid grid-cols-1 lg:grid-cols-4 gap-6">
                    <!-- Mobile Dropdown (visible on < lg) -->
                    <div class="block lg:hidden mb-4">
                        <select id="mobile-service-select"
                            class="w-full p-3 rounded-xl border border-gray-300 shadow-sm text-[#004d6e] font-semibold text-md">
                            <option value="">Select a Service</option>
                            <option value="account-services">Account Services</option>
                            <option value="loan-services">Loan Services</option>
                            <option value="cheque-clearing-services">Cheque Clearing Services</option>
                            <option value="ips-services">IPS Services</option>
                            <option value="asba-services">ASBA & C-ASBA Charges</option>
                            <option value="safe-deposit-lockers">Safe Deposit Lockers</option>
                            <option value="atm-smartbanking">ATM and SmartBanking Services</option>
                        </select>
                    </div>

                    <!-- Desktop Buttons (hidden on < lg) -->
                    <div class="hidden lg:block lg:col-span-1">
                        <div class="p-4 bg-gray-50 rounded-2xl shadow-inner">
                            <div class="space-y-3">
                                <button
                                    class="w-full text-left px-4 py-2 rounded-xl border border-gray-200 bg-white hover:bg-blue-50 transition shadow-sm service-button"
                                    data-target="account-services">
                                    <span class="text-[#004d6e] font-semibold text-md">Account Services</span>
                                </button>
                                <button
                                    class="w-full text-left px-4 py-2 rounded-xl border border-gray-200 bg-white hover:bg-blue-50 transition shadow-sm service-button"
                                    data-target="loan-services">
                                    <span class="text-[#004d6e] font-semibold text-md">Loan Services</span>
                                </button>
                                <button
                                    class="w-full text-left px-4 py-2 rounded-xl border border-gray-200 bg-white hover:bg-blue-50 transition shadow-sm service-button"
                                    data-target="cheque-clearing-services">
                                    <span class="text-[#004d6e] font-semibold text-md">Cheque Clearing Services</span>
                                </button>
                                <button
                                    class="w-full text-left px-4 py-2 rounded-xl border border-gray-200 bg-white hover:bg-blue-50 transition shadow-sm service-button"
                                    data-target="ips-services">
                                    <span class="text-[#004d6e] font-semibold text-md">IPS Services</span>
                                </button>
                                <button
                                    class="w-full text-left px-4 py-2 rounded-xl border border-gray-200 bg-white hover:bg-blue-50 transition shadow-sm service-button"
                                    data-target="asba-services">
                                    <span class="text-[#004d6e] font-semibold text-md">ASBA & C-ASBA Charges</span>
                                </button>
                                <button
                                    class="w-full text-left px-4 py-2 rounded-xl border border-gray-200 bg-white hover:bg-blue-50 transition shadow-sm service-button"
                                    data-target="safe-deposit-lockers">
                                    <span class="text-[#004d6e] font-semibold text-md">Safe Deposit Lockers</span>
                                </button>
                                <button
                                    class="w-full text-left px-4 py-2 rounded-xl border border-gray-200 bg-white hover:bg-blue-50 transition shadow-sm service-button"
                                    data-target="atm-smartbanking">
                                    <span class="text-[#004d6e] font-semibold text-md">ATM and SmartBanking Services</span>
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="lg:col-span-3 faq-content">
                        <!-- Services Content -->
                        <div id="service-tables">
                            <!-- Account Services Table -->
                            <div id="account-services" class="service-table hidden overflow-x-auto ">
                                <table
                                    class="min-w-full text-sm text-gray-700 border border-gray-200 rounded-xl overflow-hidden">
                                    <thead class="bg-[#004d6e] text-white uppercase text-md">
                                        <tr>
                                            <th class="py-3 px-4 text-left">Account Services</th>
                                            <th class="py-3 px-4 text-left">Charge</th>
                                        </tr>
                                    </thead>
                                    <tbody class="divide-y divide-gray-200">
                                        <tr class="hover:bg-gray-50 transition">

                                            <td class="px-4 py-2">Account Closure</td>
                                            <td class="px-4 py-2">Free</td>
                                        </tr>
                                        <tr class="bg-gray-50 hover:bg-gray-100 transition">
                                            <td class="px-4 py-2">Balance Confirmation</td>
                                            <td class="px-4 py-2">Free</td>
                                        </tr>
                                        <tr class="hover:bg-gray-50 transition">

                                            <td class="px-4 py-2">Charge for unused cheque</td>
                                            <td class="px-4 py-2">NPR 10 per cheque</td>
                                        </tr>
                                        <tr class="bg-gray-50 hover:bg-gray-100 transition">
                                            <td class="px-4 py-2">Cancellation of Good for Payment
                                            </td>
                                            <td class="px-4 py-2">NPR 500</td>
                                        </tr>
                                        <tr class="hover:bg-gray-50 transition">

                                            <td class="px-4 py-2">Stop Payment</td>
                                            <td class="px-4 py-2">NPR 100</td>
                                        </tr>
                                        <tr class="bg-gray-50 hover:bg-gray-100 transition">
                                            <td class="px-4 py-2">Standing instruction</td>
                                            <td class="px-4 py-2">NPR 100 per request</td>
                                        </tr>
                                        <tr class="hover:bg-gray-50 transition">

                                            <td class="px-4 py-2">Cheque book issued against lost
                                                cheque book
                                            </td>
                                            <td class="px-4 py-2">NPR 200</td>
                                        </tr>
                                        <tr class="bg-gray-50 hover:bg-gray-100 transition">
                                            <td class="px-4 py-2">Issuance of Balance Certificate
                                            </td>
                                            <td class="px-4 py-2">NPR 250 per certificate (Free
                                                once a year for
                                                audit purpose)</td>
                                        </tr>
                                        <tr class="hover:bg-gray-50 transition">

                                            <td class="px-4 py-2">Account closure charge in case
                                                of demise of
                                                account holder</td>
                                            <td class="px-4 py-2">Nill</td>
                                        </tr>
                                        <tr class="bg-gray-50 hover:bg-gray-100 transition">
                                            <td class="px-4 py-2">Payment of cheques / Deposits
                                                under ABBS</td>
                                            <td class="px-4 py-2">Free</td>
                                        </tr>
                                        <tr class="hover:bg-gray-50 transition">

                                            <td class="px-4 py-2">Issuance of duplicate Pass Book
                                                of Recurring
                                                deposit</td>
                                            <td class="px-4 py-2">NPR 100</td>
                                        </tr>
                                        <tr class="bg-gray-50 hover:bg-gray-100 transition">
                                            <td class="px-4 py-2">Issuance of duplicate FD
                                                Certificate</td>
                                            <td class="px-4 py-2">NPR 500</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <!-- Loan Services Table -->
                            <div id="loan-services" class="service-table hidden overflow-x-auto ">
                                <table
                                    class="min-w-full text-sm text-gray-700 border border-gray-200 rounded-xl overflow-hidden">
                                    <thead class="bg-[#004d6e] text-white uppercase text-md">
                                        <tr>
                                            <th class="py-3 px-4 text-left">Account Services</th>
                                            <th class="py-3 px-4 text-left">Charge</th>
                                        </tr>
                                    </thead>
                                    <tbody class="divide-y divide-gray-200">
                                        <tr class="hover:bg-gray-50 transition">

                                            <td class="px-4 py-2">Loan Processing Fee</td>
                                            <td class="px-4 py-2">Up to 1.25%</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <!-- Cheque Clearing Services Table -->
                            <div id="cheque-clearing-services" class="service-table hidden overflow-x-auto ">
                                <table
                                    class="min-w-full text-sm text-gray-700 border border-gray-200 rounded-xl overflow-hidden">
                                    <thead class="bg-[#004d6e] text-white uppercase text-md">
                                        <tr>
                                            <th class="py-3 px-4 text-left"> Cheque Clearing Services</th>
                                            <th class="py-3 px-4 text-left">Charge</th>
                                        </tr>
                                    </thead>
                                    <tbody class="divide-y divide-gray-200">
                                        <tr class="hover:bg-gray-50 transition">

                                            <td class="px-4 py-2">Electronic Clearing (NCHL)</td>
                                            <td class="px-4 py-2">Free up to NPR 200,000</td>
                                        </tr>
                                        <tr class="bg-gray-50 hover:bg-gray-100 transition">
                                            <td class="px-4 py-2">Normal Clearing</td>
                                            <td class="px-4 py-2">NPR 15</td>
                                        </tr>
                                        <tr class="hover:bg-gray-50 transition">

                                            <td class="px-4 py-2">Express Clearing</td>
                                            <td class="px-4 py-2">NPR 100 per Cheque</td>
                                        </tr>
                                        <tr class="bg-gray-50 hover:bg-gray-100 transition">
                                            <td class="px-4 py-2">Returned Cheque (outward
                                                clearing)</td>
                                            <td class="px-4 py-2">NPR 50</td>
                                        </tr>
                                        <tr class="hover:bg-gray-50 transition">

                                            <td class="px-4 py-2">Returned Cheque (inward
                                                clearing)</td>
                                            <td class="px-4 py-2"></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <!-- IPS Services Table -->
                            <div id="ips-services" class="service-table hidden overflow-x-auto ">
                                <table
                                    class="min-w-full text-sm text-gray-700 border border-gray-200 rounded-xl overflow-hidden">
                                    <thead class="bg-[#004d6e] text-white uppercase text-md">
                                        <tr>
                                            <th class="py-3 px-4 text-left">IPS (Interbank Payment System) Services</th>
                                            <th class="py-3 px-4 text-left">Charge</th>
                                        </tr>
                                    </thead>

                                    <tbody class="divide-y divide-gray-200">
                                        <tr class="hover:bg-gray-50 transition">

                                            <td class="px-4 py-2">Up to 500</td>
                                            <td class="px-4 py-2">NPR 2</td>
                                        </tr>
                                        <tr class="bg-gray-50 hover:bg-gray-100 transition">
                                            <td class="px-4 py-2">Up to 5000</td>
                                            <td class="px-4 py-2">NPR 5</td>
                                        </tr>
                                        <tr class="hover:bg-gray-50 transition">

                                            <td class="px-4 py-2">5000 to 50000</td>
                                            <td class="px-4 py-2">NPR 10</td>
                                        </tr>
                                        <tr class="bg-gray-50 hover:bg-gray-100 transition">
                                            <td class="px-4 py-2">Above 50000</td>
                                            <td class="px-4 py-2">NPR 15</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <!-- ASBA & C-ASBA Charges Table -->
                            <div id="asba-services" class="service-table hidden overflow-x-auto ">
                                <table
                                    class="min-w-full text-sm text-gray-700 border border-gray-200 rounded-xl overflow-hidden">
                                    <thead class="bg-[#004d6e] text-white uppercase text-md">
                                        <tr>
                                            <th class="py-3 px-4 text-left">ASBA & C-ASBA Charges</th>
                                            <th class="py-3 px-4 text-left">Charge</th>
                                        </tr>
                                    </thead>
                                    <tbody class="divide-y divide-gray-200">
                                        <tr class="hover:bg-gray-50 transition">

                                            <td class="px-4 py-2">IPO, FPO & Right Share</td>
                                            <td class="px-4 py-2">NPR 5 per application</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <!-- Safe Deposit Lockers Table -->
                            <div id="safe-deposit-lockers" class="service-table hidden overflow-x-auto ">
                                <table
                                    class="min-w-full text-sm text-gray-700 border border-gray-200 rounded-xl overflow-hidden">
                                    <thead class="bg-[#004d6e] text-white uppercase text-md">
                                        <tr>
                                            <th class="py-3 px-4 text-left">Safe Deposit Lockers Table</th>
                                            <th class="py-3 px-4 text-left">Charge</th>
                                        </tr>
                                    </thead>
                                    <tbody class="divide-y divide-gray-200">
                                    <tbody class="divide-y divide-gray-200">
                                        <tr class="hover:bg-gray-50 transition">

                                            <td class="px-4 py-2">Locker Charges</td>
                                            <td class="px-4 py-2">NPR 2000 depending upon the
                                                locker size</td>
                                        </tr>
                                        <tr class="bg-gray-50 hover:bg-gray-100 transition">
                                            <td class="px-4 py-2">Security Deposit</td>
                                            <td class="px-4 py-2">NPR 10000 or depending upon the
                                                locker size
                                            </td>
                                        </tr>
                                        <tr class="hover:bg-gray-50 transition">

                                            <td class="px-4 py-2">National Saving Bond</td>
                                            <td class="px-4 py-2">All Charges regarding NSB are as
                                                per NRB (if
                                                any)</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <!-- ATM and SmartBanking Services Table -->
                            <div id="atm-smartbanking" class="service-table hidden overflow-x-auto ">
                                <table
                                    class="min-w-full text-sm text-gray-700 border border-gray-200 rounded-xl overflow-hidden">
                                    <thead class="bg-[#004d6e] text-white uppercase text-md">
                                        <tr>
                                            <th class="py-3 px-4 text-left">ATM and SmartBanking Services </th>
                                            <th class="py-3 px-4 text-left">Charge</th>
                                        </tr>
                                    </thead>
                                    <tbody class="divide-y divide-gray-200">
                                        <tr class="hover:bg-gray-50 transition">

                                            <td class="px-4 py-2">ATM Card Registration</td>
                                            <td class="px-4 py-2">Free</td>
                                        </tr>
                                        <tr class="bg-gray-50 hover:bg-gray-100 transition">
                                            <td class="px-4 py-2">ATM Card Renew</td>
                                            <td class="px-4 py-2">NPR 200</td>
                                        </tr>
                                        <tr class="hover:bg-gray-50 transition">

                                            <td class="px-4 py-2">ATM Card Pin Regenerate</td>
                                            <td class="px-4 py-2">NPR 100</td>
                                        </tr>
                                        <tr class="bg-gray-50 hover:bg-gray-100 transition">
                                            <td class="px-4 py-2">Smart Banking Registration</td>
                                            <td class="px-4 py-2">Free</td>
                                        </tr>
                                        <tr class="hover:bg-gray-50 transition">

                                            <td class="px-4 py-2">Smart Banking Renew</td>
                                            <td class="px-4 py-2">NPR 200</td>
                                        </tr>
                                        {{-- <tr class="bg-gray-50 hover:bg-gray-100 transition">
                                            <td class="px-4 py-2">Smart Banking Repin</td>
                                            <td class="px-4 py-2">NPR 25</td>
                                        </tr> --}}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </section>
    @push('scripts')
        <script>
            document.querySelectorAll('.service-button').forEach(button => {
                button.addEventListener('click', () => {

                    // Hide all service tables
                    document.querySelectorAll('.service-table').forEach(table => {
                        table.classList.add('hidden');
                    });

                    // Show the selected service table
                    const targetId = button.getAttribute('data-target');
                    const targetTable = document.getElementById(targetId);
                    if (targetTable) {
                        targetTable.classList.remove('hidden');
                    }

                });
            });

            document.getElementById('mobile-service-select').addEventListener('change', function() {
                const target = this.value;
                if (target) {
                    // Trigger same behavior as clicking the button (adjust as needed)
                    const button = document.querySelector(`.service-button[data-target="${target}"]`);
                    if (button) {
                        button.click();
                    }
                }
            });

            document.addEventListener("DOMContentLoaded", function() {
                const buttons = document.querySelectorAll(".service-button");
                const tables = document.querySelectorAll(".service-table");
                const dropdown = document.getElementById("mobile-service-select");

                function showService(id) {
                    tables.forEach(table => table.classList.add("hidden"));
                    const target = document.getElementById(id);
                    if (target) target.classList.remove("hidden");
                }

                buttons.forEach(button => {
                    button.addEventListener("click", () => {
                        showService(button.getAttribute("data-target"));
                    });
                });

                dropdown?.addEventListener("change", function() {
                    if (this.value) showService(this.value);
                });

                // Optionally, show the first one by default
                showService("account-services");
            });
        </script>
    @endpush

@endsection