@extends('layouts.app')

@section('content')
    @include('includes.sub_header', [
        'page_name' => $blog->title,
        'page_title' => $blog->title,
        'second_page_title' => 'NEWS & BLOGS',
        'route' => route('blog.index'),
    ])

    <div id="content">
        <div class="container">
            <div class="row d-flex justify-content-between">
                <div class="col-lg-8 pe-lg-5">
                    <div class="blog-read">
                        <div class="post-content">
                            <div class="post-image">
                                <img src="{{ asset($blog->image) }}" alt="{{ $blog->title }}" />
                            </div>
                            <div class="post-text">
                                <h3 class="fw-bold mb-0">
                                    <a href="#">{{ $blog->title }}</a>
                                </h3>
                                <span class="id-color">
                                    <i class="fa fa-clock-o me-2"></i>
                                    {{ $blog->created_at->toDateString() }}
                                </span>
                                <div class="description my-4 text-justify">
                                    {!! $blog->description !!}
                                </div>
                            </div>
                        </div>

                        <div class="post-meta">
                            <span><i class="fa fa-user-circle id-color d-sm-inline d-none fa-2x"></i>
                                <a href="#">KB TEAM</a></span>
                            <span><i class="fa fa-globe id-color d-sm-inline d-none fa-2x"></i><a
                                    href="#">{{ $blog->category->name }}</a></span>
                            <span>
                                <i class="fa fa-envelope-open id-color d-sm-inline d-none fa-2x"></i>
                                <a href="#">{{ $blog->comments->count() }} Comments</a>
                            </span>
                        </div>

                        <div class="spacer-single"></div>

                        <div id="blog-comment">
                            <h3>Comments ({{ $blog->comments->count() }})</h3>

                            <div class="spacer-half"></div>

                            <ol>
                                @forelse ($blog->comments as $comment)
                                    <li>
                                        <div class="avatar">
                                            <img src="{{ asset('assets/images/avatar-light.jpg') }}" alt="" />
                                        </div>
                                        <div class="comment-info">
                                            <span class="c_name">{{ $comment->user->name }}</span>
                                            <span class="c_date id-color">{{ $comment->created_at->toDateString() }}</span>
                                        </div>

                                        <div class="comment">
                                            {{ $comment->comment }}
                                        </div>
                                        @if ($comment->child->count() > 0)
                                            <ol>
                                                <li>
                                                    <div class="avatar">
                                                        <img src="{{ asset('assets/images/avatar-light.jpg') }}"
                                                            alt="" />
                                                    </div>
                                                    <div class="comment-info">
                                                        <span class="c_name">{{ $comment->child->user->name }}</span>
                                                        <span
                                                            class="c_date id-color">{{ $comment->child->created_at->toDateString() }}</span>
                                                    </div>
                                                    <div class="comment">
                                                        {{ $comment->child->comment }}
                                                    </div>
                                                </li>
                                            </ol>
                                        @endif
                                    </li>

                                @empty
                                @endforelse
                            </ol>

                            <div class="spacer-single"></div>

                            <div id="comment-form-wrapper">
                                <h3>Leave a Comment</h3>
                                <div class="comment_form_holder">
                                    <form id="contact_form" method="post">
                                        <label>Name</label>
                                        <input type="text" name="name" id="name" class="form-control" />
                                        <input type="hidden" name="blog_id" id="blog_id" value="{{ $blog->id }}" class="form-control" />

                                        <label>Email <span class="req">*</span></label>
                                        <input type="text" name="email" id="email" class="form-control" />

                                        <label>Message <span class="req">*</span></label>
                                        <textarea cols="10" rows="10" name="comment" id="comment" class="form-control"></textarea>
                                        <p id="btnsubmit">
                                            <input type="submit" id="send" value="Send" class="btn btn-line" />
                                        </p>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="sidebar" class="col-lg-4">
                    <div class="widget widget-post mb-5 pb-4">
                        <h4 class="pb-2 fw-bold">RECENT NEWS</h4>
                        <div class="recent-posts-container mt-4">
                            @forelse ($recent_articles as $article)
                                <div class="bloglist item">
                                    <div class="post-content">
                                        <div class="post-image">
                                            <a class="image-popup-no-margins"
                                                href="{{ route('blog.show', $article->id) }}">
                                                <img alt="{{ $article->slug }}" src="{{ asset($article->image) }}" />
                                            </a>
                                        </div>
                                        <div class="post-text">
                                            <span class="p-tagline text-white">{{ $article->category->name }}</span>
                                            <h4>
                                                <a href="blog-single.html">{{ $article->title }}</a>
                                            </h4>
                                            <span class="p-date d-flex align-items-center">
                                                <small class="id-color me-2">
                                                    <i style="font-size: 18px" class="fa fa-clock-o"></i>
                                                </small>
                                                {{ $article->created_at->toDateString() }}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <div class="bloglist item">
                                    <div class="post-content">
                                        <div class="post-image">
                                            <a class="image-popup-no-margins" href="./projects/almoasher/bedroom2.jpg">
                                                <img alt="" src="./projects/almoasher/bedroom2.jpg" />
                                            </a>
                                        </div>
                                        <div class="post-text">
                                            <span class="p-tagline text-white">Projects</span>
                                            <h4>
                                                <a href="blog-single.html">Make Your Bedroom More Cozy</a>
                                            </h4>
                                            <span class="p-date d-flex align-items-center">
                                                <small class="id-color me-2">
                                                    <i style="font-size: 18px" class="fa fa-clock-o"></i>
                                                </small>
                                                October 28, 2020
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="bloglist item">
                                    <div class="post-content">
                                        <div class="post-image">
                                            <a class="image-popup-no-margins" href="./projects/almoasher/bedroom2.jpg">
                                                <img alt="" src="./projects/almoasher/bedroom2.jpg" />
                                            </a>
                                        </div>
                                        <div class="post-text">
                                            <span class="p-tagline text-white">Projects</span>
                                            <h4>
                                                <a href="blog-single.html">Make Your Bedroom More Cozy</a>
                                            </h4>
                                            <span class="p-date d-flex align-items-center">
                                                <small class="id-color me-2">
                                                    <i style="font-size: 18px" class="fa fa-clock-o"></i>
                                                </small>
                                                October 28, 2020
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="bloglist item">
                                    <div class="post-content">
                                        <div class="post-image">
                                            <a class="image-popup-no-margins" href="./projects/almoasher/bedroom2.jpg">
                                                <img alt="" src="./projects/almoasher/bedroom2.jpg" />
                                            </a>
                                        </div>
                                        <div class="post-text">
                                            <span class="p-tagline text-white">Projects</span>
                                            <h4>
                                                <a href="blog-single.html">Make Your Bedroom More Cozy</a>
                                            </h4>
                                            <span class="p-date d-flex align-items-center">
                                                <small class="id-color me-2">
                                                    <i style="font-size: 18px" class="fa fa-clock-o"></i>
                                                </small>
                                                October 28, 2020
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            @endforelse
                        </div>
                    </div>
                    <div class="widget widget_tags">
                        <h4>Tags</h4>
                        <div class="small-border"></div>
                        <ul>
                            <li><a href="#link">Art</a></li>
                            <li><a href="#link">Application</a></li>
                            <li><a href="#link">Design</a></li>
                            <li><a href="#link">Entertainment</a></li>
                            <li><a href="#link">Internet</a></li>
                            <li><a href="#link">Marketing</a></li>
                            <li><a href="#link">Multipurpose</a></li>
                            <li><a href="#link">Music</a></li>
                            <li><a href="#link">Print</a></li>
                            <li><a href="#link">Programming</a></li>
                            <li><a href="#link">Responsive</a></li>
                            <li><a href="#link">Website</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="spacer-single"></div>
        <div class="spacer-single"></div>

        <section id="view-all-projects" class="call-to-action bg-color text-center mt-5" data-speed="5"
            data-type="background" aria-label="view-all-projects">
            <a href="{{ route('contact.index') }}" class="btn btn-line black btn-big">Get Quotation</a>
        </section>
    @endsection

    @section('scripts')
        <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.js"></script>
        @if (app()->getLocale() != 'en')
            <script type="module"
            src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/localization/messages_{{ app()->getLocale() }}}}.js">
            </script>
        @endif
        <script>
            $(document).ready(function() {
                $('#contact_form').validate({
                    errorClass: "is-invalid",
                    validClass: "is-valid",
                    errorPlacement: function(error, element) {
                        error.insertAfter(element.parent()).addClass('pt-0 pb-2');
                    },
                    rules: {
                        name: {
                            required: true,
                            minlength: 2,
                            normalizer: function(value) {
                                return $.trim(value);
                            }
                        },
                        email: {
                            required: true,
                            email: true,
                            normalizer: function(value) {
                                return $.trim(value);
                            }
                        },
                        comment: {
                            required: true,
                            minlength: 2,
                            normalizer: function(value) {
                                return $.trim(value);
                            }
                        },
                    },
                    submitHandler: function(form) {
                        $("#contact_form button").attr('disabled', 'disabled').addClass('loading');
                           $.ajaxSetup({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            }
                        });
                        $.ajax({
                            type: 'post',
                            url: '{{ route('blogComments.store') }}',
                            data: $('#contact_form').serialize(),
                            success: function(data) {
                                var message = $("#response_message").html(data.message)
                                if (data.status) {
                                    message.addClass('success').show();
                                    $("#contact_form")[0].reset();
                                    setTimeout(() => {
                                        window.location.reload();
                                    }, 2000);
                                } else {
                                    message.addClass('error').show();
                                }
                                setTimeout(() => {
                                    message.hide();
                                }, 2000);
                                $("#contact_form button").removeAttr('disabled').removeClass(
                                    'loading');
                            }
                        });
                    }
                })
            });
        </script>
    @endsection