@extends('website.layouts.app')
@section('content')
    <!--************************************* header *************************************-->
    <section class="inner_banner px-md-5 px-0">
        <div class="container-fluid">
            @include('website.layouts.appoinment_btn')
            <div class="inner_banner_bg about_banner p-sm-5 p-3">
                @include('website.layouts.head_nav')
                <nav data-aos="fade-up"
                    class="w-100 float-start my-md-5 my-sm-4 my-0 justify-content-sm-start justify-content-center d-flex order-sm-1 order-2"
                    style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a class="trs" href="/">Home</a></li>
                        <li class="breadcrumb-item"><a class="trs" href="/blogs">Blogs</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Blog Details</li>
                    </ol>
                </nav>
                <div data-aos="fade-up" class="w-100 row align-items-sm-center align-items-start order-sm-2 order-1">
                    <h1 class="inner_title text-xl-center text-sm-start text-center">{{ $blog->blog_title }}</h1>
                </div>
            </div>
        </div>
    </section>

    <section class="about blogs-list px-md-5 px-0 py-5" data-aos="fade-up">
        <div class="container-fluid">
            <div class="blog-details-pg">
                <img src="{{ asset('uploads/blogs/' . $blog->blog_image) }}" class="img-fluid" alt="blog image">
                <h5 class="mt-5 opacity-50">{{ $blog->created_at->format('d M Y') }}</h5>
                <h2 class="my-3 ">{{ $blog->blog_title }}</h2>
                <h5 class="opacity-75 mb-5">{{ $blog->author }}</h5>
                <p class="mb-4">{!! $blog->blog_description !!}</p>
            </div>
        </div>
    </section>

    <section class="about blogs-list blogs-list-2 px-md-5 px-0 py-5" data-aos="fade-up">
        <div class="container-fluid">
            <h2 class="text-sm-start text-center mb-sm-5 mb-3">Related Blogs</h2>
            <div class="row g-5">
                @foreach ($rel_blogs as $rel_blog)
                    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                        <div class="blog-bx" data-aos="fade-up">
                            <img src="{{ asset('uploads/blogs/' . $rel_blog->blog_thumb_image) }}" class="img-fluid"
                                alt="blog thumbnail">
                            <span class="d-flex date opacity-75">
                                {{ $rel_blog->created_at->format('d M Y') }}
                            </span>
                            <h4 class="blog-title text-black mt-3">{{ $rel_blog->blog_title }}</h4>
                            <p>{!! Str::of(strip_tags($rel_blog->blog_description))->limit(100) !!}</p>
                            <a href="{{ route('blog-details', $rel_blog->blog_link) }}" class="read-more">Read More</a>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
@endsection

@push('custom-meta')
    <title>{{ $blog->meta_title }}</title>

    <meta name="description"
        content="{{ $blog->meta_description }}" />

    <meta name="Keywords"
        content="{{ $blog->meta_keywords }}" />

    <link rel="canonical" href="{{ Request::url() }}" />

    <meta property="og:locale" content="en_US" />

    <meta property="og:type" content="website" />

    <meta property="og:title" content="{{ $blog->meta_title }}" />

    <meta property="og:description"
        content="{{ $blog->meta_description }}" />

    <meta property="og:url" content="{{ Request::url() }}" />

    <meta property="og:image" content="{{ asset('uploads/blogs/' . $blog->blog_image) }}" />

    <meta property="og:site_name" content="Pioneers Dental Center" />

    <meta name="twitter:card" content="summary_large_image" />

    <meta name="twitter:description"
        content="{{ $blog->meta_description }}" />

    <meta name="twitter:title" content="{{ $blog->meta_title }}" />
@endpush