@extends('layouts.app')
@section('metades')
	<meta name="description" content="{{ $data['metaDescription'] }}" />
	<meta name="author" content="Kultikri Teacher Training Institute of Higher Studies (KTTIHS)" />
	<meta name="keywords" content="Kultikri Teacher Training Institute of Higher Studies (KTTIHS)" />
@endsection
@section('title')
	<title>{{ $data['metaTitle'] }}</title>
@endsection
@section('content')
	<section class="page_title_wrap bottom_border">
		<img class="page_title_bg" src="{{ asset('img/page_title_bg.jpg') }}" alt="">
		<div class="container">
			<h3>{{ $data['title'] }}</h3>
		</div>
	</section>
	<div class="container">
		<div class="row mt-4 mb-5">
			<div class="col-md-12 col-sm-12">
				<div class="practice_section bedsection">
					<h2>{!! $data['title'] !!}</h2>
					<h4>{!! $data['shortDescription'] !!}</h4>
					<ul>
						@foreach ($data['moduleItems'] as $item)
							<li><a href="javascript:void(0)" onclick="openDivCity({{$item['id']}})" data-id="{{$item['id']}}" class="tabpssystem">{!! $item['title'] !!}</a></li>
						@endforeach 
					</ul>
				</div>
			</div>
			<div class="col-md-4 col-sm-4">
				<!--<h4><a href="{{url('deled-teaching')}}">Go To D.El.Ed Teaching</a></h4>-->
			</div>
		</div>
	</div>
	<div class="container">
		<h2 class="doc_text">Documents</h2>
		@foreach ($data['moduleItems'] as $ik => $item)
			@php $checkDiv = $ik==0 ? 'display: block;' : 'display: none;'; @endphp
			<div id="contaId-{{$item['id']}}" class="contaIdClass" style="{{$checkDiv}}">
				<div class="tab year_box">
					@if(count($item['dynamicSections']) > 0)
						@foreach($item['dynamicSections'] as $dsk => $dynamicSection)
							@php $tablink = 'tablink'.$dynamicSection['id']; @endphp
							<button class="tablinks year_link" onclick="openCity(event, '{{$tablink}}')">{{ $dynamicSection['title'] }}</button>
						@endforeach 
					@endif
				</div>
				@if(count($item['dynamicSections']) > 0)
					@foreach($item['dynamicSections'] as $dsk => $dynamicSection)
						@php 
							$tablink = 'tablink'.$dynamicSection['id'];
							$checkTab = ($dsk==0 && $item['id'] == $dynamicSection['moduleItemId']) ? 'display: block;' : 'display: none;';
						@endphp
						<div id="{{$tablink}}" class="tabcontent year_section itemId-{{$item['id']}}" style="{{$checkTab}}">
							@foreach($dynamicSection['subSections'] as $subSection) 
							  <img src="{{ $subSection['image'] }}" alt="main-gallery2" />
							@endforeach  
						</div>
					@endforeach
				@endif
			</div>
		@endforeach
		<section>
        <div class="container">
            <div class="gallerybox"><h3 >Gallery</h3></div>
        </div>
    </section>
    <section class="land_info_wrap">
        <div class="container main-gallery">
            <div class="row">
                @foreach ($data['moduleItems'] as $item)
				        @if ($item['id'] ==  1587)
                        @if (count($item['dynamicSections']) > 0)
                        @foreach ($item['dynamicSections'] as $dynamicSection)
					
                            <div class="col-lg-3 col-md-4 col-6">
                                <a class="gal-inr" href="{{ $dynamicSection['image'] }}"
                                    data-lightbox="Gallery 1"><img src="{{ $dynamicSection['image'] }}" alt=""/></a>
                            </div>
                        @endforeach
                    @endif
					@endif
                @endforeach
            </div>
        </div>
    </section>
	</div>
@endsection
<style>
.gallerybox{
	    text-align: center;
}
.bedsection{
	list-style:unset !important;
}
</style>
<script>
    function openCity(evt, cityName) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        document.getElementById(cityName).style.display = "block";
        evt.currentTarget.className += " active";
    }
	function openDivCity(itemId){
		$(".contaIdClass").css({'display':'none'});
		$(".tabcontent").css({'display':'none'});
		$(".itemId-"+itemId).first().css({'display':'block'});
		$("#contaId-"+itemId).css({'display':'block'});
	}
</script>