<style>
    #userAccessLogsListTable_wrapper {
        border: 2px solid #D6DEE9 !important;
        box-shadow: none !important;
        margin-bottom: 30px;
    }
    #userAccessLogsListTable_wrapper tbody tr {
        background-color: #D6DEE9;
        color: #364257;
    }
</style>

<div class="tabs-content-item">
    <div class="flex-document-library flex">
        <div class="side-document-library side-nav-tabs">
            <ul class="navigation-document-library">
                <li class="active"><button type="button" class="js-side-nav" data-id="#description">{{ __("Description") }}</button></li>
                <li><button type="button" class="js-side-nav" data-id="#user-list">{{ __("User List") }}</button></li>
                <li><button type="button" class="js-side-nav" data-id="#access-level">{{ __("Access level") }}</button></li>
            </ul>
        </div>
        <div class="main-document-library side-content-tabs">
            <div id="description" class="js-content-tab">
                <div class="list-dashboard">
                    <ul>
                        <li class="card-shadow card-padd-30 dashboard-item single-dashboard-item">
                            <div class="dashboard-item-head">
                                <img src="{{ asset('themes/tailwind/images/user-2.svg') }}">
                                <h3 class="dashboard-item-title">{{ __("Total User") }}</h3>
                                <span>{{ $company->users->count() }}</span>
                            </div>
                        </li>
                        <li><a href="#" class="btn primary-button" data-bs-toggle="modal" data-bs-target="#newUserModal">{{ __("Add User") }}</a></li>
                        <li><a href="?p=user-invite" class="btn primary-button">{{ __("Invitation") }}</a></li>
                        <li></li>
                    </ul>
                </div>

                <div class="list-details">
                    <div class="card-shadow card-padd-15">
                        <h3 class="list-details-title">{{ __("Owner") }}</h3>
                        <div class="list-details-content">
                            <h4 class="text-center list-details-subtitle">{{ __("Access Level") }}</h4>
                            <h4 class="font-bold">{{ __("Company Account") }}</h4>
                            <ul>
                                <li>{{ __("Create Company Account") }}</li>
                                <li>{{ __("Manage/Revoke/Transfer Administrator Access") }}</li>
                                <li>{{ __("Manage Company Detail") }}</li>
                                <li>{{ __("Manage Subscription") }}</li>
                                <li>{{ __("Manage Group Access") }}</li>
                                <li>{{ __("Manage User & Assign Group (All)") }}</li>
                                <li>{{ __("Manage User & Assign Group (Except Administrator)") }}</li>
                                <li>{{ __("View Access Log") }}</li>
                            </ul>
                            <br>
                            <h4 class="font-bold">{{ __("Bookkeeping") }}</h4>
                            <ul>
                                <li>{{ __("View / List Bookkeeping Record") }}</li>
                                <li>{{ __("Upload Bookkeeping Record") }}</li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-shadow card-padd-15">
                        <h3 class="list-details-title">{{ __("Administrator") }}</h3>
                        <div class="list-details-content">
                            <h4 class="text-center list-details-subtitle">{{ __("Access Level") }}</h4>
                            <h4 class="font-bold">{{ __("Company Account") }}</h4>
                            <ul>
                                <li>{{ __("Create Company Account") }}</li>
                                <li>{{ __("Manage Company Detail") }}</li>
                                <li>{{ __("Manage Subscription") }}</li>
                                <li>{{ __("Manage Group Access") }}</li>
                                <li>{{ __("Manage User & Assign Group (Except Administrator)") }}</li>
                                <li>{{ __("View Access Log") }}</li>
                            </ul>
                            <br>
                            <h4 class="font-bold">{{ __("Bookkeeping") }}</h4>
                            <ul>
                                <li>{{ __("View / List Bookkeeping Record") }}</li>
                                <li>{{ __("Upload Bookkeeping Record") }}</li>
                            </ul>
                            <br>
                            <h4 class="font-bold">{{ __("Company Secretary") }}</h4>
                            <ul>
                                <li>{{ __("View / List Comp Sec Document") }}</li>
                                <li>{{ __("Upload Comp Sec Document") }}</li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-shadow card-padd-15">
                        <h3 class="list-details-title">{{ __("Bookkeeper") }}</h3>
                        <div class="list-details-content">
                            <h4 class="text-center list-details-subtitle">{{ __("Access Level") }}</h4>
                            <h4 class="font-bold">{{ __("Bookkeeping") }}</h4>
                            <ul>
                                <li>{{ __("View / List Bookkeeping Record") }}</li>
                                <li>{{ __("Upload Bookkeeping Record") }}</li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-shadow card-padd-15">
                        <h3 class="list-details-title">{{ __("Company Secretary") }}</h3>
                        <div class="list-details-content">
                            <h4 class="text-center list-details-subtitle">{{ __("Access Level") }}</h4>
                            <h4 class="font-bold">{{ __("Company Secretary") }}</h4>
                            <ul>
                                <li>{{ __("View / List Comp Sec Document") }}</li>
                                <li>{{ __("Upload Comp Sec Document") }}</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div id="user-list" class="js-content-tab" style="display: none">
                <table id="userListTable" class="" data-ajax-url="{{ route("cms.companies.show.users-table", $company->id) }}" data-empty-text="{{ __("No data available in table") }}">
                    <thead>
                        <tr>
                            <td>First Name</td>
                            <td>Last Name</td>
                            <td>Phone Number</td>
                            <td>Company</td>
                            <td>Access Level</td>
                            <td>Status</td>
                            <td>Action</td>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
            <div id="access-level" class="js-content-tab" style="display: none">
                <table id="access-level-table" class="">
                <thead>
                    <tr>
                        <td>Access right</td>
                        <td>Owner</td>
                        <td>Administrator</td>
                        <td>Bookkeeper</td>
                        <td>Company Secretart</td>
                    </tr>
                </thead>
                <tbody>
                    <tr class="highlights">
                        <td>Company Account</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td>Create Company Account</td>
                        <td><input type="checkbox"></td>
                        <td><input type="checkbox"></td>
                        <td><input type="checkbox"></td>
                        <td><input type="checkbox"></td>
                    </tr>
                    <tr>
                        <td>Manage / Revoke / Transfer Administrator Access</td>
                        <td><input type="checkbox"></td>
                        <td><input type="checkbox"></td>
                        <td><input type="checkbox"></td>
                        <td><input type="checkbox"></td>
                    </tr>
                    <tr>
                        <td>Manage Company Detail</td>
                        <td><input type="checkbox"></td>
                        <td><input type="checkbox"></td>
                        <td><input type="checkbox"></td>
                        <td><input type="checkbox"></td>
                    </tr>
                    <tr class="highlights">
                        <td>Bookkeeping</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td>Create Company Account</td>
                        <td><input type="checkbox"></td>
                        <td><input type="checkbox"></td>
                        <td><input type="checkbox"></td>
                        <td><input type="checkbox"></td>
                    </tr>
                    <tr>
                        <td>Manage / Revoke / Transfer Administrator Access</td>
                        <td><input type="checkbox"></td>
                        <td><input type="checkbox"></td>
                        <td><input type="checkbox"></td>
                        <td><input type="checkbox"></td>
                    </tr>
                    <tr>
                        <td>Manage Company Detail</td>
                        <td><input type="checkbox"></td>
                        <td><input type="checkbox"></td>
                        <td><input type="checkbox"></td>
                        <td><input type="checkbox"></td>
                    </tr>
                </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

