@extends('backend.layouts.app')
@section('content')
<div class="container-fluid">
	<div class="row">
		<div class="col-xl-12">
			<div class="breadcrumb-holder">
				<h1 class="main-title float-left">New Booking</h1>
				<ol class="breadcrumb float-right">
					<li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Home</a></li>
					<li class="breadcrumb-item"><a href="{{ route('guest-room.index') }}">Guest Room</a></li>
					<li class="breadcrumb-item active">New Booking</li>
				</ol>
				<div class="clearfix"></div>
			</div>
		</div>		
	</div>
	<div class="col-sm-12">
		<div class="row">			
			<div class="col-sm-4">
				<div class="card">
					<div class="card-body">
						<h2 style="color: #4980b5; text-align: center; font-size: 25px;">Room Information</h2>
						<div id="room-info-container" class="text-center">
							<div id="empty-room">
								<p style="text-align: center;">Select room type to see the information</p>
								<a href="{{ route('guest-room.room-setup') }}" class="btn btn-outline-info">Room Setup</a>								
							</div>
							<div id="room-details">
								
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-sm-8">
				<form method="post" action="{{ route('guest-room.booking.store') }}">
					@csrf
					<div class="card">
						<div class="card-header">
							Booking Information
						</div>
						<div class="card-body">
							@if($errors->any())
							    <div class="alert alert-danger">
							        <ul>
							            @foreach ($errors->all() as $error)
							                <li>{{ $error }}</li>
							            @endforeach
							        </ul>
							    </div>
							@endif							
							<div class="row">
								<div class="col-sm-6">
									<input type="text" name="date" class="form-control book-datepicker" required="" />
								</div>
								<div class="col-sm-6">
									<input type="text" name="booking_no" class="form-control" value="{{ ((rand(1000, 10000) * 99) + 100 + $presentBookingNumber)  }}" readonly />
								</div>
							</div>
							<hr />
							<p>Check Availability</p>
							<div class="row">
								<div class="col-sm-4">
									<input type="text" name="booking_from" class="form-control from-date singledatepicker" autocomplete="off" placeholder="Booking From Date" />
								</div>
								<div class="col-sm-4">
									<input type="text" name="booking_to" class="form-control to-date singledatepicker" autocomplete="off" placeholder="Booking To Date" />
									<input type="hidden" name="booking_days" value="" />
								</div>
								<div class="col-sm-4">
									<select name="room_type_id" class="form-control room-type-id form-control-sm" required>
										{!! room_types_dropdown() !!}
									</select>
								</div>
							</div>
							<hr />
							<p>Apply for Booking</p>
							<div class="form-group">
								<label><input type="radio" name="is_reference" class="icheck" value="0" checked> Member</label>
								<label><input type="radio" name="is_reference" class="icheck" value="1"> Not Member</label>
							</div>
							<div class="row">
								<div class="col-sm-6">
									<input type="text" name="membership_no" class="form-control membership-no" placeholder="Membership No" required />
									<input type="hidden" class="member-id" name="member_id" />
								</div>
								<div class="col-sm-6">
									<input type="text" name="member_name" class="form-control" placeholder="Name" required />								
								</div>
							</div>
							<div class="row mt-2">
								<div class="col-sm-6">
									<input type="text" name="member_mobile" class="form-control" placeholder="Mobile No" />								
								</div>
								<div class="col-sm-6">
									<input type="text" name="member_email" class="form-control" placeholder="Email" required />								
								</div>
							</div>
							<div class="row mt-2">
								<div class="col-sm-12">
									<input type="text" name="member_address" class="form-control" placeholder="Address" />
								</div>
							</div>
							<div class="row mt-2">
								<div class="col-sm-4">
									<div class="form-group">
										<input type="text" name="member_category" class="form-control member-category" readonly required />
										<input type="hidden" name="grmc_id" class="grmc-id" value="" />
									</div>
								</div>
								<div class="col-sm-4">
									<select class="form-control form-control-sm" name="purpose">
										<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-sm-4">
									<input type="text" name="no_guest" class="form-control" placeholder="No of Guest" required />								
								</div>
							</div>
							<hr />
							<p>Payment</p>
							<div class="row mt-2">
								<div class="col-sm-4">
									<input type="number" name="room_rent" class="form-control" placeholder="Fare Per Night" required />								
								</div>
								<div class="col-sm-4">
									<input type="number" name="room_qty" class="form-control" placeholder="Room Number" required />								
								</div>
								<div class="col-sm-4">
									<input type="number" name="total_amount" class="form-control" placeholder="Total Amount" readonly="" required />								
								</div>
							</div>
							<div class="row mt-2">
								<div class="col-sm-4">
									<select name="payment_method_id" class="form-control form-control-sm" required="">
										{!! payment_method_dropdown_options() !!}									
									</select>
								</div>
								<div class="col-sm-4">
									<select class="form-control form-control-sm select2" name="bank_id">
										{!! bank_dropdown() !!}
									</select>
								</div>
								<div class="col-sm-4">
									<input type="text" name="payment_reference" class="form-control" placeholder="Payment Reference" />								
								</div>
							</div>
						</div>
						<div class="card-footer text-right">
							<button type="submit" class="btn btn-info btn-sm">Book</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
