<?php $__env->startSection('content'); ?>
<div class="row mb-4 align-items-center">
    <div class="col-lg-8">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-1">
                <li class="breadcrumb-item"><a href="#" class="text-decoration-none text-muted small">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="<?php echo e(route('home-banners.index')); ?>" class="text-decoration-none text-muted small">Home Banner</a></li>
                <li class="breadcrumb-item active text-primary small fw-semibold" aria-current="page">Preview</li>
            </ol>
        </nav>
        <h2 class="fw-bold text-dark mb-1">Home Banner Preview</h2>
        <p class="text-secondary small mb-0">Review how this banner content and visual will appear before using it on the homepage.</p>
    </div>
    <div class="col-lg-4 text-lg-end mt-3 mt-lg-0">
        <div class="banner-actions justify-content-lg-end">
            <a href="<?php echo e(route('home-banners.index')); ?>" class="action-btn action-btn-light">
                <i class="bi bi-arrow-left"></i>
                <span>Back to List</span>
            </a>
            <a href="<?php echo e(route('home-banners.edit', $banner->id)); ?>" class="action-btn action-btn-primary">
                <i class="bi bi-pencil-square"></i>
                <span>Edit Banner</span>
            </a>
            <a href="<?php echo e(route('home-banners.create')); ?>" class="action-btn action-btn-soft">
                <i class="bi bi-plus-circle"></i>
                <span>New Banner</span>
            </a>
        </div>
    </div>
</div>

