226 lines
9.5 KiB
PHP
226 lines
9.5 KiB
PHP
<div class="mt-10">
|
||
<div class="p-4 bg-white shadow-md">
|
||
|
||
<div class="flex justify-between items-center mb-4">
|
||
@if ($hasSearch ?? true)
|
||
<!-- Search bar -->
|
||
<input
|
||
type="text"
|
||
wire:model="search"
|
||
placeholder="Search..."
|
||
class="border rounded px-3 py-2" />
|
||
@else
|
||
<!-- Start Date and End Date filters -->
|
||
<div class="flex items-center gap-4">
|
||
<div class="flex items-center gap-2">
|
||
<label class="font-medium">Start</label>
|
||
<input
|
||
type="date"
|
||
wire:model="startDate"
|
||
class="border rounded px-3 py-2" />
|
||
</div>
|
||
|
||
<div class="flex items-center gap-2">
|
||
<label class="font-medium">End</label>
|
||
<input
|
||
type="date"
|
||
wire:model="endDate"
|
||
class="border rounded px-3 py-2" />
|
||
</div>
|
||
</div>
|
||
|
||
@endif
|
||
|
||
@if ($hasAddButton ?? true)
|
||
<!-- Add button -->
|
||
<a href="{{ $addRoute }}" class="bg-orange-600 text-white px-4 py-2 rounded">
|
||
+ Add
|
||
</a>
|
||
@elseif ($hasExportButton ?? false)
|
||
<!-- Export button -->
|
||
<button wire:click="export" class="bg-orange-600 text-white px-4 py-2 rounded flex items-center gap-2">
|
||
Export
|
||
</button>
|
||
@else
|
||
<!-- Default button or anything else you want here -->
|
||
<button class="bg-gray-600 text-white px-4 py-2 rounded">
|
||
Default Action
|
||
</button>
|
||
@endif
|
||
</div>
|
||
|
||
<!-- Table Header -->
|
||
<table class="table-auto w-full">
|
||
<thead class="bg-gray-100">
|
||
<tr>
|
||
<!-- Checkbox for selecting rows (if enabled) -->
|
||
@if ($hasCheckbox)
|
||
<th class="px-4 py-2 text-left">
|
||
<input type="checkbox" wire:model="selectAll" wire:change="selectAllRows" class="cursor-pointer">
|
||
</th>
|
||
@endif
|
||
|
||
<!-- Dynamic Columns (sortable) -->
|
||
@foreach ($columns as $column)
|
||
<th class="px-4 py-2 text-left cursor-pointer" wire:click="sortBy('{{ $column['field'] }}')">
|
||
{{ $column['label'] }}
|
||
@if ($sortField === $column['field'])
|
||
@if ($sortDirection === 'asc')
|
||
<span class="ml-2">↑</span>
|
||
@else
|
||
<span class="ml-2">↓</span>
|
||
@endif
|
||
@else
|
||
<span class="ml-2">↕</span>
|
||
@endif
|
||
</th>
|
||
@endforeach
|
||
|
||
<!-- Actions Column (if enabled) -->
|
||
@if ($hasActions)
|
||
<th class="px-4 py-2 text-left">Actions</th>
|
||
@endif
|
||
</tr>
|
||
</thead>
|
||
|
||
<!-- Table Body -->
|
||
<tbody>
|
||
@forelse ($rows as $index => $row)
|
||
<tr class="hover:bg-gray-50 border-b" wire:key="row-{{ $row[$rowKey] }}-{{ $index }}-{{ $renderKey }}">
|
||
<!-- Checkbox for row selection (if enabled) -->
|
||
@if ($hasCheckbox)
|
||
<td class="px-4 py-2">
|
||
<input type="checkbox"
|
||
wire:click="selectRow('{{ $row[$rowKey] ?? $index }}')"
|
||
@if(in_array($row[$rowKey] ?? $index, $selected)) checked @endif
|
||
class="cursor-pointer">
|
||
</td>
|
||
@endif
|
||
|
||
<!-- Display Data for each column -->
|
||
@foreach ($columns as $column)
|
||
<td class="px-4 py-2">
|
||
{{ $row[$column['field']] ?? '' }}
|
||
</td>
|
||
@endforeach
|
||
|
||
<!-- Action Buttons (if enabled) -->
|
||
@if ($hasActions)
|
||
<td class="px-4 py-2 gap-2 flex">
|
||
@if($isViewPage)
|
||
<button wire:click="viewRow('{{ $row[$rowKey] ?? $index }}')" class="text-gray-500 hover:text-gray-700">
|
||
<i class="fas fa-eye"></i>
|
||
</button>
|
||
@else
|
||
<button wire:click="editRow('{{ $row[$rowKey] ?? $index }}')" class="text-blue-500 hover:text-blue-700">
|
||
<i class="fas fa-edit"></i>
|
||
</button>
|
||
<button wire:click="viewRow('{{ $row[$rowKey] ?? $index }}')" class="text-gray-500 hover:text-gray-700">
|
||
<i class="fas fa-eye"></i>
|
||
</button>
|
||
<button wire:click="deleteRow('{{ $row[$rowKey] ?? $index }}')" class="text-red-500 hover:text-red-700">
|
||
<i class="fas fa-trash-alt"></i>
|
||
</button>
|
||
@endif
|
||
</td>
|
||
@endif
|
||
</tr>
|
||
@empty
|
||
<tr>
|
||
<td colspan="{{ count($columns) + 1 }}" class="text-center p-4">No data available</td>
|
||
</tr>
|
||
@endforelse
|
||
</tbody>
|
||
</table>
|
||
|
||
<!-- Delete Button, Pagination, and Entries in a Single Row -->
|
||
<div class="mt-4 flex items-center justify-between gap-4">
|
||
<!-- Delete Button -->
|
||
@if($hasDelete)
|
||
<button wire:click="deleteSelected"
|
||
class="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 cursor-pointer"
|
||
@if (empty($selected)) disabled @endif>
|
||
Delete
|
||
</button>
|
||
@else
|
||
<div></div> <!-- Placeholder to maintain layout -->
|
||
@endif
|
||
|
||
<!-- Pagination -->
|
||
<div class="flex items-center gap-2">
|
||
<!-- Previous Button -->
|
||
<button
|
||
wire:click="gotoPage({{ $currentPage - 1 }})"
|
||
class="px-3 py-1 border rounded {{ $currentPage <= 1 ? 'bg-gray-200 cursor-not-allowed' : 'bg-white hover:bg-gray-100' }}"
|
||
{{ $currentPage <= 1 ? 'disabled' : '' }}>
|
||
Prev
|
||
</button>
|
||
|
||
<!-- Page Numbers -->
|
||
@for ($i = 1; $i <= $lastPage; $i++)
|
||
<button
|
||
wire:click="gotoPage({{ $i }})"
|
||
class="px-3 py-1 border rounded {{ $currentPage === $i ? 'bg-orange-600 text-white' : 'bg-white hover:bg-gray-100' }}">
|
||
{{ $i }}
|
||
</button>
|
||
@endfor
|
||
|
||
<!-- Next Button -->
|
||
<button
|
||
wire:click="gotoPage({{ $currentPage + 1 }})"
|
||
class="px-3 py-1 border rounded {{ $currentPage >= $lastPage ? 'bg-gray-200 cursor-not-allowed' : 'bg-white hover:bg-gray-100' }}"
|
||
{{ $currentPage >= $lastPage ? 'disabled' : '' }}>
|
||
Next
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Entries Text -->
|
||
<div class="text-gray-600">
|
||
Showing {{ ($currentPage - 1) * $perPage + 1 }} to {{ min($currentPage * $perPage, $totalRows) }} of {{ $totalRows }} entries
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal for Viewing / Editing Row -->
|
||
@if ($showModal)
|
||
<div class="fixed inset-0 bg-gray-900 bg-opacity-50 flex items-center justify-center z-50">
|
||
<div class="bg-white p-6 rounded-lg shadow-lg w-1/2">
|
||
<!-- Modal Header -->
|
||
<div class="flex justify-between items-center mb-4">
|
||
<h2 class="text-lg font-semibold">
|
||
{{ $modalMode === 'view' ? 'View Details' : 'Edit Details' }}
|
||
</h2>
|
||
<button wire:click="closeModal" class="text-gray-600 hover:text-gray-800">×</button>
|
||
</div>
|
||
|
||
<!-- Modal Body -->
|
||
<div class="space-y-4">
|
||
@foreach ($columns as $column)
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700">
|
||
{{ $column['label'] }}
|
||
</label>
|
||
@if ($modalMode === 'edit')
|
||
<input type="text" wire:model.defer="modalData.{{ $column['field'] }}"
|
||
class="mt-1 p-2 border border-gray-300 rounded w-full">
|
||
@else
|
||
<div class="mt-1 p-2 bg-gray-100 rounded">
|
||
{{ $modalData[$column['field']] ?? '' }}
|
||
</div>
|
||
@endif
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
|
||
<!-- Modal Footer with Save Button (if in edit mode) -->
|
||
@if ($modalMode === 'edit')
|
||
<div class="mt-6 flex justify-end">
|
||
<button wire:click="saveRow" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
|
||
Save
|
||
</button>
|
||
</div>
|
||
@endif
|
||
</div>
|
||
</div>
|
||
@endif
|
||
</div>
|
||
</div> |