<fieldset style="border: 1px solid #dfffdf;padding: 15px;">
<legend></legend>
<div>
SEAT NUMBER:- <b>{{ seat.seatNumber }}</b>
</div>
<hr>
<div id="form" class="form">
{% if booking %}
<div id="bookingData" class="form">
<table class="table table-sm table-bordered">
<tr>
<th COLSPAN="2" style="text-align: center;">BOOKED</th>
</tr>
<tr>
<th>BOOKED ON</th>
<td>{{ booking.createdAt | date(" l jS F \\a\\t g:ia") }}</td>
</tr>
<tr>
<th>PASSENGER</th>
<td>{{ booking.passenger }}</td>
</tr>
<tr>
<th>PHONE</th>
<td>{{ booking.phone }}</td>
</tr>
<tr>
<th>SEAT</th>
<td>{{ booking.seat.seatNumber }}</td>
</tr>
<tr>
<th>FROM</th>
<td>{{ booking.origin.station.stationName }}</td>
</tr>
<tr>
<th>TO</th>
<td>{{ booking.destination.station.stationName }}</td>
</tr>
<tr>
<th>BOOKED BY</th>
<td>{{ booking.createdBy.person.preferredName }} in {{ bookingStation.station }}</td>
</tr>
<tr>
<th>PAID</th>
<td>KES{{ booking.amount | number_format }}</td>
</tr>
<tr>
<td colspan="2">
<button type="button" class="btn btn-success print" onclick="print('/bus/ticket/{{ booking.id }}')">
<i class="fa fa-print"></i>
Print Ticket
</button>
{# <a href="{{ path('generateTicket', {'ticketId': booking.id }) }}" target="_blank">Ticket</a>#}
</td>
</tr>
</table>
</div>
{% elseif seat.status == 'RESERVED' %}
<table border="1" style="width: 100%">
<thead>
<tr>
<th colspan="2" style="text-align: center;">STATUS - {{ seat.status }}</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: right; width: 40%; padding-right: 20px;">Reserved for</td>
<td>{{ reservation.station.stationName }}</td>
</tr>
<tr>
<td style="text-align: right; width: 40%; padding-right: 20px;">Reserved by</td>
<td>{{ reservation.reservedBy.person.preferredName }}[{{ reservation.reservingStation.stationName }}]</td>
</tr>
{% if user_station.station.id == reservation.reservingStation.id %}
<tr>
<td colspan="2" style="text-align: center;">
<button class="btn btn-warning" onclick="cancelReservation({{ seat.seatNumber }})"><i class="fas fa-window-close"></i> Cancel Reservation</button>
</td>
</tr>
{% endif %}
</tbody>
</table>
{% else %}
{{ form_start(bookingForm, {'attr':{'class':'booking', 'id':'booking_form'}}) }}
<div id="formfields">
{#<div class="row">
<div class="col-lg-10">
<div class="form-group">
<label for="basicpill-firstname-input">Where are you booking from?<span class="require">*</span></label> <br>
{{ form_widget(bookingForm.bookingFrom,{'attr':{'class':'form-control form-select', 'placeholder':''}} ) }}
<div class="invalid-feedback">
{{ form_errors(bookingForm.bookingFrom) }}
</div>
</div>
</div>
</div>#}
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label for="basicpill-firstname-input">Name<span class="require">*</span></label> <br>
{{ form_widget(bookingForm.passenger,{'attr':{'class':'form-control', 'placeholder':''}} ) }}
<div class="invalid-feedback">
{{ form_errors(bookingForm.passenger) }}
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="basicpill-firstname-input">Phone<span class="require">*</span></label><br>
{{ form_widget(bookingForm.phone,{'attr':{'class':'form-control', 'placeholder':''}} ) }}
<div class="invalid-feedback">
{{ form_errors(bookingForm.phone) }}
</div>
</div>
</div>
</div>
{# {{ form_widget(bookingForm.seat,{'attr':{'class':'form-select', 'hidden':true}} ) }}#}
{# <div class="row">#}
{# <div class="col-lg-10">#}
{# <div class="form-group">#}
{# <label for="basicpill-firstname-input">Seat<span class="require">*</span></label>#}
{# #}
{# <ul class="parsley-errors-list filled" id="parsley-id-5" aria-hidden="false">#}
{# {% for error in form_errors(bookingForm.seat) %}#}
{# <li class="parsley-required">{{ error }}</li>#}
{# {% endfor %}#}
{# </ul>#}
{# </div>#}
{# </div>#}
{# </div>#}
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label for="basicpill-firstname-input">From<span class="require">*</span></label> <br>
{{ form_widget(bookingForm.origin,{'attr':{'class':'form-select','placeholder':''}} ) }}
<div class="invalid-feedback">
{{ form_errors(bookingForm.origin) }}
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="basicpill-firstname-input">To<span class="require">*</span></label> <br>
{{ form_widget(bookingForm.destination,{'attr':{'class':'form-select', 'placeholder':''}} ) }}
<div class="invalid-feedback">
{{ form_errors(bookingForm.destination) }}
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label for="basicpill-firstname-input">Amount<span class="require">*</span></label> <br>
{{ form_widget(bookingForm.amount,{'attr':{'class':'form-control', 'placeholder':''}} ) }}
<div class="invalid-feedback">
{{ form_errors(bookingForm.amount) }}
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="basicpill-firstname-input">Paid Via<span class="require">*</span></label> <br>
{{ form_widget(bookingForm.paidVia,{'attr':{'class':'form-select', 'placeholder':''}} ) }}
<div class="invalid-feedback">
{{ form_errors(bookingForm.paidVia) }}
</div>
</div>
</div>
</div>
<div id="mpesa_id">
{% if bookingForm.mpesa is defined %}
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label for="basicpill-firstname-input">Mpesa<span class="require">*</span></label> <br>
{{ form_widget(bookingForm.mpesa,{'attr':{'class':'form-select', 'placeholder':''}} ) }}
<button id="refresh_btn" type="button" class="btn btn-success" style="height: 35px;"><i class="fas fa-circle-notch"></i></button>
<div class="invalid-feedback">
{{ form_errors(bookingForm.mpesa) }}
</div>
</div>
</div>
</div>
{% endif %}
</div>
</div>
<div class="row" style="margin-top: 10px;">
<div class="col-lg-12">
<div class="form-group">
<button type="submit" class="btn btn-success">Save</button>
<button type="button" class="btn btn-warning btn-outline-success" onclick="hideForm(this)">Cancel</button>
</div>
</div>
</div>
{{ form_end(bookingForm) }}
{% endif %}
</div>
</fieldset>
<script>
$(document).ready(function (){
let $paymentType = $('#booking_paidVia');
let $token = $('#booking__token');
$(document).on('change', '#booking_paidVia', function () {
let $form = $(this).closest('form');
let data = {};
data[$token.attr('name')] = $token.val();
data[$paymentType.attr('name')] = $paymentType.val();
console.log(data);
if($("#booking_paidVia").length === 0) {
console.log('#booking_paidVia not available');
}else{
console.log($('#booking_paidVia').html());
}
$.post($form.attr('action'), data).then(function (response){
if(document.getElementById('booking_paidVia')){
// console.log(response);
if($("div#mpesa_id").length === 0) {
console.log('div#mpesa_id not available');
}else{
console.log('div#mpesa_id available');
}
// console.log($($.parseHTML(response)).find("div#mpesa_id"));
// console.log($(response).find("div#mpesa_id").html());
// $('div#mpesa_id').replaceWith($(response).find('div#mpesa_id'));
$('div#mpesa_id').html($(response).find("div#mpesa_id"));
$token = $('#booking__token');
}
})
});
$(document).on('click', '#refresh_btn', function () {
let $form = $(this).closest('form');
let data = {};
data[$token.attr('name')] = $token.val();
data[$paymentType.attr('name')] = $paymentType.val();
$.post($form.attr('action'), data).then(function (response){
if(document.getElementById('booking_paidVia')){
$('div#mpesa_id').html($(response).find('div#mpesa_id'));
$token = $('#booking__token');
}
})
});
$(document).on('submit','form#booking_form',function( event ) {
// $(document).on('submit','form#payment', function (event){
event.preventDefault();
let bookingForm = document.querySelector('#booking_form');
let elements = bookingForm.elements;
let data = {};
for (let i=0;i<elements.length; i++){
console.log(elements[i].id);
data[elements[i].name] = elements[i].value;
/*if(elements[i].name === 'payment[shared]'){
data[elements[i].name] = $('#'+elements[i].id).is(':checked') ? 1: 0;
}else{
data[elements[i].name] = elements[i].value;
}*/
}
console.log(data);
let $form = $(this).closest('form');
Swal.fire({
title: 'Are you sure?',
text: "Do you want to complete booking",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes!'
}).then((result) => {
if (result.isConfirmed) {
$(".se-pre-con").fadeTo(100, 1).slideDown(100, function(){
});
$.post($form.attr('action'), data).then(function (response){
// $('div#formfields').html('');
// $('div#form').html($($.parseHTML(response)).find("div#form"));
// $('tbody#tableBody').html($($.parseHTML(response)).find("tbody#tableBody"));
// $('bodybus').html(response);
// console.log(response);
$('div#bus').html($($.parseHTML(response)).find("div#bus"));
// console.log($('body#bus').html($($.parseHTML(response)).find("body#bus")));
$('.seats li input').click(function(){
let k = $(this).val();
console.log('Awesome '+k);
makeSelection(k);
});
makeSelection({{ seat.seatNumber }})
seats.datagrid('reload');
Swal.fire(
'Done!',
'booking successful',
'success'
);
/*$(".se-pre-con").fadeTo(500, 0).slideUp(500, function(){
});*/
}).fail(function (error){
let response = error.responseText;
$('div#formfields').html('');
$('div#formfields').html($($.parseHTML(response)).find("div#formfields"));
$(".se-pre-con").fadeTo(500, 0).slideUp(500, function(){
Swal.fire(
'Failed!',
'Booking failed, Try again',
'error'
);
});
});
}
})
});
});
function cancelReservation(index){
Swal.fire({
title: 'Are you sure?',
text: "Do you want to cancel reservation",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes!'
}).then((result) => {
if (result.isConfirmed) {
$(".se-pre-con").fadeTo(100, 1).slideDown(100, function(){
});
$.get('/bus/trip/{{ trip.id }}/seat/'+index+'/cancel_reservation').then(function (response){
console.log($($.parseHTML(response)).find("div#seatDetails"));
// $('div#mpesa_id').replaceWith($(response).find('div#mpesa_id'));
$('div#bus').html($($.parseHTML(response)).find("div#bus"));
// $('div#seatDetails').html(response);
$('.seats li input').click(function(){
let k = $(this).val();
console.log('Awesome '+k);
makeSelection(k);
});
makeSelection({{ seat.seatNumber }})
seats.datagrid('reload');
Swal.fire(
'Done!',
'cancellation successful',
'success'
);
//
// $(".se-pre-con").fadeTo(500, 0).slideUp(500, function(){
//
// });
}).fail(function (error){
let response = error.responseText;
// $('div#formfields').html('');
// $('div#formfields').html($($.parseHTML(response)).find("div#formfields"));
$(".se-pre-con").fadeTo(500, 0).slideUp(500, function(){
Swal.fire(
'Failed!',
'Cancellation failed, Try again',
'error'
);
});
});
}
})
}
function print(url){
// $(".se-pre-con").fadeIn("slow");
// printJS(url);
printJS({
printable: url,
type:'pdf',
showModal:true,
modalMessage: 'Downloading receipt please wait!',
onError: function (error) {
console.log(error);
alert('Could not generate receipt please try again ')
}
});
}
</script>