{% extends 'base.html.twig' %}
{% block title %} {{ date|date('D d-M') }}: {{ tennis_venue.venue }}{% endblock %}
{% block body %}
<style>
.table-data th {
height: 70px;
width: 120px;
padding: 0px 10px
}
.table-data td {
height: 150px;
width: 120px;
vertical-align: middle;
}
.table-hour th {
height: 66px;
padding: 0px 10px
}
.table-hour td {
height: 150px;
vertical-align: middle;
}
</style>
{% for message in app.flashes('failed') %}
<div class="alert alert-danger">
{{ message }}
</div>
{% endfor %}
<div class="top-up-dialog col-md-3 shadow p-2 text-center">
<p><strong>Your account balance is too low to book this court. Top-up?</strong></p>
<div class="d-flex justify-content-center">
<button class="btn btn-warning w-50 close-pop-up"> Ignore</button>
<a class="btn btn-primary ml-2 w-50" href="{{ path('payments_new', {type: 'In-coming cash'}) }}">TopUp</a>
</div>
</div>
<div class="bid-dialog col-md-3 shadow-lg text-dark rounded px-0 pb-2">
<div class="py-2 text-center text-light" style="background-color: #e7e7e7"><h4 style="color:#898989"><strong>Bid Your Price</strong></h4></div>
<div class="">
<form class="bid-form px-5 pt-3 py-2" method="post">
<div class="form-group">
<div class="label-bid"></div>
<input type="number" class="bid-input form-control mt-1" name="bid">
</div>
<div class="form-group d-flex">
<input type="submit" name="submit" class="w-50 submit-bid-button btn btn-success d-inline ml-1"
value="Submit">
<input type="submit" name="cancel-submit"
class="w-50 close-bid-button btn btn-danger d-inline" value="Cancel">
</div>
</form>
</div>
</div>
<h1 style="color: red;">{{ tennis_venue.venue }}: {{ date|date('D d-M-Y') }}</h1>
{% include 'tennis_court_availability/parts/venue_header_single_venue.html.twig' %}
{% if tennis_venue.courtSurface != "Mixed" %}
<span style="color: green"> Surface (All Courts):</span> {{ tennis_venue.courtSurface }}<br>
{% endif %}
{% if tennis_venue.floodlights != "Yes (not all)" %}
<span style="color: blue"> Floodlights (All Courts): </span>{{ tennis_venue.floodlights }}
{% endif %}
<hr>
<h3 style="color: blue;">{{ date|date('D d-M-Y') }}</h3>
<div class="row">
<div class="d-flex w-100">
<div>
<table class="table table-hour">
<thead>
<tr>
<th>Hour
<a href={{ path('tennis_court_availability_scrape', {venue: tennis_venue.id, date: date|date('Y-m-d')}) }}>
<i style="font-size: 15px; color: red; background-color: yellow"
class="fas fa-download"></i></a>
</th>
{% if is_granted('ROLE_ACEIFY') and app.user.id != ActiveAceifyClient.findClient(app.user).id %}
<th>
Email
</th>
{% endif %}
</tr>
</thead>
<tbody>
{% for hour in hours %}
<tr>
<td style="text-align: right" data-sort="{{ hour.sort }}"><b>{{ hour.hour }}</b></td>
{% if is_granted('ROLE_ACEIFY') and app.user.id != ActiveAceifyClient.findClient(app.user).id %}
<td style="text-align: center">
{% set client_court_flag = 0 %}
{% for client_court_time in client_court_times %}
{% if client_court_time.date == date and client_court_time.hour == hour.sort %}
{% set client_court_flag =1 %}
<form method="post"
action="{{ path('client_court_times_delete', {'id': client_court_time.id}) }}">
<input type="hidden" name="_token"
value="{{ csrf_token('delete' ~ client_court_time.id) }}">
<button style="background-color: white;border:none"><i
style="color: green" class="fa fa-calendar-check"></i>
</button>
</form>
{% endif %}
{% endfor %}
{% if client_court_flag ==0 %}
<a href="{{ path('client_court_times_new', {date: date|date('Y-m-d'), hour: hour.sort}) }}">
<i style="color: grey" class="fa fa-circle"></i>
</a>
{% endif %}
</td>
{% endif %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="table-data-container">
<table class="table table-responsive table-data">
<thead>
<tr>
{% for i in range(1,number_of_courts) %}
<th style="text-align: center">
<b><u>Court: {{ i }}</u></b><br>
{% if tennis_venue.courtSurface =="Mixed" %}
<span style="color: green"> {{ CourtSurfaceAndFloodlights.returnCourtSurfaceByVenueAndCourt(tennis_venue, i) }} Court; </span>
{% endif %}
{% if tennis_venue.floodlights =="Yes (not all)" %}
{% if CourtSurfaceAndFloodlights.returnFloodlightsByVenueAndCourt(tennis_venue, i) =="Yes" %}
<span style="color: blue"> Floodlights </span>
{% endif %}
{% endif %}
</th>
{% endfor %}
{% include 'tennis_court_availability/parts/weather_headers.html.twig' %}
</tr>
</thead>
<tbody>
{% for hour in hours %}
{% set past_or_future = "default" %}
{% if date|date('Y-m-d') < today|date('Y-m-d') or hour.sort < todayHour and date|date('Y-m-d') == today|date('Y-m-d') %}
<tr style="background-color: whitesmoke">
{% set past_or_future = "Past" %}
{% else %}
{% if hour.sort == todayHour and date|date('Y-m-d') == today|date('Y-m-d') %}
{% set past_or_future = "Future" %}
<tr style="background-color: lightyellow">
{% else %}
<tr>
{% set past_or_future = "Future" %}
{% endif %}
{% endif %}
{% for i in range(1,number_of_courts) %}
{% set availability = "-" %}
{% set id = '' %}
{% set court_cost='' %}
<td style="text-align: center">
{% include 'template_parts/login_or_register_popup.html.twig' %}
{% set court = CourtAvailabilities.getCourtAvailabiliyByVenueDateHourCourt(tennis_venue, date, hour.sort, i) %}
{% if court is not null %}
{% include 'tennis_court_availability/parts/bookings_made_single_court.html.twig' %}
{# Not yet released - Reserve #}
{% if court.available ==1 %}
{% include 'tennis_court_availability/parts/court_not_released_yet_single_court.html.twig' %}
{% endif %}
{# Available #}
{% if court.available == 2 %}
{% include 'tennis_court_availability/parts/court_available_single_court.html.twig' %}
{% endif %}
{# Booked #}
{% if court.available ==3 %}
{% include 'tennis_court_availability/parts/court_fully_booked_single_court.html.twig' %}
{% endif %}
{# Closed #}
{% if court.available ==4 %}
{% include 'tennis_court_availability/parts/court_closed_single_court.html.twig' %}
{% endif %}
{% endif %}
</td>
{% endfor %}
{% include 'tennis_court_availability/parts/weather.html.twig' %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
<hr>
<br>
<br>
<br>
<br>
{% endblock %}
{% block datatable %}
<script>
$(document).ready(function () {
$('.table').DataTable({
'pageLength': 50,
"order": [[0, 'asc']],
"paging": false,
"searching": false,
"bInfo": false,
"responsive": false,
"sort": false
});
});
</script>
<script>
{% if app.user %}
function checkAccountBalance(id) {
var bidPrice = $("#bid-input-reserve" + id).val();
var balance = {{ (Payments.TotalPaymentsMade(ActiveAceifyClient.findClient(app.user)) -
Payments.TotalBookingsCost(ActiveAceifyClient.findClient(app.user))) }};
if (balance < parseInt(bidPrice)) {
$(".close").click();
$(".top-up-dialog").css('display', 'block');
return false;
} else {
return true;
}
}
function checkAccountBalanceConfirm(price) {
{% if is_granted('ROLE_ACEIFY') %}
{% else %}
var balance = {{ (Payments.TotalPaymentsMade(ActiveAceifyClient.findClient(app.user)) -
Payments.TotalBookingsCost(ActiveAceifyClient.findClient(app.user))) }};
if (balance < price) {
$(".close").click();
$(".top-up-dialog").css('display', 'block');
return false;
} else {
return true;
}
{% endif %}
{% endif %}
}
$('.close-pop-up').click(function () {
$(".top-up-dialog").css('display', 'none');
});
var date = '';
var hour = '';
var venue = '';
{# {% endif %}#}
function bid(date, hour, venue) {
date = date;
hour = hour;
venue = venue;
$(".bid-dialog").css('display', 'block');
$(".label-bid").html("<p class='mb-0' style='font-size: 20.5px;color:#878787'><strong>Please enter your bid for the court on " + date + " at " + hour + "h at " + venue + "</strong></p>");
$(".submit-bid-button").click(function (e) {
e.preventDefault();
var bid = $('.bid-input').val();
{# var href = "/tennis/bookings/advanceReservation/" + date + "/" + hour + "/" + venue + "/{{ app.user.id }}/" + bid + ""; #}
$(".bid-dialog").css("display", "none");
window.location.href = href;
});
$(".close-bid-button").click(function (e) {
e.preventDefault();
$(".bid-dialog").css("display", "none");
})
return false;
}
</script>
<script>
/// $("table").removeClass('table-responsive');
</script>
{% endblock datatable %}
{% block additionaljs %}
<script>
$(document).ready(function () {
var height = $('.table-data thead tr th').height();
$('.table-hour thead tr th').height(height);
})
</script>
{% endblock %}