@extends('front.layouts.master',['banner' =>'yeas'])



@section('content')

    <div class="wrapper WarpSmall top_35">
        <div class=" container-fluid right_0">

            {{-- <div class="title">
                <a class="green" href=""><h3>{{__('front.Explore Our Journals & Book Series By Topic')}}</h3></a>
                <a class="green pull-right" href="">{{__('front.All Journals From This Category')}}<i class="fa fa-long-arrow-right"
                                                                                      aria-hidden="true"></i></a>
            </div> --}}
            <div class="col-md-4 col-sm-12 right_0">
                <div class="sidebar">
                    <div class="Journals">
                        <ul class="suffle list-unstyled box shadow">
                            <h4 class="green">
                                <svg xmlns="http://www.w3.org/2000/svg" class="svg" fill="currentColor" class="bi bi-card-list" viewBox="0 0 16 16">
                                    <path d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"/>
                                    <path d="M5 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 5 8zm0-2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0 5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-1-5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zM4 8a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm0 2.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z"/>
                                  </svg>
                                  {{__('front.ASPG Categories')}}</h4>
                             <li class="filter active" data-filter="*">
                                    <input type="radio" checked  name="radio"
                                           id="radio0" class="radio"/>
                                    <label for="radio0">{{__('front.show_all')}}</label>
                                </li>
                            @forelse($categories as $key => $category)
                                <li class="filter" data-filter=".cat{{$category->id}}">
                                    <input type="radio"  name="radio"
                                           id="radio{{$category->id}}" class="radio"/>
                                    <label for="radio{{$category->id}}">{{$category->title}}</label>
                                </li>
                            @empty
                                <div>{{__('front.not found categories')}}</div>
                            @endforelse
                        </ul>
                    </div>
                </div>
            </div>
            <div class="right-top col-md-8 col-sm-12">
                <div id="Journals" class="Journals">
                    @forelse($journals as $journal)
                        <div class="col-md-6 col-sm-6 mix cat{{$journal->category_id}}">
                            <div class="Journal shadow">
                                <img class="img-responsive"
                                     src="{{asset('uploads/journal/image/'.$journal->image)}}">
                                <div class="right">
                                    <h4 style="border-bottom: 1px solid #9a1313;text-align: justify;padding-right: 5px;">
                                        <a href="{{route('journal.show',$journal->nickname)}}" style=" color: #085c7a; font-size:16px">{{$journal->title}}</a>
                                    </h4>
                                    @foreach($journal->features?->where('home', 1) as $feature)
                                        <li style="width: 100%; clear: both;  float: right; font-size: 13px;">
                                            <div style="font-weight: bold; width: auto; float: left; ">{{$feature->title}}:</div>
                                            <div style="float: right; padding-right: 10px; width: 50%; color: #085c7a;">{{$feature->pivot?->value}}
                                            
                                        </li>
                                    @endforeach
                                    <li>
                                        <div style="font-weight: bold; width: auto; float: left;">{{__('front.Publication Frequency')}}:</div>
                                        <div style=" width: 50%;  float: right; color: #085c7a;">{{$journal->freq}}</div>
                                        </li>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="text-center"> {{__('front.not found journals')}}</div>
                    @endforelse
                </div>
            </div>
        </div>
        <div class="center-banar">
            <img class="img-responsive center-block" src="{{asset('front/img/center.png')}}">
        </div>
        <div class="container-fluid right_0">
            <div class="title">
                <h3 class="green">{{__('front.Featured Articles')}}</h3>
            </div>
            @forelse($news as $new)
                <div class="col-md-4 col-sm-6 right_0">
                    <div class="Hybrid shadow" data-aos="zoom-in" data-aos-duration="2000">
                        <h4><a class="green" href="">{{$new->title}}</a></h4>
                        <img class="img-responsive" src="{{$new->getImageAttribute()}}">

                        <span class="green">{{$new->created_at->format(' d M Y ')}}</span>
                        <p>{!! $new->short_description !!}</p>
                        <a class="more pull-right" href="{{route('newCategory.show',$new->id)}}">Read More</a>
                    </div>
                </div>
            @empty
                <div>{{__('not found')}}</div>
            @endforelse
            <div class="title row col-md-12 right_0">
                <h3 class="green">{{__('front.Most Viewed')}}</h3>
            </div>
            @foreach($mostedView as $journal)
                <div class="col-md-4 col-sm-6 right_0">
                    <div class="Journal shadow">
                        <img class="img-responsive" src="{{asset('uploads/journal/image/'.$journal->image)}}">
                        <div class="right">
                            <h4 style="border-bottom: 1px solid #9a1313;text-align: justify;padding-right: 5px;">
                                <a href="{{route('journal.show',$journal->nickname)}}" style=" color: #085c7a; font-size:16px">{{$journal->title}}</a>
                            </h4>
                            @foreach($journal->features?->take(3) as $feature)
                            <li style="width: 100%; clear: both;  float: right; font-size: 13px;">
                                <div style="font-weight: bold; width: auto; float: left; ">{{$feature->title}}:</div>
                                <div style="float: right; padding-right: 10px; width: 50%; color: #085c7a;">{{$feature->pivot?->value}}</div>
                                
                            </li>
                            @endforeach
                            <div style="font-weight: bold; width: auto; float: left;">{{__('front.Publication Frequency')}}:</div>
                            <div style=" width: 50%;  float: right; padding-right: 10px;">{{$journal->freq}}</div />

                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>

@endsection