@extends('frontend.layouts.app')
@section('style')
    <style>
    </style>
@endsection
@section('content')
    <section class="page-header page-header-modern bg-color-primary page-header-lg" style="margin-top: 150px">
        <div class="container">
            <div class="row">
                <div class="col-md-8 order-2 order-md-1 align-self-center p-static">
                    <h1 class="text-color-dark font-weight-bold">{{ $blog->main_title }}</h1>
                </div>

            </div>
        </div>
    </section>

    <div class="container pt-4 pb-5 my-5">
        <div class="row">
            <div class="col-lg-8 mb-5 mb-lg-0 appear-animation" data-appear-animation="fadeInUpShorter"
                data-appear-animation-delay="1600">

                <article>
                    <div class="card border-0">
                        <div class="card-body z-index-1 p-0">
                            <p class="text-uppercase text-1 mb-3 text-color-default"><time pubdate
                                    datetime="2024-01-10">{{ $blog->date }}</time> <span
                                    class="opacity-3 d-inline-block px-2">|</span>
                                {{ $blog->number_comments }} {{ __('website.Comments') }} <span
                                    class="opacity-3 d-inline-block px-2">|</span> {{ $blog->full_name }}</p>

                            <div class="post-image pb-4">
                                <img class="card-img-top custom-border-radius-1"
                                    src="{{ $blog->getFirstMediaUrl(Blog_COLLECTION) }}" alt="Card Image">
                            </div>

                            <div class="card-body p-0">
                                <p>{!! $blog->long_description ?? '' !!}</p>

                                <!-- Go to www.addtoany.com to customize -->
                                <!-- AddToAny BEGIN -->
                                <div class="a2a_kit a2a_kit_size_32 a2a_default_style">
                                    <a class="a2a_dd" href="https://www.addtoany.com/share"></a>
                                    <a class="a2a_button_facebook"></a>
                                    <a class="a2a_button_x"></a>
                                    <a class="a2a_button_copy_link"></a>
                                </div>
                                <script async src="https://static.addtoany.com/menu/page.js"></script>

                                <hr class="my-5">

                                <div id="comments" class="post-block post-comments">
                                    <h3 class="text-color-primary text-capitalize font-weight-bold text-5 m-0 mb-3">
                                        {{ __('website.Comments On This Blog For Clients') }}</h3>

                                    <ul class="comments">
                                        @foreach ($forms as $form)
                                            <li>
                                                <div class="comment">
                                                    <div class="img-thumbnail img-thumbnail-no-borders d-none d-sm-block">
                                                        <img class="avatar rounded-circle" alt=""
                                                            src="{{ asset('images/default_user_image.jpg') }}">
                                                    </div>
                                                    <div class="comment-block">
                                                        <div class="comment-arrow"></div>
                                                        <span class="comment-by">
                                                            <strong class="text-dark">{{ $form->first_name }}</strong>
                                                            <p class="text-dark">{{ $form->email }}</p>

                                                        </span>
                                                        <p>{{ $form->comment }}</p>
                                                        {{-- <span class="date float-end">January 12, 2024 at 1:38 pm</span> --}}
                                                        <span class="date float-end">{{ $form->created_at }} pm</span>
                                                    </div>
                                                </div>
                                            </li>
                                        @endforeach
                                    </ul>

                                    <h3 class="text-color-primary text-capitalize font-weight-bold text-5 m-0 mb-3 mt-5">
                                        {{ __('website.Leave a Reply') }}</h3>

                                    <form class="custom-form-simple-validation p-4 rounded bg-color-grey"
                                        action="{{ route('admin.form_blog.store') }}" method="POST"
                                        enctype="multipart/form-data">
                                        @csrf
                                        <div class="p-2">
                                            <div class="row">
                                                <div class="form-group col-lg-6">
                                                    <label
                                                        class="form-label required mb-1 font-weight-bold text-dark">{{ __('website.Full Name') }}</label>
                                                    <input type="text" value=""
                                                        data-msg-required="Please enter your name." maxlength="100"
                                                        class="form-control py-3 px-3 border-0 box-shadow-none"
                                                        name="first_name" id="first_name" required=""
                                                        placeholder="{{ __('website.Please Enter Your Full Name') }}">
                                                </div>
                                                <div class="form-group col-lg-6">
                                                    <label
                                                        class="form-label required mb-1 font-weight-bold text-dark">{{ __('website.Email Address') }}</label>
                                                    <input type="email" value=""
                                                        data-msg-required="Please enter your email address."
                                                        data-msg-email="Please enter a valid email address." maxlength="100"
                                                        class="form-control py-3 px-3 border-0 box-shadow-none"
                                                        name="email" id="email" required=""
                                                        placeholder="{{ __('website.Please Enter Your Email Address') }}">
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="form-group col">
                                                    <label
                                                        class="form-label required mb-1 font-weight-bold text-dark">{{ __('website.Comment') }}</label>
                                                    <textarea maxlength="5000" data-msg-required="Please enter your message." rows="8"
                                                        class="form-control p-3 border-0 box-shadow-none" name="comment" id="comment" required=""
                                                        placeholder="{{ __('website.Please Enter Your Comment') }}"></textarea>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="form-group col mb-0">
                                                    <input type="submit" value="{{ __('website.Post Comment') }}"
                                                        class="btn btn-dark btn-modern" data-loading-text="Loading...">
                                                </div>
                                            </div>
                                        </div>
                                    </form>

                                </div>

                            </div>
                        </div>
                    </div>
                </article>

            </div>
            <div class="blog-sidebar col-lg-4 pt-4 pt-lg-0 appear-animation" data-appear-animation="fadeInUpShorter"
                data-appear-animation-delay="1800">
                <aside class="sidebar">
                    <div class="px-3 mb-4">
                        <h3 class="text-color-quaternary text-capitalize font-weight-bold text-5 m-0 mb-3">
                            {{ __('website.About The Blog') }}</h3>
                        <p class="m-0">{{ $blog->about_the_blog }}</p>
                    </div>
                    <div class="py-1 clearfix">
                        <hr class="my-2">
                    </div>
                    <div class="px-3 mt-4">
                        <h3 class="text-color-quaternary text-capitalize font-weight-bold text-5 m-0 mb-3">
                            {{ __('website.Recent Posts') }}
                        </h3>
                        <div class="pb-2 mb-1">
                            @foreach ($recent_posts as $recent_blog)
                                <a href="#"
                                    class="text-color-default text-uppercase text-1 mb-0 d-block text-decoration-none">{{ $recent_blog->date }}
                                    <span class="opacity-3 d-inline-block px-2">|</span>
                                    {{ $recent_blog->number_comments }} {{ __('website.Comments') }} <span
                                        class="opacity-3 d-inline-block px-2">|</span>
                                    {{ $recent_blog->full_name }}</a>
                                <a href="#"
                                    class="text-color-dark text-hover-primary font-weight-bold text-3 d-block pb-3 line-height-4">{{ $recent_blog->main_title }}</a>
                            @endforeach
                        </div>
                    </div>
                </aside>
            </div>
        </div>
    </div>
@endsection