@extends('layouts.seller')

@section('title', 'Banners')

@section('content')
@section('content')
<div class="page-header">
    <div>
        <h4 class="page-title">Microsite Banners</h4>
        <p class="text-muted mb-0">Add banners to display on your public profile</p>
    </div>
    <a href="{{ route('seller.banners.create') }}" class="btn btn-primary-gradient">
        <i class="bi bi-plus-lg me-1"></i> Add Banner
    </a>
</div>

<div class="row g-4">
    @forelse($banners as $banner)
        <div class="col-md-4">
            <div class="card border-0 shadow-sm h-100 transition-all hover-shadow">
                <div class="position-relative">
                    <img src="{{ asset('storage/' . $banner->image) }}" class="card-img-top" style="height: 180px; object-fit: cover;">
                    <span class="position-absolute top-0 end-0 m-2 badge bg-{{ $banner->active ? 'success' : 'secondary' }} rounded-pill shadow-sm">
                        {{ $banner->active ? 'Active' : 'Inactive' }}
                    </span>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span class="text-muted small"><i class="bi bi-calendar3 me-1"></i>{{ $banner->created_at->format('M d, Y') }}</span>
                    </div>
                    @if($banner->link)
                        <div class="d-flex align-items-center text-muted small mt-2">
                            <i class="bi bi-link-45deg me-1 fs-5"></i>
                            <span class="text-truncate">{{ $banner->link }}</span>
                        </div>
                    @else
                        <div class="text-muted small mt-2 fst-italic">No link attached</div>
                    @endif
                </div>
                <div class="card-footer bg-white border-top-0 pt-0 pb-3">
                    <div class="d-grid gap-2">
                        <a href="{{ route('seller.banners.edit', $banner->id) }}" class="btn btn-outline-primary btn-sm">
                            <i class="bi bi-pencil me-1"></i> Edit
                        </a>
                        <form action="{{ route('seller.banners.destroy', $banner) }}" method="POST" class="d-grid"
                              onsubmit="return confirm('Delete this banner?')">
                            @csrf @method('DELETE')
                            <button type="submit" class="btn btn-outline-danger btn-sm">
                                <i class="bi bi-trash me-1"></i> Delete
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    @empty
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-body text-center py-5">
                    <div class="text-muted opacity-50 mb-3">
                        <i class="bi bi-images display-4"></i>
                    </div>
                    <h5 class="fw-bold text-muted">No banners yet</h5>
                    <p class="text-muted mb-3">Enhance your microsite with attractive banners.</p>
                    <a href="{{ route('seller.banners.create') }}" class="btn btn-primary-gradient btn-sm px-4">Add Your First Banner</a>
                </div>
            </div>
        </div>
    @endforelse
</div>

<style>
    .hover-shadow:hover { transform: translateY(-5px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; }
    .transition-all { transition: all 0.3s ease; }
</style>
@endsection
