@extends('portal.layouts.app', [
    'class' => '',
    'elementActive' => ''
])
@section('title', 'User Permissions')
@section('css')
<style>

</style>
@endsection
@section('content')
         <!-- Page Content  -->
        <div id="content-page" class="content-page">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <div class="iq-card">
                    <div class="iq-card-header d-flex justify-content-between">
                        <div class="iq-header-title">
                            <h4 class="card-title">Manage Permissions for {{ $user->name }}</h4>
                        </div>
                    </div>
                    <div class="iq-card-body">
                        <form action="{{ route('admin.updateuserpermissions', ['user' => $user->id]) }}" method="POST">
                            @csrf
                            @method('PUT')

                            @foreach ($permissions as $category => $perms)
                                <div class="card mb-3">
                            <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                                <strong>{{ ucfirst($category) }}</strong>

                            </div>
                            <div class="card-body">
                                <div class="row permission-group" data-group="{{ $loop->index }}">

                                    <div class="custom-control col-12 custom-switjch text-white">
                                        <input type="checkbox" class="select-group select-all-toggle" id="select_all_{{ $loop->index }}" data-group="{{ $loop->index }}">
                                        <label class="ml-2" for="select_all_{{ $loop->index }}">Select All</label>
                                    </div>
                                    @foreach ($perms as $permission)
                                        <div class="col-sm-4">
                                            <div class="custom-control custom-switch">
                                                <input class="custom-control-input permission-checkbox" type="checkbox" name="permissions[]" value="{{ $permission->name }}"
                                                    id="perm_{{ $permission->id }}" data-group="{{ $loop->parent->index }}"
                                                    {{ in_array($permission->name, $userPermissions) ? 'checked' : '' }}>
                                                <label class="custom-control-label" for="perm_{{ $permission->id }}">
                                                    {{ ucwords(str_replace('_', ' ', $permission->name)) }}
                                                </label>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>

                                @endforeach
                                <div class="text-right">
                                    <button type="submit" class="btn btn-primary">Save Changes</button>
                                </div>
                            </form>
                        </div>

                </div>
            </div>
        </div>
    </div>
</div>
      <!-- Wrapper END -->
@endsection
@section('script')
@section('script')
<script>
$(document).ready(function () {

    // Handle "Select All" toggle
    $('.select-all-toggle').on('change', function () {
        var $this = $(this);
        var groupId = $this.data('group');
        var isChecked = $this.prop('checked');

        // Check/uncheck all checkboxes in the group
        $('.permission-group[data-group="' + groupId + '"] .permission-checkbox').prop('checked', isChecked);
    });

    // Handle individual checkbox toggle
    $('.permission-checkbox').on('change', function () {
        var $this = $(this);
        var groupId = $this.data('group');
        var $groupCheckboxes = $('.permission-group[data-group="' + groupId + '"] .permission-checkbox');
        var $selectAll = $('.select-all-toggle[data-group="' + groupId + '"]');

        // Check if all checkboxes in group are checked
        var allChecked = $groupCheckboxes.length === $groupCheckboxes.filter(':checked').length;

        // Update "Select All" checkbox state
        $selectAll.prop('checked', allChecked);
    });

});
</script>
@endsection



@endsection