@include('layouts.header', ['title' => 'Assign Roles'])
    <div class="wrapper">
        @include('layouts.navbar')
        @include('layouts.sidebar')

        <div class="content-page">
            <div class="content">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-12">
                            <div class="page-title-box">
                                <div class="page-title-right"></div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-9">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="page-title">Assign Roles</h4>

                                </div>
                                <form id="userForm"
                                    action="{{ isset($selectedUser) ? route('admin.role-user-permission.update', $selectedUser->id) : route('admin.role-user-permission.store') }}"
                                    method="POST" enctype="multipart/form-data">
                                    @csrf
                                    @if (isset($selectedUser))
                                        @method('PUT')
                                    @endif


                                    <div class="card-body">
                                        <div class="mb-3">
                                            <label for="user_id" class="form-label">User</label>
                                            <select class="form-select form-select-sm mb-3 select2" name="user_id"
                                                id="user_id" {{ isset($selectedUser) ? 'disabled' : '' }}>
                                                <option value="" selected disabled>Select User</option>
                                                @foreach ($users as $user)
                                                    <option value="{{ $user->id }}"
                                                        {{ isset($selectedUser) && $selectedUser->id === $user->id ? 'selected' : '' }}>
                                                        {{ $user->name }} - {{ $user->email }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="mb-3">
                                            <label for="role_id" class="form-label">Roles</label>
                                            <select class="form-select form-select-sm mb-3 select2" name="role_id[]"
                                                multiple id="role_id">
                                                @foreach ($roles as $roleOption)
                                                    <option value="{{ $roleOption->id }}"
                                                        {{ isset($selectedUserRoles) && in_array($roleOption->id, $selectedUserRoles) ? 'selected' : '' }}>
                                                        {{ $roleOption->display_name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <div class="card-footer border-top border-light">
                                        <button type="submit" class="btn btn-success me-2" id="submitBtn">
                                            {{ isset($selectedUser) ? 'Update' : 'Submit' }}
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            @include('layouts.footer')
        </div>
    </div>

    <!-- Vendor JS -->
    <script src="{{ asset('assets/js/vendor.min.js') }}"></script>
    <script src="{{ asset('assets/js/app.min.js') }}"></script>

    <!-- Select2 Plugin Js -->
    <script src="{{ asset('assets/vendor/select2/js/select2.min.js') }}"></script>

    <script>
        $(document).ready(function() {
            @if ($errors->any())
                @foreach ($errors->all() as $error)
                    toastr.error("{{ $error }}");
                @endforeach
            @endif

            @if (session('success'))
                toastr.success("{{ session('success') }}");
            @endif

            @if (session('error'))
                toastr.error("{{ session('error') }}");
            @endif

            $('#user_id').select2({
                allowClear: true,
                placeholder: "Select a User"
            });

            $('#role_id').select2({
                allowClear: true,
                placeholder: "Select Roles"
            });
        });
    </script>

    <!-- Custom JS -->
    <script src="{{ asset('assets/js/pages/roles/roles-permission.js') }}"></script>

</body>

</html>