@extends('back.layout.app')
@section('title', config('app.name') . ' - Permissions du rôle')
@section('page-title', 'Permissions du rôle')

@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">
               Permissions -  <span class="text-primary">{{ $role->name }}</span>
            </h1>
            <div class="flex items-center gap-2 text-sm font-normal text-secondary-foreground">
                Activez un module pour afficher ses sous-modules, puis cochez les actions autorisées.
            </div>
        </div>
        <a href="{{ route('admin.user-management.roles') }}" class="kt-btn kt-btn-sm kt-btn-outline">
            <i class="ki-outline ki-arrow-left"></i>
            Retour
        </a>
    </div>
</div>

<form method="POST" action="{{ route('admin.user-management.roles.permissions.update', $role) }}">
    @csrf
    @method('PUT')

    <div class="kt-container-fixed flex flex-col gap-5">

        @foreach ($tree as $family)
        @php $isDashboard = $family['name'] === 'home'; @endphp

        {{-- ─── Dashboard : affichage simple (pas d'accordéon) ─────────────── --}}
        @if ($isDashboard)
        <div class="kt-card">
            <div class="kt-card-header">
                <h3 class="kt-card-title flex items-center gap-2">
                    <i class="ki-filled {{ $family['icon'] }} text-base text-muted-foreground"></i>
                    {{ $family['label'] }}
                </h3>
            </div>
            <div class="kt-card-content flex flex-col gap-3">
                @foreach ($family['submodules'] as $sub)
                    @foreach ($sub['permissions'] as $perm)
                    <label class="flex items-start gap-3 p-3 rounded-lg border border-input hover:bg-accent/30 cursor-pointer">
                        <input type="checkbox" class="kt-checkbox kt-checkbox-sm mt-0.5" name="permissions[]"
                            value="{{ $perm['name'] }}" {{ $perm['checked'] ? 'checked' : '' }}>
                        <div class="flex flex-col gap-0.5">
                            <span class="text-sm font-medium text-mono">{{ $perm['label'] }}</span>
                            @if ($perm['description'])
                            <span class="text-xs text-secondary-foreground">{{ $perm['description'] }}</span>
                            @endif
                        </div>
                    </label>
                    @endforeach
                @endforeach
            </div>
        </div>

        {{-- ─── Modules standards : toggle module > toggle sous-module > cases ─ --}}
        @else
        @php $modId = 'mod_' . $family['name']; @endphp
        <div class="kt-card">
        <div class="flex flex-wrap items-center gap-3.5 p-5">
            {{-- En-tête module (clic = bascule le switch via for) --}}
            <label for="{{ $modId }}" class="flex items-center gap-3.5 flex-1 min-w-0 cursor-pointer">
                <div class="relative size-[44px] shrink-0">
                    <svg class="w-full h-full stroke-border fill-muted/30" fill="none" viewBox="0 0 44 48" 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"></path>
                    </svg>
                    <div class="absolute leading-none start-2/4 top-2/4 -translate-y-2/4 -translate-x-2/4">
                        <i class="ki-filled {{ $family['icon'] }} text-lg text-muted-foreground"></i>
                    </div>
                </div>
                <div class="flex flex-col gap-1">
                    <span class="text-sm font-medium text-mono">{{ $family['label'] }}</span>
                    <span class="text-xs text-secondary-foreground">
                        {{ $family['checked_count'] }} / {{ $family['total'] }} permission(s) active(s)
                    </span>
                </div>
            </label>

            {{-- Switch (peer) : pilote l'affichage des sous-modules --}}
            <input type="checkbox" id="{{ $modId }}" class="kt-switch peer" {{ $family['checked_count'] ? 'checked' : '' }}>

            {{-- Contenu révélé : sous-modules --}}
            <div class="hidden peer-checked:flex basis-full flex-col gap-3 pt-2">
                @foreach ($family['submodules'] as $sub)
                @php $subId = 'sub_' . $sub['name']; @endphp
                <div class="flex flex-wrap items-center gap-3 rounded-lg border border-input p-3" data-submodule>
                    <label for="{{ $subId }}" class="flex flex-col gap-0.5 flex-1 min-w-0 cursor-pointer">
                        <span class="text-sm font-medium text-mono">{{ $sub['label'] }}</span>
                        @if ($sub['description'])
                        <span class="text-xs text-secondary-foreground">{{ $sub['description'] }}</span>
                        @endif
                    </label>

                    <input type="checkbox" id="{{ $subId }}" class="kt-switch peer/sub" {{ $sub['checked_count'] ? 'checked' : '' }}>

                    {{-- Contenu révélé : « tout cocher » + grille des permissions --}}
                    <div class="hidden peer-checked/sub:flex basis-full flex-col gap-2.5 pt-2">
                        {{-- Tout cocher / décocher --}}
                        <label class="flex items-center gap-2 self-start cursor-pointer">
                            <input type="checkbox" class="kt-checkbox kt-checkbox-sm" data-select-all="{{ $sub['name'] }}"
                                {{ $sub['total'] > 0 && $sub['checked_count'] === $sub['total'] ? 'checked' : '' }}>
                            <span class="text-xs font-medium text-secondary-foreground">Tout cocher</span>
                        </label>

                        {{-- Grille des permissions --}}
                        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2.5">
                            @foreach ($sub['permissions'] as $perm)
                            <div class="kt-form-item rounded-lg border border-input bg-muted/40 p-3">
                                <div class="kt-form-control kt-form-control-inline">
                                    <input type="checkbox" class="kt-checkbox kt-checkbox-sm" id="perm_{{ $perm['name'] }}"
                                        name="permissions[]" value="{{ $perm['name'] }}"
                                        data-perm-group="{{ $sub['name'] }}" {{ $perm['checked'] ? 'checked' : '' }}>
                                    <label class="kt-form-label" for="perm_{{ $perm['name'] }}">{{ $perm['label'] }}</label>
                                </div>
                                @if ($perm['description'])
                                <div class="kt-form-description">{{ $perm['description'] }}</div>
                                @endif
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
        </div>
        @endif
        @endforeach

        <div class="flex items-center justify-end gap-3 pb-7.5">
            <a href="{{ route('admin.user-management.roles') }}" class="kt-btn kt-btn-ghost kt-btn-destructive">
                {{ __('ui.actions.cancel') }}
            </a>
            <x-ui.loading-button type="submit" class="kt-btn-primary" loadingText="Enregistrement...">
                Enregistrer
            </x-ui.loading-button>
        </div>

    </div>
</form>

@endsection

@push('scripts')
<script>
(function () {
    const perms = (group) => document.querySelectorAll('[data-perm-group="' + CSS.escape(group) + '"]');
    const master = (group) => document.querySelector('[data-select-all="' + CSS.escape(group) + '"]');

    // Synchronise l'état du « tout cocher » (coché / indéterminé / décoché)
    function syncMaster(group) {
        const m = master(group);
        if (!m) return;
        const all = perms(group);
        const checked = [...all].filter(c => c.checked).length;
        m.checked = all.length > 0 && checked === all.length;
        m.indeterminate = checked > 0 && checked < all.length;
    }

    // Décoche toutes les permissions + masters dans un conteneur donné
    function deactivate(scope) {
        scope.querySelectorAll('input[name="permissions[]"]').forEach(c => { c.checked = false; });
        scope.querySelectorAll('[data-select-all]').forEach(m => { m.checked = false; m.indeterminate = false; });
    }

    document.addEventListener('change', function (e) {
        const el = e.target;

        // Toggle MODULE désactivé → décoche tout le module (sous-modules + permissions)
        if (el.matches('input.kt-switch[id^="mod_"]') && !el.checked) {
            const card = el.closest('.kt-card');
            if (card) {
                card.querySelectorAll('input.kt-switch[id^="sub_"]').forEach(s => { s.checked = false; });
                deactivate(card);
            }
            return;
        }

        // Toggle SOUS-MODULE désactivé → décoche les permissions de ce sous-module
        if (el.matches('input.kt-switch[id^="sub_"]') && !el.checked) {
            const sub = el.closest('[data-submodule]');
            if (sub) deactivate(sub);
            return;
        }

        if (el.matches('[data-select-all]')) {
            const group = el.getAttribute('data-select-all');
            perms(group).forEach(cb => { cb.checked = el.checked; });
            el.indeterminate = false;
        } else if (el.matches('[data-perm-group]')) {
            syncMaster(el.getAttribute('data-perm-group'));
        }
    });

    // État initial des masters (gère le cas « partiellement coché »)
    document.addEventListener('DOMContentLoaded', function () {
        const groups = new Set([...document.querySelectorAll('[data-select-all]')]
            .map(m => m.getAttribute('data-select-all')));
        groups.forEach(syncMaster);
    });
})();
</script>
@endpush