@extends('admin.layouts.app')

@section('content')
<div class="space-y-6">
    <div class="flex items-center justify-between">
        <div>
            <h2 class="text-4xl font-extrabold">Home Sliders</h2>
            <p class="text-gray-400 mt-2">Manage homepage hero slides.</p>
        </div>
        <a href="{{ route('admin.sliders.create') }}" class="bg-red-600 hover:bg-red-700 px-5 py-3 rounded-xl font-semibold">
            Add Slider
        </a>
    </div>

    @if(session('success'))
        <div class="bg-green-600/20 border border-green-600 text-green-300 p-4 rounded-xl">
            {{ session('success') }}
        </div>
    @endif

    <div class="glass-card rounded-[1.6rem] overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left">
                <thead class="bg-black/40">
                    <tr>
                        <th class="p-4">Image</th>
                        <th class="p-4">Title</th>
                        <th class="p-4">Status</th>
                        <th class="p-4">Order</th>
                        <th class="p-4">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($sliders as $slider)
                        <tr class="border-t border-red-950">
                            <td class="p-4">
                                @if($slider->image)
                                    <img src="{{ asset('storage/'.$slider->image) }}" class="w-24 h-16 object-cover rounded-lg">
                                @else
                                    <div class="w-24 h-16 bg-black rounded-lg"></div>
                                @endif
                            </td>
                            <td class="p-4">
                                <div class="font-semibold">{{ $slider->title }}</div>
                                <div class="text-sm text-gray-400">{{ $slider->subtitle }}</div>
                            </td>
                            <td class="p-4">
                                @if($slider->is_active)
                                    <span class="text-green-400">Active</span>
                                @else
                                    <span class="text-red-400">Inactive</span>
                                @endif
                            </td>
                            <td class="p-4">{{ $slider->sort_order }}</td>
                            <td class="p-4">
                                <div class="flex gap-3">
                                    <a href="{{ route('admin.sliders.edit', $slider->id) }}" class="text-blue-400">Edit</a>
                                    <form action="{{ route('admin.sliders.destroy', $slider->id) }}" method="POST" onsubmit="return confirm('Delete this slider?')">
                                        @csrf
                                        @method('DELETE')
                                        <button class="text-red-400">Delete</button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="p-6 text-center text-gray-400">No sliders found.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    {{ $sliders->links() }}
</div>
@endsection