@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 Rooms | 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 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-->


																				 <div class="fixed-action-btn">
            <a href="#create-rooms-modal" class="modal-trigger btn-floating btn-large red waves-effect waves-light">
                <i class="btn btn-primary">Add Room</i>
            </a>
        </div>
        <div id="create-rooms-modal" class="modal" >
            <div class="modal-content row mt-2 p-5 " style="height: 100%; margin-right:-10px !important;" >
                <div class="row">
                    <div class="col-sm-11"></div>
                    <div class="col-sm-1">

                        <a href="#" class="modal-close-btn modal-close text-right mb-2">
                            <i class="fa fa-close grey-text"></i>
                        </a>
                    </div>
                </div>
                <h4 class="text-center">How many rooms do you want to create?</h4>
                <br>
                <div class="input-field col-sm-12 m6 offset-m3">
                    <select name="total-rooms" id="total-rooms" class="form-select">
                        @for($i=0; $i<=40; $i++)
                            <option value="{{$i}}">{{$i}}</option>
                        @endfor
                    </select>
                    <label for="total-rooms" class="form-label">Total Rooms</label>
                </div>
            </div>
        </div>
        <form action="{{route('admin.rooms.create')}}" id="total-rooms-form">
            <input type="hidden" name="rooms" id="rooms" value="1">
        </form>





												<!--<a href="{{route('admin.rooms.create')}}"><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_add_customer">Add Room</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-->
											<table class="table table-row-bordered table-row-gray-100 align-middle gs-0 gy-3 " id="myTable">
												<!--begin::Table head-->
												<thead>
													<tr class="fw-bolder text-muted ">
														<th class="w-25px">
															<div class="form-check form-check-sm form-check-custom form-check-solid">
																<input class="form-check-input" type="checkbox" value="1" data-kt-check="true" data-kt-check-target=".widget-13-check" />
															</div>
														</th>
														<th class="min-w-55px">#</th>
														<th class="min-w-80px">Room Id</th>
														<th class="min-w-180px">Room Name</th>
														<th class="min-w-180px">Room Type</th>
														<th class="min-w-145px">Floor</th>

														<th class="min-w-200px">Create Date</th>
														<!--<th class="min-w-140px">Status</th>-->
														<th class="min-w-150px">Actions</th>


													</tr>
												</thead>
												<!--end::Table head-->
												<!--begin::Table body-->
												<tbody>
												     @forelse($rooms as $i => $room)
													<tr>
														<td>
															<div class="form-check form-check-sm form-check-custom form-check-solid">
																<input class="form-check-input widget-13-check" type="checkbox" value="1" />
															</div>
														</td>
														<td>
															<span  class="text-dark  text-hover-primary fs-6">{{$i + $rooms->firstItem()}}</span>
														</td>
														<td>
															<span  class="text-dark  text-hover-primary d-block mb-1 fs-6">{{$room->RoomId}}</span>

														</td>
														<td>
															<span  class="text-dark  text-hover-primary d-block mb-1 fs-6">{{$room->RoomName}}</span>

														</td>

														<!---->
														  @if($room->roomType)

														<td>
															<span class="text-dark  text-hover-primary d-block mb-1 fs-6">{{$room->roomType->RoomTypeName}}</span>

														</td>
														@else
                            <td>-</td>
                               @endif

                        @if($room->floor)

															<td>
															<span class="text-dark  text-hover-primary d-block mb-1 fs-6">{{$room->floor->FloorName}}</span>

														</td>
														 @else
                            <td>-</td>
                        @endif


															<td>
															<span class="text-dark  text-hover-primary d-block mb-1 fs-6">{{$room->CreateDate->diffForHumans()}}</span>

														</td>

														<!--<td>-->
														<!--	<span class="badge badge-light-success">Approved</span>-->
														<!--</td>-->
														<td class="">
															<!--<a href="#" class="btn btn-icon btn-bg-success btn-active-color-primary btn-sm me-1">-->
																<!--begin::Svg Icon | path: icons/duotune/general/gen019.svg-->
															<!--	<span class="svg-icon svg-icon-3">-->
															<!--		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">-->
															<!--			<path d="M17.5 11H6.5C4 11 2 9 2 6.5C2 4 4 2 6.5 2H17.5C20 2 22 4 22 6.5C22 9 20 11 17.5 11ZM15 6.5C15 7.9 16.1 9 17.5 9C18.9 9 20 7.9 20 6.5C20 5.1 18.9 4 17.5 4C16.1 4 15 5.1 15 6.5Z" fill="black" />-->
															<!--			<path opacity="0.3" d="M17.5 22H6.5C4 22 2 20 2 17.5C2 15 4 13 6.5 13H17.5C20 13 22 15 22 17.5C22 20 20 22 17.5 22ZM4 17.5C4 18.9 5.1 20 6.5 20C7.9 20 9 18.9 9 17.5C9 16.1 7.9 15 6.5 15C5.1 15 4 16.1 4 17.5Z" fill="black" />-->
															<!--		</svg>-->
															<!--	</span>-->
																<!--end::Svg Icon-->
															<!--</a>-->

															 @hasAccess('Edit Room')


															<a id="element1" href="{{route('admin.rooms.edit',$room->RoomId)}}" class="btn btn-icon btn-bg-warning btn-active-color-danger btn-sm me-1">
																<!--begin::Svg Icon | path: icons/duotune/art/art005.svg-->

																<span class="svg-icon svg-icon-3">
																	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
																		<path opacity="0.3" d="M21.4 8.35303L19.241 10.511L13.485 4.755L15.643 2.59595C16.0248 2.21423 16.5426 1.99988 17.0825 1.99988C17.6224 1.99988 18.1402 2.21423 18.522 2.59595L21.4 5.474C21.7817 5.85581 21.9962 6.37355 21.9962 6.91345C21.9962 7.45335 21.7817 7.97122 21.4 8.35303ZM3.68699 21.932L9.88699 19.865L4.13099 14.109L2.06399 20.309C1.98815 20.5354 1.97703 20.7787 2.03189 21.0111C2.08674 21.2436 2.2054 21.4561 2.37449 21.6248C2.54359 21.7934 2.75641 21.9115 2.989 21.9658C3.22158 22.0201 3.4647 22.0084 3.69099 21.932H3.68699Z" fill="black" />
																		<path d="M5.574 21.3L3.692 21.928C3.46591 22.0032 3.22334 22.0141 2.99144 21.9594C2.75954 21.9046 2.54744 21.7864 2.3789 21.6179C2.21036 21.4495 2.09202 21.2375 2.03711 21.0056C1.9822 20.7737 1.99289 20.5312 2.06799 20.3051L2.696 18.422L5.574 21.3ZM4.13499 14.105L9.891 19.861L19.245 10.507L13.489 4.75098L4.13499 14.105Z" fill="black" />
																	</svg>
																</span>
																<!--end::Svg Icon-->

															</a>

															@endhasAccess
															 @hasAccess('Delete Room')
															 		  <form method="post" action="{{route('admin.rooms.destroy',$room->RoomId)}}" id="delete-form-{{$room->RoomId}}" class="hide">
                                    @csrf
                                    @method('DELETE')
															<button id="element2" class="btn btn-icon btn-bg-danger btn-active-color-primary btn-sm" type="submit" onClick="alert('Do you really want to Delete it?')">
																<!--begin::Svg Icon | path: icons/duotune/general/gen027.svg-->
																<span class="svg-icon svg-icon-3">
																	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#ffffff;" style="color:green;" >
																		<path d="M5 9C5 8.44772 5.44772 8 6 8H18C18.5523 8 19 8.44772 19 9V18C19 19.6569 17.6569 21 16 21H8C6.34315 21 5 19.6569 5 18V9Z" fill="#ffffff;" />
																		<path opacity="1" d="M5 5C5 4.44772 5.44772 4 6 4H18C18.5523 4 19 4.44772 19 5V5C19 5.55228 18.5523 6 18 6H6C5.44772 6 5 5.55228 5 5V5Z" fill="#ffffff;" />
																		<path opacity="1" d="M9 4C9 3.44772 9.44772 3 10 3H14C14.5523 3 15 3.44772 15 4V4H9V4Z" fill="#ffffff;" />
																	</svg>
																</span>
																<!--end::Svg Icon-->
														</button>
                                </form>


													{{--		@component('components.confirm',[
                                    'modal' => 'modal-'.$user->UserId,
                                    'id' => 'delete-form-'.$user->UserId,
                                    'title' => 'User'
                                ])
                                @endcomponent --}}
                                {{--  href="#modal-{{$user->UserId}}"--}}

                                @endhasAccess
														</td>
													</tr>
					@empty
					@endforelse
												</tbody>
												<!--end::Table body-->
											</table>

											  <div class="center-align mb-3">
       {{--     {{$users->appends(request()->query())->links('vendor.pagination.default')}}  --}}
       {{$rooms->links()}}
        </div>

																		<!--end::Table-->
										</div>


										<!--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;
    }

    #element1 {float:left;}
