@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">Room Setup</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">Room Setup</li>
				</ol>
				<div class="clearfix"></div>
			</div>
		</div>		
	</div>
	<div class="col-sm-12">
		<div class="row">			
			<div class="col-sm-12">
				<div class="card">
					<div class="card-header">
						Room Setup List
						<button type="button" data-toggle="modal" data-target="#new-room-price-modal" class="btn btn-info btn-sm float-right">Add New Price</button>
					</div>
					<div class="card-body">
						<div class="table-responsive">
							<table class="table table-bordered table-sm">
								<thead>
									<tr>
										<th class="text-center">Sl.</th>
										<th class="text-center">Room Type</th>
										<th class="text-center">Member Type</th>
										<th class="text-center">Fare</th>
										<th class="text-center">From</th>
										<th class="text-center">To</th>
										<th class="text-center">Is Guest</th>
										<th class="text-center">Action</th>
									</tr>
								</thead>
								<tbody>
									@foreach($room_prices as $room)
									<tr>
										<td class="text-center">{{ $loop->iteration }}</td>
										<td class="text-center">{{ $room->room_type?$room->room_type->name:'' }}</td>
										<td class="text-center">{{ $room->category?$room->category->name:'' }}</td>
										<td class="text-center">{{ $room->fare?number_format($room->fare, 2):'' }}</td>
										<td class="text-center">{{ date('d-m-Y', strtotime($room->effective_from)) }}</td>
										<td class="text-center">{{ date('d-m-Y', strtotime($room->effective_to)) }}</td>
										<td class="text-center">{{ $room->is_guest_price() }}</td>
										<td class="text-center">
											<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#edit-room-price-modal" data-url="{{ route('guest-room.room-setup', $room->id) }}"><i class="fa fa-edit"></i></button>
											<a href="{{ route('guest-room.room-setup', $room->id) }}" class="item-delete-btn btn btn-danger btn-sm"><i class="fa fa-remove"></i></a>
										</td>
									</tr>
									@endforeach
								</tbody>
							</table>
						</div>
					</div>
					<div class="card-footer">
						{{ $room_prices->links() }}
					</div>
				</div>
			</div>	
		</div>
	</div>
</div>
@endsection

@section('modal_content')
<div class="modal fade" id="new-room-price-modal" role="dialog" aria-hidden="true">
	<div class="modal-dialog">
		<form method="POST">
			@csrf			
			<div class="modal-content">
				<div class="modal-header">
					 <h5 class="modal-title" id="exampleModalLabel">New Room Setup</h5>
				</div>
				<div class="modal-body">
					<div class="row">
						<div class="col-sm-6">
							<div class="form-group">
								<label class="control-label">Room Type</label>
								<select name="room_type_id" class="form-control form-control-sm" required="">
									{!! room_types_dropdown() !!}
								</select>
								<input type="hidden" name="action_type" value="new_room_setup" />
							</div>							
						</div>
						<div class="col-sm-6">
							<div class="form-group">
								<label class="control-label">Member Type</label>
								<select name="category_id" class="form-control form-control-sm" required="">
									{!! guest_room_mcategory_dropdown() !!}
								</select>
							</div>							
						</div>
					</div>
					<div class="row">
						<div class="col-sm-6">
							<div class="form-group">
								<label class="control-label">Effective From</label>
								<input type="text" name="effective_from" class="form-control singledatepicker" autocomplete="off" required="" />
							</div>							
						</div>
						<div class="col-sm-6">
							<div class="form-group">
								<label class="control-label">Effective To</label>
								<input type="text" name="effective_to" class="form-control singledatepicker" autocomplete="off" required="" />
							</div>							
						</div>
					</div>
					<div class="row">
						<div class="col-sm-6">
							<div class="form-group">
								<label>Fare</label>
								<input type="number" name="fare" class="form-control" required="">
							</div>
						</div>
						<div class="col-sm-6" style="padding-top: 28px;">
							<div class="form-group">
								<label class="control-label"><input type="checkbox" name="is_guest" class="icheck" value="1" /> Is Guest Price</label> 
								
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="submit" class="btn btn-info">Add</button>			
	                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
				</div>
			</div>			
		</form>
	</div>
</div>

<div class="modal fade" id="edit-room-price-modal" role="dialog" aria-hidden="true">
	<div class="modal-dialog">
		<form method="POST">
			@csrf
			@method('PUT')		
			<div class="modal-content">
				<div class="modal-header">
					 <h5 class="modal-title" id="exampleModalLabel">New Room Setup</h5>
				</div>
				<div class="modal-body">
					<div class="row">
						<div class="col-sm-6">
							<div class="form-group">
								<label class="control-label">Room Type</label>
								<select name="room_type_id" class="form-control form-control-sm" required="">
									{!! room_types_dropdown() !!}
								</select>
								<input type="hidden" name="action_type" value="update_room_setup" />
								<input type="hidden" name="setup_id" value="" />
							</div>							
						</div>
						<div class="col-sm-6">
							<div class="form-group">
								<label class="control-label">Member Type</label>
								<select name="category_id" class="form-control form-control-sm" required="">
									{!! guest_room_mcategory_dropdown() !!}
								</select>
							</div>							
						</div>
					</div>
					<div class="row">
						<div class="col-sm-6">
							<div class="form-group">
								<label class="control-label">Effective From</label>
								<input type="text" name="effective_from" class="form-control singledatepicker" autocomplete="off" required="" />
							</div>							
						</div>
						<div class="col-sm-6">
							<div class="form-group">
								<label class="control-label">Effective To</label>
								<input type="text" name="effective_to" class="form-control singledatepicker" autocomplete="off" required="" />
							</div>							
						</div>
					</div>
					<div class="row">
						<div class="col-sm-6">
							<div class="form-group">
								<label>Fare</label>
								<input type="number" name="fare" class="form-control" required="">
							</div>
						</div>
						<div class="col-sm-6" style="padding-top: 28px;">
							<div class="form-group">
								<label class="control-label"><input type="checkbox" name="is_guest" class="icheck" value="1" /> Is Guest Price</label> 
								
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="submit" class="btn btn-info">Add</button>			
	                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
				</div>
			</div>			
		</form>
	</div>
</div>
@endsection

@section('before_body_end')
<style type="text/css">
	.short_cut {
		padding: 5px;
	}
</style>
<script type="text/javascript">
	$('#edit-room-price-modal').on('shown.bs.modal', function(e){
		var button = $(e.relatedTarget);
		var url = button.data('url');

		var modal = $(this);
		$.ajax({
			method: 'GET',
			url: url,
			success: function(result){
				modal.find('select[name="room_type_id"]').val(result.room_type_id);
				modal.find('select[name="category_id"]').val(result.category_id);
				modal.find('input[name="effective_from"]').val(result.effective_from);
				modal.find('input[name="effective_to"]').val(result.effective_to);
				modal.find('input[name="fare"]').val(result.fare);
				modal.find('input[name="setup_id"]').val(result.id);
				if(result.is_guest == 1){
					modal.find('input[name="is_guest"]').iCheck('check');
				}
			}
		});
	})
</script>
@endsection