@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 mb-5">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="d-lg-none mb-4 ms-3">
                    <button class="mobile-journal-btn d-flex justify-content-between align-items-center py-3 px-4" 
                            type="button" 
                            data-bs-toggle="offcanvas" 
                            data-bs-target="#journalSidebarMobile"
                            aria-controls="journalSidebarMobile">
                        <span>
                            <i class="fas fa-bars"></i>
                        </span>
                    </button>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-3 d-none d-lg-block">
                @include('front.layouts.include.journal-sidebar')
            </div>
            <div class="col-lg-9">
                <div class="journal-box">
                    @if(isset($naturalHistory))
                        @include('front.pages.informative_pages.journal_history.includes.article-show')
                    @elseif(isset($editorialBoard))
                        @include('front.pages.informative_pages.journal_history.includes.edit-board-show')
                    @else
                        @foreach ($naturalHistoryPage->sections as $section)
                            @include('front.pages.informative_pages.journal_history.includes.' . $section->type)
                        @endforeach
                    @endif
                </div>
            </div>
        </div>
    </div>
  </div>
  <!-- 4. Mobile Off-Canvas Drawer (Renders the exact same sidebar view) -->
    <div class="offcanvas offcanvas-start d-lg-none" tabindex="-1" id="journalSidebarMobile" aria-labelledby="journalSidebarMobileLabel">
        <div class="offcanvas-body">
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            @include('front.layouts.include.journal-sidebar')
        </div>
    </div>
@endsection
<script>
    document.addEventListener('DOMContentLoaded', function () {
    const items = document.querySelectorAll('.accordion-item-journal');

    items.forEach(item => {
        const title = item.querySelector('.accordion-title');

        title.addEventListener('click', () => {
        const isOpen = item.classList.contains('open');

        // Optional: close all other items (single-open accordion)
        items.forEach(i => i.classList.remove('open'));

        // Toggle current item
        if (!isOpen) {
            item.classList.add('open');
        }
        });
    });
    });
</script>