@extends('layouts.app')

@section('title',"Team Squad | Your Website")

@section('content')

	@include('layouts._secondary-menu',['secondaryMenus' => ['News','Standings','Fixtures','Scorer','Teams','History']])

	@include('layouts._breadcrumb',['pageName'=> ['Football',$team['current_league']['tournament']['name'], $team['name']]])
	
	<div class="wrap-width">

			@include('layouts._team-secondary-menu',
			['secondaryMenus' => ['News','Standings','Fixtures','Squad']],
			['isActive'=>"Squad",'team' => $team])
			<div class="grid">
				<div class="col-minus-sidebar-1">
					<div class="widget widget-team-squad">
						<header class="widget widget-heading-small mt-3">
							<h2 class="title heading-md">
								<a href="" title="">Squad</a>
							</h2>

							<ul class="heading-tabs" id="headingTabs">
								<li class="active">
									<p data-target="squad-list-all">All</p>
								</li>
								<li>
									<p data-target="squad-list-goalkeepers">Goalkeepers</p>
								</li>
								<li>
									<p data-target="squad-list-defenders">Defenders</p>
								</li>
								<li>
									<p data-target="squad-list-midfielders">Midfielders</p>
								</li>
								<li>
									<p data-target="squad-list-attackers">Attackers</p>
								</li>
							</ul>
						</header>

						{{-- <div class="grid">
							<div class="col-1-2">
								<div class="widget widget-category-dropdown">
									<label for="dropdown-season" class="form-select-label">Season</label>
									<div class="form-select">
										<select name="" id="dropdown-season">
											<option value="">All</option>
											<option value="">2016 / 2017</option>
											<option value="">2017 / 2018</option>
											<option value="" selected="">2018 / 2019</option>
										</select>
									</div>
								</div>
							</div>
						</div> <!-- grid --> --}}

						<header class="squad-header">
							<h4 class="name">Goalkeepers</h4>
						</header>
						<div class="squad-list squad-list-goalkeepers">
							<div class="grid">
								@foreach($goalkeepers as $goalkeeper)
								{{-- {{ dd($goalkeeper) }} --}}
									<div class="col-1-2">
										<a href="{{ url('/player'.$goalkeeper['player']['id']) }}" class="player" title="{{ $goalkeeper['player']['name'] }}">
											<div class="player-image">
												<span class="player-rank">{{ $goalkeeper['shirt_number'] }}</span>
												@if(isset($goalkeeper['player']['url_thumb'] ))
													<img src="{{ $goalkeeper['player']['url_thumb'] }}" alt="{{ $goalkeeper['player']['name'] }}" class="player-photo">
												@else
													<img src="{{ url('../resources/image/temp/image_placeholder.png') }}" alt="{{ $goalkeeper['player']['name'] }}" class="player-photo">
												@endif
											</div>
											<div class="text">
												<h4 class="player-name">{{ $goalkeeper['player']['name'] }}</h4>
												<div class="player-position">{{ $goalkeeper['player']['country']['name'] }}</div>
											</div>
										</a>
									</div>
								@endforeach
							</div> <!-- grid -->
						</div> <!-- squad-list -->

						<header class="squad-header">
							<h4 class="name">Defenders</h4>
						</header>
						<div class="squad-list squad-list-defenders">
							<div class="grid">
								@foreach($defenders as $defender)
									<div class="col-1-2">
										<a href="{{ url('/player'.$defender['player']['id']) }}" class="player" title="{{ $defender['player']['name'] }}">
											<div class="player-image">
												<span class="player-rank">{{ $defender['shirt_number'] }}</span>
												@if(isset($defender['player']['url_thumb'] ))
													<img src="{{ $defender['player']['url_thumb'] }}" alt="{{ $defender['player']['name'] }}" class="player-photo">
												@else
													<img src="{{ url('../resources/image/temp/image_placeholder.png') }}" alt="{{ $defender['player']['name'] }}" class="player-photo">
												@endif
											</div>
											<div class="text">
												<h4 class="player-name">{{ $defender['player']['name'] }}</h4>
												<div class="player-position">{{ $defender['player']['country']['name'] }}</div>
											</div>
										</a>
									</div>
								@endforeach
							</div> <!-- grid -->
						</div> <!-- squad-list squad-list- -->

						<header class="squad-header">
							<h4 class="name">Midfielders</h4>
						</header>
						<div class="squad-list squad-list-midfielders">
							<div class="grid">
								@foreach($midfielders as $midfielder)
									<div class="col-1-2">
										<a href="{{ url('/player'.$midfielder['player']['id']) }}" class="player" title="{{ $midfielder['player']['name'] }}">
											<div class="player-image">
												<span class="player-rank">{{ $midfielder['shirt_number'] }}</span>
												@if(isset($midfielder['player']['url_thumb'] ))
													<img src="{{ $midfielder['player']['url_thumb'] }}" alt="{{ $midfielder['player']['name'] }}" class="player-photo">
												@else
													<img src="{{ url('../resources/image/temp/image_placeholder.png') }}" alt="{{ $midfielder['player']['name'] }}" class="player-photo">
												@endif
											</div>
											<div class="text">
												<h4 class="player-name">{{ $midfielder['player']['name'] }}</h4>
												<div class="player-position">{{ $midfielder['player']['country']['name'] }}</div>
											</div>
										</a>
									</div>
								@endforeach
							</div> <!-- grid -->
						</div> <!-- squad-list squad-list- -->

						<header class="squad-header">
							<h4 class="name">Attackers</h4>
						</header>
						<div class="squad-list squad-list-attackers">
							<div class="grid">
								@foreach($attackers as $attacker)
									<div class="col-1-2">
										<a href="{{ url('/player'.$attacker['player']['id']) }}" class="player" title="{{ $attacker['player']['name'] }}">
											<div class="player-image">
												<span class="player-rank">{{ $attacker['shirt_number'] }}</span>
												@if(isset($attacker['player']['url_thumb'] ))
													<img src="{{ $attacker['player']['url_thumb'] }}" alt="{{ $attacker['player']['name'] }}" class="player-photo">
												@else
													<img src="{{ url('../resources/image/temp/image_placeholder.png') }}" alt="{{ $attacker['player']['name'] }}" class="player-photo">
												@endif
											</div>
											<div class="text">
												<h4 class="player-name">{{ $attacker['player']['name'] }}</h4>
												<div class="player-position">{{ $attacker['player']['country']['name'] }}</div>
											</div>
										</a>
									</div>
								@endforeach
							</div> <!-- grid -->
						</div> <!-- squad-list squad-list- -->
					</div> <!-- widget -->

					<a href="" title="" target="_blank" class="widget widget-banner">
						<img src="{{ url('../resources/image/temp/banner-728.jpg') }}" alt="" class="ad">
					</a>
				</div> <!-- col-minus-sidebar-1 -->

				@include('layouts.sidebars._team-side-bar')
			</div> <!-- grid -->
		</div>
@endsection

@push('scripts')
	<script type="text/javascript">
		$( document ).ready(function() {
		   $('#headingTabs').children('li').children('p').on('click', function(e){
		   		$(this).parent().addClass('active');
		   		$(this).parent().siblings('li').removeClass('active');
				let target = "."+$(this).data('target');
				console.log(target);
				if(target == '.squad-list-all'){
					$(".squad-list").css('display','block');
				}else{
					if($(target).css('display') == "none"){
						$(target).fadeToggle(400);
						$(target).siblings('.squad-list').slideToggle(400);
					}else{
						$(target).siblings('.squad-list').slideToggle(400);
					}
				}
				
			});
		});
	</script>
@endpush