@extends('layouts.app-admin')

@section('content')
    <div class="page-header d-print-none">
        <div class="container-xl">
            <div class="row g-2 align-items-center">
                <div class="col">
                    <h2 class="page-title">
                        Detail Banner
                    </h2>
                    <div class="text-muted mt-1">Informasi lengkap tentang banner</div>
                </div>
                <div class="col-auto ms-auto d-print-none">
                    <div class="btn-list">
                        <a href="{{ route('admin.banners.edit', $banner->id) }}"
                            class="btn btn-primary d-none d-sm-inline-block">
                            <i class="ti ti-edit me-2"></i>
                            Edit Banner
                        </a>
                        <a href="{{ route('admin.banners.edit', $banner->id) }}" class="btn btn-primary d-sm-none btn-icon">
                            <i class="ti ti-edit"></i>
                        </a>
                        <a href="{{ route('admin.banners.index') }}" class="btn btn-secondary d-none d-sm-inline-block">
                            <i class="ti ti-arrow-left me-2"></i>
                            Kembali ke Daftar
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="page-body">
        <div class="container-xl">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Detail: {{ $banner->title }}</h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4">
                            @if ($banner->picture)
                                <div class="mb-3">
                                    <label class="form-label">Gambar Banner:</label><br>
                                    <img src="{{ asset('storage/' . $banner->picture) }}" alt="Banner Picture"
                                        class="img-fluid rounded shadow-sm" style="max-width: 100%; height: auto;">
                                </div>
                            @else
                                <div class="mb-3">
                                    <label class="form-label">Gambar Banner:</label><br>
                                    <p>Tidak ada gambar.</p>
                                </div>
                            @endif
                        </div>
                        <div class="col-md-8">
                            <div class="mb-3">
                                <label class="form-label">Judul:</label>
                                <p class="form-control-plaintext">{{ $banner->title }}</p>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Deskripsi:</label>
                                <p class="form-control-plaintext">{{ $banner->description ?? 'N/A' }}</p>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Badge:</label>
                                <p class="form-control-plaintext">
                                    @if ($banner->badge)
                                        <span class="badge bg-purple-lt">{{ $banner->badge }}</span>
                                    @else
                                        N/A
                                    @endif
                                </p>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Status:</label>
                                <p class="form-control-plaintext">
                                    @if ($banner->status == 'active')
                                        <span class="badge bg-green">Aktif</span>
                                    @elseif ($banner->status == 'inactive')
                                        <span class="badge bg-red">Tidak Aktif</span>
                                    @else
                                        <span class="badge bg-muted">{{ ucfirst($banner->status) }}</span>
                                    @endif
                                </p>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Tanggal Publikasi:</label>
                                <p class="form-control-plaintext">
                                    {{ $banner->published_at ? $banner->published_at->format('d M Y H:i') : 'N/A' }}</p>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Tanggal Kadaluarsa:</label>
                                <p class="form-control-plaintext">
                                    {{ $banner->expired_at ? $banner->expired_at->format('d M Y H:i') : 'N/A' }}</p>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Dibuat Pada:</label>
                                <p class="form-control-plaintext">{{ $banner->created_at->format('d M Y H:i') }}</p>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Terakhir Diperbarui Pada:</label>
                                <p class="form-control-plaintext">{{ $banner->updated_at->format('d M Y H:i') }}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer text-end">
                    <a href="{{ route('admin.banners.index') }}" class="btn btn-secondary">Kembali</a>
                </div>
            </div>
        </div>
    </div>
@endsection