@extends('core::public.psim')
@section('title', $model->meta_title . ' – ' . __('Chapters'))
@section('ogTitle', $model->meta_title)
@section('description', $model->meta_description)
@section('keywords', $model->meta_keywords)
@section('ogImage', $model->present()->ogImage())
@section('bodyClass', 'body-chapters body-chapters-index body-page body-page-' . $page->id)

@section('content')
    <div class="beaddumtitlechapters">
        <div class="container breadum-container">
            <div class="pagetitle">
                <h3 class="title-heading">CHAPTERS</h3>
                <div class="divider gallery-background-image-heading-divider"></div>
            </div>
			<div class="breadummenu">
                <a href="/">Home</a> &nbsp; > &nbsp; <span>{{htmlspecialchars("Chapters")}}</span>
            </div>
        </div>
    </div>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>

    <section class="gallery-section pb-5"> 
		<div class="container px-0">
			<!-- Nav tabs -->
			<ul class="nav nav-tabs tablist-gallery5" role="tablist">
				<li class="nav-item">
					<a class="nav-link active" data-toggle="tab" href="#all">All</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" data-toggle="tab" href="#national">National</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" data-toggle="tab" href="#international">International</a>
				</li>
			</ul>

			<!-- Tab panes -->
			<div class="tab-content chapterspage">
				<div id="all" class="container tab-pane active"><br>
					<div class="row">
						
						@foreach ($allChapters as $chapter)
                        <div class="col-12 col-sm-6 col-md-4 col-lg-4">
							<a href="{{ $chapter->uri() }}">
                            <div class="img-container">
                                <img class="img-responsive img-rounded" src="{{ $chapter->present()->image(424, 225) ?? '' }}" style="width:100%;">
                                <div class="card-text-address1"><span class="card-text-address0">{{ $chapter->title }}</span><img src="{{asset('themes/psim/images/users.png')}}" class="card-text-address-icon"><span class="card-text-address3">56</span><img src="{{asset('themes/psim/images/stat.png')}}" class="card-text-address-icon"><span class="card-text-address3">13</span></div></div>
							</a>
                        </div>
                    @endforeach
					</div>
					

				</div>
				<div id="national" class="container tab-pane fade"><br>
					<div class="row">
						@if ($nationalChapters->count() > 0)
							@foreach ($nationalChapters as $chapter)
								<div class="col-12 col-sm-6 col-md-4 col-lg-4">
									<a href="{{ $chapter->uri() }}"><div class="img-container">
                                <img class="img-responsive img-rounded" src="{{ $chapter->present()->image(424, 225) ?? '' }}" style="width:100%;">
                                <div class="card-text-address1"><span class="card-text-address0">{{ $chapter->title }}</span><img src="{{asset('themes/psim/images/users.png')}}" class="card-text-address-icon"><span class="card-text-address3">56</span><img src="{{asset('themes/psim/images/stat.png')}}" class="card-text-address-icon"><span class="card-text-address3">13</span></div></div></a>
									
								</div>
							@endforeach
						@endif
					</div>
				</div>
				<div id="international" class="container tab-pane fade"><br>
					<div class="row">
						@if ($internationalChapters->count() > 0)
							@foreach ($internationalChapters as $chapter)
								<div class="col-12 col-sm-6 col-md-4 col-lg-4">
									 <a href="{{ $chapter->uri() }}"><div class="img-container">
                                <img class="img-responsive img-rounded" src="{{ $chapter->present()->image(424, 225) ?? '' }}" style="width:100%;">
                                <div class="card-text-address1"><span class="card-text-address0">{{ $chapter->title }}</span><img src="{{asset('themes/psim/images/users.png')}}" class="card-text-address-icon"><span class="card-text-address3">56</span><img src="{{asset('themes/psim/images/stat.png')}}" class="card-text-address-icon"><span class="card-text-address3">13</span></div></div></a>
								</div>
							@endforeach
						@endif
					</div>
				</div>
			</div>
		</div>
	</section>
@endsection