@extends('frontend.layouts.app')
@section('title', __('forex-rate.title'))
@section('meta', __('forex-rate.meta_description'))

@section('content')
    <div>
        <!-- banner-section -->
        <section class="relative">
            <div class="mb-10">
                <img src="{{ asset('assets/images/become-an-agent/breadcrumb-serv.jpg') }}"
                     alt="Banner Image" class="h-60 w-full object-cover" />
            </div>
            <div class="absolute w-full top-20">
                <div class="flex flex-col space-y-8 ml-10">
                    <h3 class="text-2xl md:text-4xl font-extrabold text-white">
                        {{ __('forex-rate.title') }}
                    </h3>
                    <div class="flex space-x-5 items-center">
                        <a href="{{ route('homepage') }}" class="text-[#666] font-bold">
                            {{ __('forex-rate.breadcrumb.home') }}
                        </a>
                        <p class="text-white text-base font-bold">></p>
                        <a href="{{ route('forexRate') }}" class="text-accent font-bold">
                            {{ __('forex-rate.breadcrumb.forex_rate') }}
                        </a>
                    </div>
                </div>
            </div>
        </section>
        <!-- banner-section -->

        <div class="flex flex-col gap-10 mx-6 md:m-10 lg:mx-20 xl:mx-40">
            <!-- live exchange rates -->
            <section>
                <div class="p-4 md:ml-8 lg:my-4">
                    <div class="flex flex-col items-center text-center">
                        <h1 class="font-bold text-accent uppercase text-base lg:text-lg tracking-wider">
                            {{ __('forex-rate.section.title') }}
                        </h1>
                        <p class="text-2xl md:text-4xl text-black font-bold mt-3">
                            {{ __('forex-rate.section.subtitle') }}
                        </p>
                        <p class="p-2 text-base lg:text-lg lg:max-w-4xl">
                            {{ __('forex-rate.section.description') }}
                        </p>
                    </div>
                </div>

                {{-- Date filter --}}
                <form method="GET" action="{{ route('forexRate') }}" class="flex justify-center my-6 gap-4">
                    <input type="date" name="date" value="{{ request('date', $date ?? '') }}"
                           class="border rounded-lg px-3 py-2 focus:ring-2 focus:ring-accent" />
                    <button type="submit"
                            class="bg-accent hover:bg-[#e62e00] text-black px-4 py-2 rounded-xl shadow">
                        Filter
                    </button>
                </form>

                @if(!$forexRate)
                    <div class="text-center text-gray-600 italic py-10">
                        No Forex Rate available for the selected date.
                    </div>
                @else
                    <div class="flex flex-col lg:flex-row justify-center gap-6 items-start my-10">
                        @foreach ([
                            'morning' => ['time' => '10 AM'],
                            'afternoon' => ['time' => '2 PM'],
                        ] as $slot => $config)
                            <div class="relative mx-3 shadow-xl overflow-x-auto w-full lg:w-1/2">
                                <table class="w-full text-sm text-left text-gray-500">
                                    <!-- Title Header -->
                                    <thead class="text-xs text-black uppercase bg-accent">
                                        <tr>
                                            <th scope="col" class="px-2 md:px-6 py-3">
                                                {{ __('forex-rate.table.' . $slot . '.title') }}
                                            </th>
                                            <th scope="col" class="px-2 md:px-6 py-3"></th>
                                            <th scope="col" class="px-2 md:px-6 py-3">
                                                {{ $forexRate->date ?? '' }} - ({{ $config['time'] }})
                                            </th>
                                        </tr>
                                    </thead>

                                    <!-- Column Headers -->
                                    <thead class="text-xs text-white uppercase bg-gray-500">
                                        <tr>
                                            <th scope="col" class="px-2 md:px-6 py-3">
                                                {{ __('forex-rate.table.' . $slot . '.headers.currency') }}
                                            </th>
                                            <th scope="col" class="px-2 md:px-6 py-3">
                                                {{ __('forex-rate.table.' . $slot . '.headers.unit') }}
                                            </th>
                                            <th scope="col" class="px-2 md:px-6 py-3">
                                                {{ __('forex-rate.table.' . $slot . '.headers.buying_rate') }}
                                            </th>
                                        </tr>
                                    </thead>

                                    <!-- Table Rows -->
                                    @forelse ($forexRate->slots[$slot] ?? [] as $row)
                                        <tr>
                                            <th scope="row"
                                                class="px-2 md:px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
                                                <div class="flex items-center space-x-3">
                                                    <span class="flag-icon flag-icon-{{ $row['flag'] }} w-8 h-8 rounded-full"></span>
                                                    <span class="text-base text-[#212529]">{{ $row['currency'] }}</span>
                                                </div>
                                            </th>
                                            <td class="px-2 md:px-6 py-4">{{ $row['unit'] }}</td>
                                            <td class="px-2 md:px-6 py-4 text-center">{{ $row['buying_rate'] }}</td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="3" class="px-2 md:px-6 py-6 text-center text-gray-600 italic">
                                                Forex Rate for {{ $config['time'] }} is coming soon…
                                            </td>
                                        </tr>
                                    @endforelse
                                </table>
                            </div>
                        @endforeach
                    </div>
                @endif
            </section>
        </div>
    </div>

    <!-- Section breaker -->
    <div
        class="flex flex-col lg:flex-row bg-accent items-center justify-around gap-10 text-black rounded-lg mx-6 my-10 md:m-10 lg:mx-20 px-10 py-10">
        <div class="flex flex-col gap-6">
            <h1 class="text-2xl lg:text-5xl font-extrabold tracking-wide">All Forex Rate</h1>
            <p class="line-clamp-2 text-lg lg:text-xl">
                Forex Rate according to the FEDAN as we all will base on this rate.
            </p>
        </div>
        <a href="http://fedan.com.np/today-foreign-rate.aspx"
           class="px-6 py-4 bg-black text-accent rounded-full text-center text-xl w-60 font-bold hover:opacity-85">
            Forex Rate
        </a>
    </div>
    <!-- Section breaker -->
@endsection

@push('scripts')
    <script type="module" src="/src/main.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js"></script>
@endpush