@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>

<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 name="form1" id="myForm" >
 <input name="date" class="form-control" placeholder="Full name" type="hidden" value="{{ $jsDate_send }} ">
	<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 value="Night">Night</option>
  		</select>
  	</div>    


   <div class="form-group input-group">
      <div class="input-group-prepend">
        <span class="input-group-text"> <i class="fa fa-pencil"></i> </span>
    </div>  
        <input name="total_person" id="total_person"  class="form-control" required="" placeholder="Enter guest number" type="number"  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" id="mewmber_type" class="form-control"  required="required">
        <option selected="" value="">Select Member Type</option>
        <option value="1">Member</option>
        <option value="0">Non-member</option>
      </select>
    </div> 

    <div class="form-group input-group"  >
      <div class="input-group-prepend">       
      </div>  
      <input name="mem_id" id="member_id" style="display: none;" class="form-control" value="0" placeholder="Enter Member ID" type="number"  required="required">
    </div>

    <div class="form-group input-group"  >
      <div class="input-group-prepend">       
      </div>  
      <input name="occupation" id="occupation" style="display: none;" class="form-control" value="0" placeholder="Enter occupation" type="text"  required="required">
    </div>

    <div class="form-group input-group"  >
      <div class="input-group-prepend">       
      </div>  
      <input name="address" id="address" style="display: none;" class="form-control" value="0" placeholder="Enter address" type="text"  required="required">
    </div>

    <div class="form-group input-group">   
      <select name="non_mem_cat" id="non_mem_cat" class="form-control"  required="required" style="display: none;">
        <option selected="" >Select Category</option>
        <option value="1">Defence</option>
        <option value="2">Foreigner</option>
        <option value="3" selected="selected">Civil</option>
      </select>
    </div>
                                     
    <div class="form-group">
        <button type="submit" class="btn btn-success btn-block">Submit Request</button>
    </div> 

</form>
</article>
</div> <!-- card.// -->


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


$('#mewmber_type').on('change', function() {
  var type  = this.value;
//  alert(type);
  if(type == 1){
    $('#member_id').css('display', 'block')
    $('#member_id').val('')
    $('#address').css('display', 'none')
    $('#occupation').css('display', 'none')
    $('#address').val('0')
    $('#occupation').val('0')
    $('#non_mem_cat').css('display', 'none')
  } else if(type == 0){
    $('#member_id').css('display', 'none')
    $('#member_id').val('0')
    $('#address').css('display', 'block')
    $('#address').val('')
    $('#occupation').css('display', 'block')   
    $('#occupation').val('')
    $('#non_mem_cat').css('display', 'block')
  } else if( $('#mewmber_type').has('option').length > 0 ) {
    $('#member_id').css('display', 'none')
    $('#member_id').val('0')
    $('#address').css('display', 'none')
    $('#address').val('0')
    $('#occupation').css('display', 'none')  
    $('#occupation').val('0')
    $('#non_mem_cat').css('display', 'none')
    
  }
});

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://182.160.104.235/golf_garden/request/data_entry/"+query
  // 	window.open(url);
   	window.location = url;
   	onclick="location.href=url"
 // console.log(url);
})



</script>

@endsection