@extends('layouts.master')
@section('content')
<div class="card">
    <div class="card-header card-custom-bg d-flex flex-row align-items-center justify-content-between">
        <h5>Role: {{$role->name}} </h5>
        <a href="{{ route('roles.index') }}" class="btn btn-sm btn-primary">Role List</a>
    </div>
    <div class="card-body">
        @if ($hierarchicalPermissions->count()>0)
            <form action="{{ route('roles.assign-permission',$role->id) }}" method="POST">
                @csrf
                @method('PUT')
                
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>Module</th>
                                <th>Permissions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($hierarchicalPermissions as $categoryName => $categories)
                                <tr>
                                    <td class="align-middle" style="min-width: 200px;">
                                        <div class="d-flex align-items-center">
                                            <div class="me-3">
                                                <input type="checkbox" class="category-checkbox" data-category="{{ $categoryName }}">
                                            </div>
                                            <div>
                                                <h6 class="mb-0">
                                                    @if(isset($categories['standalone'][0]))
                                                        {{ ucfirst(ucwords(str_replace('-', ' ', $categories['standalone'][0]['display_name']))) }}
                                                    @else
                                                        No Display Name
                                                    @endif
                                                </h6>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <!-- Standalone Permissions -->
                                        @if(count($categories['standalone']) > 0)
                                            <div class="mb-3">
                                                <div class="row g-2">
                                                    @foreach ($categories['standalone'] as $permission)
                                                        <div class="col-md-3">
                                                            <label class="d-flex align-items-center">
                                                                <input type="checkbox" name="permission[]" 
                                                                    value="{{ $permission->name }}" 
                                                                    class="permission-checkbox {{ $categoryName }}-checkbox me-2"
                                                                    {{ in_array($permission->id, $assignPermissions) ? 'checked' : '' }}>
                                                                <span>{{ $permission->display_name }}</span>
                                                            </label>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        @endif

                                        <!-- Grouped Permissions -->
                                        @foreach ($categories['grouped'] as $subCategoryName => $permissions)
                                            <div class="mb-3">
                                                <div class="d-flex align-items-center mb-2">
                                                    <input type="checkbox" class="subcategory-checkbox me-2" 
                                                        data-subcategory="{{ $subCategoryName }}" 
                                                        data-category="{{ $categoryName }}">
                                                    <h6 class="mb-0">{{ ucfirst(str_replace('-', ' ', $subCategoryName)) }}</h6>
                                                </div>
                                                <div class="row g-2">
                                                    @foreach ($permissions as $permission)
                                                        <div class="col-md-3">
                                                            <label class="d-flex align-items-center">
                                                                <input type="checkbox" name="permission[]" 
                                                                    value="{{ $permission->name }}" 
                                                                    class="permission-checkbox {{ $categoryName }}-checkbox {{ $subCategoryName }}-checkbox me-2"
                                                                    {{ in_array($permission->id, $assignPermissions) ? 'checked' : '' }}>
                                                                <span>{{ $permission->display_name }}</span>
                                                            </label>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        @endforeach
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <div class="mt-3">
                    <button class="btn btn-primary">Update</button>
                </div>
            </form>
        @endif
    </div>
</div>
@endsection
@section('scripts')
    <script>
        $(document).ready(function() {
            // Handle category checkbox change
            $('.category-checkbox').change(function() {
                var category = $(this).data('category');
                $('.' + category + '-checkbox').prop('checked', $(this).prop('checked'));
            });

            // Handle subcategory checkbox change
            $('.subcategory-checkbox').change(function() {
                var subcategory = $(this).data('subcategory');
                $('.' + subcategory + '-checkbox').prop('checked', $(this).prop('checked'));
            });

            // Handle individual permission checkbox change
            $('.permission-checkbox').change(function() {
                var category = $(this).closest('.col-md-4').find('.category-checkbox').data('category');
                var subcategory = $(this).closest('.col-md-12').find('.subcategory-checkbox').data('subcategory');

                // Update category checkbox based on permissions
                if ($('.' + category + '-checkbox:checked').length === $('.' + category + '-checkbox').length) {
                    $('.category-checkbox[data-category="' + category + '"]').prop('checked', true);
                } else {
                    $('.category-checkbox[data-category="' + category + '"]').prop('checked', false);
                }

                // Update subcategory checkbox based on permissions
                if (subcategory) {
                    if ($('.' + subcategory + '-checkbox:checked').length === $('.' + subcategory + '-checkbox').length) {
                        $('.subcategory-checkbox[data-subcategory="' + subcategory + '"]').prop('checked', true);
                    } else {
                        $('.subcategory-checkbox[data-subcategory="' + subcategory + '"]').prop('checked', false);
                    }
                }
            });
        });
    </script>
@endsection
