@extends('front.layouts.master')
@section('title', isset($title) ? $title : 'Home')
@section('description', isset($description) ? $description : '')
@section('keywords', isset($keywords) ? $keywords : '')
@section('content')
  <!-- breadcrumb area start here  -->
  <div class="breadcrumb-area">
    <div class="container">
      <div class="breadcrumb-wrap text-center">
        <h2 class="page-title">{{ __('Jordan Journal of Natural History') }}</h2>
        <ul class="breadcrumb-pages">
          <li class="page-item"><a class="page-item-link" href="{{ route('front') }}">{{ __('Home') }}</a></li>
          <li class="page-item">{{ __('Jordan Journal of Natural History') }}</li>
        </ul>
      </div>
    </div>
  </div>
  <!-- breadcrumb area end here  -->
  <div class="newsletter-wrapper has-tabs jjnh-show">
    <div class="section">
      <div class="container">
        <div class="row">
          <div class="col-sm-12 col-md-3 mb-3">
            <div class="right-section-img">
              {{-- <img src="{{ asset(FILE_JOURNAL .'ansam2.png') }}"> --}}
              <img src="{{$naturalHistory->image ? asset(FILE_JOURNAL .$naturalHistory->image) : asset('frontend/assets/images/pattern-2.png')  }}">
            </div>
          </div>
          <div class="col-sm-12 col-md-9">
            <div class="left-section">
              <h1 class="title fw-bold mb-2">
                {{langConverter($naturalHistory->en_title,$naturalHistory->fr_title) }}
              </h1>
              <div class="open fw-bold mb-3">
                {{ __('Open Access') }}
              </div>
              <div class="row">
                <div class="col-sm-12 col-lg-6 col-xl-3">
                  <div class="jjnh-date mb-2 px-3 py-2 d-flex">
                    <div class="fw-bold border-dark  border-1
                      @if(app()->getLocale() == 'fr') border-start ps-4 @else border-end pe-4 @endif">
                      {{ __('Date') }}
                    </div>
                    <div class="px-3">
                      {{ $naturalHistory->date }}
                    </div>
                  </div>
                </div>
                <div class="col-sm-12 col-lg-6 col-xl-3">
                  <div class="jjnh-pages mb-2 px-3 py-2 d-flex">
                    <div class="fw-bold border-dark  border-1
                     @if(app()->getLocale() == 'fr') border-start ps-4 @else border-end pe-4 @endif">
                      {{ __('Pages') }}
                    </div>
                    <div class="px-3">
                      {{ $naturalHistory->pages }}
                    </div>
                  </div>
                </div>
                <div class="col-sm-12 col-lg-6 col-xl-3">
                  <div class="jjnh-issn mb-2 px-3 py-2 d-flex">
                    <div class="fw-bold border-dark  border-1
                     @if(app()->getLocale() == 'fr') border-start ps-4 @else border-end pe-4 @endif">
                      {{ __('ISSN') }}
                    </div>
                    <div class="px-3">
                      {{ $naturalHistory->issn }}
                    </div>
                  </div>
                </div>
                <div class="col-sm-12 col-lg-6 col-xl-3">
                  <a download href="{{ asset(FILE_JOURNAL . langConverter($naturalHistory->en_file,$naturalHistory->fr_file))}}">
                    <div class="jjnh-pdf mb-2 px-3 py-1 d-flex">
                      <div class="jjnh-pdf-img border-dark  border-1
                       @if(app()->getLocale() == 'fr') border-start ps-4 @else border-end pe-4 @endif">
                        <img src="{{ asset('assets/images/pdf.svg') }}">
                      </div>
                      <div class="px-3 fw-bold">
                        {{ __('Download') }}
                      </div>
                    </div>
                  </a>
                </div>
              </div>
              <div class="overView-section mt-5 emzHisDescription rscnListStyle">
                <h3 class="fw-bold mb-2">
                  {{ __('Over View') }}
                </h3>
                <div>
                  {!! langConverter($naturalHistory->description_en,$naturalHistory->description_ar) !!}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row my-5">
          <div class="articales-section">
            <h3 class="fw-bold mb-5">{{ __('Articles') }}</h3>
            @if(count($naturalHistory->naturalHistoryArticals) > 0)
              @foreach ($naturalHistory->naturalHistoryArticals as $artical)
                <div class="content p-3 mb-4">
                  <div class="fw-bold mb-3">
                    {{ langConverter($artical->title_en,$artical->title_ar) }}
                  </div>
                  <hr class="mb-3 custom">
                  <div class="author mb-3 d-flex">
                    <span class="fw-bold">
                      {{ __('Author Name') }}
                    </span>
                    <span class="px-5">
                      {{ langConverter($artical->author_name_en,$artical->author_name_ar) }}
                    </span>
                  </div>
                  <div class="mb-3">
                    {!! langConverter($artical->description_en,$artical->description_ar) !!}
                  </div>
                  <hr class="mb-3">
                  <div class="row">
                    <div class="col-6 mb-1 d-flex">
                      <span class="fw-bold">
                        {{ __('Pages') }}
                      </span>
                      <span class="px-5">
                        {{$artical->pages  }}
                      </span>
                    </div>
                    <div class="col-6 mb-1 text-end">
                      <a download href="{{ asset(FILE_JOURNAL . langConverter($artical->pdf_en,$artical->pdf_ar))}}">
                        <div class="mb-1 px-3 py-1 d-flex justify-content-end">
                          <div class="jjnh-pdf-img">
                            <img src="{{ asset('assets/images/pdf.svg') }}">
                          </div>
                          <div class="px-3 fw-bold">
                            {{ __('Download') }}
                          </div>
                        </div>
                      </a>
                    </div>
                  </div>
                </div>
              @endforeach
            @else
              <div>{{ __('There is no articles') }}</div>
            @endif
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection