@extends('layouts.main')

@section('content')

<style>
    /* Page-specific styles — layout provides base dark theme */
    .form-section {
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }

    .form-section h2 {
        font-size: 1.8rem;
    }

    /* BLOG IMAGE */
    .blog-image-container {
        background: rgba(99, 102, 241, 0.08);
        border: 1px solid rgba(99, 102, 241, 0.2);
        border-radius: 12px;
        padding: 1.5rem;
        margin-bottom: 2rem;
        text-align: center;
    }

    .blog-image-container img {
        max-width: 100%;
        max-height: 400px;
        border-radius: 8px;
        box-shadow: 0 4px 15px rgba(99, 102, 241, 0.2);
        object-fit: cover;
    }

    .blog-image-container .no-image {
        background: rgba(0, 0, 0, 0.25);
        border: 1px dashed rgba(99, 102, 241, 0.3);
        border-radius: 8px;
        padding: 3rem;
        color: #9CA3AF;
        font-size: 0.95rem;
    }

    /* BLOG METADATA */
    .blog-metadata {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        margin-bottom: 2rem;
        padding: 1.5rem;
        background: rgba(99, 102, 241, 0.08);
        border: 1px solid rgba(99, 102, 241, 0.2);
        border-radius: 12px;
    }

    .blog-meta-item {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
    }

    .blog-meta-label {
        color: #818CF8;
        font-size: 0.8rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .blog-meta-value {
        color: #F3F4F6;
        font-weight: 500;
        font-size: 0.95rem;
    }

    /* BLOG DESCRIPTION */
    .blog-description {
        background: rgba(0, 0, 0, 0.25);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        padding: 1.5rem;
        margin-bottom: 2rem;
        line-height: 1.7;
        color: #F3F4F6;
    }

    .blog-description p {
        margin: 0;
    }

    /* TOGGLE TEXT */
    .read-more-toggle {
        color: #818CF8;
        text-decoration: none;
        cursor: pointer;
        font-weight: 600;
        transition: 0.3s;
        display: inline-block;
        margin-top: 1rem;
    }

    .read-more-toggle:hover {
        color: #6366f1;
    }

    /* BUTTONS */
    .button-group {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .btn-back {
        background: #6366f1 !important;
        color: #ffffff !important;
        border: 1px solid #818cf8 !important;
        border-radius: 8px;
        padding: 10px 16px;
        font-size: 14px;
        font-weight: 600;
        transition: .25s;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }

    .btn-back:hover {
        background: #818cf8 !important;
        transform: translateY(-2px);
        box-shadow: 0 0 12px rgba(99, 102, 241, 0.4);
    }

    .btn-edit {
        background: #ffc107 !important;
        color: #000000 !important;
        border: 1px solid #ffc107 !important;
        border-radius: 8px;
        padding: 10px 16px;
        font-size: 14px;
        font-weight: 600;
        transition: .25s;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }

    .btn-edit:hover {
        background: #e0a800 !important;
        transform: translateY(-2px);
    }

    /* RESPONSIVE */
    @media (max-width: 768px) {
        .form-section {
            padding: 1.5rem;
        }

        .blog-metadata {
            grid-template-columns: 1fr;
        }
    }
</style>

<div class="form-section">
    <h2>📖 Blog Details</h2>

    <!-- Blog Image -->
    <div class="blog-image-container">
        @if($blog->image)
            <img src="{{ asset('uploads/blogs/'.$blog->image) }}" alt="{{ $blog->title }}">
        @else
            <div class="no-image">
                <i class="bi bi-image" style="font-size: 2rem; display: block; margin-bottom: 0.5rem;"></i>
                No Featured Image
            </div>
        @endif
    </div>

    <!-- Blog Metadata -->
    <div class="blog-metadata">
        <div class="blog-meta-item">
            <span class="blog-meta-label">Title</span>
            <span class="blog-meta-value">{{ $blog->title }}</span>
        </div>
        <div class="blog-meta-item">
            <span class="blog-meta-label">Category</span>
            <span class="blog-meta-value">{{ $blog->category->name ?? 'Uncategorized' }}</span>
        </div>
    </div>

    <!-- Blog Description -->
    <div class="blog-description">
        <p id="shortDesc">
            {{ \Illuminate\Support\Str::limit(strip_tags($blog->description), 200) }}
        </p>
        <p id="fullDesc" style="display: none;">
            {{ strip_tags($blog->description) }}
        </p>
        @if(strlen(strip_tags($blog->description)) > 200)
            <a href="javascript:void(0);" onclick="toggleReadMore()" id="readBtn" class="read-more-toggle">
                Read More →
            </a>
        @endif
    </div>

    <!-- Action Buttons -->
    <div class="button-group">
        <a href="{{ route('super-admin.blog.index') }}" class="btn-back">
            <i class="bi bi-arrow-left"></i> Back to Blogs
        </a>
        <a href="{{ route('super-admin.blog.edit', $blog->id) }}" class="btn-edit">
            <i class="bi bi-pencil-square"></i> Edit Blog
        </a>
    </div>
</div>

<script>
function toggleReadMore() {
    const shortDesc = document.getElementById('shortDesc');
    const fullDesc = document.getElementById('fullDesc');
    const btn = document.getElementById('readBtn');

    if (shortDesc.style.display === 'none') {
        shortDesc.style.display = 'block';
        fullDesc.style.display = 'none';
        btn.textContent = 'Read More →';
    } else {
        shortDesc.style.display = 'none';
        fullDesc.style.display = 'block';
        btn.textContent = 'Show Less ↑';
    }
}
</script>

@endsection