@extends('header.topnav')

@section('title', 'Welcome')

@section('content')

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    function auto_suggest(event) {
        var checkbox = $(event).prop('checked');
        console.log('checkbox',checkbox)
        $.ajax({
            type: "post",
            url: "{{ route('autonomous-level') }}",
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            data: {
                ref: 'Suggest',
                checkbox: checkbox == true ? 1 : 0,
            }
        })
    }
</script>

<div class="p-8 overflow-y-auto" style="height: 40rem;">
    <h1 class="text-2xl font-bold">Access Control List (ACL) Settings</h1>
    <br>
   

<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
    <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400 sticky top-0">
            <tr>
                <th scope="col" class="px-6 py-3">
                    Autonomous
                </th>
                <th scope="col" class="px-6 py-3">
                    Description
                </th>
                <th scope="col" class="px-6 py-3">
                    Action
                </th>
            </tr>
        </thead>
        <tbody class="overflow-y-auto">
            <tr class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700">
                <th scope="row" class="px-6 py-3 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                    Create Shortcut
                </th>
                <td class="px-6 py-3">
                    Add our own shortcut links to navigation
                </td>
                <td class="px-6 py-3 cursor-pointer" Onclick="window.onbeforeunload = null;window.location.href = '/shortcut'">
                    Modify
                </td>
            </tr>
            <tr class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700">
                <th scope="row" class="px-6 py-3 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                    Mail Signature
                </th>
                <td class="px-6 py-3">
                    Add our own Mail signature
                </td>
                <td class="px-6 py-3 cursor-pointer" Onclick="window.onbeforeunload = null;window.location.href = '/Mailsign'">
                    Modify
                </td>
            </tr>
            <tr class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700">
                <th scope="row" class="px-6 py-3 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                    Auto Suggest
                </th>
                <td class="px-6 py-3">
                    -
                </td>
                <td class="px-6 py-3 cursor-pointer">
                    <label class="inline-flex items-center cursor-pointer">
                        <input type="checkbox" class="sr-only peer" Onclick="auto_suggest(this)" >
                        <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-gray-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-gray-900"></div>
                    </label>
                </td>
            </tr>
        </tbody>
    </table>
</div>

</div>

@endsection