File: /var/www/vhost/disk-apps/qas.sports-crowd.com/resources/views/statistics/results-carousel.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Estadisticas Equipo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="{{ asset('css/api-football.css') }}">
<style type="text/css">
body {
text-align: center;
display: flex;
flex-flow: column;
align-items: center;
justify-content: space-between;
background-color: transparent;
line-height: normal;
}
p {
margin: 0 0 8px;
}
.container {
padding: 0px 5px;
width: -webkit-fill-available;
}
.card {
background-color: white;
margin: 1px auto;
box-shadow: 1px 1px 1px 1px grey;
border-radius: 10px;
max-width: 640px;
width: -webkit-fill-available;
border: 1px solid lightgrey;
min-height: 135px;
}
.card-title {
color: white;
padding: 3px;
text-transform: uppercase;
font-weight: bold;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.card-div {
display: flex;
justify-content: space-around;
align-items: center;
}
.card-team {
width: -webkit-fill-available;
}
.card-img {
height: 35px;
}
.card-text-date {
color: grey;
font-size: 10px;
}
.card-text-team {
color: black;
font-size: 10px;
}
.card-text-score {
color: black;
font-size: min(6vw, 24px);
min-width: 50px;
}
.card-text-score-winner {
color: black;
font-size: min(6vw, 24px);
font-weight: bold;
min-width: 50px;
}
.card-text-vs {
color: black;
font-size: 24px;
}
.card-text-finalized {
color: black;
font-size: 24px;
height: 18px;
}
.card-text-status {
color: grey;
font-size: 9px;
}
.card-text-match {
color: grey;
font-size: 9px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.item {
margin-bottom: 10px;
}
.carousel-control {
background-image: none !important;
}
.carousel-control span {
color: grey !important;
}
.carousel-indicators {
bottom: -4px !important;
}
.carousel-indicators li {
background-color: grey !important;
}
.carousel-control.left {
margin-left: -15px;
}
.carousel-control.right {
margin-right: -15px;
}
</style>
</head>
<body>
<!-- NEXT MATCHES (PROXIMOS PARTIDOS) -->
@if(isset($data->next_matches) && count($data->next_matches) > 0 && ($data->type == 'all' || $data->type == 'matches') && !isset($data->carousel_matches))
<div class="container">
<div id="nextMatches" class="carousel" data-ride="">
<!-- Indicators
@if(count($data->next_matches) > 1)
<ol class="carousel-indicators">
@foreach($data->next_matches as $key => $nextMatch)
<li data-target="#nextMatches" data-slide-to="{{ $key }}" class="{{ $key == 0 ? 'active' : ''}}"></li>
@endforeach
</ol>
@endif
-->
<!-- Wrapper for slides -->
<div class="carousel-inner">
@foreach($data->next_matches as $key => $nextMatch)
<div class="item {{ $key == 0 ? 'active' : ''}}">
<div class="row card">
@if(count($data->next_matches) > 1)
<p class="card-title" style="background-color: {{ $color }}">@if(isset($nextMatch->last)) Último Partido @elseif(isset($nextMatch->next)) Siguiente Partido @else Próximo Partido @endif {{ ($key+1) }} / {{ count($data->next_matches) }}</p>
@else
<p class="card-title" style="background-color: {{ $color }}">@if(isset($nextMatch->last)) Último Partido @elseif(isset($nextMatch->next)) Siguiente Partido @else Próximo Partido @endif</p>
@endif
<div class="card-div">
<p class="card-text-date">{{ $nextMatch->tournament ?? '' }} · {{ $nextMatch->date ?? '' }} {{ $nextMatch->time ?? '' }}</p>
</div>
<div class="row card-div">
<div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
<div class="card-div">
<div class="card-team">
<img src="{{ $nextMatch->teams[0]->thumbnail ?? asset('/img/teamEmpty.png') }}" onerror="if (this.src != 'error.jpg') this.src = '/img/teamEmpty.png';" class="card-img" alt="Team1">
<p class="card-text-team">@if(isset($nextMatch->teams[0])) {{ $nextMatch->teams[0]->name }} @else Por definir @endif </p>
</div>
@if(isset($nextMatch->last) && isset($nextMatch->teams[0]->score))
<div class="card-score">
@if($nextMatch->teams[0]->score > $nextMatch->teams[1]->score)
<p class="card-text-score-winner">{{ $nextMatch->teams[0]->score }}</p>
@else
<p class="card-text-score">{{ $nextMatch->teams[0]->score }}</p>
@endif
</div>
@endif
</div>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
@if(isset($nextMatch->last)) <p class="card-text-finalized"> - </p> @else <p class="card-text-vs"> vs </p> @endif
@if(isset($nextMatch->last)) <p class="card-text-status"> {{ $nextMatch->status ?? '' }} </p> @endif
</div>
<div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
<div class="card-div">
@if(isset($nextMatch->last) && isset($nextMatch->teams[1]->score))
<div class="card-score">
@if($nextMatch->teams[1]->score > $nextMatch->teams[0]->score)
<p class="card-text-score-winner">{{ $nextMatch->teams[1]->score }}</p>
@else
<p class="card-text-score">{{ $nextMatch->teams[1]->score }}</p>
@endif
</div>
@endif
<div class="card-team">
<img src="{{ $nextMatch->teams[1]->thumbnail ?? asset('/img/teamEmpty.png') }}" onerror="if (this.src != 'error.jpg') this.src = '/img/teamEmpty.png';" class="card-img" alt="Team2">
<p class="card-text-team">@if(isset($nextMatch->teams[1])) {{ $nextMatch->teams[1]->name }} @else Por definir @endif </p>
</div>
</div>
</div>
</div>
<p class="card-text-match">{{ $nextMatch->stage ?? '' }} · {{ $nextMatch->stadium ?? '' }}</p>
</div>
</div>
@endforeach
</div>
@if(count($data->next_matches) > 1)
<!-- Left and right controls -->
<a class="left carousel-control" href="#nextMatches" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#nextMatches" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
@endif
</div>
</div>
@endif
<!-- PREVIOUS MATCHES (ANTERIORES PARTIDOS) -->
@if(isset($data->previous_matches) && count($data->previous_matches) > 0 && ($data->type == 'all' || $data->type == 'matches') && !isset($data->carousel_matches))
<div class="container">
<div id="previousMatches" class="carousel" data-ride="">
<!-- Indicators
@if(count($data->previous_matches) > 1)
<ol class="carousel-indicators">
@foreach($data->previous_matches as $key => $previousMatch)
<li data-target="#previousMatches" data-slide-to="{{ $key }}" class="{{ $key == 0 ? 'active' : ''}}"></li>
@endforeach
</ol>
@endif
-->
<!-- Wrapper for slides -->
<div class="carousel-inner">
@foreach($data->previous_matches as $key => $previousMatch)
<div class="item {{ $key == 0 ? 'active' : ''}}">
<div class="row card">
@if(count($data->previous_matches) > 1)
<p class="card-title" style="background-color: {{ $color }}">@if(isset($previousMatch->next)) Próximo Partido @else Anterior Partido @endif {{ ($key+1) }} / {{ count($data->previous_matches) }}</p>
@else
<p class="card-title" style="background-color: {{ $color }}">@if(isset($previousMatch->next)) Próximo Partido @else Anterior Partido @endif</p>
@endif
<div class="card-div ">
<p class="card-text-date">{{ $previousMatch->tournament ?? '' }} · {{ $previousMatch->date ?? '' }}</p>
</div>
<div class="row card-div">
<div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
<div class="card-div">
<div class="card-team">
<img src="{{ $previousMatch->teams[0]->thumbnail ?? asset('/img/teamEmpty.png') }}" onerror="if (this.src != 'error.jpg') this.src = '/img/teamEmpty.png';" class="card-img" alt="Team1">
<p class="card-text-team">{{ $previousMatch->teams[0]->name }}</p>
</div>
@if(isset($previousMatch->teams[0]->score))
<div class="card-score">
@if($previousMatch->teams[0]->score > $previousMatch->teams[1]->score)
<p class="card-text-score-winner">{{ $previousMatch->teams[0]->score }}</p>
@else
<p class="card-text-score">{{ $previousMatch->teams[0]->score }}</p>
@endif
</div>
@endif
</div>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
@if(isset($previousMatch->next)) <p class="card-text-vs"> vs </p> @else <p class="card-text-finalized"> - </p> @endif
@if(!isset($previousMatch->next)) <p class="card-text-status"> {{ $previousMatch->status ?? '' }} </p> @endif
</div>
<div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
<div class="card-div">
@if(isset($previousMatch->teams[1]->score))
<div class="card-score">
@if($previousMatch->teams[1]->score > $previousMatch->teams[0]->score)
<p class="card-text-score-winner">{{ $previousMatch->teams[1]->score }}</p>
@else
<p class="card-text-score">{{ $previousMatch->teams[1]->score }}</p>
@endif
</div>
@endif
<div class="card-team">
<img src="{{ $previousMatch->teams[1]->thumbnail ?? asset('/img/teamEmpty.png') }}" onerror="if (this.src != 'error.jpg') this.src = '/img/teamEmpty.png';" class="card-img" alt="Team2">
<p class="card-text-team">{{ $previousMatch->teams[1]->name }}</p>
</div>
</div>
</div>
</div>
<p class="card-text-match">{{ $previousMatch->stage ?? '' }} · {{ $previousMatch->stadium ?? '' }}</p>
</div>
</div>
@endforeach
</div>
@if(count($data->previous_matches) > 1)
<!-- Left and right controls -->
<a class="left carousel-control" href="#previousMatches" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#previousMatches" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
@endif
</div>
</div>
@endif
<!-- @if(($data->type == 'all' || $data->type == 'standings' || $data->type == 'standing') && !isset($data->standings) && !isset($data->carousel_results))
<body onload="openSyncApiFootball()"></body>
<script type="text/javascript">
function openSyncApiFootball() {
const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
if (!isMobile) {
window.open('../../../statistics/syncDataApiFootball');
} else {
window.location.pathname = '/statistics/syncDataApiFootball';
}
}
</script>
@endif -->
<!-- STANDINGS (ESTADISTICAS) -->
@if(isset($data->standings))
<div class="container">
<div class="row card">
<p class="card-title" style="background-color: {{ $color }}">Clasificación</p>
{!! $data->standings !!}
</div>
</div>
@endif
<!-- CARRUSEL PARTIDOS DATAFACTORY -->
@if(isset($data->carousel_matches))
{!! $data->carousel_matches !!}
@endif
<!-- CARRUSEL ESTADISTICAS DATAFACTORY -->
@if(isset($data->carousel_results))
{!! $data->carousel_results !!}
@endif
</body>
</html>