@extends('layouts.app')
@section('content')
    <div class="container main">
        <div class="row">
            <div class="col-lg-8">
                <div class="single-post">
                    <h1>{{ $category->name }} <span class="blue-frame">Category</span></h1>
                    <div class="post-meta text-muted">
                       <img
                                style="width: 20px;" src="{{ asset('assets/img/icon/calendar.svg') }}" alt="">
                            {!! $category->created_at->diffForhumans() !!}</span>
                    </div>
                    <div class="post-contant">
                        <div class="post-img"><img src="{{ asset('storage/'.$category->media) }}" alt=""></div>
                        <p>{!! $category->description !!}</p>
                        <br>
                        <h3>Related <span class="green">Pages</span> :</h3>
                        <ul class="list-in-text">
                            @foreach ($category->data as $data)
                                <li><a href="{{route('data.show',$data->id)}}"> {{ $data->title }}</a></li>

                            @endforeach

                        </ul>
                        <div class="line"></div>
                        <div class="line"></div>
                    </div>
                </div>
            </div>
            <div class="sidebar col-lg-4">
                <div class="sidebar-category">
                    <h4>Explore the Page Categories</h4>
                    <a href="">All page category <img style="width: 20px; margin-left: 20px;"
                            src="{{ asset('assets/img/icon/arrow-right-icon.svg') }}" alt=""></a>
                    <div class="category">
                        @foreach ($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 Pages</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 ($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