@extends('layouts.new-admin')
@section('title')
Create New Reservation | Dashboard
@endsection

@section('styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
@endsection

@section('content')

         <ul class="breadcrumb">
            <li>
              <p>PMS</p>
            </li>
            <li><a href="#" class="active">House Keeping</a> </li>
          </ul>
          <div class="page-title"> <i class="icon-custom-left"></i>
            <h3>Current Accomodation <span class="semi-bold">Room Maintenance</span></h3>
          </div>
          <div class="row-fluid">
            <div class="span12">
              <div class="grid simple ">

        <form action="{{route('admin.house-keeping.room.maintenance.store')}}" method="post" class="grey lighten-4 p-3" id="create-maintenance-form">
            @csrf
            <div class="row">
                <h5 class="center"><b>Room Maintenance</b></h5><br>

                <div class="input-field col s12 m3 l6">
                    <input type="date" name="start_date" class="custom-autocomplete">
                    <label for="start_date">Start Date</label>
                </div>
                <div class="input-field col s12 m3 l6">
                    <input type="date" name="end_date" class="custom-autocomplete">
                    <label for="end_date">End Date</label>
                </div>
                <div class="input-field col s12 m3 l6">
                    <select name="floor">
                        <option disabled selected>Choose Floor</option>
                        @if($floors->count() > 0)
                            @foreach ($floors as $floor)
                                <option value="{{ $floor->FloorName }}">{{ $floor->FloorName }}</option>
                            @endforeach
                        @endif
                    </select>
                </div>

                <div class="input-field col s12 m3 l6">
                    <select name="roomType" id="roomType">
                        <option disabled selected>Choose Room Type</option>
                        @if($roomTypes->count() > 0)
                            @foreach ($roomTypes as $roomType)
                                <option value="{{ $roomType->RoomTypeName }}">{{ $roomType->RoomTypeName }}</option>
                            @endforeach
                        @endif
                    </select>
                </div>

                <div class="input-field col s12 m3 l6">
                    <select name="rooms" id="rooms" multiple data-live-search="true">
                        <option disabled selected>Choose Room</option>
                    </select>
                </div>

                <div class="input-field">
                    <input type="text" name="reason" class="custom-autocomplete" placeholder="Reason">
                </div>

                <div class="input-field col s12 m3 l6">
                    <input type="submit" class="btn btn-success" name="submit" value="Submit">
                </div>

                </div>
        </form>
    </div>
    </div>
    </div>
    </div>
    @component('admin.includes.loader')
    @endcomponent
@endsection

@section('scripts')
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

<script>
    $(document).ready(function() {

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

        $('#roomType').on('change', function() {
            var roomType = $('#roomType :selected').val();
            $.ajax({
            url: "{{ route('admin.house-keeping.roomtype.room') }}",
            method: 'post',
            data: { roomType },
            success: function(response){

                $('#rooms').append($('<option>', {
                    value: 1,
                    text: 'One'
                }));
                // $('#rooms').multiselect('refresh');


            },
            error: function( error ) {
                console.log(error);
            }
        });
        });
    });

</script>

@endsection