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

@section('breadcrumb')
    <ol class="breadcrumb ">
        <li><a href="{{route('/')}}">{{__('front.Home')}}</a></li>
        <li class="active">{{__('front.Journals')}}</li>
    </ol>
@endsection


@section('content')
    <div class="wrapper">


        <div class=" container-fluid right_0">


            <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: 165px; color: #085c7a;">{{$feature->pivot?->value}}
                                            
                                        </li>
                                    @endforeach
                                    <li>
                                        <div style="font-weight: bold; width: auto; float: left;">{{__('front.Publication Frequency')}}:</div>
                                        <div style=" width: 165px;  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>
    @endsection