#element2 {padding-left : 0px; float:left;}



.col1{
        border:1px solid lightgray;
        padding:7px !important;
        font-size:12px !important;

    }
    .row{
        margin-top:0px !important;
        margin-bottom: 0px !important;
        width:100% !important;
    }
    .folio-detail-row{
        margin-top:0px !important;
        margin-bottom: 0px !important;
        width:100% !important;
        padding: 0px !important;

    }
    .folio-wrapper{
        margin-top:0px !important;
        margin-bottom: 0px !important;
        width:100% !important;
        padding:0px !important;



    }
    /* .modal1{
        padding-left:45px;

    } */


.bookingDetailModal {
overflow: auto;
/*width:800px !important;*/
}

table {
background-color: #fff;

}
table thead th{
background: rgb(40, 66, 115);
color: #fff;
border-radius: 0px !important;
}
table thead th label,
table thead th input,
table thead th span,
table thead th abbr{
color: #fff;
}
table tbody td input,
table tbody td span,
table tbody td label,
table tbody td button,
.datepicker-calendar .selects-container{
color: #616161;
}
.datepicker-calendar .selects-container input,
.datepicker-calendar table tbody td input,
.datepicker-calendar table tbody td span,
.datepicker-calendar table tbody td label,
.datepicker-calendar table tbody td button,
.datepicker-calendar table thead th label,
.datepicker-calendar table thead th input,
.datepicker-calendar table thead th span,
.datepicker-calendar table thead th abbr,
.datepicker-calendar table thead,
.datepicker-calendar table thead th{
background-color: transparent;
color: #616161;
}

.datepicker-table th, .datepicker-table td{
border: none;
}

/*Modal Overlay*/
.modal-overlay:nth-of-type(n+4)
{
opacity: 0 !important;
}

/*Error Pages*/
.error-page p.error-desc {
font-size: 2em;
text-align: center;
font-weight: 300;
}

.error-page h1.error-heading {
color:#fff;
text-align: center;
font-size: 15em;
font-weight: 500;
text-shadow: #797D7F 1px 1px, #797D7F 2px 2px, #797D7F 3px 3px, #797D7F 4px 4px, #797D7F 5px 5px, #797D7F 6px 6px, #797D7F 7px 7px, #797D7F 8px 8px, #797D7F 9px 9px, #797D7F 10px 10px, #797D7F 11px 11px, #797D7F 12px 12px, #797D7F 13px 13px, #797D7F 14px 14px, #797D7F 15px 15px, #797D7F 16px 16px, #797D7F 17px 17px, #797D7F 18px 18px, #797D7F 19px 19px, #797D7F 20px 20px;
}
.error-page a.error-back {
text-align: center;
}

li.select2-results__option {
display: block;
width: 100%;
height: 35px;
line-height: 24px;
color: #000;
}

.modal-close-btn {
position: absolute;
right: 12px;
top: 16px;
}

.dropdown-content li{
display: block !important;
}

.cancel-btn{
padding: 5px;
border-radius: 50%;
}



.booking-detail-row:after {
display: table;
content: "";
clear: both;
}

