@extends('layouts.main-layout')
@section('title')
All Rooms | Dashboard
@endsection

@section('styles')
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
@endsection


@section('content')
      								
											<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">Manage Users</span>
		
										</h3>
									</div>
									
									<div class="card-body py-3">
										<!--begin::Table container-->
										<div class="table-responsive">
                    <div class="row" >
    
                        @foreach ($rooms as $room)
                            @if($room->HouseKeepingId == 1)
                            <div class="col-md-3">
                                <div class="column card1" id="{{ $room->RoomName }}" 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 class="select-style">
                                            <select id="selectstatus">
                                                <option @if($room->HouseKeepingId == 1) selected @endif value="1&{{ $room->RoomName }}">Dirty</option>
                                                <option @if($room->HouseKeepingId == 3) selected @endif value="3&{{ $room->RoomName }}">Clean</option>
                                                <option @if($room->HouseKeepingId == 2) selected @endif value="2&{{ $room->RoomName }}">Inspected</option>
                                                <option @if($room->HouseKeepingId == 4) selected @endif value="4&{{ $room->RoomName }}">Maintenance</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="card-body1 column">

                                    </div>
                                    </div>
                                </div>
                            </div>
                            @elseif($room->HouseKeepingId == 2)
                            <div class="col-md-3">
                                <div class="column card1" id="{{ $room->RoomName }}" 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 class="select-style">
                                            <select id="selectstatus">
                                                <option @if($room->HouseKeepingId == 1) selected @endif value="1&{{ $room->RoomName }}">Dirty</option>
                                                <option @if($room->HouseKeepingId == 3) selected @endif value="3&{{ $room->RoomName }}">Clean</option>
                                                <option @if($room->HouseKeepingId == 2) selected @endif value="2&{{ $room->RoomName }}">Inspected</option>
                                                <option @if($room->HouseKeepingId == 4) selected @endif value="4&{{ $room->RoomName }}">Maintenance</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="card-body1 column">

                                    </div>
                                    </div>
                                </div>
                            </div>
                            @elseif($room->HouseKeepingId == 3 || $room->HouseKeepingId == '')
                            <div class="col-md-3">
                            <div class="column card1" id="{{ $room->RoomName }}" 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 class="select-style">
                                        <select id="selectstatus">

                                              <option @if($room->HouseKeepingId == 1) selected @endif value="1&{{ $room->RoomName }}">Dirty</option>


                                        <option @if($room->HouseKeepingId == 3 || $room->HouseKeepingId == '') selected @endif value="3&{{ $room->RoomName }}">Clean</option>

                                            <option @if($room->HouseKeepingId == 2) selected @endif value="2&{{ $room->RoomName }}">Inspected</option>
                                            <option @if($room->HouseKeepingId == 4) selected @endif value="4&{{ $room->RoomName }}">Maintenance</option>
                                        </select>
                                    </div>
                                    </div>

                                <div class="card-body1 column">

                                </div>
                                </div>
                            </div>
                        </div>
                            @elseif($room->HouseKeepingId == 4)
                            <div class="col-md-3">
                            <div class="column card1" id="{{ $room->RoomName }}" 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 class="select-style">
                                        <select id="selectstatus">
                                            <option @if($room->HouseKeepingId == 1) selected @endif value="1&{{ $room->RoomName }}">Dirty</option>
                                            <option @if($room->HouseKeepingId == 3) selected @endif value="3&{{ $room->RoomName }}">Clean</option>
                                            <option @if($room->HouseKeepingId == 2) selected @endif value="2&{{ $room->RoomName }}">Inspected</option>
                                            <option @if($room->HouseKeepingId == 4) selected @endif value="4&{{ $room->RoomName }}">Maintenance</option>
                                        </select>
                                    </div>
                                    </div>

                                <div class="card-body1 column">

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

                        </div>
                    {{-- @else --}}
                    {{-- <h6 class="text-center text-danger"><b>Room don't have any status</b></h6> --}}
                    @endif

                        @endforeach
                    </div>
                    </div>
                    </table>
                </div>
            </div>
            </div>
          </div>

@endsection

<style>
    .card1{
        height:150px;
        width:150px;
        border:1px solid grey;
        margin-bottom:20px;
        text-align: center;
        border-radius: 10px;
        background-color: purple;
        color:white;
        padding: 8px;
 }
    .card-header1{
        height:60px;
        color:white;
        padding-top: 25px;
        text-align: center !important;

    }
    .card-body1{
        height:200px;
        padding-top:20px;
    }
    #roomNo {
        font-size: 15px;
    }
    #roomType {
        font-family: 'Segoe UI', Tahoma;
        color: white
    }

    .select-style {
    padding: 0;
    margin: 0;

    width: 130px;
    border-radius: 3px;
    overflow: hidden;
    background-color:transparent !important;
    background:transparent !important;
    position: relative;
    color:white !important;
}

.select-style select {
    /* padding: 5px 8px; */
    width: 130px;
    border: none !important;
    box-shadow: none;
    background-color: transparent !important;
    background-image: none;
    /*-webkit-appearance: none;*/
    /*-moz-appearance: none;*/
    /*appearance: none;*/
    /*text-align: center;*/
    font-size:14px;
    /*color:white !important;*/
    padding-left:5px;
    padding-right:5px;
}

.select-style:after {
    /* top: 50%;
    left: 85%; */

    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;

    border-width: 5px;
    margin-top: -2px;
    /* z-index: 100; */
}

.select-style select:focus {
    outline: none;
}



input, select, select>option{background-color:transparent !important;
border:none !important;

}


 /* .value{
    border-bottom: 1px sold black;
}

.span1{
    background-color: green;
    height:10px;
}
select{
    background-color: #DE301F;
} */


    /* .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%;
  } */
}
.intro{
    display:none;
}
    </style>

@section('scripts')
<script>

// $(document).ready(function(){


//   $("#card3").click(function(){

//     $("#card-yellow").toggle();
//   });
// });
// function hi(a)
// {
//     console.log(a.dataset.no);
//     console.log(a.id);
//     var conceptName = $('#'+a.id).find(":selected").text();
//     alert(conceptName);

// }

$(document).ready(function() {

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
        
    });

    $(document.body).on('change','#selectstatus', function() {
        selectedValue = $(this).val();

        selectedValue = selectedValue.split('&');
        roomStatus = selectedValue[0];
        roomId = selectedValue[1];
        var colorCode = null;

        // $('#'+ roomId).css("background-color", colorCode);

        $.ajax({
            url: "{{ route('admin.house-keeping.manage.room.status') }}",
            method: 'post',
            data: { roomId, roomStatus },
            success: function(status){
                if(status[0] == 1){
                    colorCode = '#DE301F';
                     $("#"+ roomId).css("background-color", colorCode);
                }
                else if(status[0] == 2){
                    colorCode = '#4646C2 ';
                    $("#"+ roomId).css("background-color", colorCode);
                }
                else if(status[0] == 3){
                    colorCode = '#5BC246 ';
                    $("#"+ roomId).css("background-color", colorCode);
                }
                else if(status[0] == 4){
                    colorCode = '#211B21';
                    $("#"+ roomId).css("background-color", colorCode);
                }
            },
            error: function( error ) {
                console.log(error);
            }
        });


    });
});



    // function changeStatus(id){
        // return id;
        // console.log(id)
    // }
    // alert($(this).val());






</script>
@endsection