@extends('frontend.layouts.app')

@push('metas')
    <title>{{ $blog->mtitle }}</title>
    <meta name="title" content="{{ $blog->mtitle }}">
    <meta name="description" content="{{ $blog->mdescription }}">
    <meta name="keywords" content="{{ $blog->mkeywords }}">
    <meta property="og:type" content="website">
    <meta property="og:url" content="{{ env('APP_URL') . '/blog/' . $blog->slug }}">
    <meta property="og:title" content="{{ $blog->mtitle }}">
    <meta property="og:description" content="{{ $blog->mdescription }}">
    <meta property="og:image" content="{{ asset(env('APP_URL') . 'uploads/blog/' . $blog->filename) }}">
@endpush

@section('body')
    <section class="page-title" style="background-image:url(/images/pattern-5.png)">
        <div class="container clearfix">
            <div class="content float-start">
                <h1 class="mb-3">Blog Details</h1>
                <ul class="page-breadcrumb">
                    <li><a href="/">Home</a></li>
                    <li><a href="/blog">Blogs</a></li>
                    <li>{{ $blog->title }}</li>
                </ul>
            </div>
            <div class="image float-end">
                <img src="{{ asset('images/blogging.png') }}" alt="blogging" class="img-fluid" style="max-width: 379px;" />
            </div>
        </div>
    </section>

    <section class="blog-content-section py-5">
        <div class="container">
            <div class="row">
                <!-- Main Content -->
                <div class="col-lg-8 mb-4">
                    <article class="blog-post card border-0 border-radius-10">
                        <header class="post-header mb-4">
                            <h1 class="post-title mb-3">{{ $blog->title }}</h1>
                        </header>
                        <div class="post-image mb-4">
                            <img src="{{ asset(env('APP_URL') . 'uploads/blog/' . $blog->filename) }}"
                                alt="{{ $blog->title }}" class="img-fluid rounded">
                        </div>
                        <div class="post-body">
                            {!! $blog->description !!}
                        </div>
                        <footer class="post-footer mt-5 pt-4 border-top">
                            <h5 class="h6">Share:</h5>
                            <ul class="social-share list-inline">
                                <li class="list-inline-item">
                                    <a href="https://www.facebook.com/sharer.php?u={{ urlencode(env('APP_URL') . 'blog/' . $blog->slug) }}"
                                        target="_blank" rel="noopener noreferrer">
                                        <i class="fab fa-facebook-f custom-icon"></i>
                                    </a>
                                </li>
                                <li class="list-inline-item">
                                    <a href="https://api.whatsapp.com/send?text={{ urlencode($blog->title) }}%0A{{ urlencode(env('APP_URL') . 'blog/' . $blog->slug) }}"
                                        target="_blank" rel="noopener noreferrer">
                                        <i class="fab fa-whatsapp custom-icon"></i>
                                    </a>
                                </li>
                                <li class="list-inline-item">
                                    <a href="https://twitter.com/intent/tweet?text={{ urlencode($blog->title) }}&url={{ urlencode(env('APP_URL') . 'blog/' . $blog->slug) }}"
                                        target="_blank" rel="noopener noreferrer">
                                        <i class="fab fa-twitter custom-icon"></i>
                                    </a>
                                </li>
                                <li class="list-inline-item">
                                    <a href="https://www.pinterest.com/pin/create/button/?url={{ urlencode(env('APP_URL') . 'blog/' . $blog->slug) }}&media={{ urlencode(env('APP_URL') . 'uploads/blog/' . $blog->filename) }}&description={{ urlencode($blog->description) }}"
                                        target="_blank" rel="noopener noreferrer">
                                        <i class="fab fa-pinterest custom-icon"></i>
                                    </a>
                                </li>
                                <li class="list-inline-item">
                                    <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ urlencode(env('APP_URL') . 'blog/' . $blog->slug) }}"
                                        target="_blank" rel="noopener noreferrer">
                                        <i class="fab fa-linkedin-in custom-icon"></i>
                                    </a>
                                </li>
                            </ul>
                        </footer>
                    </article>
                </div>

                <!-- Sidebar -->
                <div class="col-lg-4">
                    <aside class="sidebar">
                        <div class="widget recent-posts">
                            <h3 class="widget-title">Recent Posts</h3>
                            <ul class="list-unstyled">
                                @foreach ($blogs as $item)
                                    <li class="recent-post-item d-flex align-items-center p-3 mb-3 shadow-sm rounded">
                                        <img src="{{ asset(env('APP_URL') . 'uploads/blog/' . $item->filename) }}"
                                            alt="{{ $item->title }}" class="me-3 rounded"
                                            style="width: 64px; height: 64px; object-fit: cover;">
                                        <a href="/blog/{{ $item->slug }}"
                                            class="text-decoration-none">{{ $item->title }}</a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </aside>
                </div>
            </div>
        </div>
    </section>

    <style>
        .custom-icon {
            font-size: 20px;
            margin-right: 8px;
        }

        article.blog-post {
            padding: 16px;
        }

        article img {
            width: 100%
        }

        .page-title {
            padding: 3rem 0;
            color: #fff;
            text-align: left;
            background-size: cover;
            background-repeat: no-repeat;
            position: relative;
        }

        .blog-content-section {
            padding: 2rem 0;
            background-color: #f8f9fa;
        }

        .post-title {
            font-size: 2rem;
            color: #333;
        }

        .social-share li {
            display: inline-block;
            margin-right: 10px;
        }

        .recent-post-item {
            background: #fff;
            transition: box-shadow 0.3s;
            font-size: 18px;
        }

        .recent-post-item:hover {
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
        }

        /* Global Typography Styling */
        article.blog-post h1,
        article.blog-post h2,
        article.blog-post h3,
        article.blog-post h4,
        article.blog-post h5,
        article.blog-post p {
            font-family: 'Arial', sans-serif;
            /* Change to your preferred font */
            color: #333;
            /* Neutral dark color for text */
            line-height: 1.5;
            /* Better readability */
            margin: 0 0 15px 0;
            /* Space between elements */
        }

        /* Specific Heading Styles */
        article.blog-post h1 {
            font-size: 2.5rem;
            font-weight: 700;
            color: #000;
            /* Stronger emphasis */
        }

        article.blog-post h2 {
            font-size: 26px;
            font-weight: 600;
            color: #222;
            /* Slightly lighter than h1 */
        }

        article.blog-post h3 {
            font-size: 22px;
            font-weight: 500;
            color: #333;
            /* Neutral shade for h3 */
        }

        article.blog-post h4 {
            font-size: 18px;
            font-weight: 500;
            color: #444;
            /* Subtle distinction for h4 */
        }

        article.blog-post h5 {
            font-size: 1.25rem;
            font-weight: 400;
            color: #555;
            /* For less prominent headings */
        }

        /* Paragraph Styling */
        article.blog-post p {
            font-size: 1.8rem;
            color: #666;
            margin: 0 0 20px 0;
            /* Slightly larger spacing for paragraphs */
        }

        /* Additional Styling */
        article.blog-post ul,
        article.blog-post li {
            font-size: 18px;
            color: #666;
            list-style: disc;
            padding-left: 8px;
        }

        article.blog-post ol,
        article.blog-post li {
            font-size: 18px;
            padding-left: 8px;
            color: #666;
        }

        article.blog-post a {
            color: #007bff;
            text-decoration: none;
        }

        article.blog-post a:hover {
            text-decoration: underline;
            color: #0056b3;
        }
    </style>
@endsection