<div class="row g-4">
    <div class="col-xl-8">
        <div class="card border-0 shadow-sm rounded-4 overflow-hidden h-100">
            <div class="hero-preview position-relative">
                <?php if(!empty($banner->image)): ?>
                    <img src="<?php echo e(asset('storage/' . $banner->image)); ?>" alt="<?php echo e($banner->heading); ?>" class="hero-preview-image">
                    <div class="hero-preview-overlay"></div>
                <?php else: ?>
                    <div class="hero-preview-fallback d-flex align-items-center justify-content-center">
                        <div class="text-center px-4">
                            <div class="fallback-icon mx-auto mb-3">
                                <i class="bi bi-image-alt"></i>
                            </div>
                            <h5 class="fw-bold text-dark mb-2">No banner image uploaded</h5>
                            <p class="text-secondary small mb-0">This banner currently uses text only. Add an image later if you want a stronger visual hero section.</p>
                        </div>
                    </div>
                <?php endif; ?>

                <div class="hero-copy">
                    <span class="badge hero-badge rounded-pill px-3 py-2 mb-3">Homepage Highlight</span>
                    <h1 class="hero-heading"><?php echo e($banner->heading); ?></h1>
                    <p class="hero-description mb-0"><?php echo e($banner->description); ?></p>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-4">
        <div class="card border-0 shadow-sm rounded-4 mb-4">
            <div class="card-body p-4">
                <h6 class="fw-bold text-dark mb-4">
                    <i class="bi bi-card-checklist me-2 text-primary"></i>Banner Details
                </h6>

                <div class="detail-row">
                    <span class="detail-label">Banner ID</span>
                    <span class="badge bg-light text-dark border fw-bold">#<?php echo e($banner->id); ?></span>
                </div>

                <div class="detail-row">
                    <span class="detail-label">Heading</span>
                    <span class="detail-value"><?php echo e($banner->heading); ?></span>
                </div>

                <div class="detail-row">
                    <span class="detail-label">Description</span>
                    <span class="detail-value text-break"><?php echo e($banner->description); ?></span>
                </div>

                <div class="detail-row">
                    <span class="detail-label">Image Status</span>
                    <?php if(!empty($banner->image)): ?>
                        <span class="badge bg-success-subtle text-success rounded-pill px-3">Uploaded</span>
                    <?php else: ?>
                        <span class="badge bg-light text-secondary border rounded-pill px-3">Not Added</span>
                    <?php endif; ?>
                </div>
            </div>
        </div>

        <div class="card border-0 shadow-sm rounded-4">
            <div class="card-body p-4">
                <h6 class="fw-bold text-dark mb-4">
                    <i class="bi bi-clock-history me-2 text-primary"></i>Timeline
                </h6>

                <div class="timeline-item">
                    <span class="detail-label d-block mb-1">Created</span>
                    <span class="detail-value d-block"><?php echo e($banner->created_at ? $banner->created_at->format('d M, Y h:i A') : 'Not available'); ?></span>
                    <span class="text-secondary small"><?php echo e($banner->created_at ? $banner->created_at->diffForHumans() : ''); ?></span>
                </div>

                <div class="timeline-item mb-0">
                    <span class="detail-label d-block mb-1">Last Updated</span>
                    <span class="detail-value d-block"><?php echo e($banner->updated_at ? $banner->updated_at->format('d M, Y h:i A') : 'Not available'); ?></span>
                    <span class="text-secondary small"><?php echo e($banner->updated_at ? $banner->updated_at->diffForHumans() : ''); ?></span>
                </div>
            </div>
        </div>
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('styles'); ?>
<style>
    .banner-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    .action-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.55rem;
        min-height: 48px;
        padding: 0.75rem 1.25rem;
        border-radius: 14px;
        border: 1px solid transparent;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.2s ease;
    }
    .action-btn i {
        font-size: 1rem;
    }
    .action-btn-light {
        background-color: #ffffff;
        border-color: #e2e8f0;
        color: #0f172a;
    }
    .action-btn-light:hover {
        background-color: #f8fafc;
        color: #0f172a;
    }
    .action-btn-primary {
        background-color: #2563eb;
        border-color: #2563eb;
        color: #ffffff;
        box-shadow: 0 10px 25px rgba(37, 99, 235, 0.16);
    }
    .action-btn-primary:hover {
        background-color: #1d4ed8;
        border-color: #1d4ed8;
        color: #ffffff;
    }
    .action-btn-soft {
        background-color: #eff6ff;
        border-color: #bfdbfe;
        color: #1d4ed8;
    }
    .action-btn-soft:hover {
        background-color: #dbeafe;
        color: #1d4ed8;
    }
    .hero-preview {
        min-height: 500px;
        background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
    }
    .hero-preview-image {
        width: 100%;
        height: 500px;
        object-fit: cover;
        display: block;
    }
    .hero-preview-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(120deg, rgba(15, 23, 42, 0.88) 10%, rgba(15, 23, 42, 0.45) 50%, rgba(15, 23, 42, 0.7) 100%);
    }
    .hero-preview-fallback {
        min-height: 500px;
        background: linear-gradient(145deg, #f8fafc 0%, #e2e8f0 100%);
    }
    .fallback-icon {
        width: 72px;
        height: 72px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 24px;
        background-color: #dbeafe;
        color: #2563eb;
        font-size: 2rem;
    }
    .hero-copy {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 2rem;
        z-index: 2;
        color: #fff;
    }
    .hero-badge {
        background-color: rgba(255, 255, 255, 0.18);
        color: #fff;
        border: 1px solid rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(4px);
    }
    .hero-heading {
        font-size: clamp(2rem, 4vw, 3.5rem);
        font-weight: 800;
        line-height: 1.1;
        margin-bottom: 1rem;
    }
    .hero-description {
        max-width: 640px;
        color: rgba(255, 255, 255, 0.88);
        font-size: 1rem;
    }
    .detail-row,
    .timeline-item {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 1rem;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
        border-bottom: 1px solid #e2e8f0;
    }
    .timeline-item {
        display: block;
    }
    .detail-row:last-child,
    .timeline-item:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }
    .detail-label {
        color: #64748b;
        font-size: 0.8rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        flex-shrink: 0;
    }
    .detail-value {
        color: #0f172a;
        font-weight: 600;
        text-align: right;
    }
    .bg-success-subtle {
        background-color: #ecfdf5 !important;
    }
    .text-success {
        color: #10b981 !important;
    }
    .breadcrumb-item + .breadcrumb-item::before {
        content: "\2022";
        color: #cbd5e1;
    }
    @media (max-width: 767.98px) {
        .banner-actions {
            flex-direction: column;
        }
        .action-btn {
            width: 100%;
        }
        .hero-preview,
        .hero-preview-image,
        .hero-preview-fallback {
            min-height: 420px;
            height: 420px;
        }
        .hero-copy {
            padding: 1.5rem;
        }
        .detail-row {
            flex-direction: column;
        }
        .detail-value {
            text-align: left;
        }
    }
</style>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\laragon\www\portfolio\resources\views\homebanner\show.blade.php ENDPATH**/ ?>