@extends('layouts.admin.app')

@section('content')
<div class="container-fluid py-4">

<div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
    <h4 class="fw-bold text-info mb-0"><i class="fas fa-images"></i> Banners</h4>
    <a href="{{ route('dashboard.admin.configuracoes.banner.create') }}" class="btn btn-info">
        <i class="fas fa-plus"></i> Novo Banner
    </a>
</div>

<div class="row g-4">
    @forelse($banners as $banner)
        <div class="col-xl-3 col-lg-4 col-md-6">
            <a href="{{ route('dashboard.admin.configuracoes.banner.show', $banner) }}" class="text-decoration-none">
                <div class="card shadow-sm border-0 banner-card position-relative overflow-hidden">
                    <img src="{{ asset('storage/'.$banner->image) }}" 
                         class="card-img-top" 
                         style="height:180px; object-fit:cover;">
                    <div class="card-body text-center">
                        <h6 class="fw-bold text-dark mb-1">{{ $banner->title ?? 'Sem título' }}</h6>
                        <p class="text-muted small">{{ Str::limit($banner->subtitle,50,'...') }}</p>
                        <span class="badge bg-info position-absolute top-0 end-0 m-2">
                            Ordem: {{ $banner->order }}
                        </span>
                        @if(!$banner->is_active)
                            <span class="badge bg-secondary position-absolute top-0 start-0 m-2">
                                Inativo
                            </span>
                        @endif
                    </div>
                </div>
            </a>
        </div>
    @empty
        <div class="col-12 text-center text-muted py-5">
            <i class="fas fa-image fa-2x mb-2"></i>
            <p>Nenhum banner cadastrado.</p>
        </div>
    @endforelse
</div>

</div>

{{-- CSS --}}
<style>
.banner-card{
    border-radius: 0.75rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.banner-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 15px 30px rgba(0,0,0,.15);
}
.banner-card .badge{
    font-size: 0.75rem;
}
</style>

@endsection