@extends('front.layouts.base')

@section('content')

    <div class="page-title-area title-bg-three">
        <div class="d-table">
            <div class="d-table-cell">
                <div class="container">
                    <div class="title-content">
                        <!-- replace with blog name -->
                        <h2>{{ __('Détails blog') }}</h2> 
                        <ul>
                            <li>
                                <a href="{{ route('home') }}">Home</a>
                            </li>
                            <li>
                                <span>{{ __('Détails blog') }}</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="blog-details-area ptb-100">
        <div class="container">
            <div class="row">
                <div class="col-lg-8">
                    <div class="details-item">
                        <div class="common-img-details">
                            <span>{{ $blog->name }}</span>
                            <h2>{{ $blog->name }}</h2>
                            <ul>
                                <li>
                                    <i class='bx bxs-user'></i>
                                    Par:
                                    <a href="#">{{ $blog->author_name }}</a>
                                </li>
                                <li>
                                    <i class='bx bx-calendar'></i>
                                    {{ $blog->formatted_published_at }}
                                </li>
                            </ul>
                        </div>
                        <img src="{{ asset($blog->images->first()->path) }}" alt="Details">
                        <p>
                            {{ $blog->content }}
                        </p>
                        <div class="tags align-items-center">
                            <div class="left">
                                <!-- <ul>
                                    <li>
                                        <span>Share:</span>
                                    </li>
                                    <li>
                                        <a href="blog-details.html#">
                                            <i class='bx bxl-facebook'></i>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="blog-details.html#">
                                            <i class='bx bxl-twitter'></i>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="blog-details.html#">
                                            <i class='bx bxl-instagram'></i>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="blog-details.html#">
                                            <i class='bx bxl-youtube'></i>
                                        </a>
                                    </li>
                                </ul> -->
                            </div>
                            <div class="right">
                                <ul>
                                    <li>
                                        <span>Tags:</span>
                                    </li>
                                    @foreach($blog->tags as $tag)
                                    <li>
                                        <a href="#">#{{ $tag->tag->name }}</a>
                                    </li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                        <div class="comments">
                            <h3>Comments</h3>
                            <ul>
                                @foreach($blog->comments as $comment)
                                <li>
                                    <!-- <img src="{{ asset($comment->author->avatar) }}" alt="Details"> -->
                                    <img src="{{ asset('assets/images/blog/comment3.jpg') }}" alt="Details">
                                    <h4>{{ $comment->author->fullname }}</h4>
                                    <p>{{ $comment->content }}</p>
                                    <span>{{ $comment->formatted_created_at }}</span>
                                </li>
                                @endforeach
                            </ul>
                        </div>
                        <!-- <div class="common-details-contact">
                            <h3>Leave A Comment</h3>
                            <form>
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <input type="text" class="form-control" placeholder="Your Name">
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <input type="email" class="form-control" placeholder="Your Email">
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <textarea id="your-message" rows="8" class="form-control"
                                                placeholder="Your Message"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <button type="submit" class="btn common-btn">
                                            Post A Comment
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div> -->
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="widget-area">
                        <div class="popular widget-item">
                            <h3>Blogs</h3>
                            @foreach($random_blogs as $random_blog)
                            <div class="inner">
                                <ul class="align-items-center">
                                    <li>
                                        <img src="{{ asset($random_blog->images->first()->path) }}" alt="Details">
                                    </li>
                                    <li>
                                        <h4>
                                            <a href="{{ route('client.blogs.show', ['id' => $random_blog->id]) }}">{{ $random_blog->name }}</a>
                                        </h4>
                                    </li>
                                </ul>
                            </div>
                            @endforeach
                        </div>
                        <div class="tags widget-item">
                            <h3>Tags</h3>
                            <ul>
                                @foreach($blog->tags as $tag)
                                <li>
                                    <a href="#">{{ $tag->tag->name }}</a>
                                </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection