<!DOCTYPE html>
<html lang="en">
<head>
<title>Show Booking</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--===============================================================================================-->
<link rel="icon" type="image/png" href="images/icons/favicon.ico"/>
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/css-hamburgers/hamburgers.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/animsition/css/animsition.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/daterangepicker/daterangepicker.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="css/util.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<!--===============================================================================================-->
<style>
.overlay{
display: none;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 999;
background: rgba(255,255,255,0.8) url("/loader.gif") center no-repeat;
}
body{
text-align: left;
}
/* Turn off scrollbar when body element has the loading class */
body.loading{
overflow: hidden;
}
/* Make spinner image visible when body element has the loading class */
body.loading .overlay{
display: block;
}
</style>
</head>
<body>
<div class="container-contact100">
<div class="wrap-contact100">
<form id="bookingform" method="POST" class="contact100-form validate-form" action="processData.php">
<span class="contact100-form-title">
Show Booking
</span>
<div class="wrap-input100 validate-input" data-validate="Name is required">
<span class="label-input100">Your Name</span>
<input class="input100" type="text" name="name" placeholder="Enter your name" required>
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 validate-input" data-validate = "Valid email is required: ex@abc.xyz">
<span class="label-input100">Your Email</span>
<input class="input100" type="text" name="email" placeholder="Enter your email addess" required>
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 validate-input" >
<span class="label-input100">Your Phone</span>
<input class="input100" type="tel" name="phone" placeholder="Enter your phone" required>
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 validate-input" >
<span class="label-input100">Select Date</span>
<input class="input100" type="date" name="showdate" required>
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 input100-select">
<span class="label-input100">Select the Theme</span>
<div>
<select class="selection-2" onchange="timeupdate()" name="showname" required>
<option value="">Please Select</option>
<option>Egyption Grounds</option>
<option>Burnt Room</option>
<option>The Dream</option>
<option>The Bank Heist</option>
<option>Indian Intelligence Academy</option>
<option>Dead Shot</option>
<option>Break Out</option>
</select>
</div>
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 input100-select">
<span class="label-input100">Select Time Slot</span>
<div>
<select class="selection-2" name="showtime" id="showtimeis" required>
<option value="">Select Show Time</option>
</select>
</div>
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 validate-input" style="display:block;">
<span class="label-input100">No of Players ( Adult / Rs 250 )</span>
<input class="input100" type="number" name="player_adult" id="player_adult" value="" onchange="myChangeFunction(this)" placeholder="No of Players" required>
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 validate-input" style="display:block;">
<span class="label-input100">No of Players ( Children - 10 to 15 Years / Rs 200 )</span>
<input class="input100" type="number" name="player_child_15" id="player_child_15" value="" placeholder="No of Players" onchange="myChangeFunction1(this)" required>
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 validate-input" style="display:block;">
<span class="label-input100">No of Players ( Children - under 10 Years / Rs 175</span>
<input class="input100" type="number" onchange="myChangeFunction2(this)" name="player_child_10" id="player_child_10" value="" placeholder="No of Players" required>
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 validate-input" style="display:block;">
<span class="label-input100">Total Amount</span>
<input class="input100" type="tel" readonly name="budget" id="budget" value="">
<span class="focus-input100"></span>
</div>
<div class="overlay"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
function myChangeFunction(input1) {
var player =input1.value;
var input2 = document.getElementById('budget');
var player_adult = document.getElementById("player_adult").value;
if(player_adult=='')
{
player_adult ='0';
}
var player_child_15 = document.getElementById("player_child_15").value;
if(player_child_15=='')
{
player_child_15 ='0';
}
var player_child_10 = document.getElementById("player_child_10").value;
if(player_child_10=='')
{
player_child_10 ='0';
}
input2.value = parseInt(player_adult*250)+parseInt(player_child_15*200)+parseInt(player_child_10*175);
}
function myChangeFunction1(input1) {
var player =input1.value;
var input2 = document.getElementById('budget');
var player_adult = document.getElementById("player_adult").value;
if(player_adult=='')
{
player_adult ='0';
}
var player_child_15 = document.getElementById("player_child_15").value;
if(player_child_15=='')
{
player_child_15 ='0';
}
var player_child_10 = document.getElementById("player_child_10").value;
if(player_child_10=='')
{
player_child_10 ='0';
}
input2.value = parseInt(player_adult*250)+parseInt(player_child_15*200)+parseInt(player_child_10*175);
}
function myChangeFunction2(input1) {
var player =input1.value;
var input2 = document.getElementById('budget');
var player_adult = document.getElementById("player_adult").value;
if(player_adult=='')
{
player_adult ='0';
}
var player_child_15 = document.getElementById("player_child_15").value;
if(player_child_15=='')
{
player_child_15 ='0';
}
var player_child_10 = document.getElementById("player_child_10").value;
if(player_child_10=='')
{
player_child_10 ='0';
}
input2.value = parseInt(player_adult*250)+parseInt(player_child_15*200)+parseInt(player_child_10*175);
}
</script>
<div class="wrap-input100 validate-input" >
<span class="label-input100">Message</span>
<textarea class="input100" name="message" placeholder="Your message here..."></textarea>
<span class="focus-input100"></span>
</div>
<div class="error"></div>
<div class="container-contact100-form-btn">
<div class="wrap-contact100-form-btn">
<div class="contact100-form-bgbtn"></div>
<button class="contact100-form-btn" type="submit">
<span>
Submit
<i class="fa fa-long-arrow-right m-l-7" aria-hidden="true"></i>
</span>
</button>
</div>
</div>
</form>
</div>
</div>
<div id="dropDownSelect1"></div>
<!--===============================================================================================-->
<script src="vendor/jquery/jquery-3.2.1.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/animsition/js/animsition.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/bootstrap/js/popper.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/select2/select2.min.js"></script>
<script>
$(".selection-2").select2({
minimumResultsForSearch: 20,
dropdownParent: $('#dropDownSelect1')
});
</script>
<!--===============================================================================================-->
<script src="vendor/daterangepicker/moment.min.js"></script>
<script src="vendor/daterangepicker/daterangepicker.js"></script>
<!--===============================================================================================-->
<script src="vendor/countdowntime/countdowntime.js"></script>
<!--===============================================================================================-->
<script>
var dtToday = new Date();
var month = dtToday.getMonth() + 1;
var day = dtToday.getDate();
var year = dtToday.getFullYear();
if(month < 10)
month = '0' + month.toString();
if(day < 10)
day = '0' + day.toString();
var maxDate = year + '-' + month + '-' + day;
$("input[name='showdate']").attr('min', maxDate);
$("#bookingform").submit(function(e) {
e.preventDefault(); // avoid to execute the actual submit of the form.
valid = true;
if (valid && $("input[name='name']").val() == '') {
alert ("please enter your name");
valid = false;
}
if (valid && $("input[name='email']").val() == '') {
alert ("please enter your email");
valid = false;
}
if (valid && $("input[name='phone']").val() == '') {
alert ("please enter your phone");
valid = false;
}
if (valid && $("input[name='showdate']").val() == '') {
alert ("please enter showdate");
valid = false;
}
if (valid && $("select[name='showtime']").val() == 'Select Show Time') {
alert ("please enter showtime");
valid = false;
}
if(!valid){
return;
}
var form = $(this);
var url = form.attr('action');//anypage_that_receive.php
$("body").addClass("loading");
$.ajax({
url: url ,
type: 'POST',
data: form.serialize(),
error: function() {console.log("error");},
success: function(data){
// alert(data);
$(".error").html("Booking success");
$("body").removeClass("loading");
window.location.href='pay.php?id='+data;
}
});
});
$("input[name='showdate']").on('input',function(e){
timeupdate();
});
$("select[name='showname']").on('input',function(e){
timeupdate();
});
function timeupdate(){
var date=$("input[name='showdate']").val();
var showname=$("select[name='showname']").val();
var data = {
'getTimes' : '1',
'datetime': date,
'showname' : showname,
};
$.ajax({
url: 'processData.php' ,
type: 'POST',
data: data,
error: function() {alert("error");},
success: function(data){
$("#showtimeis").html(data);
}
});
}
function date_update(){
alert("date chand ");
}
</script>
<script src="js/main.js"></script>
</body>
</html>