@extends($activeTemplate . 'layouts.frontend')
@section('content')
    <section class="blog-details-area mb-120">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-12">
                    <div class="blog-details">
                        <div class="blog-details__thumb">
                            <img src="{{ frontendImage('blog', $blog->data_values->image, '1295x505') }}" class="fit-image" alt="@lang('image')">
                        </div>
                        <div class="blog-details__content">
                            <div class="blog-details-top">
                                <div class="blog-details-top__left">
                                    <span
                                        class="blog-details-top__date">{{ showDateTime($blog->created_at, 'd F y') }}</span>
                                    <h2 class="blog-details-top__title"> {{ __($blog->data_values->title) }}</h2>
                                </div>
                                <div class="blog-details__share ">
                                    <p class="social-share__title">@lang('Share on')</p>
                                    <ul class="social-list">
                                        <li class="social-list__item">
                                            <a class="social-list__link flex-center"
                                                href="http://www.facebook.com/sharer.php?u={{ urlencode(url()->current()) }}&p[title]={{ $blog?->slug }}"><i
                                                    class="fab fa-facebook-f"></i>
                                            </a>
                                        </li>
                                        <li class="social-list__item">
                                            <a class="social-list__link flex-center active"
                                                href="http://twitter.com/share?text={{ $blog?->slug }}&url={{ urlencode(url()->current()) }}">
                                                <i class="fa-brands fa-x-twitter"></i>
                                            </a>
                                        </li>
                                        <li class="social-list__item">
                                            <a class="social-list__link flex-center"
                                                href="https://www.linkedin.com/shareArticle?mini=true&url={{ urlencode(url()->current()) }}&title={{ $blog?->slug }}">
                                                <i class="fab fa-linkedin-in"></i>
                                            </a>
                                        </li>
                                        <li class="social-list__item">
                                            <a class="social-list__link flex-center"
                                                href="http://pinterest.com/pin/create/button/?url={{ urlencode(url()->current()) }}&description={{ __($blog?->slug) }}&media={{ frontendImage('blog', 'thumb_' . $blogElement?->data_values?->image, '365x235') }}"><i
                                                    class="fab fa-pinterest"></i></a>
                                        </li>
                                    </ul>
                                </div>

                            </div>

                            <div class="blog-details__desc">
                                @php
                                    echo $blog->data_values->description;
                                @endphp

                            </div>

                            <div class="fb-comments" data-href="{{ url()->current() }}" data-numposts="5"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @php
        $content = getContent('blog.content', true);
        $subscriberContent = getContent('subscriber.content', true);
    @endphp
    <section class="cta mt-120 mb-60">
        <div class="container">
            <div class="subscribe-wrapper">
                <div class="subscribe-wrapper__thumb">
                    <img src="{{ frontendImage('subscriber', $subscriberContent->data_values->image, '570x210') }}"
                        alt="@lang('shape')">
                </div>
                <div class="bg-shape">
                    <div class="shape-one shape"></div>
                    <div class="shape-two shape"></div>
                    <div class="shape-three shape"></div>
                </div>
                <div class="container p-0">
                    <h2 class="subscribe-wrapper__title">{{ __($subscriberContent->data_values->title) }}</h2>
                    <div class="row">
                        <div class="col-md-6">
                            <form class="subscribeForm" action="{{ route('subscribe') }}" methode="post">
                                @csrf
                                <div class="form-group mb-0">
                                    <label for="subscribe"
                                        class="form--label">{{ __($subscriberContent->data_values->subtitle) }}</label>
                                    <div class="form-wrapper">
                                        <input type="email" name="email" class="form--control"
                                            placeholder="Enter Your Email" id="subscribe">
                                        <button type="submit"
                                            class="btn btn--secondary pill btn--sm">@lang('Subscribe')</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="blog my-120">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="section-heading">
                        <h2 class="section-heading__title">{{ __($content->data_values->title) }}</h2>
                    </div>
                </div>
            </div>
            <div class="row gy-4 justify-content-center">
                @foreach ($reletedBlogs as $blog)
                    <div class="col-lg-4 col-md-6">
                        <div class="blog-item">
                            <div class="blog-item__thumb">
                                <a href="{{ route('blog.details', $blog->slug) }}" class="blog-item__thumb-link">
                                    <img class="image1" src="{{ frontendImage('blog', $blog->data_values->image, '415x240', false, true) }}" alt="img1" />
                                    <img class="image2" src="{{ frontendImage('blog', $blog->data_values->image, '415x240', false, true) }}" alt="img2" />
                                </a>
                            </div>
                            <div class="blog-item__content">
                                <h4 class="blog-item__title">
                                    <a href="{{ route('blog.details', $blog->slug) }}" class="blog-item__title-link border-effect">
                                        {{ __($blog->data_values->title) }}
                                    </a>
                                </h4>
                                <p class="blog-item__desc">
                                    {{ __(strLimit($blog->data_values->short_description, 500)) }}
                                </p>
                                <a href="{{ route('blog.details', $blog->slug) }}" class="blog-item__btn">@lang('Read More')
                                    <span class="blog-item__btn-icon"><i class="las la-arrow-right"></i></span>
                                </a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
@endsection
@push('fbComment')
    @php echo loadExtension('fb-comment') @endphp
@endpush