@extends('back.layout.app')
@section('title', 'Permissions')
@section('page-title', 'Permissions')

@php
    $breadcrumb = 'user-management.permissions';
@endphp

@section('content')

<div class="kt-container-fixed">
    <div class="flex flex-wrap items-center lg:items-end justify-between gap-5 pb-7.5">
        <div class="flex flex-col justify-center gap-2">
            <h1 class="text-xl font-medium leading-none text-mono">
                Permissions
            </h1>
            <div class="flex items-center gap-2 text-sm font-normal text-secondary-foreground">
                Catalogue des permissions du système.
            </div>
        </div>
    </div>
</div>

<!-- Container -->
<div class="kt-container-fixed">
    <div class="grid w-full space-y-5">
        <div class="kt-card">
            <div class="kt-card-header min-h-16">
                <input type="text" placeholder="{{ __('ui.datatable.search') }}" class="kt-input sm:w-48"
                    data-kt-datatable-search="#kt_datatable_permissions" />
            </div>
            <div id="kt_datatable_permissions" class="kt-card-table"
                data-kt-datatable="true"
                data-kt-datatable-page-size="50"
                data-kt-datatable-state-save="false"
                data-kt-datatable-info="{{ __('ui.datatable.info') }}"
                data-kt-datatable-info-empty="{{ __('ui.datatable.info_empty') }}">
                <div class="kt-table-wrapper kt-scrollable">
                    <table class="kt-table" data-kt-datatable-table="true">
                        <thead>
                            <tr>
                                <th scope="col" class="w-44" data-kt-datatable-column="slug">
                                    <span class="kt-table-col"><span class="kt-table-col-label text-xs uppercase font-semibold text-gray-700">Slug</span><span class="kt-table-col-sort"></span></span>
                                </th>

                                <th scope="col" data-kt-datatable-column="description">
                                    <span class="kt-table-col"><span class="kt-table-col-label text-xs uppercase font-semibold text-gray-700">Description</span><span class="kt-table-col-sort"></span></span>
                                </th>
                                <th scope="col" class="w-56" data-kt-datatable-column="roles">
                                    <span class="kt-table-col"><span class="kt-table-col-label text-xs uppercase font-semibold text-gray-700">Rôles</span><span class="kt-table-col-sort"></span></span>
                                </th>
                                <th scope="col" class="w-100" data-kt-datatable-column="module">
                                    <span class="kt-table-col"><span class="kt-table-col-label text-xs uppercase font-semibold text-gray-700">Module</span><span class="kt-table-col-sort"></span></span>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($permissions as $permission)
                            <tr>
                                <td data-kt-datatable-value="{{ $permission->name }}">
                                    <span class="kt-badge kt-badge-sm kt-badge-outline kt-badge-secondary font-mono">
                                        {{ $permission->name }}
                                    </span>
                                </td>

                                <td>
                                    <span class="text-xs text-gray-600">
                                        {{ $permission->description }}
                                    </span>
                                </td>
                                <td>
                                    @if ($permission->roles->isEmpty())
                                        <span class="text-sm text-secondary-foreground">—</span>
                                    @else
                                        <div class="flex flex-wrap gap-1">
                                            @foreach ($permission->roles as $role)
                                            <span class="kt-badge kt-badge-xs kt-badge-outline kt-badge-primary">
                                                {{ $role->name }}
                                            </span>
                                            @endforeach
                                        </div>
                                    @endif
                                </td>
                                <td data-kt-datatable-value="{{ $permission->parent?->parent?->label }} {{ $permission->parent?->label }}">
                                    <span class="text-xs text-gray-400">
                                        {{ $permission->parent?->parent?->label }} <i class="ki-outline ki-right text-2xs"></i> {{ $permission->parent?->label }}
                                    </span>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <!--begin:pagination-->
                <div class="kt-datatable-toolbar">
                    <div class="kt-datatable-length">
                        {{ __('ui.datatable.show') }}<select class="kt-select kt-select-sm w-16" name="perpage"
                            data-kt-datatable-size="true"></select>{{ __('ui.datatable.per_page') }}
                    </div>
                    <div class="kt-datatable-info">
                        <span data-kt-datatable-info="true"></span>
                        <div class="kt-datatable-pagination" data-kt-datatable-pagination="true"></div>
                    </div>
                </div>
                <!--end:pagination-->
            </div>
        </div>
    </div>
</div>
<!-- End of Container -->

@endsection