@extends('admin.layouts.app')
@section('title', 'Hero Sliders')
@section('heading', 'Hero Sliders')

@section('content')
<div class="page-actions">
    <p class="muted" style="font-size:.9rem;">Manage the banner carousel shown at the top of the homepage. Drag rows to reorder.</p>
    <a href="{{ route('admin.sliders.create') }}" class="adm-btn adm-btn-primary"><i class="fa-solid fa-plus"></i> Add Slide</a>
</div>

@if($sliders->isEmpty())
    <div class="empty-state">
        <i class="fa-solid fa-images"></i>
        <h3>No slides yet</h3>
        <p>Add your first hero banner slide to display on the homepage carousel.</p>
        <a href="{{ route('admin.sliders.create') }}" class="adm-btn adm-btn-primary"><i class="fa-solid fa-plus"></i> Add Slide</a>
    </div>
@else
    <div class="card" style="padding:0; overflow:hidden;">
        <table class="data-table" id="sliderTable">
            <thead>
                <tr>
                    <th style="width:40px;"><i class="fa-solid fa-grip-vertical muted"></i></th>
                    <th>Preview</th>
                    <th>Title / Subtitle</th>
                    <th>CTA</th>
                    <th>Order</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody id="sliderBody">
                @foreach($sliders as $s)
                    <tr data-id="{{ $s->id }}" style="cursor:grab;">
                        <td><i class="fa-solid fa-grip-vertical muted drag-handle"></i></td>
                        <td>
                            <div class="slider-thumb" style="background-image:url('{{ asset($s->image) }}')"></div>
                        </td>
                        <td>
                            <strong>{{ $s->title ?: '(No title)' }}</strong>
                            @if($s->subtitle)<br><small class="muted">{{ $s->subtitle }}</small>@endif
                        </td>
                        <td>
                            @if($s->cta_text)
                                <span class="chip">{{ $s->cta_text }}</span>
                                @if($s->cta_url)<br><small class="muted" style="font-size:.75rem;">{{ $s->cta_url }}</small>@endif
                            @else
                                <span class="muted">—</span>
                            @endif
                        </td>
                        <td><span class="chip">{{ $s->sort_order }}</span></td>
                        <td>
                            @if($s->active)
                                <span class="badge badge-delivered">Active</span>
                            @else
                                <span class="badge badge-cancelled">Hidden</span>
                            @endif
                        </td>
                        <td class="actions-row">
                            <a href="{{ route('admin.sliders.edit', $s) }}" class="adm-btn adm-btn-warn"><i class="fa-solid fa-pen"></i></a>
                            <form method="POST" action="{{ route('admin.sliders.destroy', $s) }}" onsubmit="return confirm('Delete this slide?');" style="display:inline;">
                                @csrf @method('DELETE')
                                <button class="adm-btn adm-btn-danger"><i class="fa-solid fa-trash"></i></button>
                            </form>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    <p class="muted" style="font-size:.82rem; margin-top:.75rem;"><i class="fa-solid fa-circle-info"></i> Drag rows to reorder slides. Changes save automatically.</p>
@endif
@endsection