@extends('back.layout.app')
@section('title', config('app.name') . ' - Rôles')
@section('page-title', 'Rôles')

@php $breadcrumb = 'user-management.roles'; @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">Rôles</h1>
            <div class="flex items-center gap-2 text-sm font-normal text-secondary-foreground">
                Gestion des rôles et des accès
            </div>
        </div>
        @can('create-roles')
        <button type="button" class="kt-btn kt-btn-outline text-primary" data-kt-drawer-toggle="#drawer_create_role">
            <i class="ki-outline ki-plus-circle text-primary"></i>
            Créer un rôle
        </button>
        @endcan
    </div>
</div>

<div class="kt-container-fixed">

    <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-5 lg:gap-7.5">

        @foreach ($roles as $role)
        <div class="kt-card flex flex-col gap-5 p-5 lg:p-7.5">

            {{-- En-tête --}}
            <div class="flex items-center flex-wrap justify-between gap-1">
                <div class="flex items-center gap-2.5">
                    <div class="relative size-[44px] shrink-0">
                        <svg class="w-full h-full stroke-primary/10 fill-primary/5" fill="none" height="48"
                            viewBox="0 0 44 48" width="44" xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M16 2.4641C19.7128 0.320509 24.2872 0.320508 28 2.4641L37.6506 8.0359C41.3634 10.1795 43.6506 14.141 43.6506 18.4282V29.5718C43.6506 33.859 41.3634 37.8205 37.6506 39.9641L28 45.5359C24.2872 47.6795 19.7128 47.6795 16 45.5359L6.34937 39.9641C2.63655 37.8205 0.349365 33.859 0.349365 29.5718V18.4282C0.349365 14.141 2.63655 10.1795 6.34937 8.0359L16 2.4641Z"
                                fill=""></path>
                            <path
                                d="M16.25 2.89711C19.8081 0.842838 24.1919 0.842837 27.75 2.89711L37.4006 8.46891C40.9587 10.5232 43.1506 14.3196 43.1506 18.4282V29.5718C43.1506 33.6804 40.9587 37.4768 37.4006 39.5311L27.75 45.1029C24.1919 47.1572 19.8081 47.1572 16.25 45.1029L6.59937 39.5311C3.04125 37.4768 0.849365 33.6803 0.849365 29.5718V18.4282C0.849365 14.3196 3.04125 10.5232 6.59937 8.46891L16.25 2.89711Z"
                                stroke=""></path>
                        </svg>
                        <div
                            class="absolute leading-none start-2/4 top-2/4 -translate-y-2/4 -translate-x-2/4 rtl:translate-x-2/4">
                            <i class="ki-filled ki-shield-tick text-xl text-primary"></i>
                        </div>
                    </div>
                    <div class="flex flex-col gap-1">
                        <span class="text-base font-medium text-mono mb-px">{{ $role->name }}</span>
                        <span class="text-sm text-secondary-foreground">
                            {{ $role->users_count }} {{ $role->users_count > 1 ? 'utilisateurs' : 'utilisateur' }}
                        </span>
                        <span class="kt-badge kt-badge-sm kt-badge-outline {{ $role->permissions_count > 0 ? 'kt-badge-primary' : 'kt-badge-secondary' }} self-start">
                            {{ $role->permissions_count }}/{{ $totalPermissions }} permission(s) active(s)
                        </span>
                    </div>
                </div>
                <div class="kt-menu inline-flex" data-kt-menu="true">
                    <div class="kt-menu-item kt-menu-item-dropdown" data-kt-menu-item-offset="0, 10px"
                        data-kt-menu-item-placement="bottom-end" data-kt-menu-item-placement-rtl="bottom-start"
                        data-kt-menu-item-toggle="dropdown" data-kt-menu-item-trigger="click">
                        <button class="kt-menu-toggle kt-btn kt-btn-sm kt-btn-icon kt-btn-ghost">
                            <i class="ki-filled ki-dots-vertical text-lg"></i>
                        </button>
                        @php $isSuperAdmin = $role->slug === 'super-admin'; @endphp
                        <div class="kt-menu-dropdown kt-menu-default w-full max-w-[250px]" data-kt-menu-dismiss="true">

                            {{-- Consulter les permissions (tous les rôles) --}}
                            <div class="kt-menu-item">
                                <a class="kt-menu-link" href="{{ route('admin.user-management.roles.permissions.show', $role) }}">
                                    <span class="kt-menu-icon"><i class="ki-filled ki-eye"></i></span>
                                    <span class="kt-menu-title">Consulter les permissions</span>
                                </a>
                            </div>

                            @unless ($isSuperAdmin)
                            @can('edit-roles')
                            {{-- Gérer les permissions --}}
                            <div class="kt-menu-item">
                                <a class="kt-menu-link" href="{{ route('admin.user-management.roles.permissions.edit', $role) }}">
                                    <span class="kt-menu-icon"><i class="ki-filled ki-key"></i></span>
                                    <span class="kt-menu-title">Gérer les permissions</span>
                                </a>
                            </div>

                            <div class="kt-menu-separator"></div>

                            {{-- Renommer --}}
                            <div class="kt-menu-item">
                                <button type="button" class="kt-menu-link w-full text-start"
                                    data-kt-drawer-toggle="#drawer_rename_role"
                                    data-rename-url="{{ route('admin.user-management.roles.update', $role) }}"
                                    data-rename-name="{{ $role->name }}">
                                    <span class="kt-menu-icon"><i class="ki-filled ki-pencil"></i></span>
                                    <span class="kt-menu-title">Renommer</span>
                                </button>
                            </div>
                            @endcan

                            @can('delete-roles')
                            {{-- Supprimer (bloqué si des utilisateurs sont rattachés) --}}
                            @if ($role->users_count === 0)
                            <div class="kt-menu-item">
                                <button type="button" class="kt-menu-link w-full text-start"
                                    data-kt-modal-toggle="#modal_confirm_delete"
                                    data-confirm-url="{{ route('admin.user-management.roles.destroy', $role) }}"
                                    data-confirm-name="{{ $role->name }}">
                                    <span class="kt-menu-icon"><i class="ki-filled ki-trash text-destructive"></i></span>
                                    <span class="kt-menu-title text-destructive">Supprimer</span>
                                </button>
                            </div>
                            @else
                            <div class="kt-menu-item">
                                <span class="kt-menu-link opacity-50 cursor-not-allowed"
                                    data-kt-tooltip="#tt_role_del_{{ $role->id }}" data-kt-tooltip-placement="bottom">
                                    <span class="kt-menu-icon"><i class="ki-filled ki-trash"></i></span>
                                    <span class="kt-menu-title">Supprimer</span>
                                </span>
                                <div id="tt_role_del_{{ $role->id }}" class="kt-tooltip">
                                    Impossible : des utilisateurs sont rattachés à ce rôle
                                </div>
                            </div>
                            @endif
                            @endcan
                            @endunless
                        </div>
                    </div>
                </div>
            </div>

            {{-- Avatars des utilisateurs --}}
            @if ($role->users->count())
            <div class="flex -space-x-2">
                @foreach ($role->users->take(3) as $u)
                <div class="flex">
                    @if ($u->getAvatarUrl())
                    <img class="hover:z-5 relative shrink-0 rounded-full ring-1 ring-background size-8"
                        src="{{ $u->getAvatarUrl() }}" alt="{{ $u->firstname }}">
                    @else
                    <div
                        class="hover:z-5 relative flex items-center justify-center shrink-0 rounded-full ring-1 ring-background size-8 bg-primary/10 text-primary text-2xs font-semibold">
                        {{ Str::upper($u->initials()) }}
                    </div>
                    @endif
                </div>
                @endforeach

                @if ($role->users_count > 3)
                <span
                    class="relative inline-flex items-center justify-center shrink-0 rounded-full ring-1 font-semibold leading-none text-2xs size-8 text-white ring-background bg-primary">
                    +{{ $role->users_count - 3 }}
                </span>
                @endif
            </div>
            @else
            <span class="text-xs text-secondary-foreground italic">Aucun utilisateur</span>
            @endif

        </div>
        @endforeach

    </div>
</div>

@include('back.modules.user_management.roles.partials.drawer_create_role')
@include('back.modules.user_management.roles.partials.drawer_rename_role')

@endsection