@extends('frontend.layouts.app')
@section('content')
<style type="text/css">
	.Litheader {
		color: #18AA38;
		font-family: 'Roboto Condensed' ,Arial, sans-serif;
		font-weight: bold;
		font-size: 28px;
		border-bottom: 2px solid #2C6700;
		margin-bottom: 10px;
		letter-spacing: 1px;
	}
</style>

<!--page tile-->
<div class="Litheader">
	Booking Request
</div>



 <div class="card bg-light" style="width: ">
<article class="card-body mx-auto" style="">
	<h4 class="card-title mt-3 text-center">Create Booking Request</h4>
	<p class="text-center">Bookign Date : {{ $jsDate }}</p>
	
	<form id="myForm" >

 <input name="date" class="form-control" placeholder="Full name" type="hidden" value="{{ $jsDate }} ">
	<div class="form-group input-group">
		<div class="input-group-prepend">
		    <span class="input-group-text"> <i class="fa fa-user"></i> </span>
		 </div>
       
        <input name="f_name" class="form-control" placeholder="Full name" type="text" required="required">
    </div> <!-- form-group// -->

    <div class="form-group input-group">
    	<div class="input-group-prepend">
		    <span class="input-group-text"> <i class="fa fa-envelope"></i> </span>
		 </div>
        <input name="email" class="form-control" placeholder="Email address" type="email"  required="required">
    </div> <!-- form-group// -->
   
   	<div class="form-group input-group">
    	<div class="input-group-prepend">
		    <span class="input-group-text"> <i class="fa fa-phone"></i> </span>
		</div>	
    	<input name="phone" class="form-control" placeholder="Phone number" type="text"  required="required">
    </div>

    <div class="form-group input-group">
    	<div class="input-group-prepend">
		    <span class="input-group-text"> <i class="fa fa-building"></i> </span>
		</div>
		<select name="day_even" class="form-control"  required="required">
			<option selected="" value=""> Select Day/Night</option>
			<option value="Day">Day</option>
			<option class="Night">Night</option>
		</select>
	</div> <!-- form-group end.// -->
                                    
    <div class="form-group">
        <button type="submit" class="btn btn-primary btn-block">Submit Request</button>
    </div> <!-- form-group// -->      
                                               
</form>
</article>
</div> <!-- card.// -->




<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

document.getElementById("myForm").addEventListener('submit', (ev) => {
  //Optional, prevents redirect
  ev.preventDefault()  
  //ev.currentTarget is the form element
  var data = new FormData(ev.currentTarget);
  //modification of the code from this answer: https://stackoverflow.com/a/24964658/7448536
  var queryParts = [];
  var entries = data.entries()
  for(var pair of entries)
    queryParts.push(encodeURIComponent(pair[1]))
  	var query = queryParts.join("/")
  	var loc = window.location;
  //reassemble the url
  	var url = "http://kajerkhojay.com/golf_garden/request/data_entry/"+query
  // 	window.open(url);
   	window.location = url;
   	onclick="location.href=url"
 // console.log(url);
})



</script>

@endsection