.collection{margin:.5rem 0 1rem 0;border:1px solid #e0e0e0;border-radius:2px;overflow:hidden;position:relative}.collection .collection-item{background-color:#fff;line-height:1.5rem;padding:10px 20px;margin:0;border-bottom:1px solid #e0e0e0}.collection .collection-item.avatar{min-height:84px;padding-left:72px;position:relative}.collection .collection-item.avatar:not(.circle-clipper)>.circle,.collection .collection-item.avatar :not(.circle-clipper)>.circle{position:absolute;width:42px;height:42px;overflow:hidden;left:15px;display:inline-block;vertical-align:middle}.collection .collection-item.avatar i.circle{font-size:18px;line-height:42px;color:#fff;background-color:#999;text-align:center}.collection .collection-item.avatar .title{font-size:16px}.collection .collection-item.avatar p{margin:0}.collection .collection-item.avatar .secondary-content{position:absolute;top:16px;right:16px}.collection .collection-item:last-child{border-bottom:none}.collection .collection-item.active{background-color:#26a69a;color:#eafaf9}.collection .collection-item.active .secondary-content{color:#fff}.collection a.collection-item{display:block;-webkit-transition:.25s;transition:.25s;color:#26a69a}.collection a.collection-item:not(.active):hover{background-color:#ddd}.collection.with-header .collection-header{background-color:#fff;border-bottom:1px solid #e0e0e0;padding:10px 20px}.collection.with-header .collection-item{padding-left:30px}.collection.with-header .collection-item.avatar{padding-left:72px}.secondary-content{float:right;color:#26a69a}.collapsible .collection{margin:0;border:none}.video-container{position:relative;padding-bottom:56.25%;height:0;overflow:hidden}

.chip{display:inline-block;height:32px;font-size:13px;font-weight:500;color:rgba(0,0,0,0.6);line-height:32px;padding:0 12px;border-radius:16px;background-color:#e4e4e4;margin-bottom:5px;margin-right:5px}.chip:focus{outline:none;background-color:#26a69a;color:#fff}.chip>img{float:left;margin:0 8px 0 -12px;height:32px;width:32px;border-radius:50%}.chip .close{cursor:pointer;float:right;font-size:16px;line-height:32px;padding-left:8px}

.selectize-control.single .selectize-input,
.selectize-dropdown.single {
border-color: #b8b8b8;
}
.selectize-dropdown .optgroup-header {
padding-top: 7px;
font-weight: bold;
font-size: 0.85em;
}
.selectize-dropdown .optgroup {
border-top: 1px solid #f0f0f0;
}
.selectize-dropdown .optgroup:first-child {
border-top: 0 none;
}

#choose-accommodation {
overflow-y: unset !important;
}


.table-container {
position: relative;
}

.table-wrapper {
position: relative;
display: block;
overflow: auto;
height: 600px;
}

/*#reservations-table {
display: block;
overflow-x:auto;
user-select:none;
border-collapse: unset;
border-spacing:0;
}*/

#left-btn {
position: absolute;
top: 80px;
left: 10px;
z-index: 99;
}

#right-btn {
position: absolute;
top: 80px;
right: 10px;
}

/*  th {
border-top: 2px solid #f4f4f4;
border-bottom: 2px solid #f4f4f4;
text-align:center;
}*/

.date-picker-box {
display: flex;
align-items: center;
justify-content: center;
}

.main-td {
padding: 0 !important;
border: none;
}

.td-booking, .td-no-booking {
border: none;
padding: 0px;
}

.multiple-bookings {
display: flex;
}

.td-booking {
height: 68px !important;
border: 1px solid #ccc;
display: block;
cursor: pointer;
}

.td-no-booking {
height: 68px !important;
width: 160px;
border: 1px solid #ccc;
display: block;
}

.td-booking a div {
width: 100%;
height: 100%;
}

.booking-div {
position: relative;
width: 100%;
height: 100%;
}

.booking-user {
position: absolute;
top: 5px;
left: 8px;
width: 100%;
font-size: 14px;
text-align: left;
color: #fff !important;
}

.booking-total {
font-size: 13px;
position: absolute;
right: 3px;
bottom: 1px;
font-family: sans-serif;
border-top-left-radius: 2px;
padding: 3px 0;
text-align: center;
}

td[data-id] {
cursor: pointer
}

td[data-id]:hover {
background: #fafafa
}

.td-highlight {
background: #e8eaec
}

td[readonly] {
background: #f5f5f5;
cursor: unset;
}

.booking-detail-row:after {
display: table;
content: "";
clear: both;
}

.confirmed {
background: #4caf50;
}

.confirmed-bd {
border: 1px solid #4caf50;
}

.checked-in {
background: #37474f
}

.checked-in-bd {
border: 1px solid #37474f
}

.checked-out {
background: #57a1a8
}

.checked-out-bd {
border: 1px solid #57a1a8
}

.cancelled {
background: #ef5350
}

.cancelled-bd {
border: 1px solid #ef5350
}

.noshow {
background: #ff8700
}

.noshow-bd {
border: 1px solid #ff8700
}

.box-sm {
padding: 1px 8px;
margin-right: 10px;
}

