@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 Floor Rooms</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-->
										 @foreach ($floors as $floor)
                                <h3 style="background-color:#284273; color:white; padding:10px; margin-bottom:15px !important;"> {{ $floor->FloorName }}</h3>
                                    @php
                                         $rooms = $room->where('FloorId', $floor->FloorId)->where('RoomId', '!=' ,0)->where('AccommodationId', $accommodationId)->get();
                                         $loopIteration = 0;
                                        //  $totalRooms = count($rooms);
                                    @endphp
                                  
                                    
                                     <div class="row mt-5 mb-5" >
                                         
                                           @foreach ($rooms as $room)

                                                    <div class="col-md-3">
                                                        <div class="column card1">
                                                           
                                                                <div class="card-header1">
                                                                    <a style="pointer-events: none" style="text-align: center" class=" btn btn-warning">{{ $room->RoomName }}</a>
                                                                    <h5 style="color:white;">{{ $room->roomType->RoomTypeName }}</h5>
                                                                </div>

                                                            
                                                            </div>
                                                        </div>
                                                    


                                            @endforeach
                                        </div>
                                        </div>
                            @endforeach
        </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:100px;
        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: 10px;

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



    /* .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>