@extends('layouts.admin')
@section('content')
<style>
    @media (max-width: 768px) {
        .permissions-table {
            width: 100%;
            display: block;
        }

        .permissions-table tbody {
            display: block;
        }

        .permissions-table tr {
            display: block;
            border-bottom: 1px solid #ddd;
            padding: 10px 0;
        }

        .permissions-table td {
            display: block;
            width: 100%;
            text-align: left;
        }

        .module-title {
            font-weight: bold;
            font-size: 16px;
            padding-bottom: 5px;
        }

        .select-all-cell {
            text-align: left !important;
            margin-bottom: 10px;
        }

        .select-all-cell .form-check-label {
            margin-left: 5px;
            font-weight: bold;
        }

        .permissions-column {
            display: flex;
            flex-direction: column;
        }

        .permission-item {
            margin-bottom: 5px;
        }

        .d-md-table-header {
            display: none;
        }
    }

    @media (min-width: 769px) {
        .d-md-table-header {
            display: table-header-group;
        }
    }
</style>
<div class="card">
    <div class="card-header">
        {{ trans('global.edit') }}
    </div>

    <div class="card-body">
        <form method="POST" action="{{ route("admin.roles.update", [$role->id]) }}" enctype="multipart/form-data">
            @method('PUT')
            @csrf
            <div class="form-group">
                <label class="required" for="title">{{ trans('cruds.role.fields.title') }}</label>
                <input class="form-control {{ $errors->has('title') ? 'is-invalid' : '' }}" type="text" name="title" id="title" value="{{ old('title', $role->title) }}" required>
                @if($errors->has('title'))
                    <span class="text-danger">{{ $errors->first('title') }}</span>
                @endif
                <span class="help-block">{{ trans('cruds.role.fields.title_helper') }}</span>
            </div>
            {{-- <div class="form-group">
                <label class="required" for="permissions">{{ trans('cruds.role.fields.permissions') }}</label>
                <div style="padding-bottom: 4px">
                    <span class="btn btn-info btn-xs select-all" style="border-radius: 0">{{ trans('global.select_all') }}</span>
                    <span class="btn btn-info btn-xs deselect-all" style="border-radius: 0">{{ trans('global.deselect_all') }}</span>
                </div>
                <select class="form-control select2 {{ $errors->has('permissions') ? 'is-invalid' : '' }}" name="permissions[]" id="permissions" multiple required>
                    @foreach($permissions as $id => $permission)
                        <option value="{{ $id }}" {{ (in_array($id, old('permissions', [])) || $role->permissions->contains($id)) ? 'selected' : '' }}>{{ $permission }}</option>
                    @endforeach
                </select>
                @if($errors->has('permissions'))
                    <span class="text-danger">{{ $errors->first('permissions') }}</span>
                @endif
                <span class="help-block">{{ trans('cruds.role.fields.permissions_helper') }}</span>
            </div> --}}
            <div class="form-group">
                <label class="required">{{ trans('cruds.role.fields.permissions') }}</label>

                @php
                    $groupedPermissions = [];
                    foreach ($permissions as $id => $permission) {
                        $parts = explode('_', $permission);
                        $action = array_pop($parts);
                        $groupName = implode('_', $parts);
                        $groupedPermissions[$groupName][$action][$id] = $permission;
                    }

                    uksort($groupedPermissions, function ($a, $b) {
                        return strcmp(trans('cruds.' . $a . '.title'), trans('cruds.' . $b . '.title'));
                    });

                    $actionsOrder = ['access', 'create', 'edit', 'show', 'delete', 'email'];
                @endphp


                <div class="table-responsive">
                    <table class="table table-bordered permissions-table">
                        <thead class="d-none d-md-table-header">
                            <tr>
                                <th style="width: 30%">{{ trans('global.module') }}</th>
                                <th style="width: 20%; text-align: center;">{{ trans('global.select_all') }}</th>
                                <th style="width: 50%">{{ trans('global.permissions') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($groupedPermissions as $groupName => $actions)
                                <tr class="border-top border-bottom">
                                    <td class="align-middle module-title">
                                        <strong>{{ trans('cruds.' . $groupName . '.title') }}</strong>
                                    </td>

                                    <td class="text-center align-middle select-all-cell">
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input select-all-group" data-group="{{ $groupName }}" id="{{ $groupName }}_all">
                                            <label class="form-check-label" for="{{ $groupName }}_all">{{ trans('global.select_all') }}</label>
                                        </div>
                                    </td>

                                    <td class="permissions-column">
                                        @foreach($actionsOrder as $action)
                                            @if(isset($actions[$action]))
                                                @foreach($actions[$action] as $id => $permission)
                                                    <div class="form-check permission-item">
                                                        <input class="form-check-input permission-checkbox" type="checkbox" name="permissions[]" value="{{ $id }}" id="perm_{{ $id }}" data-group="{{ $groupName }}"
                                                        {{ in_array($id, old('permissions', $role->permissions->pluck('id')->toArray())) ? 'checked' : '' }}>
                                                        <label class="form-check-label" for="perm_{{ $id }}">
                                                            {{ trans('cruds.permissions.' . $action) }}
                                                        </label>
                                                    </div>
                                                @endforeach
                                            @endif
                                        @endforeach
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                @if($errors->has('permissions'))
                    <span class="text-danger">{{ $errors->first('permissions') }}</span>
                @endif
            </div>
            <div class="form-group">
                <button class="btn btn-success" type="submit">
                    {{ trans('global.save') }}
                </button>
            </div>
        </form>
    </div>
</div>
@endsection
@section('scripts')
@parent
<script>
    $(document).ready(function() {
        $('.select-all-group').on('change', function() {
            let group = $(this).data('group');
            $('.permission-checkbox[data-group="' + group + '"]').prop('checked', $(this).prop('checked'));
        });

        $('.permission-checkbox').on('change', function() {
            let group = $(this).data('group');
            let allChecked = $('.permission-checkbox[data-group="' + group + '"]').length === $('.permission-checkbox[data-group="' + group + '"]:checked').length;
            $('#'+group+'_all').prop('checked', allChecked);
        });

        $('.select-all-group').each(function() {
            let group = $(this).data('group');
            let allChecked = $('.permission-checkbox[data-group="' + group + '"]').length === $('.permission-checkbox[data-group="' + group + '"]:checked').length;
            $(this).prop('checked', allChecked);
        });
    });
</script>
@endsection