<div class=" p-4">
    <div class="max-w-full mx-auto bg-white rounded-lg">
        <div class="text-black p-4 rounded-t-lg flex justify-between items-center">
            <h1 class="text-lg font-semibold">{{ $company }} (SN={{ $serverKey }}):: History Patch</h1>
            {{-- <button class="bg-info hover:info-focus text-white font-bold py-2 px-4 rounded">
                Export Query
            </button> --}}
        </div>

        <!-- Table Section -->
        <div class="overflow-x-auto p-4">
           <table aria-describedby="mydesc"  class="min-w-full bg-white border border-gray-300">
                <thead>
                    <tr class="bg-slate-300 text-gray-700">
                        <th scope="col"  class="py-2 px-4 border-b cursor-pointer" wire:click="sortHistoryBy('cp.TaskDate')">
                            Task Date
                            @if ($sortHistoryField == 'cp.TaskDate')
                                <span>{{ $sortHistoryDirection == 'asc' ? '↑' : '↓' }}</span>
                            @endif
                        </th>
                        <th scope="col"  class="py-2 px-4 border-b cursor-pointer" wire:click="sortHistoryBy('cp.TaskStatus')">
                            Task Status
                            @if ($sortHistoryField == 'cp.TaskStatus')
                                <span>{{ $sortHistoryDirection == 'asc' ? '↑' : '↓' }}</span>
                            @endif
                        </th>
                        <th scope="col"  class="py-2 px-4 border-b cursor-pointer" wire:click="sortHistoryBy('cp.TaskRunner')">
                            Task Runner
                            @if ($sortHistoryField == 'cp.TaskRunner')
                                <span>{{ $sortHistoryDirection == 'asc' ? '↑' : '↓' }}</span>
                            @endif
                        </th>
                        <th scope="col"  class="py-2 px-4 border-b cursor-pointer" wire:click="sortHistoryBy('cp.TaskFinish')">
                            Task Finish
                            @if ($sortHistoryField == 'cp.TaskFinish')
                                <span>{{ $sortHistoryDirection == 'asc' ? '↑' : '↓' }}</span>
                            @endif
                        </th>
                        <th scope="col"  class="py-2 px-4 border-b cursor-pointer" wire:click="sortHistoryBy('cs.PID')">
                            Patch ID
                            @if ($sortHistoryField == 'cs.PID')
                                <span>{{ $sortHistoryDirection == 'asc' ? '↑' : '↓' }}</span>
                            @endif
                        </th>
                        <th scope="col"  class="py-2 px-4 border-b cursor-pointer" wire:click="sortHistoryBy('cs.PATCHNAME')">
                            Patch Name
                            @if ($sortHistoryField == 'cs.PATCHNAME')
                                <span>{{ $sortHistoryDirection == 'asc' ? '↑' : '↓' }}</span>
                            @endif
                        </th>
                        <th scope="col"  class="py-2 px-4 border-b cursor-pointer" wire:click="sortHistoryBy('cs.PAPPROVEDATE')">
                            Approve Date
                            @if ($sortHistoryField == 'cs.PAPPROVEDATE')
                                <span>{{ $sortHistoryDirection == 'asc' ? '↑' : '↓' }}</span>
                            @endif
                        </th>
                        <th scope="col"  class="py-2 px-4 border-b cursor-pointer" wire:click="sortHistoryBy('cs.PDESC')">
                            Description
                            @if ($sortHistoryField == 'cs.PDESC')
                                <span>{{ $sortHistoryDirection == 'asc' ? '↑' : '↓' }}</span>
                            @endif
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($historyPatchList as $key => $patch)
                        <tr class="border-b">
                            <td class="py-2 px-4 border min-w-36 max-w-36 text-center">{{ $patch->TaskDate }}</td>
                            <td class="py-2 px-4 border min-w-24 max-w-24 text-center">{{ $patch->TaskStatus }}</td>
                            <td class="py-2 px-4 border min-w-24 max-w-24 text-center">{{ $patch->TaskRunner }}</td>
                            <td class="py-2 px-4 border min-w-36 max-w-36 text-center">{{ $patch->TaskFinish }}</td>
                            <td class="py-2 px-4 border min-w-24 max-w-24 text-center">{{ $patch->PID }}</td>
                            <td class="py-2 px-4 border min-w-48 max-w-48 text-center">{{ $patch->PATCHNAME }}</td>
                            <td class="py-2 px-4 border min-w-32 max-w-32 text-center">{{ $patch->PAPPROVEDATE }}</td>
                            <td class="py-2 px-4 border min-w-64 max-w-64 text-center">{{ $patch->PDESC }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
            <div class="mt-4">
                {{ $historyPatchList->links('livewire.paginate-custom') }}
            </div>
        </div>
    </div>
</div>