@endsection

@section('before_body_end')
<style type="text/css">
	.short_cut {
		padding: 5px;
	}

	#room-details .card-body p {
		text-align: left;
	}
</style>
<script type="text/javascript">
	$(function(){
		$('.book-datepicker').daterangepicker({
            singleDatePicker: true,
            showDropdowns: true,
            autoUpdateInput: true,
            // drops: "up",
            autoApply:true,
            locale: {
                format: 'DD-MM-YYYY',
                daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],
                firstDay: 0
            }
        },
        function(start) {
            this.element.val(start.format('DD-MM-YYYY'));
            this.element.parent().parent().removeClass('has-error');
        },
        function(chosen_date) {
            this.element.val(chosen_date.format('DD-MM-YYYY'));
        });
        
        $('.book-datepicker').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('DD-MM-YYYY'));
        });

        $('.from-date').on('apply.daterangepicker', function(ev, picker){
        	$('.to-date').val(picker.startDate.format('DD-MM-YYYY'));
        	$('.to-date').data('daterangepicker').setStartDate(picker.startDate.format('DD-MM-YYYY'))
        	$('.to-date').data('daterangepicker').setEndDate(picker.startDate.format('DD-MM-YYYY'))
        	$('.from-date').trigger('change');
        });

        $('.to-date').on('apply.daterangepicker', function(ev, picker){
        	$('.to-date').trigger('change');
        });



        $(document).on('change', '.from-date, .to-date, .room-type-id', function(e){
        	var from_date = $('.from-date').val();
        	var to_date = $('.to-date').val();
        	var room_type_id = $('.room-type-id').val();
        	var token = '{{ csrf_token() }}';
        	if(from_date && to_date && room_type_id){
        		var url = '{{ route('guest-room.get-available-room') }}';
        		$.ajax({
        			url: url,
        			method: 'POST',
        			data: {booking_from: from_date, booking_to: to_date, room_type_id: room_type_id, _token: token},
        			dataType: 'json',
        			success: function(result){
        				$('#empty-room').hide();
        				$('input[name="booking_days"]').val(result.booking_days);
        				var html = '<div class="card"><div class="card-header"><img src="{{ url('public') }}/'+result.room.featured_photo+'" style="width: 100%;" /></div>';
        				html += '<div class="card-body"><div class="row"><div class="col-sm-7"><p><strong>Room Type: </strong><span id="room-type-name">'+result.room.name+'</span></p><p><strong>Base Fare: </strong><span id="room-rent">'+result.room.base_fare+'</span></p></div><div class="col-sm-5"><p><strong>Booked: </strong><span id="booked-number">'+(result.room.room_number-result.available)+'</span></p><p><strong>Available: </strong><span id="available-number">'+result.available+'</span></p></div></div></div></div>';
        				$('#room-details').html(html);        				        				
        			},
        			complete: function(xhr, status){
        				$('input[name="booking_days"]').trigger('change');
                    	$('input[name="room_rent"]').trigger('change');
        			}
        		})
        	}
        });

        $(document).on('change, keyup', '.membership-no', function(e){
        	var btn = $(this);
        	var form = $(this).closest('form');
        	if($(this).val()){
        		$.ajax({
        			url: '{{ route("get-member-info") }}?membership_no='+$(this).val(),
                    dataType: 'json',
                    success: function(result){
                    	if(result.status == 'success'){                            
                            form.find('input[name="member_name"]').val(result.data.name);
                            form.find('input[name="member_id"]').val(result.data.member_id);
                            form.find('input[name="member_mobile"]').val(result.data.mobile_no);
                            form.find('input[name="member_email"]').val(result.data.email);
                            form.find('input[name="member_address"]').val(result.data.address);
                            form.find('input[name="member_category"]').val(result.data.booking_category);                            
                        }else{                            
                            form.find('input[name="member_name"]').val('');
                            form.find('input[name="member_id"]').val('');
                            form.find('input[name="member_mobile"]').val('');
                            form.find('input[name="member_email"]').val('');
                            form.find('input[name="member_address"]').val('');
                            form.find('input[name="member_category"]').val('');                              
                        }
                    },
                    error: function(){
                        form.find('input[name="member_name"]').val('');
                        form.find('input[name="member_id"]').val('');
                        form.find('input[name="member_mobile"]').val('');
                        form.find('input[name="member_email"]').val('');
                        form.find('input[name="member_address"]').val('');
                        form.find('input[name="member_category"]').val('');                                   
                    },
                    complete: function(xhr, status){
                    	$('.member-category').trigger('change');
                    	$('input[name="booking_days"]').trigger('change');
                    	$('input[name="room_rent"]').trigger('change');
                    }
        		});
        	}else{
        		form.find('.member-id').val('');
        		form.find('.member-category').val();
        		form.find('.grmc-id').val('');
        		$('.member-category').trigger('change');
        	}
        });

        $(document).on('change', '.room-type-id, input[name="is_reference"], .member-category', function(){
        	var form = $(this).closest('form');

        	var room_type_id = $('.room-type-id').val();
        	var is_reference = $('input[name="is_reference"]:checked').val();
        	var member_category = $('.member-category').val();
        	var token = '{{ csrf_token() }}';
        	if(room_type_id && is_reference && member_category){
        		$.ajax({
        			url: '{{ route('guest-room.get-member-room-fare') }}',
        			method: 'POST',
        			dataType: 'json',
        			data: {room_type_id:room_type_id, is_reference:is_reference, member_category:member_category, _token:token},
        			success:function(result){
        				form.find('input[name="room_rent"]').val(result.fare);
        			},
        			error: function(xhr, status){
        				form.find('input[name="room_rent"]').val('');
        			},
        			complete: function(xhr, status){
        				$('input[name="room_rent"]').trigger('change');        				
        			}
        		});
        	}else{
        		form.find('input[name="room_rent"]').val('');
        	}
        });

        $(document).on('change', 'input[name="room_qty"], input[name="room_rent"], input[name="booking_days"], .member-category', function(e){
        	
	        	var availableRoom = parseInt($('#available-number').text());
	        	if(availableRoom < parseInt($('input[name="room_qty"]').val())){
	        		alert('Invalid Room');
	        		return;
	        	}
	        	var totalFare = (parseInt($('input[name="room_qty"]').val()) * parseInt($('input[name="room_rent"]').val()) * parseInt($('input[name="booking_days"]').val()));
	        	$('input[name="total_amount"]').val(totalFare);
        	
        });


	});
</script>
@endsection