@extends('admin.layout')

@section('title', 'Modifier un rôle')

@section('content')
<div class="pagetitle">
    <h1>@yield('title')</h1>
</div>

<section class="section contact">
    <div class="card p-4">

        @if(session('error'))
            <div class="alert alert-danger">{{ session('error') }}</div>
        @endif

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

            <div class="mb-3">
                <label for="name" class="form-label">Nom du rôle</label>
                <input type="text" class="form-control" id="name" name="name" value="{{ old('name', $role->name) }}" required>
                @error('name')<div class="text-danger">{{ $message }}</div>@enderror
            </div>

            <h5>Permissions</h5>

            <div class="mb-3">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="checkAllPermissions">
                    <label class="form-check-label" for="checkAllPermissions"><strong>Tout cocher / décocher</strong></label>
                </div>
            </div>

            @php
                $permissionsByResource = $permissions->groupBy(function($perm){
                    return explode('.', $perm->name)[0] ?? 'Autre';
                });
                $actionsOrder = ['view', 'create', 'edit', 'delete'];
                $rolePerms = $role->permissions->pluck('name')->toArray();
            @endphp

            @foreach($permissionsByResource as $resource => $perms)
                <div class="mb-3 pb-2 border-bottom">
                    <strong>{{ \App\Helpers\PermissionHelper::resourceLabel($resource) }}</strong>

                    <div class="row g-2 align-items-center mt-1 perm-row">
                        {{-- D'abord les actions CRUD dans l'ordre --}}
                        @foreach($actionsOrder as $action)
                            @foreach($perms->where('name', $resource . '.' . $action) as $perm)
                                <div class="col-12 col-sm-auto">
                                    <div class="form-check">
                                        <input class="form-check-input permCheckbox" type="checkbox"
                                            name="permissions[]" value="{{ $perm->name }}"
                                            id="perm_{{ $perm->id }}"
                                            data-resource="{{ $resource }}"
                                            @if(in_array($perm->name, old('permissions', $rolePerms))) checked @endif>
                                        <label class="form-check-label" for="perm_{{ $perm->id }}">
                                            {!! \App\Helpers\PermissionHelper::badge($perm->name) !!}
                                        </label>
                                    </div>
                                </div>
                            @endforeach
                        @endforeach

                        {{-- Ensuite les actions personnalisées --}}
                        @php
                            $customActions = $perms->filter(function($perm) use ($resource, $actionsOrder) {
                                $action = explode('.', $perm->name)[1] ?? null;
                                return !in_array($action, $actionsOrder);
                            });
                        @endphp
                        @foreach($customActions as $perm)
                            <div class="col-12 col-sm-auto">
                                <div class="form-check">
                                    <input class="form-check-input permCheckbox" type="checkbox"
                                        name="permissions[]" value="{{ $perm->name }}"
                                        id="perm_{{ $perm->id }}"
                                        data-resource="{{ $resource }}"
                                        @if(in_array($perm->name, old('permissions', $rolePerms))) checked @endif>
                                    <label class="form-check-label" for="perm_{{ $perm->id }}">
                                        {!! \App\Helpers\PermissionHelper::badge($perm->name) !!}
                                    </label>
                                </div>
                            </div>
                        @endforeach

                        {{-- Tout cocher la ligne (inutile si la ressource n'a qu'une seule permission) --}}
                        @if($perms->count() > 1)
                            <div class="col-12 col-sm-auto">
                                <div class="form-check">
                                    <input class="form-check-input checkRow" type="checkbox" data-resource="{{ $resource }}" id="checkRow_{{ $resource }}">
                                    <label class="form-check-label" for="checkRow_{{ $resource }}"><strong>Ligne complète</strong></label>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            @endforeach

            <button type="submit" class="btn btn-primary">Mettre à jour</button>
            <a href="{{ route('roles.index') }}" class="btn btn-secondary">Annuler</a>
        </form>

    </div>
</section>

<script>
document.addEventListener('DOMContentLoaded', function () {

    // Tout cocher global
    const checkAll = document.getElementById('checkAllPermissions');
    checkAll.addEventListener('change', function() {
        document.querySelectorAll('.permCheckbox').forEach(c => c.checked = this.checked);
        document.querySelectorAll('.checkRow').forEach(c => c.checked = this.checked);
    });

    // Tout cocher par ligne
    document.querySelectorAll('.checkRow').forEach(rowCheck => {
        rowCheck.addEventListener('change', function() {
            const resource = this.dataset.resource;
            document.querySelectorAll(`.permCheckbox[data-resource="${resource}"]`).forEach(c => c.checked = this.checked);
        });
    });

    // Pré-cocher les lignes complètes si toutes les permissions de la ligne sont cochées
    document.querySelectorAll('.checkRow').forEach(rowCheck => {
        const resource = rowCheck.dataset.resource;
        const allChecked = Array.from(document.querySelectorAll(`.permCheckbox[data-resource="${resource}"]`))
                                .every(c => c.checked);
        rowCheck.checked = allChecked;
    });

});
</script>
@endsection