@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-->
<a href="{{route('frontend.facility.guest_room_search')}}" class="btn btn-sm mt-2 btn-primary w-25 float-right"
                    id="right" style="color:white"> 
                Booking Tracking 
            </a> 
<div class="Litheader">
	Guest Room
</div>

<div class="card bg-light">
    <div class="card card-header">
        Add New Booking
        
    </div>
    <div class="card card-body">
        <form autocomplete="off" id="submit_form">
            @csrf()
              <div class="form-row mb-4">
                <div class="col">
                  <input type="text" name="date" class="form-control datePick" readonly required>
                </div>
                <div class="col">
                  <input type="text" id="book_id" name="booking_no" value="{{$member_id}}" class="form-control" placeholder="Booking No" readonly required>
                </div>
              </div>
              <h3>Check Availability</h3>
              <div class="form-row mb-2">
                <div class="col">
                  <input type="text" id="search_checkin" name="booking_from" class="form-control" placeholder="Booking for Days, From" required>
                </div>
                <div class="col">
                  <input type="text" id="search_checkout" name="booking_to" class="form-control" placeholder="Booking for Days, To" required>
                </div>
              </div>
              <div class="form-row mb-4">
                <div class="col-6"> 
                  <select class="custom-select my-1 mr-sm-2" name="room_type_id" id="room_type_id" required>
                    <option value="" selected="" disabled>Choose Room Type</option>
                    @foreach($room_type as $room_types)
                        <option
                            value="{{$room_types->room_type_id}}">
                            {{$room_types->room_type->room_type}}
                        </option>
                    @endforeach
                  </select>
                </div>
              </div>
              <h3 class="mb-2">Apply for Booking</h3>
    			<span  id="alert_text3" style=" text-align:center; color:red; font-weight:800; font-size:15px;"></span>
    			<div class="form-check form-check-inline">
                  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1" checked>
                  <label class="form-check-label" for="inlineRadio1">Member</label>
                </div>
                <div class="form-check form-check-inline">
                  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
                  <label class="form-check-label" for="inlineRadio2">Not Member</label>
                </div>
              <div class="form-row mb-2 mt-2">
                <div class="col" id="member_id">
                  <input type="text" id="cust_id" name="member_id" class="form-control" placeholder="Member Id">
                </div>
                <div class="col">
                  <input type="text" id="user_id" name="name" class="form-control" placeholder="Member Name" required>
                </div>
              </div>
              <div class="form-row mb-2">
                <div class="col">
                  <input type="text" id="mobile_number" name="cell_no" class="form-control" placeholder="Member Cell No" required>
                </div>
                <div class="col">
                  <input type="text" id="email" name="email" class="form-control" placeholder="Member Email" required>
                </div>
              </div>
              <div class="form-row mb-2">
                <div class="col">
                  <input type="text" id="mem_addres" name="address" class="form-control" placeholder="Member Address" required>
                </div>
              </div>
              <div class="form-row mb-2">
                <div class="col">
                  <select class="custom-select my-1 mr-sm-2" name="purpose" required>
                    <option value="" selected="" disabled>Select Purpose</option>
                    <option value="Official">Official</option>
                    <option value="Personal">Personal</option>
                    <option value="Ceremony">Ceremony</option>
                  </select>
                </div>
                <div class="col">
                  <input type="number" name="no_guest" class="form-control" placeholder="No of Guests" required>
                </div>
              </div>
              <div class="form-row mb-2">
                <div class="col">
                  <input type="text" id="room_rent" name="room_rent" class="form-control" placeholder="Room Rent" readonly required>
                </div>
                <div class="col">
                  <input type="number" id="room_qty" min="1" value="1" name="room_qty" class="form-control" placeholder="No of Room" required>
                </div>
              </div>
              <div class="form-row mb-2">
                <div class="col-6">
                  <input type="text" id="total_amount" name="total_amount" class="form-control" placeholder="Total Amount" readonly required>
                </div>
              </div>
              <div class="form-group">
                <button type="submit" id="btnSubmit" class="btn btn-success btn-block">Submit Request</button>
            </div>
        </form>
    </div>
</div>


@endsection
@push('script')
    <script>
$(function() {
  $('.datePick').daterangepicker({
    singleDatePicker: true,
    showDropdowns: true,
    minYear: 1901,
    locale: {
              format: 'DD-MM-YYYY'
        },
    maxYear: parseInt(moment().format('YYYY'),10)
  });
});

