@extends('layouts.app')
@section('content')
    <div class="container main">
        <div class="row">
            <div class="col-lg-8">
                <div class="single-post">
                    <h1>{{ $data->title }} <span class="blue-frame">Marketing</span></h1>
                    <div class="post-meta text-muted">
                        <span><i class="far fa-user"></i> From <b>{{ $data->category->name }} </b> Category</span><span><img
                                style="width: 20px;" src="{{ asset('assets/img/icon/calendar.svg') }}" alt="">
                            {!! $data->created_at->diffForhumans() !!}</span><span><i class="far fa-comment-alt"></i> 0 comments</span>
                    </div>
                    <div class="post-contant">
                        <div class="post-img"><img src="{{ asset('storage/'.$data->media) }}" alt=""></div>
                        <p>{!! $data->text !!}</p>

                        <div class="line"></div>
                        <div class="line"></div>
                    </div>
                </div>
            </div>
            <div class="sidebar col-lg-4">
                <div class="sidebar-category">
                    <h4>Explore the Categories</h4>
                    <a href="">All category <img style="width: 20px; margin-left: 20px;"
                            src="{{ asset('assets/img/icon/arrow-right-icon.svg') }}" alt=""></a>
                    <div class="category">
                        @foreach ($data->category->lang->categories as $category)
                            <div class="category-item">
                                <img class="category-icon" src="{{ asset('assets/img/icon/analytics.svg') }}"
                                    alt="">
                                <h6 class="category-title">{{ $category->name }}</h6>
                                <p> {!! Str::words($category->description, 20, '...') !!}</p>
                                <a href="{{ route('category.show', $category->id) }}"><img style="width: 20px;"
                                        src="{{ asset('assets/img/icon/arrow-right-icon.svg') }}" alt=""></a>
                            </div>
                        @endforeach

                    </div>
                </div>

                <div class="recent-posts my-5">
                    <h4>Our latest Articles</h4>
                    <a href="">All pages <img style="width: 20px; margin-left: 20px;"
                            src="{{ asset('assets/img/icon/arrow-right-icon.svg') }}" alt=""></a>
                    <div class="latest-articles-wrapper">
                        @foreach ($data->category->data as $page)
                            <div class="article">
                                <div class="arcticle-photo"><img src="{{ asset('storage/' . $page->media) }}" alt="">
                                </div>
                                <div class="article-text">
                                    <a href="{{ route('data.show', $data->id) }}">
                                        <h5 class="title">{{ $page->title }}</h5>
                                    </a>
                                    <p class="article-meta"><img src="{{ asset('assets/img/icon/calendar.svg') }}"
                                            alt=""><span class="data text-muted">{!! $page->created_at !!}</span></p>
                                    <p>{!! Str::words($category->description, 20, '...') !!}</p>
                                </div>
                            </div>
                        @endforeach

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Footer -->
@endsection