@extends('frontend.layouts.partials.app')

@section('title', 'Rate')

@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">Base Rate and Spread Rate</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">Base Rate and Spread Rate</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 - Base Rate and Spread Rate
                </h2>
            </div>

            {{-- Table --}}
            <div class="overflow-x-auto mt-8 rounded-xl border border-gray-200">
                <table class="min-w-full text-center text-sm md:text-base border-collapse">
                    <thead class="bg-[#004d6e] text-white">
                        <tr>
                            <th class="py-3 px-4">Month</th>
                            <th class="py-3 px-4">Year</th>
                            <th class="py-3 px-4">Base Rate (%)</th>
                            <th class="py-3 px-4">Average Base Rate (%)</th>
                            <th class="py-3 px-4">Spread Rate (%)</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @foreach ($baseRates as $rate)
                            <tr class="hover:bg-gray-50 transition">
                                <td class="py-3 px-4">{{ $rate->month }}</td>
                                <td class="py-3 px-4">{{ $rate->year }}</td>
                                <td class="py-3 px-4">{{ $rate->base_rate }}%</td>
                                <td class="py-3 px-4">{{ $rate->average_base_rate }}%</td>
                                <td class="py-3 px-4">{{ $rate->spread_rate }}%</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </section>
@endsection