@extends('layouts.app')

@section('content')
<section class="section light">
    <div class="container">
        <div class="page-header" style="margin-bottom: 40px; display: flex; justify-content: space-between; align-items: center;">
            <div>
                <h1 style="font-size: 3rem;">Manage Slides</h1>
                <p>Add, edit, or remove slides from the home page running slider.</p>
            </div>
            <a href="{{ route('slider.create') }}" class="button button-primary">+ Add New Slide</a>
        </div>

        @if(session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif

        <div class="blog-grid">
            @forelse($sliders as $slider)
                <article class="post-card">
                    <div class="post-card-image">
                        <img src="{{ asset('storage/' . $slider->image_path) }}" alt="{{ $slider->title }}">
                    </div>
                    <div class="post-card-content">
                        <h2>{{ $slider->title }}</h2>
                        <p>{{ $slider->subtitle }}</p>
                        <div class="post-meta">
                            <span style="font-size: 0.85rem; color: #999;">Order: {{ $slider->order }}</span>
                            <div style="display: flex; gap: 15px;">
                                <a href="{{ route('slider.edit', $slider) }}" style="color: #00bcd4; font-weight: 700; text-decoration: none; font-size: 0.85rem; text-transform: uppercase;">Edit</a>
                                <form action="{{ route('slider.destroy', $slider) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this slide?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" style="background: none; border: none; color: #ff4d4d; cursor: pointer; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; padding: 0;">Delete</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </article>
            @empty
                <div class="empty-state" style="grid-column: 1 / -1;">
                    <div style="font-size: 4rem; margin-bottom: 20px;">🖼️</div>
                    <p>No slides added yet. Create your first slide to start the home page slider!</p>
                </div>
            @endforelse
        </div>
        
        <div style="margin-top: 40px; text-align: center;">
            <a href="{{ route('home') }}" class="button button-secondary">Back to Home</a>
        </div>
    </div>
</section>
@endsection