@extends('adminsection.layouts.master')

@section('title')
	{{$hotel->name}}
	|| @parent
@stop

@section('css')
	@parent
	<style>
		.carousel-thumbnails .carousel-indicators img {
		  max-width: 100px;
		  height: 50px;
		  overflow: hidden;
		  display: block;
		}

		.carousel-thumbnails .carousel-indicators li {
		  height: auto;
		  max-width: 100px;
		  width: 300px;
		  border: none;
		  box-shadow: 1px 3px 5px 0px rgba(0, 0, 0, 0.75);
		}
		.carousel-thumbnails .carousel-indicators li.active {
		  border-bottom: 4px solid #fff;
		}
	</style>

@stop


@section('page-title')
	Room List of {{$hotel->name}} 
@stop

@section('page-header-actions')
	<a href="{{route('room.create', $hotel)}}" class="btn btn-primary btn-sm float-right" data-toggle="tooltip" data-placement="left" title="Create New Hotel Room">
		<i class="icon-plus2"></i> 
		Add Rooms
	</a>
@stop

@section('main-content')
	<div class="row gutters">
	@foreach($rooms as $room)
		<div class="col-xl-3 col-lg-3 col-md-3 col-sm-3">
			<div class="card">
				<div>
					<img class="card-img-top" src="{{asset('uploads/gallery/'.$room->image)}}" alt="{{$room->room_type}}" style="width: 254px; height: 149px;">
				</div>
				
				<div class="card-body">
					<h4 class="card-title">{{$room->room_type}}</h4>
					<p class="card-text">
						Bed: {{$room->bed}}
						<br>Price: BDT {{$room->net_total}}
						@if($room->is_discount == 1) 
							<span style="color: red;">(On Sale)</span>
						@endif

						<br>Max. Adult: {{$room->maximum_adults}}, Max. Kids: {{$room->maximum_kids}}
					</p>
					<p class="card-text">
						
					</p>
					
					<a href="#" class="btn btn-info btn-sm" data-toggle="modal" data-target="#viewRoom{{$room->id}}">View</a>
					
					<a href="{{route('room.edit', $room->id)}}" class="btn btn-success btn-sm">Edit</a>
					
					<a href="#" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#deleteRoom{{$room->id}}">Delete</a>
					
					<a href="{{route('room.inventory', $room)}}" class="btn btn-warning btn-sm" style="margin-top: 5px;">Inventory</a>

					<a href="#" class="btn btn-light btn-sm" data-toggle="modal" data-target="#addDiscount{{$room->id}}" style="margin-top: 5px;">Add Discount</a>
				</div>
			</div>
		</div>

		<!-- Delete Modal -->
		<div class="modal fade" id="deleteRoom{{$room->id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
			<div class="modal-dialog" role="document">
				<form method="post" action="{{route('room.delete', $room->id)}}">
					@csrf
					<div class="modal-content"  style="border-radius: 0px !important;">
						<div class="modal-header">
							<h5 class="modal-title">
								Delete
							</h5>
							<button type="button" class="close" data-dismiss="modal" aria-label="Close">
								<span aria-hidden="true">&times;</span>
							</button>
						</div>
						<div class="modal-body">
							Are you sure to delete {{$room->room_type}}?
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
							<button type="submit" class="btn btn-secondary">Confirm</button>
						</div>
					</div>
				</form>
			</div>
		</div>
		<!-- Delete Modal Ends -->


		<!-- Discount Modal -->
		<div class="modal fade" id="addDiscount{{$room->id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
			<div class="modal-dialog" role="document">
				<form method="post" action="{{route('discount.post')}}">
					@csrf
					<div class="modal-content"  style="border-radius: 0px !important;">
						<div class="modal-header">
							<h5 class="modal-title">
								Discount
							</h5>
							<button type="button" class="close" data-dismiss="modal" aria-label="Close">
								<span aria-hidden="true">&times;</span>
							</button>
						</div>
						<div class="modal-body">
							<div class="form-row">
								<div class="form-group col-md-12">
									<label class="col-form-label">Current Price</label>
									<input type="text" class="form-control" value="BDT {{$room->price}}" disabled="true">
									<input type="hidden" name="hotel_id" value="{{$room->hotel_id}}">
									<input type="hidden" name="room_id" value="{{$room->id}}">
								</div>
							</div>

							<div class="form-row">
								<div class="form-group col-md-12">
									<label>Price after discount</label>
									<input type="text" name="discount_price" class="form-control" value="0" required="true">
								</div>
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
							<button type="submit" class="btn btn-success">Confirm</button>
						</div>
					</div>
				</form>
			</div>
		</div>
		<!-- Discount Modal Ends -->

		<!-- Modal -->
		<div class="modal fade" id="viewRoom{{$room->id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
			<div class="modal-dialog modal-lg" role="document">
				<div class="modal-content "  style="border-radius: 0px !important;">
					<div class="modal-header">
						<h5 class="modal-title" id="exampleModalLabel">
							{{$room->room_type}}
						</h5>
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
					</div>
					<div class="modal-body">
						<div class="row">
							<div class="col-md-8">
								<!--Carousel Wrapper-->
								<div id="carousel-thumb{{$room->id}}" class="carousel slide carousel-fade carousel-thumbnails" data-ride="carousel">
								    <!--Slides-->
								    <div class="carousel-inner" role="listbox">
								        @foreach($room->images as $image)
									        <div @if($loop->iteration == 1) class="carousel-item active" @else class="carousel-item" @endif>
									            <img class="d-block w-100" src="{{asset('uploads/gallery/'.$image->image)}}" alt="First slide" style="width: 502px; height: 221px;">
									        </div>
								        @endforeach
								    </div>
								    <!--/.Slides-->
								    <!--Controls-->
								    <a class="carousel-control-prev" href="#carousel-thumb{{$room->id}}" role="button" data-slide="prev">
								        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
								        <span class="sr-only">Previous</span>
								    </a>
								    <a class="carousel-control-next" href="#carousel-thumb{{$room->id}}" role="button" data-slide="next">
								        <span class="carousel-control-next-icon" aria-hidden="true"></span>
								        <span class="sr-only">Next</span>
								    </a>
								    <!--/.Controls-->
								    <ol class="carousel-indicators">
								        @foreach($room->images as $image)
									        <li data-target="#carousel-thumb{{$room->id}}" data-slide-to="{{$loop->iteration - 1}}" class="active"> 
									        	<img class="d-block w-100" src="{{asset('uploads/gallery/'.$image->image)}}" class="img-fluid"> 
									        </li>
									    @endforeach
								    </ol>
								</div>
								<!--/.Carousel Wrapper-->
                        
							</div>

							<div class="col-md-4" >
								<p><b>Room Size:</b> {{$room->size}}</p>

								<p><b>Bed:</b> {{$room->bed}}</p>

								<p>{{$room->special_feature}}</p>

								<p><b>Room Facilities:</b>	
									<br>
									{!! $room->facilities !!}
								</p>

								<p>
									@if($room->free_wifi == 1)
										<span class="icon-connection" style="color: green;"></span> 
										Free Wifi
									@endif
								</p>

								<p>
									@if($room->air_conditioning == 1)
										<span class="icon-ac_unit" style="color: green;"></span> 
										Air Conditioning
									@endif
								</p>
							</div>
						</div>

						<div class="row" style="background-color: #E9F0FA; min-height: 100px; padding: 15px;">
							<div class="col-md-8" >
								<p>
									<b>{{$room->room_type}}</b> 
								</p>

								<p>
									<b>Sleep:</b> <br>
									Maximum Adult
									@for($i=0; $i < $room->maximum_adults; $i++)<i class="icon-man" style="padding-left: 0px !important;"></i>
									@endfor,
									Maximum Kids 
									@for($i=0; $i < $room->maximum_kids; $i++)<i class="icon-man"></i>
									@endfor
								</p>
								<p>
									<span class="icon-checkmark2" style="color: green"></span>
									{{$room->custom_field}}
								<p>
								<p>
									<span class="icon-checkmark2" style="color: green"></span>
									{{$room->items_included_with_price}}
								</p>
							</div>

							<div class="col-md-4">
								<h4>BDT {{$room->net_total}} / night</h4>
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
					</div>
				</div>
			</div>
		</div>
	@endforeach
	</div>
@stop


@section('js')
	@parent
	<script>

		document.documentElement.setAttribute("lang", "en");
		document.documentElement.removeAttribute("class");

		axe.run( function(err, results) {
		  console.log( results.violations );
		} );

		
	</script>

@stop

<!-- https://codepen.io/thdoan/pen/zzPZOe -->