@extends('lfc_views.layouts.pagelayout')

@section('main-content-body')
    <div class="main-content-body ">
        <!-- component -->
        <section class="relative py-2 bg-blueGray-50">
            <div class="w-full mb-2 p-0">
                <div
                    class="relative flex flex-col min-w-0 max-w-fit lg:max-w-full break-words mb-2 shadow-lg rounded bg-pink-900 text-white">
                    <div class="rounded-t mb-0 px-4 py-3 border-0">
                        <div class="flex flex-wrap items-center">
                            <div class="relative px-4 max-w-full flex-grow flex-1 flex justify-between">
                                <h3 class="font-semibold text-lg text-white capitalize">service
                                    record table
                                </h3>
                                <h4 class="flex gap-3">
                                    <a href="{{ route('church-services-records.index') }}"
                                        class="@if (!request()->query('time')) text-red-400 @endif ">
                                        All
                                    </a>

                                    <a href="{{ route('church-services-records.index', ['time' => 'today']) }}"
                                        class="@if (request()->query('time') == 'today') text-red-400 @endif ">
                                        Today
                                    </a>
                                </h4>
                            </div>
                        </div>
                    </div>
                    <div class="block overflow-x-hidden">
                        {{-- placeholder: history table component --}}
                        <x-history-table :records="$records" class="hidden lg:block" />
                        <x-history-table-sm :records="$records" class="block lg:hidden" />


                    </div>
                    <div class="links">
                        {{-- {{ dd($records) }} --}}
                        {{-- <span>{{ $records->withQueryString()->links() }}</span> --}}
                    </div>
                </div>
                <div class="links pb-5 p-5 lg:p-0">
                    <span>{{ $records->withQueryString()->links() }}</span>
                </div>
            </div>
        </section>

    </div>
@endsection