{{-- Modals --}}
{{-- Add User Modal --}}
<div class="modal fade custom-modal" id="newUserModal" tabindex="-1" aria-labelledby="newUserModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content mx-auto">
            <div class="modal-body p-0">
                <p class="modal-title">{{ __("User Detail") }}</p>

                <form action="{{ route('cms.users.store') }}" class="theme-form" id="addUserFrm">
                    <input type="hidden" value="{{ $company->id }}" name="company_id">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="row mb-5 align-items-center">
                                <div class="col-auto">
                                    <label class="col-form-label">{{ __("First name") }}</label>
                                </div>
                                <div class="col">
                                    <input type="text" class="form-control" value="" name="first_name" required>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="row mb-5 align-items-center">
                                <div class="col-auto">
                                    <label class="col-form-label">{{ __("Password") }}</label>
                                </div>
                                <div class="col">
                                    <div class="password-wrapper">
                                        <input type="password" class="form-control" value="" name="password" required>
                                        <img class="mx-auto password-hide-show" src="{{ asset('themes/tailwind/images/password-hide-show.png') }}">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="row mb-5 align-items-center">
                                <div class="col-auto">
                                    <label class="col-form-label">{{ __("Last name") }}</label>
                                </div>
                                <div class="col">
                                    <input type="text" class="form-control" value="" name="last_name" required>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="row mb-5 align-items-center">
                                <div class="col-auto">
                                    <label class="col-form-label">{{ __("Confirm Password") }}</label>
                                </div>
                                <div class="col">
                                    <div class="password-wrapper">
                                        <input type="password" class="form-control" value="" name="password_confirmation" required>
                                        <img class="mx-auto password-hide-show" src="{{ asset('themes/tailwind/images/password-hide-show.png') }}">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="row mb-5 align-items-center">
                                <div class="col-auto">
                                    <label class="col-form-label">{{ __("Phone") }}</label>
                                </div>
                                <div class="col">
                                    <input type="text" class="form-control" value="" name="phone" required>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="row mb-5 align-items-center">
                                <div class="col-auto">
                                    <label class="col-form-label">{{ __("Email") }}</label>
                                </div>
                                <div class="col">
                                    <input type="email" class="form-control" value="" name="email" required>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="row mb-5 align-items-center">
                                <div class="col-auto">
                                    <label class="col-form-label">{{ __("Access Level") }}</label>
                                </div>
                                <div class="col">
                                    <select class="w-100" name="role_id" required>
                                        <option value="" disabled selected>{{ __("Select an option") }}</option>
                                        @foreach ($roles as $role)
                                            <option value="{{ $role->id }}">{{ $role->display_name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="row mb-5 align-items-center">
                                <div class="col-auto" required>
                                    <label class="col-form-label">{{ __("Status") }}</label>
                                </div>
                                <div class="col">
                                    <select class="w-100" name="status">
                                        <option value="active" selected>{{ __("Active") }}</option>
                                        <option value="inactive">{{ __("Inactive") }}</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="d-flex align-items-center justify-content-center">
                        <button type="submit" class="btn green-btn mx-3">{{ __("Save") }}</button>
                        <button type="button" class="btn red-btn mx-3" data-bs-dismiss="modal">{{ __("Cancel") }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{{-- Edit User Modal --}}
<div class="modal fade custom-modal" id="editUserModal" tabindex="-1" aria-labelledby="editUserModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content mx-auto">
            <div class="modal-body p-0">
                <p class="modal-title">{{ __("User Detail") }}</p>

                <form action="#" class="theme-form" id="editUserFrm">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="row mb-5 align-items-center">
                                <div class="col-auto">
                                    <label class="col-form-label">{{ __("First name") }}</label>
                                </div>
                                <div class="col">
                                    <input type="text" class="form-control" value="" name="first_name" required>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="row mb-5 align-items-center">
                                <div class="col-auto">
                                    <label class="col-form-label">{{ __("Current Password") }}</label>
                                </div>
                                <div class="col">
                                    <input type="password" class="form-control" value="" name="current_password">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="row mb-5 align-items-center">
                                <div class="col-auto">
                                    <label class="col-form-label">{{ __("Last name") }}</label>
                                </div>
                                <div class="col">
                                    <input type="text" class="form-control" value="" name="last_name" required>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="row mb-5 align-items-center">
                                <div class="col-auto">
                                    <label class="col-form-label">{{ __("Password") }}</label>
                                </div>
                                <div class="col">
                                    <div class="password-wrapper">
                                        <input type="password" class="form-control" value="" name="password">
                                        <img class="mx-auto password-hide-show" src="{{ asset('themes/tailwind/images/password-hide-show.png') }}">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="row mb-5 align-items-center">
                                <div class="col-auto">
                                    <label class="col-form-label">{{ __("Phone") }}</label>
                                </div>
                                <div class="col">
                                    <input type="text" class="form-control" value="" name="phone" required>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="row mb-5 align-items-center">
                                <div class="col-auto">
                                    <label class="col-form-label">{{ __("Confirm Password") }}</label>
                                </div>
                                <div class="col">
                                    <div class="password-wrapper">
                                        <input type="password" class="form-control" value="" name="password_confirmation">
                                        <img class="mx-auto password-hide-show" src="{{ asset('themes/tailwind/images/password-hide-show.png') }}">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="row mb-5 align-items-center">
                                <div class="col-auto">
                                    <label class="col-form-label">{{ __("Email") }}</label>
                                </div>
                                <div class="col">
                                    <input type="email" class="form-control" value="" name="email" required>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="row mb-5 align-items-center">
                                <div class="col-auto">
                                    <label class="col-form-label">{{ __("Access Level") }}</label>
                                </div>
                                <div class="col">
                                    <select class="w-100" name="role_id" required>
                                        <option value="" disabled selected>{{ __("Select an option") }}</option>
                                        @foreach ($roles as $role)
                                            <option value="{{ $role->id }}">{{ $role->display_name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="row mb-5 align-items-center">
                                <div class="col-auto" required>
                                    <label class="col-form-label">{{ __("Status") }}</label>
                                </div>
                                <div class="col">
                                    <select class="w-100" name="status">
                                        <option value="active" selected>{{ __("Active") }}</option>
                                        <option value="inactive">{{ __("Inactive") }}</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="d-flex align-items-center justify-content-center">
                        <button type="submit" class="btn green-btn mx-3">{{ __("Save") }}</button>
                        <button type="button" class="btn red-btn mx-3" data-bs-dismiss="modal">{{ __("Cancel") }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{{-- User Action Logs Modal --}}
<div class="modal fade custom-modal" id="userActionLogsModal" tabindex="-1" aria-labelledby="userActionLogsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content mx-auto">
            <div class="modal-body p-0">
                <p class="modal-title mb-4">{{ __("User Log") }}</p>

                <table id="userAccessLogsListTable" class="" data-ajax-url="{{ route("cms.users.accessLogsTable") }}" data-empty-text="{{ __("No data available in table") }}">
                    <thead>
                        <tr>
                            <td>{{ __("Date") }}</td>
                            <td>{{ __("Time") }}</td>
                            <td>{{ __("Event") }}</td>
                            <td>{{ __("Description") }}</td>
                            <td>{{ __("Status") }}</td>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>

                <div class="d-flex align-items-center justify-content-center">
                    <button type="button" class="btn red-btn mx-3" data-bs-dismiss="modal">{{ __("Back") }}</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    var languageTexts = {
        "Yes": '{{ __("Yes") }}',
        "Cancel": '{{ __("Cancel") }}',
        "Cancel": '{{ __("Cancel") }}',
        "Are you sure?": '{{ __("Are you sure?") }}',
        "You would not be able to revert this!": '{{ __("You would not be able to revert this!") }}',
    }
</script>