if($('#search_checkin, #search_checkout').length){
    // check if element is available to bind ITS ONLY ON HOMEPAGE
    var currentDate = moment().format("DD-MM-YYYY");

    $('#search_checkin, #search_checkout').daterangepicker({
        locale: {
              format: 'DD-MM-YYYY'
        },
        "alwaysShowCalendars": true,
        "minDate": currentDate,
        "maxDate": moment().add('months', 1),
        autoApply: true,
        autoUpdateInput: false
    }, function(start, end, label) {
      // console.log("New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')");
      // Lets update the fields manually this event fires on selection of range
      var selectedStartDate = start.format('DD-MM-YYYY'); // selected start
      var selectedEndDate = end.format('DD-MM-YYYY'); // selected end

      $checkinInput = $('#search_checkin');
      $checkoutInput = $('#search_checkout');

      // Updating Fields with selected dates
      $checkinInput.val(selectedStartDate);
      $checkoutInput.val(selectedEndDate);

      // Setting the Selection of dates on calender on CHECKOUT FIELD (To get this it must be binded by Ids not Calss)
      var checkOutPicker = $checkoutInput.data('daterangepicker');
      checkOutPicker.setStartDate(selectedStartDate);
      checkOutPicker.setEndDate(selectedEndDate);

      // Setting the Selection of dates on calender on CHECKIN FIELD (To get this it must be binded by Ids not Calss)
      var checkInPicker = $checkinInput.data('daterangepicker');
      checkInPicker.setStartDate(selectedStartDate);
      checkInPicker.setEndDate(selectedEndDate);
        total_calculate();
    });

} // End Daterange Picker


$(document).ready(function () { 		
  $('#cust_id').on('blur',function(e){		
	e.preventDefault();		
	var cust_id = $('#cust_id').val();					
	$("#loader").css('display', 'block');		
	$this = this; 		
	$.ajax({
		type: 'get',	
		dataType: 'json',	
		url: "{{ route('frontend.facility.member_info') }}",					
		data: {cust_id: cust_id},
		success: function(data){							  
	      if (data.member_data != null){								
				$('#alert_text3').text(' ');
				$('#user_id').val(data.member_data.member_all_info.full_name);	
				$('#mobile_number').val(data.member_data.member_all_info.mobile_number);	
				$('#email').val(data.member_data.member_all_info.email);	
				$('#mem_addres').val(data.member_data.member_all_info.present_address);				
		   } else {						  		
				$('#alert_text3').text('There is no Member exist!');		
				$('#user_id').val(' ');	
				$('#mobile_number').val(' ');	
				$('#email').val(' ');	
				$('#mem_addres').val(' ');				

		   }
		} 
	});
  });
}); 	

$("#room_type_id").change(function(){
    var room_type_id = $('#room_type_id').val();
  $.ajax({
		type: 'get',	
		dataType: 'json',	
		url: "{{ route('frontend.facility.room_rent') }}",					
		data: {room_type_id: room_type_id},
		success: function(data){							  
	      var room_rent = $('#room_rent').val(data.rent);
	      total_calculate();
		} 
	});
});

$("#room_qty").keyup(function(){
  total_calculate();
});

function total_calculate(){
    var room_rent = $('#room_rent').val();
    var room_qty = $('#room_qty').val();
    var dateDifferences = moment.duration(moment($('#search_checkout').val(), 'DD-MM-YYYY', true)
                    .diff(moment($('#search_checkin').val(), 'DD-MM-YYYY', true))).asDays() + 1;
    $('#total_amount').val(room_rent * room_qty * dateDifferences);
}

$('#submit_form').on('submit', function () {
    event.preventDefault();
    $("#btnSubmit").attr("disabled", true);
    var book_id = $('#book_id').val();
    $.ajax({
            url: "{{ route('frontend.facility.room_booking') }}",
            method: "POST",
            cache: false,
            contentType: false,
            processData: false,
            data: new FormData(this),
            error: function (data) {
                if (data.status === 422) {
                    var errors = $.parseJSON(data.responseText);
                    let allData = '', mainData = '';
                    $.each(errors, function (key, value) {
                        if ($.isPlainObject(value)) {
                            $.each(value, function (key, value) {
                                allData += value + "<br/>";
                            });
                        } else {
                            mainData += value + "<br/>";
                        }
                    });
                    Swal.fire({
                      title: mainData,
                      html: allData,
                      icon: 'error',
                      confirmButtonText: 'Ok'
                    }).then((result) => {
                      if (result.value) {
                        $('#btnSubmit').attr("disabled", false);
                      }
                    })
                }
            },
            success: function (data) {
               Swal.fire({
                  title: data,
                  html: '<p style="font-weight: bold; color: red;">Save your tracking id no '+book_id + '</p>',
                  icon: 'success',
                  showCancelButton: false,
                  confirmButtonColor: '#3085d6',
                  confirmButtonText: 'OK'
                }).then((result) => {
                  if (result.value) {
                    window.location = '{{route('frontend.facility.guest_room')}}';
                  }
                })
            }
        });
});

$( "input[name=inlineRadioOptions]" ).on( "click", function(){
    let data = $(this).val();
    if(data == "option2"){
        $("#member_id").hide();
    }else{
        $("#member_id").show();
    }
});

</script>
@endpush