@extends('admin.layout')

@section('content')

<div class="max-w-7xl mx-auto bg-white rounded-2xl shadow-lg p-6">

    <div class="flex justify-between items-center mb-6">

        <div>
            <h1 class="text-2xl font-bold text-gray-800">
                Kelola Slider
            </h1>

            <p class="text-gray-500 text-sm">
                Daftar slider yang tampil di halaman utama website.
            </p>
        </div>

        <a href="{{ route('admin.slider.form') }}"
            class="bg-blue-600 hover:bg-blue-700 text-white px-5 py-3 rounded-xl">

            <i class="fa fa-plus"></i>

            Tambah Slider

        </a>

    </div>

    @if(session('success'))

        <div class="bg-green-100 border border-green-300 text-green-700 rounded-xl p-4 mb-5">

            {{ session('success') }}

        </div>

    @endif

    <div class="overflow-x-auto">

        <table class="w-full border">

            <thead class="bg-gray-100">

                <tr>

                    <th class="p-3 border text-center">No</th>

                    <th class="p-3 border">Gambar</th>

                    <th class="p-3 border">Judul</th>

                    <th class="p-3 border">Tombol</th>

                    <th class="p-3 border">Urutan</th>

                    <th class="p-3 border">Status</th>

                    <th class="p-3 border text-center">Aksi</th>

                </tr>

            </thead>

            <tbody>

                @forelse($sliders as $slider)

                <tr>

                    <td class="border p-2 text-center">
                        {{ $loop->iteration }}
                    </td>

                    <td class="border p-2">

                        @if($slider->gambar)

                            <img
                                src="{{ asset('storage/'.$slider->gambar) }}"
                                class="h-20 rounded">

                        @endif

                    </td>

                    <td class="border p-2">

                        <strong>

                            {{ $slider->judul }}

                        </strong>

                        <br>

                        <small>

                            {{ $slider->subjudul }}

                        </small>

                    </td>

                    <td class="border p-2">

                        {{ $slider->button_text }}

                    </td>

                    <td class="border p-2 text-center">

                        {{ $slider->urutan }}

                    </td>

                    <td class="border p-2 text-center">

                        @if($slider->status)

                            <span class="text-green-600 font-bold">
                                Aktif
                            </span>

                        @else

                            <span class="text-red-600">
                                Non Aktif
                            </span>

                        @endif

                    </td>

                    <td class="border p-2">

                        <div class="flex gap-2 justify-center">

                            <a
                                href="{{ route('admin.slider.edit',$slider->id) }}"
                                class="bg-yellow-500 text-white px-3 py-2 rounded">

                                Edit

                            </a>

                            <form
                                action="{{ route('admin.slider.destroy',$slider->id) }}"
                                method="POST">

                                @csrf
                                @method('DELETE')

                                <button
                                    onclick="return confirm('Hapus slider ini?')"
                                    class="bg-red-600 text-white px-3 py-2 rounded">

                                    Hapus

                                </button>

                            </form>

                        </div>

                    </td>

                </tr>

                @empty

                <tr>

                    <td colspan="7"
                        class="text-center p-8 text-gray-500">

                        Belum ada slider.

                    </td>

                </tr>

                @endforelse

            </tbody>

        </table>

    </div>

</div>

@endsection