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">Gambar</th>
                            <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 rounded-tr-lg">Aksi</th> <!-- Sudut kanan atas -->
                        </tr>
                    </thead>
                    <tbody>
                        <!-- Hitung offset berdasarkan halaman saat ini -->
                        @php
                            $offset = ($fasilitas->currentPage() - 1) * $fasilitas->perPage();
                        @endphp
                        
                        @foreach ($fasilitas as $index => $fasilitasItem)
                            <tr class="@if ($index % 2 == 0) bg-gray-100 @endif">
                                
                                <td class="border px-4 py-2">{{ $index + 1 + $offset }}</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('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">
                                    @php
                                        $tanggalSekarang = date('Y-m-d'); // Mendapatkan tanggal saat ini
                                    @endphp
                                    
                                    <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>   
            
        <!-- Akhir kotak -->
    </div>
    <div class="flex justify-end mt-2">
        <div class="join h-0">
            <button class="join-item btn btn-sm {{ $fasilitas->previousPageUrl() ? '' : 'opacity-50' }}"
                onclick="window.location='{{ $fasilitas->previousPageUrl() }}'">«</button>
            <button class="join-item btn btn-sm bg-white">Page {{ $fasilitas->currentPage() }}</button>
            <button class="join-item btn btn-sm {{ $fasilitas->nextPageUrl() ? '' : 'opacity-50' }}"
                onclick="window.location='{{ $fasilitas->nextPageUrl() }}'">»</button>
        </div>
</div>


@endsection