@extends('layouts.main')

@section('content')

<style>
    body {
        background: #f5f7fb;
    }

    .blog-card {
        border-radius: 16px;
        overflow: hidden;
        transition: 0.3s;
    }

    .blog-card:hover {
        transform: translateY(-5px);
    }

    .blog-img {
        height: 267px;
        object-fit: cover;
        width: 100%;    
    }

    .custom-btn {
        background: linear-gradient(135deg, #4e73df, #224abe);
        color: #fff;
        border: none;
        padding: 8px 18px;
        border-radius: 50px;
        font-size: 13px;
        transition: 0.3s;
        display: inline-block;
        text-decoration: none;
    }

    .custom-btn:hover {
        background: linear-gradient(135deg, #224abe, #1a3a8f);
        color: #fff;
    }

    .read-more {
        font-size: 13px;
        text-decoration: none;
        font-weight: 500;
    }

    .read-more:hover {
        text-decoration: underline;
    }
</style>

<div>

    <div class="row justify-content-center">
        <div class="col-md-5">

            <!-- Blog Card -->
            <div class="card blog-card shadow-sm border-0">

                <!-- Image -->
                @if($blog->image)
                    <img src="{{ asset('uploads/blogs/'.$blog->image) }}" class="blog-img">
                @else
                    <div class="bg-light d-flex align-items-center justify-content-center blog-img">
                        <span class="text-muted">No Image</span>
                    </div>
                @endif

                <!-- Content -->
                <div class="card-body">

                    <!-- Title -->
                    <h5 class="fw-bold mb-2">
                        {{ $blog->title }}
                    </h5>

                    <!-- Description -->
                  <p class="text-muted mb-2" style="font-size:14px;" id="shortDesc">
                        {{ \Illuminate\Support\Str::limit(strip_tags($blog->description), 120) }}
                    </p>

                    <p class="text-muted mb-2 d-none" style="font-size:14px;" id="fullDesc">
                        {{ strip_tags($blog->description) }}
                    </p>

                    <a href="javascript:void(0);" onclick="toggleReadMore()" id="readBtn" class="text-primary">
                        Read More →
                    </a>


                    <!-- Button -->
                    <div class="mt-3">
                        <a href="{{ route('superadmin.blog.index') }}" class="custom-btn">
                            ⬅ Back
                        </a>
                    </div>

                </div>

            </div>

        </div>
    </div>

</div>
<script>
function toggleReadMore() {
    document.getElementById('shortDesc').classList.toggle('d-none');
    document.getElementById('fullDesc').classList.toggle('d-none');

    let btn = document.getElementById('readBtn');
    btn.innerText = btn.innerText === "Read More →" ? "Show Less" : "Read More →";
}
</script>
@endsection