@extends('layouts.admin', ['title' => 'البانرات | RaseedNow'])

@section('content')
    <section class="lc-page-shell">
        <div class="section-heading">
            <div><span>Hero</span><h1>بانرات الهيرو</h1></div>
            <a class="primary-button" href="{{ route('admin.banners.create') }}">بانر جديد</a>
        </div>

        <div class="surface p-5">
            @if(session('status'))
                <div class="mt-4 rounded-xl border border-emerald-200 bg-emerald-50 p-3 text-sm font-bold text-emerald-700">{{ session('status') }}</div>
            @endif
            <div class="ac-banner-grid">
                @forelse($banners as $banner)
                    <article class="ac-banner-card {{ $banner->is_active ? 'active' : 'inactive' }}">
                        <div class="ac-banner-thumb">
                            @if($banner->image_path)
                                <img src="{{ asset($banner->image_path) }}" alt="">
                            @else
                                <span>{{ $banner->sort_order }}</span>
                            @endif
                        </div>
                        <div class="ac-banner-body">
                            <div>
                                <h3>{{ $banner->title_ar }}</h3>
                                <p>{{ $banner->subtitle_ar ?: 'بدون وصف فرعي' }}</p>
                            </div>
                            <div class="ac-banner-meta">
                                <span class="ac-badge {{ $banner->is_active ? 'green' : 'slate' }}">{{ $banner->is_active ? 'نشط' : 'مخفي' }}</span>
                                <span class="ac-badge blue">ترتيب {{ $banner->sort_order }}</span>
                            </div>
                        </div>
                        <a class="secondary-button info" href="{{ route('admin.banners.edit', $banner) }}">تعديل</a>
                    </article>
                @empty
                    <div class="ac-empty">لا توجد بانرات بعد.</div>
                @endforelse
            </div>
            <div class="mt-4">{{ $banners->links() }}</div>
        </div>
    </section>
@endsection