@php(
    $headerOption = \App\Http\Controllers\Controller::getHeaderOptions(
        $title ?? '',
        $subTitle ?? '',
        isset($filters) ? $filters : [],
        isset($advancedFilters) ? $advancedFilters : []
    )
)
@extends('admin.layouts.layout', $headerOption)
@section('content')
<div class="col-12 ">
        <div class="project-box">
                        <div class="heading-btn-sec">
                            <h3>Manage Chat Settings</h3>
                        </div>
            
             <div class="inner-tab mt-4">

                <ul class="nav nav-tabs project-tab mb-30" id="myTab" role="tablist">

                    <li class="nav-item" role="presentation">

                        <button class="nav-link active waves-effect" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane"

                            type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Permissions</button>

                    </li>

                    <li class="nav-item" role="presentation">

                        <button class="nav-link waves-effect" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane"

                            type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Log</button>

                    </li>
                </ul>



                <div class="tab-content" id="myTabContent">

                    <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab"

                    tabindex="0">

                    <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 change the default settings by creating specific permissions for users, groups, or user classes below.<br>There is no limit to the number of permissions you can create.</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">
                                <table id="datatable" class="table mb-0 dt-responsive nowrap">
                                    <thead class="thead-light ">
                                        <tr>
                                            <th>From</th>
                                            <th>To</th>
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <thead class="thead-light-inner ">
                                        <tr>
                                            <th>Scope</th>
                                            <th>Selection</th>
                                            <th>Scope</th>
                                            <th>Selection</th>
                                            <th>Access</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>
                                                <div class="dropdown table-dropdown">
                                                <button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                                    User Class <i class="mdi mdi-chevron-down"></i>
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <li><a class="dropdown-item" href="#">Action</a></li>
                                                    <li><a class="dropdown-item" href="#">Another action</a></li>
                                                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                                                </ul>
                                                </div>
                                            </td>
                                            <td >
                                                <div class="dropdown table-dropdown">
                                                <button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                                    Operation Manager <i class="mdi mdi-chevron-down"></i>
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <li><a class="dropdown-item" href="#">Action</a></li>
                                                    <li><a class="dropdown-item" href="#">Another action</a></li>
                                                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                                                </ul>
                                                </div>
                                            </td>
                                           <td>
                                                <div class="dropdown table-dropdown">
                                                <button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                                    User Class <i class="mdi mdi-chevron-down"></i>
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <li><a class="dropdown-item" href="#">Action</a></li>
                                                    <li><a class="dropdown-item" href="#">Another action</a></li>
                                                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                                                </ul>
                                                </div>
                                            </td>
                                            <td >
                                                <div class="dropdown table-dropdown">
                                                <button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                                    Operation Manager <i class="mdi mdi-chevron-down"></i>
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <li><a class="dropdown-item" href="#">Action</a></li>
                                                    <li><a class="dropdown-item" href="#">Another action</a></li>
                                                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                                                </ul>
                                                </div>
                                            </td>
                                            <td><div class="form-check form-switch pr-input">
                                                <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault" style="">
                                                <label class="form-check-label" for="flexSwitchCheckDefault"></label>
                                            </div></td>
                                            <td><a href="#" class="rule-btn"><i class="bx bx-plus"></i> Add Rule</a></td>
                                        </tr>
                                        
                                    </tbody>

                                </table>
                                </div>
                                <div class="heading-btn-sec align-items-start gap-2 mt-4">
                                    <h3 >Chat Permissions</h3>
                                </div>
                                <div class="table-responsive project-table no-border">
                                <table id="datatable" class="table mb-0 dt-responsive nowrap">
                                    <thead class="thead-light ">
                                        <tr>
                                            <th>From</th>
                                            <th>To</th>
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <thead class="thead-light-inner ">
                                        <tr>
                                            <th>Scope</th>
                                            <th>Selection</th>
                                            <th>Scope</th>
                                            <th>Selection</th>
                                            <th>Access</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>
                                                User Class
                                            </td>
                                            <td >
                                               Operations Manager
                                            </td>
                                           <td>
                                              User Class
                                            </td>
                                            <td >
                                                Operations Manager
                                            </td>
                                            <td><div class="form-check form-switch pr-input">
                                                <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault" style="">
                                                <label class="form-check-label" for="flexSwitchCheckDefault"></label>
                                            </div></td>
                                            <td><button type="button" class="action-btn"><i class="bx bx-trash"></i></button></td>
                                        </tr>
                                        
                                    </tbody>

                                </table>
                                </div>
                            </div>

                        </div>

                </div>

                    </div>



                    <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">

                        <div class="row">

                       <div class="col-12 ">

                            <div class="project-form w-25">
                            <label>Chat Room</label>
                            <select class="form-select form-control" aria-label="Default select example">
                                <option class="select-op">Select chat room</option>
                                <option value="1">One</option>
                                <option value="2">Two</option>
                                <option value="3">Three</option>
                            </select>
                            </div>

                            <div class="heading-btn-sec resp-flex-column">
                            <div class="head-form w-100 resp-fix">
                                        <div class="project-form w-165">
                                            <label>Viewing</label>
                                            <select class="form-select form-control" aria-label="Default select example" style="">
                                                <option class="select-op">Today</option>
                                                <option value="1">One</option>
                                                <option value="2">Two</option>
                                                <option value="3">Three</option>
                                            </select>
                                        </div>
                                        <div class="project-form w-165">
                                            <label>From</label>
                                            <input type="date" class="form-control" placeholder="MM/DD/YYYY">
                                        </div>
                                         <div class="project-form w-165">
                                            <label></label>
                                            <input type="time" class="form-control" placeholder="MM/DD/YYYY">
                                        </div>
                                        <div class="project-form w-165">
                                            <label>To</label>
                                            <input type="date" class="form-control" placeholder="MM/DD/YYYY">
                                        </div>
                                         <div class="project-form w-165">
                                            <label></label>
                                            <input type="time" class="form-control" placeholder="MM/DD/YYYY">
                                        </div>
                                        <a href="# " class="green-btn-inner waves-effect">Search</a>
                                </div>
                                <div class="heading-btn">
                                        <div class="search-field"><input type="text" class="form-control pr-45 module-search" placeholder="Search" style=""><i class="bx bx-search-alt-2"></i></div>
                                        <a href="#" class="green-btn-inner waves-effect">Export <i class="mdi mdi-chevron-down"></i></a>
                                </div>
                            </div>

                            <div class="project-box ">

                                <div class="table-responsive project-table no-border">
                                <table id="datatable" class="table mb-0 dt-responsive nowrap">
                                    <thead class="thead-light ">
                                        <tr>
                                            <th>From</th>
                                            <th>Chat</th>
                                            <th>Message</th>
                                            <th>Date</th>
                                            <th>Delete</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>N/A</td>
                                            <td >N/A</td>
                                            <td >N/A</td>
                                            <td >N/A</td>
                                            <td >N/A</td>
                                        </tr>
                                    </tbody>

                                </table>

                                </div>

                            </div>

                        </div>

                </div>

                    </div>

                </div>

            </div>


            <nav aria-label="Page navigation example " class="mt-3 pagination-two">
                            <span>Showing 0 to 0 of 0 entries</span>
                            <ul>
                                <li class="page-item"><a class="page-link" href="#">Previous</a></li>
                                <li class="page-item active"><a class="page-link" href="#">1</a></li>
                                <li class="page-item"><a class="page-link" href="#">2</a></li>
                                <li class="page-item"><a class="page-link" href="#">3</a></li>
                                <li class="page-item"><a class="page-link" href="#">Next</a></li>
                            </ul>
                        </nav>
        </div>
    </div>
   
@endsection
@push('page_script')
@endpush