@extends('layouts.main-layout')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
@section('title')
All Users | Dashboard
@endsection

@section('content')


												<!--begin::Svg Icon | path: icons/duotune/ecommerce/ecm002.svg-->
											
											
											<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
						<!--begin::Post-->
						<div class="post d-flex flex-column-fluid" id="kt_post">
							<!--begin::Container-->
							<div id="kt_content_container" class="container-xxl">
								<!--begin::Row-->
					
								<!--end::Row-->
								<!--begin::Tables Widget 9-->
								
								<!--end::Tables Widget 9-->
								<!--begin::Tables Widget 10-->
							
								<!--end::Tables Widget 10-->
							
								<!--begin::Tables Widget 12-->
								
								<!--end::Tables Widget 12-->
								<!--begin::Tables Widget 13-->
								<div class="card mb-5 mb-xl-8">
								    
									<!--begin::Header-->
									<div class="card-header border-0 pt-5">
										<h3 class="card-title align-items-start flex-column">
											<span class="card-label fw-bolder fs-3 mb-1">Current Accommodation Room Status</span>
		
										</h3>
									</div>
									<!--end::Header-->
									<div class="card-header border-0 pt-6">
										<!--begin::Card title-->
										<div class="card-title">
											<!--begin::Search-->
											<div class="d-flex align-items-center position-relative my-1">
												<!--begin::Svg Icon | path: icons/duotune/general/gen021.svg-->
												<span class="svg-icon svg-icon-1 position-absolute ms-6">
													<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
														<rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2" rx="1" transform="rotate(45 17.0365 15.1223)" fill="black" />
														<path d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z" fill="black" />
													</svg>
												</span>
												<!--end::Svg Icon-->
												<input type="text" data-kt-customer-table-filter="search" id="myInput" class="form-control form-control-solid w-250px ps-15" placeholder="Search Rooms" />
											</div>
											<!--end::Search-->
										</div>
										<!--begin::Card title-->
										<!--begin::Card toolbar-->
										<div class="card-toolbar">
											<!--begin::Toolbar-->
											<!--<div class="d-flex justify-content-end" data-kt-customer-table-toolbar="base">-->
												<!--begin::Filter-->
											
												<!--begin::Add customer-->
											<!--	<a href="{{route('admin.users.create')}}"><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_add_customer">Add User</button></a>-->
												<!--end::Add customer-->
											<!--</div>-->
											<!--end::Toolbar-->
											<!--begin::Group actions-->
											<!--<div class="d-flex justify-content-end align-items-center d-none" data-kt-customer-table-toolbar="selected">-->
											<!--	<div class="fw-bolder me-5">-->
											<!--	<span class="me-2" data-kt-customer-table-select="selected_count"></span>Selected</div>-->
											<!--	<button type="button" class="btn btn-danger" data-kt-customer-table-select="delete_selected">Delete Selected</button>-->
											<!--</div>-->
											<!--end::Group actions-->
										</div>
										<!--end::Card toolbar-->
									</div>
									<!--begin::Body-->
									<div class="card-body py-3">
										<!--begin::Table container-->
										<div class="table-responsive">
											<!--begin::Table-->
									           <div class="row" >
                        
                        @foreach ($rooms as $room)
                                <div class="col-md-3">
                                     @if($room->HouseKeepingId == 1)
                                        <div class="column card1" style="background-color: #DE301F">
                                            <div class="">
                                                <div class="card-header1">
                                                    <b id="roomNo">{{ $room->RoomName }}</b>
                                                    <h5 id="roomType" >{{ $room->roomType ? $room->roomType->RoomTypeName: '' }}</h5>
                                            </div>

                                            <div class="card-body1 column">

                                            </div>
                                            </div>
                                        </div>

                                        @elseif($room->HouseKeepingId == 2)
                                        <div class="column card1" style="background-color: #4646C2">
                                            <div class="">
                                                <div class="card-header1">
                                                    <b id="roomNo">{{ $room->RoomName }}</b>
                                                    <h5 id="roomType" >{{ $room->roomType ? $room->roomType->RoomTypeName: '' }}</h5>
                                            </div>

                                            <div class="card-body1 column">

                                            </div>
                                            </div>
                                        </div>

                                        @elseif($room->HouseKeepingId == 3)
                                        <div class="column card1" style="background-color: #5BC246">
                                            <div class="">
                                                <div class="card-header1">
                                                    <b id="roomNo">{{ $room->RoomName }}</b>
                                                    <h5 id="roomType" >{{ $room->roomType ? $room->roomType->RoomTypeName: '' }}</h5>
                                            </div>

                                            <div class="card-body1 column">

                                            </div>
                                            </div>
                                        </div>

                                        @elseif($room->HouseKeepingId == 4)
                                        <div class="column card1" style="background-color: #211B21">
                                            <div class="">
                                                <div class="card-header1">
                                                    <b id="roomNo">{{ $room->RoomName }}</b>
                                                    <h5 id="roomType" >{{ $room->roomType ? $room->roomType->RoomTypeName: '' }}</h5>
                                            </div>

                                            <div class="card-body1 column">

                                            </div>
                                            </div>
                                        </div>

                                        @else
                                        <div class="column card1" style="background-color: #5BC246">
                                            <div class="">
                                                <div class="card-header1">
                                                    <b id="roomNo">{{ $room->RoomName }}</b>
                                                    <h5 id="roomType" >{{ $room->roomType ? $room->roomType->RoomTypeName: '' }}</h5>
                                            </div>

                                            <div class="card-body1 column">

                                            </div>
                                            </div>
                                        </div>
                                    @endif


                                </div>




                        @endforeach
                    </div>
                    </div>
        </div>
											
																		<!--end::Table-->
										
										
				
										<!--end::Table container-->
									</div>
									<!--begin::Body-->
								</div>
								<!--end::Tables Widget 13-->
								
							</div>
							
							
							<!--end::Container-->
						</div>
						<!--end::Post-->
					</div>
											
											
											
												<!--end::Svg Icon-->
											
											</div>
											<!--end::Body-->
											
											
										
									

					@endsection
<style>
    .svg-icon-3{
        color:yellow;
    }
     .card1{
        height:130px;
        width:150px;
        border:1px solid grey;
        margin-bottom:20px;
        text-align: center;
        border-radius: 10px;
        background-color: #A43e96;
        color:white;
        padding: 10px;
 }
    .card-header1{
        height:60px;
        color:white;
        padding-top: 30px;

    }
    .card-body1{
        height:200px;
        padding-top:40px;
    }



    /* .column {
  float: left;
  width: 300px;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
/* .row:after {
  content: "";
  display: table;
  clear: both;
} */ */

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

    
    #element1 {float:left;}
#element2 {padding-left : 0px; float:left;}
</style>	

<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $(".card1").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>