@extends('admin.layouts.app')
@section('title', 'Banners')
@section('breadcrumb')
    <li class="breadcrumb-item active">Banners</li>
@endsection

@section('content')
<div class="page-header">
    <h1><i class="fas fa-images text-danger"></i> Hero Banners</h1>
    <a href="{{ route('admin.banners.create') }}" class="btn btn-green"><i class="fas fa-plus me-1"></i> Add Banner</a>
</div>

<div class="card">
    <div class="card-header">{{ $banners->total() }} Banners <span class="text-muted fw-normal" style="font-size:.8rem">— drag to reorder (sort by order field)</span></div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead class="table-light">
                    <tr>
                        <th>Image</th>
                        <th>Title</th>
                        <th>Subtitle</th>
                        <th>Button</th>
                        <th>Status</th>
                        <th>Order</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($banners as $banner)
                    <tr>
                        <td>
                            @if($banner->image)
                                <img src="{{ Storage::url($banner->image) }}" class="img-preview" alt="{{ $banner->title }}" style="width:80px;height:50px;object-fit:cover;border-radius:6px">
                            @else
                                <div style="width:80px;height:50px;background:linear-gradient(135deg,#c8e6c9,#2d6a35);border-radius:6px;display:flex;align-items:center;justify-content:center;color:white;font-size:.7rem">No Img</div>
                            @endif
                        </td>
                        <td>
                            <div class="fw-semibold">{{ Str::limit($banner->title, 40) }}</div>
                            @if($banner->badge_text)<span class="badge bg-success-subtle text-success" style="font-size:.7rem">{{ $banner->badge_text }}</span>@endif
                        </td>
                        <td class="text-muted" style="font-size:.82rem;max-width:180px">{{ Str::limit($banner->subtitle, 40) }}</td>
                        <td class="text-muted" style="font-size:.82rem">{{ $banner->button_text ?? '—' }}</td>
                        <td>
                            <button class="status-toggle {{ $banner->is_active ? 'on' : 'off' }}"
                                data-url="{{ route('admin.banners.toggle-status', $banner) }}"></button>
                        </td>
                        <td class="text-muted">{{ $banner->sort_order }}</td>
                        <td>
                            <div class="d-flex gap-1">
                                <a href="{{ route('admin.banners.edit', $banner) }}" class="btn btn-sm btn-outline-primary"><i class="fas fa-edit"></i></a>
                                <form action="{{ route('admin.banners.destroy', $banner) }}" method="POST" onsubmit="return confirm('Delete this banner?')">
                                    @csrf @method('DELETE')
                                    <button class="btn btn-sm btn-outline-danger"><i class="fas fa-trash"></i></button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="7" class="text-center text-muted py-5">
                        <i class="fas fa-images fa-2x mb-2 d-block opacity-25"></i>No banners yet.
                        <a href="{{ route('admin.banners.create') }}" class="d-block mt-1">Add your first banner</a>
                    </td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    @if($banners->hasPages())
    <div class="card-footer bg-white">{{ $banners->links() }}</div>
    @endif
</div>
@endsection