Untitled

@extends('admin.layout')
@section('header')
@endsection
@section('content')
    <div x-data="{ isOpen: false }" class="p-6">
        

        <div class="bg-white border rounded-lg p-6 shadow-md">
            <h1 class="text-2xl font-bold mb-4 text">Sewaan Fasiliti</h1> <!-- Mulai kotak -->
            <div class="flex justify-end mb-4">
                <a href="{{ route('fasiliti.tambah') }}" class="bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded">
                    Tambah Fasilitas
                </a>
            </div>
            
            <!-- Tabel fasilitas -->
            <div class="overflow-x-auto">
                <table class="table-auto w-full bg-white shadow-lg">
                    <thead class="bg-green-700 text-white shadow-md">
                        <tr>
                            <th class="px-4 py-2 text-left rounded-tl-lg">No</th> <!-- Sudut kiri atas -->
                            <th class="px-4 py-2 text-left">Fasiliti</th>
                            <th class="px-4 py-2 text-left">Keterangan</th>
                            <th class="px-4 py-2 text-left">Status</th>
                            <th class="px-4 py-2 text-left">Gambar</th>
                            <th class="px-4 py-2 text-left rounded-tr-lg">Aksi</th> <!-- Sudut kanan atas -->
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($fasilitas as $index => $fasilitasItem)
                            <tr class="@if ($index % 2 == 0) bg-gray-100 @endif">
                                <td class="border px-4 py-2">{{ $index + 1 }}</td>
                                <td class="border px-4 py-2"><a href="{{ route('fasiliti.edit', $fasilitasItem->id) }}">{{ $fasilitasItem->nama }}</a></td>
                                <td class="border px-4 py-2">{{ $fasilitasItem->keterangan }}</td>
                                <td class="border px-4 py-2">{{ $fasilitasItem->status ? 'AKTIF' : 'TIDAK AKTIF' }}</td>
                                <td class="border px-4 py-2">
                                    <img src="{{ asset($fasilitasItem->gambar) }}" class="w-24"
                                        alt="{{ $fasilitasItem->nama }}">
                                </td>
                                <td class="border px-4 py-2">
                                    <a href="{{ route('booking.index', ['id' => $fasilitasItem->id, 'date' => $tanggalSekarang]) }}"
                                        class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 block w-full rounded text-center">
                                        Semak Tempahan
                                     </a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <!-- Kontrol pagination -->
            <div class="mt-6 flex justify-center"> <!-- Posisi terpusat -->
                {{ $fasilitas->links() }} <!-- Kontrol pagination -->
            </div>
            
        </div> <!-- Akhir kotak -->
    </div>
@endsection