@php($routeStore = route('configuration.chat.store-permission'))
<div class="row">
    <div class="col-12">
        <div class="heading-btn-sec align-items-start gap-2">
            <div>
                <h3 class="mb-4">The default chat settings are based on user type:</h3>
                <ul class="mb-4">
                    <li>Administrator users can chat with everyone</li>
                    <li>Advanced users can chat with all users from the same group</li>
                    <li>Basic users can only chat with associated users (subordinates and managers)</li>
                </ul>
                <p class="mb-0">You can override defaults by creating specific permissions for users, roles, or groups below. There is no limit to the number of rules.</p>
            </div>
            <!-- <div><a href="#" class="black-link-txt">Need Help?</a></div> -->
        </div>

        <div class="heading-btn-sec align-items-start gap-2">
            <h3>Create A New Chat Permission</h3>
        </div>
        <div class="project-box">
            <div class="table-responsive project-table no-border project-form">
                <form method="POST" action="{{ $routeStore }}" id="chat-permission-create-form">
                    @csrf
                    <table id="datatable-chat-permission-create" class="table mb-0 dt-responsive nowrap">
                        <thead class="thead-light">
                            <tr>
                                <th colspan="2">From</th>
                                <th colspan="4">To</th>
                            </tr>
                        </thead>
                        <thead class="thead-light-inner">
                            <tr>
                                <th width="15%">Scope</th>
                                <th width="25%">Selection</th>
                                <th width="15%">Scope</th>
                                <th width="25%">Selection</th>
                                <th colspan="2" width="20%">Access</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <select name="from_scope_type" class="form-select form-control chat-scope-type select2 no-search" data-side="from" required>
                                        @foreach($scopeTypes as $k => $label)
                                            <option value="{{ $k }}">{{ $label }}</option>
                                        @endforeach
                                    </select>
                                </td>
                                <td>
                                    <select name="from_scope_id" class="form-select form-control chat-scope-id select2" data-side="from">
                                    </select>
                                </td>
                                <td>
                                    <select name="to_scope_type" class="form-select form-control chat-scope-type select2 no-search" data-side="to" required>
                                        @foreach($scopeTypes as $k => $label)
                                            <option value="{{ $k }}">{{ $label }}</option>
                                        @endforeach
                                    </select>
                                </td>
                                <td>
                                    <select name="to_scope_id" class="form-select form-control chat-scope-id select2" data-side="to">
                                    </select>
                                </td>
                                <td class="align-middle">
                                    <div class="form-check form-switch pr-input">
                                        <input class="form-check-input" type="checkbox" name="status" value="1" id="chatPermissionAccess" checked>
                                        <label class="form-check-label" for="chatPermissionAccess" title="Allow chat?">&nbsp;</label>
                                    </div>
                                </td>
                                <td>
                                    <button type="submit" class="rule-btn wave-effects"><i class="bx bx-plus"></i> Add Rule</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </form>
            </div>

            <div class="heading-btn-sec align-items-start gap-2 mt-4">
                <h3>Chat Permissions</h3>
                <!-- <div class="ms-auto d-flex gap-2">
                    <div class="search-field"><input type="text" class="form-control pr-45 chat-permission-search" placeholder="Search" value="{{ request()->get('search_text') }}"><i class="bx bx-search-alt-2"></i></div>
                </div> -->
            </div>
            <div class="table-responsive project-table no-border">
                <table id="datatable-chat-permissions" class="table mb-0 dt-responsive nowrap">
                    <thead class="thead-light">
                        <tr>
                            <th>From Scope</th>
                            <th>From Selection</th>
                            <th>To Scope</th>
                            <th>To Selection</th>
                            <th>Access</th>
                            <th class="text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($permissions as $perm)
                            <tr data-id="{{ $perm->id }}">
                                <td>{{ $scopeTypes[$perm->from_scope_type] ?? $perm->from_scope_type }}</td>
                                <td>{{ $perm->fromSelectionLabel() }}</td>
                                <td>{{ $scopeTypes[$perm->to_scope_type] ?? $perm->to_scope_type }}</td>
                                <td>{{ $perm->toSelectionLabel() }}</td>
                                <td>
                                    {!! html()->form('POST', route('configuration.chat.toggle-permission-status',$perm->id))->attributes(['style'=>'display:inline'])->open() !!}
                                    @csrf
                                    <div class="form-check form-switch pr-input d-inline-block">
                                        <input class="form-check-input" type="checkbox" id="chatPermissionStatus-{{ $perm->id }}" {{ $perm->status ? 'checked' : '' }} onchange="this.form.submit()">
                                        <label class="form-check-label" for="chatPermissionStatus-{{ $perm->id }}" title="Allow chat?">&nbsp;</label>
                                    </div>
                                    {!! html()->form()->close() !!}
                                </td>
                                <td class="text-right">
                                    <div class="d-flex gap-2 justify-content-end">
                                        <a href="javascript:void(0);" class="action-btn single-delete" data-toggle="tooltip" title="Delete"
                                           data-confirm="Delete Chat Permission?|This action can not be undone. Continue?"
                                           data-confirm-yes="event.preventDefault(); document.getElementById('delete-chat-permission-form-{{ $perm->id }}').submit();">
                                            <i class="{{ \Config::get('settings.icon_delete') }}"></i>
                                        </a>
                                        {!! html()->form('DELETE', route('configuration.chat.destroy-permission',$perm->id))->attributes(['style'=>'display:inline','id'=>'delete-chat-permission-form-'.$perm->id])->open() !!}
                                        {!! html()->form()->close() !!}
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="7" class="text-center">No Chat Permissions Found</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<div id="chat-scope-data" data-scope='@json($scopeData ?? [])' style="display:none"></div>
@push('page_script')
<script src="{{ asset('assets/js/chat_permissions.js') }}"></script>
@endpush