@extends('admin.layout.master')
@section('title', 'Room Clean Status')
@section('custom_style')
<style>
input {
    padding:18px !important; 
    box-shadow: none!important;
}
select,.select2-selection--single {
   height: 38px !important; 
   box-shadow: none!important;
}


    table thead th,
    table tbody td {
        padding: 3px 10px !important;
        vertical-align: middle !important;
    }

</style>
@endsection
@section('content')
    @include('flash-message')
    <div class="card sina-card">
        <div class="card-header card-header-s d-flex flex-wrap align-items-center">
            <h4 class="col-6 pl-0"> House Keeping Room Status</h4>
            <div class="col-6 d-flex justify-content-end">

            </div>
        </div>
        <div class="card-body" style="padding:0 30px ">
            @if (count($errors) > 0)
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            {{ Form::open(['route' => ['housekeeping.room_clean.status'], 'method' => 'get', 'class' => 'form-horizontal']) }}
            <div class='row'>
                <div class='col-md-3'>
                    <div class="form-group">
                        <label class="labels">Floor List</label>
                        {{ Form::select('floor_id', $repository->floors(), null, ['class' => 'form-control text-right', 'id' => 'warehouse_id', 'placeholder' => 'Select Floor']) }}

                    </div>
                </div>
                <div class='col-md-3'>
                    <div class="form-group">
                        <label class="labels">Room List</label>
                        {{ Form::select('room_id', $repository->rooms(), null, ['class' => 'form-control', 'id' => 'room_type', 'placeholder' => 'Select Room']) }}


                    </div>
                </div>

                <div class='col-md-3'>
                    <div class="form-group mt-4">
                        <button style="" name="search" class='btn btn-md btn-danger'>Search</button>

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


            {{ Form::close() }}
        </div>
    </div>

    <div class="card ">

        <div class="card-body">
            {{ Form::open(['route' => ['housekeeping.room_clean.status.update'], 'method' => 'put', 'class' => 'form-horizontal', 'enctype' => 'multipart/form-data']) }}



            <div class="d-flex flex-wrap">
                <div class="table-responsive" id="print">
                    <table class="table table-bordered table-hover" id="datatable_apply" width="100%">
                        <thead class="mt-3">
                            <tr>
                                <th width="15%">Floor</th>
                                <th width="10%">Room</th>
                                <th width="15%">Room Type</th>

                                <th width="30%" style=" ">
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <div class="input-group-text">HK Status</div>
                                        </div>
                                        {{ Form::select('', ['1' => 'Ready', '2' => 'In Used', '3' => 'Dirty', '4' => 'Out Of Order'], null, ['class' => 'form-control', 'id' => 'room_status', 'placeholder' => 'Select Room Status']) }}
                                    </div>
                                </th>
                                <th width="20%">
                                    <input type="checkbox" name="" id="selectall"> &nbsp; Modify
                                </th>

                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($rooms as $room)
                                <tr>
                                    <td>
                                        {{ $room->floor->floor_no }}
                                        <input class="" type="hidden" name="id[]" id="" value="{{ $room->id }}"> &nbsp;
                                    </td>
                                    <td>
                                        {{ $room->room_number }}

                                    </td>
                                    <td>{{  $room->roomType ? $room->roomType->name : null }}</td>

                                    <td>{{ Form::select('hk_room_status[]', ['1' => 'Ready', '2' => 'In Used', '3' => 'Dirty', '4' => 'Out Of Order'], $room->hk_room_status, ['class' => 'form-control showSelected', 'data-id' => $room->id, 'id' => 'hk_room_status' . $room->id, 'required', 'placeholder' => 'Select Room Status']) }}
                                        {{ Form::hidden('reason[]', null, ['class' => 'form-control out_of_order_reason', 'id' => 'out_of_order_reason'.$room->id,'placeholder'=>'Type Reason']) }}

                                    </td>
                                    <td>
                                        {{-- If Room Not Dirty --}}

                                        <input class="selectedId {{ 'change_status' . $room->id }}" type="checkbox"
                                            name="change_status[]" , id='' value="{{ $room->id }}"> &nbsp;

                                    </td>
                                </tr>
                            @endforeach

                    </table>
                </div>
                <div class="form-group col-12 text-right">
                    <button id="submit_button" type="submit" class="btn btn-info"> <i class="fa fa-save mr-1"></i>
                        Submit</button>
                </div>
            </div>
            {{ Form::close() }}

        </div>
    </div>


@endsection
@section('script')
    <script>
        $(document).ready(function() {

            $('#room_status').on('change', function(e) {
                var val = $(e.target).val();
                var selectVal = $(".showSelected").val(val);
                $('#selectall').prop('checked', true);
                $('.selectedId').prop('checked', true);
                if(val == 4){
                  $(".out_of_order_reason").attr("type", 'textarea');
                }else{
                    $(".out_of_order_reason").attr("type", 'hidden'); 
                }       

            });

            $('#selectall').click(function() {
                $('.selectedId').prop('checked', this.checked);
            });

            $('.showSelected').on('change', function(e) {

                var val = $(this).attr('data-id');
                var hk_room_status = $("#hk_room_status"+val).val();
                if(hk_room_status == 4){
                    $("#out_of_order_reason"+val).attr("type", 'textarea');;
                }else{
                    $(".out_of_order_reason").attr("type", 'hidden'); 
                }        
                $('.change_status' + val).prop('checked', true);

            });

        });
    </script>
@endsection