@extends('layouts.seller')

@section('title', 'Banner Details')

@section('content')
<div class="page-header">
    <div>
        <h4 class="page-title">Banner Details</h4>
        <p class="text-muted mb-0">View banner information</p>
    </div>
    <div>
        <a href="{{ route('seller.banners.edit', $banner->id) }}" class="btn btn-primary-gradient me-2">
            <i class="bi bi-pencil me-1"></i> Edit
        </a>
        <a href="{{ route('seller.banners.index') }}" class="btn btn-light border shadow-sm">
            <i class="bi bi-arrow-left me-1"></i> Back to List
        </a>
    </div>
</div>

<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card border-0 shadow-sm">
            <div class="card-body p-4">
                <div class="mb-4">
                    <label class="form-label text-muted small fw-bold">Banner Preview</label>
                    <div class="ratio ratio-21x9 bg-light border rounded shadow-sm">
                        <img src="{{ asset('storage/' . $banner->image_path) }}" class="object-fit-cover rounded">
                    </div>
                </div>

                <div class="row g-4">
                    <div class="col-md-12">
                        <label class="form-label text-muted small fw-bold">Link URL</label>
                        <p class="mb-0">
                            @if($banner->link)
                                <a href="{{ $banner->link }}" target="_blank" class="text-decoration-none">
                                    {{ $banner->link }} <i class="bi bi-box-arrow-up-right small ms-1"></i>
                                </a>
                            @else
                                <span class="text-muted">No Link</span>
                            @endif
                        </p>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label text-muted small fw-bold">Status</label>
                        <p class="mb-0">
                            @if($banner->is_active)
                                <span class="badge bg-success-subtle text-success">Active</span>
                            @else
                                <span class="badge bg-secondary-subtle text-secondary">Inactive</span>
                            @endif
                        </p>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label text-muted small fw-bold">Approval Status</label>
                        <p class="mb-0">
                            @if($banner->is_approved)
                                <span class="badge bg-success-subtle text-success">Approved</span>
                            @else
                                <span class="badge bg-warning-subtle text-warning">Pending Approval</span>
                            @endif
                        </p>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label text-muted small fw-bold">Created At</label>
                        <p class="mb-0">{{ $banner->created_at->format('d M Y, h:i A') }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
