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

    <section class="h-[250px] p-10 text-white bg-cover bg-center"
        style="background-image: url('{{ asset('assets/img/business-hours.jpg') }}');">
        <div class="h-full flex flex-col space-y-5 justify-center">
            <p class="text-3xl font-semibold">Goodwill Business Hours</p>
            <p class="text-xl">Faster Smarter Easier</p>
        </div>
    </section>

    <section class="-mt-16 mb-10 w-full flex justify-center">
        <div class="p-10 flex flex-col space-y-8 bg-white shadow-xl rounded-md w-[1116px] ">
            <div class=" text-[#004d6e] flex justify-between flex-row p-4 rounded-t-lg">
                <span class="text-2xl font-bold ">Head Office</span>
                <div class="flex flex-row justify-between">
                    <span>
                        Goodwill Complex, Hattisar Sadak, Kathmandu 44600
                    </span>
                </div>
            </div>

            <span class="text-2xl font-bold ">Normal Business/Transaction Hours</span>

            <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">Day</th>
                        <th class="py-3 px-4 text-left">Opening Time</th>
                        <th class="py-3 px-4 text-left">Closing Time</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    <tr class="hover:bg-gray-50 transition">
                        <td class="px-4 py-2">Sunday</td>
                        <td class="px-4 py-2">10:00 AM</td>
                        <td class="px-4 py-2">04:00 PM</td>
                    </tr>
                    <tr class="bg-gray-50 hover:bg-gray-100 transition">
                        <td class="px-4 py-2">Monday</td>
                        <td class="px-4 py-2">10:00 AM</td>
                        <td class="px-4 py-2">04:00 PM</td>
                    </tr>
                    <tr class="hover:bg-gray-50 transition">
                        <td class="px-4 py-2">Tuesday</td>
                        <td class="px-4 py-2">10:00 AM</td>
                        <td class="px-4 py-2">04:00 PM</td>
                    </tr>
                    <tr class="bg-gray-50 hover:bg-gray-100 transition">
                        <td class="px-4 py-2">Wednesday</td>
                        <td class="px-4 py-2">10:00 AM</td>
                        <td class="px-4 py-2">04:00 PM</td>
                    </tr>
                    <tr class="hover:bg-gray-50 transition">
                        <td class="px-4 py-2">Thursday</td>
                        <td class="px-4 py-2">10:00 AM</td>
                        <td class="px-4 py-2">04:00 PM</td>
                    </tr>
                    <tr class="bg-gray-50 hover:bg-gray-100 transition">
                        <td class="px-4 py-2">Friday</td>
                        <td class="px-4 py-2">10:00 AM</td>
                        <td class="px-4 py-2">04:00 PM</td>
                    </tr>

                    <tr class="border-t">
                        <td class="py-3 px-6 text-gray-500 italic" colspan="2">Closed on Saturdays and public holidays.
                        </td>
                    </tr>
                </tbody>
            </table>

            <span class="text-2xl font-bold ">Winter Business/Transaction Hours</span>
            <p class="text-sm">Effective (From 1 <sup>st</sup> Mangisir to 30<sup>th</sup> Magh)
            </p>
            <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">Day</th>
                        <th class="py-3 px-4 text-left">Opening Time</th>
                        <th class="py-3 px-4 text-left">Closing Time</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    <tr class="hover:bg-gray-50 transition">
                        <td class="px-4 py-2">Sunday</td>
                        <td class="px-4 py-2">10:00 AM</td>
                        <td class="px-4 py-2">03:00 PM</td>
                    </tr>
                    <tr class="bg-gray-50 hover:bg-gray-100 transition">
                        <td class="px-4 py-2">Monday</td>
                        <td class="px-4 py-2">10:00 AM</td>
                        <td class="px-4 py-2">03:00 PM</td>
                    </tr>
                    <tr class="hover:bg-gray-50 transition">
                        <td class="px-4 py-2">Tuesday</td>
                        <td class="px-4 py-2">10:00 AM</td>
                        <td class="px-4 py-2">03:00 PM</td>
                    </tr>
                    <tr class="bg-gray-50 hover:bg-gray-100 transition">
                        <td class="px-4 py-2">Wednesday</td>
                        <td class="px-4 py-2">10:00 AM</td>
                        <td class="px-4 py-2">03:00 PM</td>
                    </tr>
                    <tr class="hover:bg-gray-50 transition">
                        <td class="px-4 py-2">Thursday</td>
                        <td class="px-4 py-2">10:00 AM</td>
                        <td class="px-4 py-2">03:00 PM</td>
                    </tr>
                    <tr class="bg-gray-50 hover:bg-gray-100 transition">
                        <td class="px-4 py-2">Friday</td>
                        <td class="px-4 py-2">10:00 AM</td>
                        <td class="px-4 py-2">03:00 PM</td>
                    </tr>

                    <tr class="border-t">
                        <td class="py-3 px-6 text-gray-500 italic" colspan="2">Closed on Saturdays and public holidays.
                        </td>
                    </tr>
                </tbody>
            </table>


            <div class="mt-4 text-sm">
                <p>Note: Business hours may vary by branch. Please call ahead to confirm.</p>
            </div>
        </div>
    </section>

@endsection