@extends('layouts.main-layout')
@section('title')
Assign Accommodation to {{$user->UserName}} | Accommodations Management
@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">
                    <div class="card mb-5 mb-xl-8">

                        <!--begin::Header-->
                        <div class="card-header border-0 pt-5">
                            <p class="alert alert-success" id="msg" style="display: none;"></p>
                            <h3 class="card-title atrgn-items-start flex-column">
                                <span class="text-center card-label fw-bolder fs-3 mb-1"> Assign Accommodations to {{ucwords($user->UserName)}}</span>

                            </h3>
                        </div>
                        <div class="card-body py-3 ">
      
            <form action="{{route('admin.accommodations.assignment.assign',$user->UserId)}}" method="post">
                @csrf
                <div class="row">
                    <div class="input-field col-sm-12 m10">
                        <select class="browser-default form-select" multiple name="accommodations[]" >
                            @forelse($accommodations as $accommodation)
                                <option
                                    value="{{$accommodation->AccommodationId}}"
                                >{{$accommodation->AccommodationName}}
                                <hr />
                            </option>

                            @empty
                            @endforelse
                        </select>
{{--                        <select id="accommodations" name="accommodations[]" class="browser-default" multiple></select>--}}
                        @error('accommodations')
                            <span class="helper-text red-text">{{$errors->first('accommodations')}}</span>
                        @endError
                    </div>
                    <button type="submit" class="btn btn-info mt-5 mb-5 text-center col-sm-2 blue lighten-1 Assign Accommodations to {{ucwords($user->UserName)}} offset-s2 m2">Assign</button>
                </div>
            </form>
       
        <div class="row">
            <div class="col-sm-12 mt-10">
                <h5 class="black-text">
                    <i class="fa fa-circle tiny material-icons left text-success mr-2 mt-n2"></i>Assigned Accommodations
                </h5>
            </div>
        </div>

        <table class="table mt-10 table-row-bordered table-row-gray-100 align-middle gs-0 gy-3 " id="myTable">
            <thead>
            <tr class="fw-bolder text-muted ">
                <th>#</th>
                <th>UserName</th>
                <th>UserType</th>
                <th>Accommodation Name</th>
                <th>Actions</th>
            </tr>
            </thead>
            <tbody>
                @forelse($userAccommodations as $i => $userAccommodation)
                    <tr>
                        <td>{{$i + $userAccommodations->firstItem()}}</td>
                        <td>{{$user->UserName}}</td>
                        <td>{{$user->userType->UserTypeName}}</td>
                        <td>{{$userAccommodation->AccommodationName}}</td>
                        <td>
                            <a href="#" onclick="event.preventDefault;document.querySelector('#delete-form-{{$userAccommodation->AccommodationId}}').submit()" class="btn-floating btn-small red">
                                <i class="fa fa-trash  text-danger"></i>
                            </a>
                            <form id="delete-form-{{$userAccommodation->AccommodationId}}" action="{{route('admin.accommodations.assign.delete',['id' => $user->UserId, 'assignId' => $userAccommodation->pivot->AccommodationId])}}" method="post">
                                @csrf
                                @method('DELETE')
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="5" class="center">Nothing assigned yet!</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
        <div class="center-align mb-3 mt-3">
            {{$userAccommodations->appends(request()->query())->links('vendor.pagination.default')}}
        </div>
    </div>
                    </div>
                </div>
            </div>
        </div>

@endsection

@section('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
    <script>
        $(document).ready(function(){
            $('#accommodations').selectize();
            {{--$('#accommodations').typeahead({--}}
            {{--    hint: true,--}}
            {{--    highlight: true,--}}
            {{--    minLength: 1,--}}
            {{--    name: 'typeahead',--}}
            {{--    remote: "{{ route('admin.accommodations.assignment.search', ['id' => $user->UserId, 'key' => "%QUERY"]) }}",--}}
            {{--    limit : 10--}}
            {{--});--}}

           {{-- var route = "{{ url('admin/assign/accommodations/search/') }}";
            $('#accommodations').typeahead({
                source:  function (term, process) {
                    return $.get(route, { term: term }, function (data) {
                        return process(data);
                    });
                }
            });--}}

            {{--$('#accommodations').select2({--}}
            {{--    placeholder: "Choose tags...",--}}
            {{--    minimumInputLength: 2,--}}
            {{--    ajax: {--}}
            {{--        url: "{{ url('admin/assign/accommodations/search/') }}",--}}
            {{--        dataType: 'json',--}}
            {{--        data: function (params) {--}}
            {{--            return {--}}
            {{--                q: $.trim(params.term)--}}
            {{--            };--}}
            {{--        },--}}
            {{--        processResults: function (data) {--}}
            {{--            return {--}}
            {{--                results: data--}}
            {{--            };--}}
            {{--        },--}}
            {{--        cache: true--}}
            {{--    }--}}
            {{--});--}}
        });
    </script>
@endsection