@extends('layouts.app')

@section('title','Match - Match | Sport 1')

@section('banners_data')
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
  window.googletag = window.googletag || {cmd: []};
  googletag.cmd.push(function() {
    googletag.defineSlot('/26641721/sport1.bg/d_horizontal_3', [[750, 200], [728, 90], [970, 250], [890, 200], [970, 90]], 'div-gpt-ad-1580308691600-0').addService(googletag.pubads());
    googletag.pubads().enableSingleRequest();
    googletag.pubads().collapseEmptyDivs();
    googletag.enableServices();
  });
</script>
<script>
  window.googletag = window.googletag || {cmd: []};
  googletag.cmd.push(function() {
    googletag.defineSlot('/26641721/sport1.bg/d_horizontal_4', [[728, 90], [750, 200], [970, 250], [890, 200], [970, 90]], 'div-gpt-ad-1580308944343-0').addService(googletag.pubads());
    googletag.pubads().enableSingleRequest();
    googletag.pubads().collapseEmptyDivs();
    googletag.enableServices();
  });
</script>
@endsection

@section('content')

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

	@include('layouts._breadcrumb',['pageName'=> ['Team','vs','Team']])

	<div class="wrap-width" id="match-content-container" data-value="{{ $matchID }}">
		{{-- @include('layouts._league-header') --}}
		<header class="widget widget-heading-large">
				<img src="../resources/image/temp/image_placeholder.png" alt="" class="icon category-logo" id="league-logo">
				<h2 class="title heading-md">
					<a href="" title="" id='league-name'> </a>
				</h2>
			</header>
			<div class="box-generic">
				<div class="widget widget-carousel-5 widget-carousel-matches" id="header-matches">
					<div class="content">
						@for($i=0 ; $i < 6 ; $i++)
							<a href="url" title="title" class="match-entry match-entry-custom {{ 'carousel-5-target'.$i }}">
								<h5 class="match-week">Stage</h5>
								<div class="match-teams">
									<img src="match-url-logo" alt="match-name" class="team-logo-home">
									<div class="match-result">
										<p class="result-content"><em class="time">00:00</em></p>
										<p class="result-status">0 - 0</p>
										
										<p class="result-status">Waiting</p>
									</div>
									<img src="match-url-logo-away" alt="XX United" class="team-logo-away">
								</div>
								<div class="match-teams-names match-teams-names-custom">
									<h6 class="team-name team-home">XX United</h6>
									<h6 class="team-name team-away">XX United</h6>
								</div>
							</a>
						@endfor
					</div>
					<nav class="arrows">
						<button class="prev"></button>
						<button class="next"></button>
					</nav>
				</div>
			</div> <!-- box-generic -->
		<div class="grid">
			<div class="col-minus-sidebar-1">
						<div class="box-generic wrap-padding" id="match-overview">
							
		
								<div data-widgetid="widget-match" data-options='{
								"eventId":"{{ $matchID }}",
								"lang":"bg",
								"apiURL":"https://football.api.sportal365.com",
								"apiKey":"d5cb82a2ee228f92709fb79f3824134a:8e26cc98e71e0b5d731cd14bf7df97c4",
								"oddClient":"sportal",
								"activeTab":"overview",
								"oddProviderIds":[4],
								"mainOddProvider":4}'>
								</div>
						</div>
						<!-- /26641721/sport1.bg/d_horizontal_3 -->
						<div class="widget widget-banner" id='div-gpt-ad-1580308691600-0'>
						  <script>
						    googletag.cmd.push(function() { googletag.display('div-gpt-ad-1580308691600-0'); });
						  </script>
						</div>

						<div class="widget widget-match-head">
							<header class="widget widget-heading-small">
								<h2 class="title heading-md">
									<a href="" title="">VS</a>
								</h2>

								<ul class="heading-tabs">
									<li>
										<a {{-- href="" --}} data-target="#match_overview" title="Преглед">Преглед</a>
									</li>
									<li>
										<a {{-- href="" --}} data-target="#match_goals" title="Голове">Голове</a>
									</li>
									<li>
										<a {{-- href="" --}} data-target="#match_matches" title="Мачове">Мачове</a>
									</li>
									<li>
										<a {{-- href="" --}} data-target="#match_form" title="Форма">Форма</a>
									</li>
									<li>
										<a {{-- href="" --}} data-target="#match_standings" title="Класиране">Класиране</a>
									</li>
									<li>
										<a {{-- href="" --}} data-target="#match_scorer" title="Голмайстори">Голмайстори</a>
									</li>
								</ul>
							</header>

							<div class="widget box-generic head-to-head-teams-widget active-window widget-container" id="match_overview">
								<div class="match-teams-generic">
									<div class="match-team">
										<h6 class="team-name"> </h6>
										<img src="../resources/image/temp/football-ball.png" alt="" class="team-logo">	
									</div>
									<span class="spacer"></span>
									<div class="match-team">
										<img src="../resources/image/temp/football-ball.png" alt="" class="team-logo">	
										<h6 class="team-name"> </h6>
									</div>
									<div class="match-status">
										<div class="match-count"> </div>
										<div class="match-label"> </div>
									</div>
								</div>

								<div class="match-chart">
									<div class="match-chart-left">
										<div class="text">
											<span class="count"> </span>
											<span class="label"> </span>
										</div>

										<div class="circle">
											<span class="circle-fill" style="height: 64px; width: 64px;"></span>
										</div>
									</div>

									<div class="match-chart-center">
										<span class="count"> </span>

										<div class="circle">
											<span class="circle-fill" style="height: 36px; width: 36px;"></span>
										</div>

										<span class="label"> </span>
									</div>

									<div class="match-chart-right">
										<div class="circle">
											<span class="circle-fill" style="height: 100px; width: 100px;"></span>
										</div>
										
										<div class="text">
											<span class="count"> </span>
											<span class="label"> </span>
										</div>
									</div>
								</div> <!-- match-chart -->

								<ul class="match-stats">
									<li class="entry">
										<span class="label"> </span>
										<span class="divider"></span>
										<span class="content"> </span>
									</li>
									<li class="entry">
										<span class="label"> </span>
										<span class="divider"></span>
										<span class="content"> </span>
									</li>
									<li class="entry">
										<span class="label"> </span>
										<span class="divider"></span>
										<span class="content"> </span>
									</li>
									<li class="entry">
										<span class="label"> </span>
										<span class="divider"></span>
										<span class="content"> </span>
									</li>
									<li class="entry">
										<span class="label"> </span>
										<span class="divider"></span>
										<span class="content"> </span>
									</li>
									<li class="entry">
										<span class="label"> </span>
										<span class="divider"></span>
										<span class="content"> </span>
									</li>
								</ul>
							</div> <!-- box -->

							<div class="widget box-generic hidden-window widget-container" id="match_goals">
								<div class="match-goals-widget">
									<div class="match-teams-generic">
										<div class="match-team match-team-1">
											<h6 class="team-name">x</h6>
											<img src="../resources/image/temp/team-5.png" alt="" class="team-logo">	
										</div>
										<span class="spacer"></span>
										<div class="match-team match-team-2">
											<img src="../resources/image/temp/team-1.png" alt="" class="team-logo">	
											<h6 class="team-name">x</h6>
										</div>
										<div class="match-status">
											<div class="match-count">x</div>
											<div class="match-label">Всички голове</div>
										</div>
									</div>

									<div class="match-compare-generic main match-compare">
										<div class="team team-left"></div>
										<div class="bar bar-left match-compare-team-1">
											<span class="bar-fill" style="height: 11px;"></span>
											<span class="bar-label">x</span>
										</div>
										<div class="center">
											<img src="../resources/image/temp/football-ball.png" alt="">
										</div>
										<div class="bar bar-right match-compare-team-2">
											<span class="bar-fill" style="height: 89px;"></span>
											<span class="bar-label">x</span>
										</div>
										<div class="team team-right"></div>
									</div> <!-- match compare -->

									<ul class="match-stats" data-set='false'>								
									</ul>
								</div> <!-- box -->
							</div> <!-- widget -->

							<div class="widget box-generic widget-livescore-list widget-livescore-list-team hidden-window widget-container" id="match_matches">
								<div class="matches-matches">
								</div> <!-- widget -->
							</div>

							<div class="widget box-generic widget-match-form match-form-{{ $matchID }} hidden-window widget-container" id="match_form">
								<div class="">
									<div class="match-teams-generic">
										<div class="match-team match-form-team-1">
											<h6 class="team-name">Chelsea</h6>
											<img src="../resources/image/temp/team-5.png" alt="" class="team-logo">	
										</div>
										<span class="spacer"></span>
										<div class="match-team match-form-team-2">
											<img src="../resources/image/temp/team-1.png" alt="" class="team-logo">	
											<h6 class="team-name">Arsenal</h6>
										</div>
									</div>

									<div class="match-compare-generic main">
										<div class="team team-left"></div>
										<div class="bar bar-left match-form-bar-team-1">
											<span class="bar-fill" style="height: 0px; transition: height 1s;"></span>
											<span class="bar-label">50%</span>
										</div>
										<div class="center">
											<ul class="bar-labels">
												<li class="bar-labels-item">чудесно</li>
												<li class="bar-labels-item">много добро</li>
												<li class="bar-labels-item">добро</li>
												<li class="bar-labels-item">лошо</li>
											</ul>
										</div>
										<div class="bar bar-right match-form-bar-team-2">
											<span class="bar-fill" style="height: 0px; transition: height 1s;"></span>
											<span class="bar-label">100%</span>
										</div>
										<div class="team team-right"></div>
									</div> <!-- match compare -->

									<div class="match-compare-generic footer">
										<div class="team team-left match-form-footer-team-1">
											<a href="" title="">Виж повече</a>
										</div>
										<div class="bar bar-left">
											<div class="match-symbols match-form-symbols-team-1">
												<span class="match-outcome match-w">W</span>
												<span class="match-outcome match-w">W</span>
												<span class="match-outcome match-d">D</span>
												<span class="match-outcome match-l">L</span>
												<span class="match-outcome match-l">L</span>
											</div>
										</div>
										<div class="center"></div>
										<div class="bar bar-right">
											<div class="match-symbols match-form-symbols-team-2">
												<span class="match-outcome match-w">W</span>
												<span class="match-outcome match-w">W</span>
												<span class="match-outcome match-d">D</span>
												<span class="match-outcome match-l">L</span>
												<span class="match-outcome match-l">L</span>
											</div>
										</div>
										<div class="team team-right match-form-footer-team-2">
											<a href="" title="">Виж повече</a>
										</div>
									</div> <!-- match compare -->
								</div> <!-- box -->
							</div> <!-- widget -->

							<div class="widget box-generic widget-match-ranking hidden-window widget-container" id="match_standings">
								<div class="">
									<div class="match-teams-generic">
										<div class="match-team match-rankings-logo-team-1">
											<h6 class="team-name">Chelsea</h6>
											<img src="../resources/image/temp/team-5.png" alt="" class="team-logo">	
										</div>
										<span class="spacer"></span>
										<div class="match-team match-rankings-logo-team-2">
											<img src="../resources/image/temp/team-1.png" alt="" class="team-logo">	
											<h6 class="team-name">Arsenal</h6>
										</div>
									</div>

									<div class="match-compare-generic main">
										<div class="team team-left match-rankings-league-team-1">
											<div class="team-league">
												<img src="../resources/image/temp/category-1.png" alt="" class="logo">
												<h4 class="name">Premier League</h4>
											</div>
										</div>
										<div class="bar bar-left match-rankings-stats-team-1">
											<span class="bar-item primary team_position">1</span>
											<span class="bar-item team_wins">12</span>
											<span class="bar-item team_draws">4</span>
											<span class="bar-item team_losts">3</span>
											<span class="bar-item secondary team_points">40</span>
										</div>
										<div class="center">
											<ul class="bar-labels">
												<li class="bar-labels-item">Позиция</li>
												<li class="bar-labels-item">Победи</li>
												<li class="bar-labels-item">Равенства</li>
												<li class="bar-labels-item">Загуби</li>
												<li class="bar-labels-item">Точки</li>
											</ul>
										</div>
										<div class="bar bar-right match-rankings-stats-team-2">
											<span class="bar-item primary team_position">7</span>
											<span class="bar-item team_wins">11</span>
											<span class="bar-item team_draws">5</span>
											<span class="bar-item team_losts">3</span>
											<span class="bar-item secondary team_points">38</span>
										</div>
										<div class="team team-right match-rankings-league-team-2">
											<div class="team-league">
												<h4 class="name">Premier League</h4>
												<img src="../resources/image/temp/category-1.png" alt="" class="logo">
											</div>
										</div>
									</div> <!-- match compare -->
									
									<div class="match-compare-generic footer">
										<div class="team team-left match-rankings-links-team-1">
											<a href="" title="">Виж повече</a>
										</div>
										<div class="bar bar-left"></div>
										<div class="center">
											<div class="match-season-text match-rankings-season">
												<h5 class="content">2018 / 2019</h5>
												<span class="label">Сезон</span>
											</div>
										</div>
										<div class="bar bar-right"></div>
										<div class="team team-right match-rankings-links-team-2">
											<a href="" title="">Виж повече</a>
										</div>
									</div> <!-- match compare -->
								</div> <!-- box -->
							</div> <!-- widget -->

							<div class="widget box-generic widget-match-topscorers hidden-window widget-container" id="match_scorer">
								<div class="">
									<div class="match-teams-generic">
										<div class="match-team match-top-scorers-team-team-1">
											<h6 class="team-name"> </h6>
											<a href="" title="">
												<img src="../resources/image/temp/team-5.png" alt="" class="team-logo">
											</a>	
										</div>
										<span class="spacer"></span>
										<div class="match-team match-top-scorers-team-team-2">
											<a href="" title="">
												<img src="../resources/image/temp/team-1.png" alt="" class="team-logo">
											</a>
											<h6 class="team-name"> </h6>
										</div>
									</div>
									
									<div class="match-people">
										<div class="match-col match-people-left match-top-scorers-players-team-1">
										</div>

										<div class="match-people-spacer">
											<img src="../resources/image/temp/football-silhouette.png" alt="">
										</div>

										<div class="match-col match-people-right match-top-scorers-players-team-2">
										</div>
									</div> <!-- match-people -->

									<div class="match-season-text match-top-scorers-seasons">
										<h5 class="content"> </h5>
										<span class="label">Сезон</span>
									</div>
								</div> <!-- box -->
							</div> <!-- widget -->
						</div> <!-- widget -->
						<!-- /26641721/sport1.bg/d_horizontal_4 -->
						<div class="widget widget-banner" id='div-gpt-ad-1580308944343-0'>
						  <script>
						    googletag.cmd.push(function() { googletag.display('div-gpt-ad-1580308944343-0'); });
						  </script>
						</div>
					</div>
			@include('layouts.sidebars._match-side-bar')
		</div>
	</div>
@endsection

@push('scripts')
	 <script src="{{ asset('dist/js/custom/desktop/match-desktop.js')}}"></script>
	 <script src="{{ asset('dist/js/custom/desktop/home-desktop.js')}}"></script>
@endpush