@extends('layouts.admin')
@section('title')
All Rooms | Dashboard
@endsection
@section('content')
    <div class="pms-container">
        <div class="row pms-view-header">
            <div class="col s12">
                <h4 class="black-text">
                    <i class="small material-icons left red-text">brightness_1</i>Current Accommodation Rooms
                </h4>
            </div>
        </div>
        @component('admin.includes.per-page')
        @endcomponent
        <table class="responsive-table centered">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Room Id</th>
                    <th>Room Name</th>
                    <th>Room Type</th>
                    <th>Floor</th>
                    <th>Create Date</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($rooms as $i => $room)
                    <tr>
                        <td>{{$i + $rooms->firstItem()}}</td>
                        <td>{{$room->RoomId}}</td>
                        <td>{{$room->RoomName}}</td>
                        @if($room->roomType)
                            <td>{{$room->roomType->RoomTypeName}}</td>
                        @else
                            <td>-</td>
                        @endif
                        @if($room->floor)
                            <td>{{$room->floor->FloorName}}</td>
                        @else
                            <td>-</td>
                        @endif
                        <td>{{$room->CreateDate->diffForHumans()}}</td>
                        <td>
                            @hasAccess('Edit Room')
                                <a href="{{route('admin.rooms.edit',$room->RoomId)}}" class="btn-floating btn-small waves-effect waves-light">
                                    <i class="material-icons">mode_edit</i>
                                </a>
                            @endhasAccess
                            @hasAccess('Delete Room')
                                <a href="#modal-{{$room->RoomId}}" class="modal-trigger btn-floating btn-small red waves-effect waves-light">
                                    <i class="material-icons">delete</i>
                                </a>
                                @component('components.confirm',[
                                    'modal' => 'modal-'.$room->RoomId,
                                    'id' => 'delete-form-'.$room->RoomId,
                                    'title' => 'Room'
                                ])
                                @endcomponent
                                <form method="post" action="{{route('admin.rooms.destroy',$room->RoomId)}}" id="delete-form-{{$room->RoomId}}" class="hide">
                                    @csrf
                                    @method('DELETE')
                                </form>
                            @endhasAccess
                        </td>
                    </tr>
                @empty
                @endforelse
            </tbody>
        </table>
        <div class="center-align mt-3 mb-3">
            {{$rooms->appends(request()->query())->links('vendor.pagination.default')}}
        </div>
    </div>
    @hasAccess('Create Room')
        <div class="fixed-action-btn">
            <a href="#create-rooms-modal" class="modal-trigger btn-floating btn-large red waves-effect waves-light">
                <i class="material-icons">add</i>
            </a>
        </div>
        <div id="create-rooms-modal" class="modal">
            <a href="#" class="modal-close-btn modal-close">
                <i class="material-icons grey-text">close</i>
            </a>
            <div class="modal-content row mt-2">
                <h4 class="center">How many rooms do you want to create?</h4>
                <br>
                <div class="input-field col s12 m6 offset-m3">
                    <select name="total-rooms" id="total-rooms">
                        @for($i=0; $i<=40; $i++)
                            <option value="{{$i}}">{{$i}}</option>
                        @endfor
                    </select>
                    <label for="total-rooms">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>
    @endhasAccess
    @component('admin.includes.loader')
    @endcomponent
@endsection

@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