@extends('admin.layouts.app')

@section('title', 'Hero Sliders')
@section('page_title', 'Homepage CMS')

@section('content')
    <div class="page-heading">
        <div>
            <h1>Hero Sliders</h1>
            <p>Manage homepage hero banners and their display order.</p>
        </div>

        <a class="btn btn-primary" href="{{ route('admin.sliders.create') }}">
            + Add New Slider
        </a>
    </div>

    <div class="panel">
        <div class="table-responsive">
            <table>
                <thead>
                <tr>
                    <th width="70">Image</th>
                    <th>Slider</th>
                    <th>Button</th>
                    <th>Order</th>
                    <th>Status</th>
                    <th width="170">Actions</th>
                </tr>
                </thead>

                <tbody>
                @forelse ($sliders as $slider)
                    <tr>
                        <td>
                            <img
                                class="slider-thumb"
                                src="{{ asset('storage/'.$slider->image) }}"
                                alt="{{ $slider->title }}"
                            >
                        </td>

                        <td>
                            <strong>{{ $slider->title }}</strong>

                            @if ($slider->small_title)
                                <div class="table-muted">
                                    {{ $slider->small_title }}
                                </div>
                            @endif
                        </td>

                        <td>
                            {{ $slider->button_text ?: '—' }}
                        </td>

                        <td>{{ $slider->sort_order }}</td>

                        <td>
                            @if ($slider->status)
                                <span class="badge badge-success">Active</span>
                            @else
                                <span class="badge badge-danger">Inactive</span>
                            @endif
                        </td>

                        <td>
                            <div class="action-group">
                                <a
                                    class="btn btn-secondary btn-small"
                                    href="{{ route('admin.sliders.edit', $slider) }}"
                                >
                                    Edit
                                </a>

                                <form
                                    method="POST"
                                    action="{{ route('admin.sliders.destroy', $slider) }}"
                                    onsubmit="return confirm('Delete this slider permanently?');"
                                >
                                    @csrf
                                    @method('DELETE')

                                    <button class="btn btn-danger btn-small" type="submit">
                                        Delete
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6">
                            <div class="empty-state">
                                No hero sliders found.
                            </div>
                        </td>
                    </tr>
                @endforelse
                </tbody>
            </table>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .slider-thumb {
            width: 68px;
            height: 45px;
            object-fit: cover;
            border-radius: 6px;
        }

        .table-muted {
            margin-top: 5px;
            color: #8b989f;
            font-size: 12px;
        }

        .btn-small {
            min-height: 34px;
            padding: 7px 11px;
            font-size: 12px;
        }

        .action-group form {
            margin: 0;
        }

        .empty-state {
            padding: 45px;
            color: #89969d;
            text-align: center;
        }
    </style>
@endpush