@props(['records'])
<div {{ $attributes->merge(['class' => 'table-container p-2 w-full']) }}>
    <table class=" md:table items-center w-full bg-transparent border-collapse overflow-x-scroll">
        <thead>
            <tr class="">
                <th
                    class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left bg-pink-800 text-pink-300 border-pink-700 ">
                    Service Title</th>
                <th colspan="3"
                    class="align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left bg-pink-800 text-pink-300 border-pink-700 ">
                    Info</th>
            </tr>
        </thead>

        <tbody>
            @forelse ($records as $record)
                <tr class="transition duration-300 ease-in-out hover:bg-pink-800 ">
                    <td
                        class="border-t-1 px-1 align-middle border-l-0 border-r-0 text-xs  py-3 text-left flex items-center">

                        <span class="ml-3 font-bold text-white">
                            <div class="text-lg mb-1"> {{ $record->presentServiceTitle() }} </div>
                            <span class="font-normal text-sm"> Entrance: {{ $record->churchEntrance->name }}</span> <br>
                            <span class="font-normal text-sm">Location: {{ $record->getServiceLocation() }} </span> <br>
                            <span class="font-normal text-sm">Date: {{ $record->presentServiceDay() }},</span>
                            {{ $record->created_at }}
                        </span>
                    </td>
                    <td class="pl-5 min-w-[100px] border-t-0   font-normal whitespace-nowrap py-3 ">
                        <div class="bg-gray-50 text-black pl-3 pr-2  py-1 rounded-lg shadow-lg">

                            {{ 'Male : ' . $record->getCensus('m') }} <br>
                            {{ 'Female : ' . $record->getCensus('f') }} <br>
                            <span class="border-b border-black">{{ 'Kids : ' . $record->getCensus('k') }}</span>
                            <br>
                            <span class=" font-semibold">{{ 'Total : ' . $record->getCensus() }} </span>

                        </div>
                    </td>


                    <td class="border-t-0 px-1 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap py-3">
                    </td>
                </tr>
            @empty
                <div class="text-center">
                    {{ 'no record found' }}
                </div>
            @endforelse
        </tbody>
    </table>
</div>