@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-8 col-sm-8">
				<div class="practice_section">
					<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('bed-teaching')}}">Go To B.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['file'] }}" alt="main-gallery2" />-->
							  
							  <a href="{{ $subSection['image'] }}" target="_blank" class="btn-border">Download</a>
							@endforeach  
						</div>
					@endforeach
				@endif
			</div>
		@endforeach
	</div>
@endsection
<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>