@extends('backend.template-admin')

@section('content')
    <div class="flex gap-4 justify-between">
        <button
            class="bg-orange-100 mb-10 hover:bg-orange-200 transition text-sm px-4 py-2 rounded-md text-orange-500 border-2 border-orange-300">
            <a href="{{ route('admin.banner.create') }}">Tambah Banner Baru</a>
        </button>
    </div>

    <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
        <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
            <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                <tr>
                    <th scope="col" class="px-6 py-3">No</th>
                    <th scope="col" class="px-6 py-3">Slug</th>
                    <th scope="col" class="px-6 py-3">Banner</th>
                    <th scope="col" class="px-6 py-3">Status</th>
                    <th scope="col" class="px-6 py-3">Dibuat</th>
                    <th scope="col" class="px-6 py-3">Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($banners as $banner)
                    <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                        <td class="px-6 py-4">{{ $loop->iteration }}</td>
                        <td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                            {{ $banner->slug }}
                        </td>
                        <td class="px-6 py-4">
                            <img src="{{ $banner->banner }}" alt="{{ $banner->slug }}" class="w-20 h-12 object-cover rounded">
                        </td>
                        <td class="px-6 py-4">
                            <span class="px-2 py-1 text-xs rounded-full 
                                {{ $banner->status == 'enable' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                                {{ ucfirst($banner->status) }}
                            </span>
                        </td>
                        <td class="px-6 py-4">{{ $banner->created_at->format('d/m/Y H:i') }}</td>
                        <td class="px-6 py-4">
                            <div class="flex gap-2 items-center">
                                <a href="{{ route('admin.banner.edit', $banner) }}" 
                                   class="font-medium text-blue-600 dark:text-blue-500 hover:underline hover:bg-blue-50 px-2 py-1 rounded transition">
                                    Edit
                                </a>
                                <form action="{{ route('admin.banner.destroy', $banner) }}" method="POST" 
                                      onsubmit="return confirm('Yakin ingin menghapus banner ini? Tindakan ini tidak dapat dibatalkan.')"
                                      class="inline">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" 
                                            class="font-medium text-red-600 dark:text-red-500 hover:underline hover:bg-red-50 px-2 py-1 rounded transition">
                                        Hapus
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="px-6 py-4 text-center text-gray-500">
                            Belum ada banner
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
@endsection