.booking-detail-col {
width: 50%;
float: left;
text-align: left;
}

table.calender-table {
border-collapse: unset;
background: white;
table-layout: fixed;
width: 100%;
}

th, td {
padding: 8px 16px;
border: .5px solid #ddd;
width: 160px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border-radius: unset;
}

.pane {
background: #eee;
}

/*.pane-hScroll {*/

/*    overflow: auto;*/

/*    width: 100%;*/

/*}*/

.pane-vScroll {
overflow-y: auto;
overflow-x: hidden;
height: calc( 100% - 85px);
}

.pane--table2 {
width: 400px;
overflow-x: scroll;
}

.pane--table2 th, .pane--table2 td {
width: auto;
min-width: 160px;
}

.pane--table2 tbody {
overflow-y: scroll;
overflow-x: hidden;
display: block;
height: 200px;
}

.pane-vScroll::-webkit-scrollbar {
display: none;
}

.pane--table2 thead {
display: table-row;
}

.extra-width {
width: 300px !important;
}

th.extra-width a {
color: #fff
}

.inside-table {
border-collapse: unset;
}

.folio-wrapper .title, .folio-wrapper .value {
border: 1px solid #e0e0e0;
padding: 5px 3px;
}

.folio-wrapper .title {
font-weight: bold;
font-size: 13px;
}

.folio-wrapper .value {
word-wrap: break-word !important;
font-size: 12.7px;
}

.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front {
z-index: 9999;
}

td.is-selected button {
color: #fff !important;
}

td.is-disabled button {
background: transparent !important;
color: #9e9e9e !important;
}

#booking-room-name {
background: #616161 !important;
text-transform: uppercase;
padding: 0 22px;
font-size: 14px;
color: #e0e0e0;
font-family: sans-serif;

}




.modal{display:none;position:fixed;left:0;right:0;background-color:#fafafa;padding:0;max-height:70%;width:55%;margin:auto;overflow-y:auto;border-radius:2px;will-change:top, opacity}.modal:focus{outline:none}@media only screen and (max-width: 992px){.modal{width:80%}}.modal h1,.modal h2,.modal h3,.modal h4{margin-top:0}.modal .modal-content{padding:24px}.modal .modal-close{cursor:pointer}.modal .modal-footer{border-radius:0 0 2px 2px;background-color:#fafafa;padding:4px 6px;height:56px;width:100%;text-align:right}.modal .modal-footer .btn,.modal .modal-footer .btn-large,.modal .modal-footer .btn-small,.modal .modal-footer .btn-flat{margin:6px 0}.modal-overlay{position:fixed;z-index:999;top:-25%;left:0;bottom:0;right:0;height:125%;width:100%;background:#000;display:none;will-change:opacity}.modal.modal-fixed-footer{padding:0;height:70%}.modal.modal-fixed-footer .modal-content{position:absolute;height:calc(100% - 56px);max-height:100%;width:100%;overflow-y:auto}.modal.modal-fixed-footer .modal-footer{border-top:1px solid rgba(0,0,0,0.1);position:absolute;bottom:0}.modal.bottom-sheet{top:auto;bottom:-100%;margin:0;width:100%;max-height:45%;border-radius:0;will-change:bottom, opacity}
/*.modal{*/
    /*max-height: 100%;*/
/*    padding-top:-20px;*/
    /*overflow:hidden;*/
/*    z-index:1 !important;*/
    /*width:800px !important;*/
/*    margin-left:-3% !important;*/

/*}*/

/*.modal-content{*/
/*    width:890px !important;*/
/*    overflow:hidden;*/
/*    z-index:1 !important;*/
/*    margin-bottom:100px !important;*/
/*    padding-bottom:40px;*/
/*}*/


/*.border{*/
/*    border:1px solid black !important;*/
/*}*/

/*.radius{*/
    /*border-radius:20% !important;*/
    /*width:150px;*/
    /*padding:0px !important;*/
/*}*/

/* input:valid {
color: green;
}
input:invalid {
color: red; */
}
/*.modal{*/
</style>

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



@section('js')
    <script>
        $(document).ready(function(){
            M.FormSelect.init(document.querySelector('#total-rooms'),{
                dropdownOptions: {
                    container: 'body'
                }
            });

            $('#total-rooms').change(function(){
                $('#rooms').val($(this).val());
                $('#total-rooms-form').submit();
            });
        });
    </script>
@endsection