@extends('user.layouts.index')
@section('page_content')
<div class="container py-5">
    <div class="row">
       <div class="col-sm-3">
         <div class="card">
      <div class="card-header">
        <a class="card-link" href="{{ asset('/user/home') }}">
          <i class="fa fa-home"></i>  Home
        </a>
      </div>
    </div>
       <div id="accordionvolume">


    <div class="card">
      <div class="card-header">
        <a class="card-link" data-toggle="collapse" href="#collapsevolume">
        <i class="fa fa-volume-up"></i>  Volumes
        </a>
      </div>
      @foreach($journal->volume as $volume)
      <div id="collapsevolume" class="collapse" data-parent="#accordionvolume">
        <div class="card-body">
        <div id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapse{{ $volume->volume_number }}" aria-expanded="true" aria-controls="collapse{{ $volume->volume_number }}">
        Volume #{{ $volume->volume_number }}
        </button>
      </h5>
    </div>

    <div id="collapse{{ $volume->volume_number }}" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
      @foreach($volume->issue as $issue)  
      <ul>
      <li><a href="{{ asset('user/issue/').'/'.$issue->id }}">Issue #{{ $issue->issue_num }}</a></li>
      </ul>
      @endforeach
      </div>
    </div>
  </div>
</div>
        
        </div>
      </div>
      @endforeach
    </div>
  </div>
  <div class="card">
      <div class="card-header">
        <a class="card-link" href="{{ asset('/user/scope') }}">
        <i class="fa fa-bullseye"></i>  Scope & Mission
        </a>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="card-link" href="{{ asset('/user/editorialboard') }}">
        <i class="fa fa-clipboard"></i>  Editorial Board
        </a>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="card-link" href="{{ asset('/user/editorialadvisoryboard') }}">
        <i class="fa fa-tripadvisor"></i>  Editorial Advisory Board
        </a>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="card-link" href="{{ asset('/user/indexing') }}">
        <i class="fa fa-list"></i>  Indexing & Abstracting
        </a>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="card-link" href="{{ asset('/user/authorguidlines') }}">
        <i class="fa fa-user"></i>  Author Guidline
        </a>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="card-link" href="{{ asset('/user/ethicalstatement') }}">
        <i class="fa fa-history"></i>  Ethical Statement
        </a>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="card-link" href="{{ asset('/user/publicationpolicy') }}">
        <i class="fa fa-newspaper"></i>  Publication Policy
        </a>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="card-link" href="{{ asset('/user/home') }}">
        <i class="fa fa-archive"></i>  Archives
        </a>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="card-link" href="{{ asset('/user/archivingpolicy') }}">
        <i class="fa fa-shield"></i>  Archiving Policy
        </a>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="card-link" href="{{ asset('/user/corrigendum') }}">
        <i class="fa fa-undo"></i>  Corrigendum
        </a>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="card-link" href="{{ asset('/user/home') }}">
        <i class="fa fa-bug"></i>  Current Issue
        </a>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="card-link" href="{{ asset('/user/contactus') }}">
        <i class="fa fa-address-card"></i>  Contact Us
        </a>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="card-link" href="{{ asset('/user/feedback') }}">
        <i class="fa fa-comments"></i>  Complain / Feedback
        </a>
      </div>
    </div>


    </div>
    <div class="col-sm-9 card p-2 pl-6">
      <div class="row mb-5">
   
           <img src="{{ $journal->avatar }}" style="max-width:200px; max-height:400px" class="w-100 ml-4">

           <div class="col-sm-8">
           <div class="row pl-5">
           <h2><strong>{{ $journal->title }}</strong></h2>
           </div>
           <div class="row pl-5">
            <h4><strong>{{ $journal->year }}</strong></h4>
           </div>
           <div class="row pl-5">
            <h4><strong>{{ $journal->ssn }}</strong></h4>
           </div>

           </div>
      </div>
      <div class="mt-5 card">
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#description">Description</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#plagarism">Plagarism Policy</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#security">Security Policy</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div id="description" class=" tab-pane pl-3 active"><br>
    <strong>Description</strong>
      <p>{!! $journal->description !!}</p>
    </div>
    <div id="plagarism" class=" tab-pane pl-3"><br>

      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero aliquam, similique possimus ab corporis, officia nam quidem incidunt sunt voluptates ut esse adipisci earum saepe eaque commodi, debitis laborum! Delectus.</p>
    </div>
    <div id="security" class=" tab-pane pl-3"><br>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis et eveniet expedita, consequuntur quis laudantium itaque accusantium fugiat totam numquam a exercitationem aspernatur soluta sunt harum, vero suscipit, quaerat temporibus?</p>
    </div>
</div>
</div>
    </div>
</div>


</div>
@endsection