@if(\Illuminate\Support\Facades\Auth::user()->isAbleTo('urm-read'))
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <!--begin::Container-->
    <div id="kt_content_container" class="container-fluid">

            @if (session()->has('success'))
            <div class="flex py-4">
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <strong>{{ session('success') }}</strong>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            </div>

            @elseif (session()->has('error'))
            <div class="flex py-4">
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <strong>{{ session('error') }}</strong>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            </div>
            @endif



        <div class="row">
         <div class="col-md-12 " >
        <!--begin::Card-->
        <div class="card card-flush" style="box-shadow: 0px 5px 10px #4f55da;">
            <!--begin::Card header-->

            <!--end::Card header-->
            <!--begin::Card body-->
            <div class="card-body pt-0">
                <!--begin::Table-->
                <table id="kt_datatable_example_5" class="table table-striped  gy-5 gs-7 ">
                    <thead>
                    <tr class="fw-bolder fs-6 text-gray-800 px-7">
                        <th>SL No.</th>
                        <th>Status</th>
                        <th>Permissions</th>
                        <th>Display Name</th>
                        <th>Description</th>

                    </tr>
                    </thead>
                    <tbody>
                    @foreach($datatables as $key => $tabledata)
                    <tr>
                        <td>{{$key +1}}</td>
                        <td>
                            @if($tabledata->status)
                                <span class="badge badge-success fs-7 m-1 text-white">Active</span>
                            @else
                                <span class="badge badge-danger fs-7 m-1 text-white">Inactive</span>
                            @endif
                        </td>
                        <td>{{$tabledata->name}}</td>
                        <td>{{$tabledata->display_name}}</td>
                        <td>{{$tabledata->description}}</td>

                    </tr>
                        @endforeach

                    </tbody>
                </table>
                <!--end::Table-->
            </div>
            <!--end::Card body-->
        </div>
        <!--end::Card-->
         </div>
        </div>


        <!--end::Modals-->
    </div>
    <!--end::Container-->
</div>
@else
    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <!--begin::Container-->
        <div id="kt_content_container" class="container-fluid">
            <div class="card card-flush">
                <div class="card-body">
                    <h1 class=" text-center text-bold" style="font-size: 25px; font-weight: bold; color: red;">Sorry !!! Unauthorized Access</h1>
                </div>
            </div>
        </div>
    </div>

@endif

@section('externaljs')
   {{-- <script src="{{asset('assets/js/custom/apps/user-management/permissions/list.js')}}"></script>--}}

    {{--<script src="{{asset('assets/js/custom/apps/user-management/permissions/update-permission.js')}}"></script>--}}

    <script>
        $("#kt_datatable_example_5").DataTable({
            "language": {
                "lengthMenu": "Show _MENU_",
            },
            "dom":
                "<'row'" +
                "<'col-sm-6 d-flex align-items-center justify-conten-start'l>" +
                "<'col-sm-6 d-flex align-items-center justify-content-end'f>" +
                ">" +

                "<'table-responsive'tr>" +

                "<'row'" +
                "<'col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start'i>" +
                "<'col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end'p>" +
                ">"
        });

        function popupmodal() {
            Swal.fire({
                text: "Are you sure you would like to close?",
                icon: "warning",
                showCancelButton: !0,
                buttonsStyling: !1,
                confirmButtonText: "Yes, close it!",
                cancelButtonText: "No, return",
                customClass: {
                    confirmButton: "btn btn-primary",
                    cancelButton: "btn btn-active-light"
                }
            }).then((function (result) {

                if (result.isConfirmed) {
                    closemodal();
                } else if (
                    /* Read more about handling dismissals below */
                    result.dismiss === Swal.DismissReason.cancel
                ) {
                    swalWithBootstrapButtons.fire(
                        'Cancelled',
                        'Your imaginary file is safe :)',
                        'error'
                    )
                }


            }))
        }

        function closemodal(){
            $('.modal').modal('hide');
        }



        window.addEventListener('closemodal', event=> {
            closemodal();
        });
    </script>
    @endsection