@extends(config('admin_theme.layout', 'admin.layout.master'))
@section('title')
    {{ $current_route->{'name_' . trans('admin.lang')} }}
@stop
@section('page-breadcrumb')
    @include(config('admin_theme.view_prefix', 'admin').'.layout.breadcrumb_view')
@stop
@section('css')
    <style>
        .permission-title {font-size:1rem;font-weight:600;margin:0;flex:1;color:#101828}
        .permissions {display:flex;flex:3;flex-wrap:wrap;gap:12px}
        .permissions-card {overflow:hidden;border:1px solid #eaecf0;border-radius:10px;background:#fff}
        .main-category {cursor:pointer;background:#f9fafb;padding:16px 18px;border-bottom:1px solid transparent}
        .main-category:has(+ .sub-category[style*="block"]) {border-bottom-color:#eaecf0}
        .main-category .permission-title i {width:20px;color:#2e63fd}
        .sub-category > div {padding:14px 32px;border-bottom:1px solid #f2f4f7}
        .sub-category > div:last-child {border-bottom:0}
        .form-check {margin:0}
        .form-check-input {width:18px;height:18px;border-color:#d0d5dd}
        .form-check-input:checked {background-color:#2e63fd;border-color:#2e63fd}
        .form-check-label {padding-inline-start:3px;color:#344054}
    </style>
@stop
@section('page-content')
    <div class="dashboard__section__overview d-md-flex justify-content-between pt-4">
        <div class="dashboard__section-tile">
            <h3>@lang('admin.permission') - {{ $info->name }}</h3>
        </div>
    </div>
    @include(config('admin_theme.view_prefix', 'admin').'.layout.error')
    <form method="post" action="">
        @csrf
        <div class="d-flex flex-wrap gap-2 py-3 dashboard__btn-outline">
            <button type="button" id="toggleCheckboxes">@lang('admin.toggle_checkboxes')</button>
            <button type="button" id="checkall">@lang('admin.checkall')</button>
            <button type="button" id="uncheckall">@lang('admin.uncheckall')</button>
        </div>
        <div class="row">
            @foreach($permission_group as $row)
                <div class="col-12 mb-3 permissions-card" style="display:{{ $row->id == 96 ? 'none' : '' }}">
                    <div data-id="category-{{ $row->id }}"
                         class="d-flex flex-wrap align-items-center gap-3 main-category">
                        <h3 class="permission-title">
                            <i class="fa fa-plus-circle"></i>
                            {{ $row->{'name_' . trans('admin.lang')} }}
                        </h3>
                        <div class="permissions">
                            @foreach($row->permissions as $item)
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input permissions-parent" type="checkbox"
                                           id="permissions{{ $item->id }}"
                                           data-category="category-{{ $row->id }}"
                                           name="permissions[]" value="{{ $item->id }}"
                                           {{ in_array($item->id, array_column($role_permissions, 'permission_id')) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="permissions{{ $item->id }}">
                                        {{ trans('permissions.'.$item->name) }}
                                    </label>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <div id="category-{{ $row->id }}" class="sub-category" style="display:none">
                        @foreach($row->mychild as $child)
                            @php
                                $childPermissions = $system_settings->system_country == 'SA'
                                    ? $child->permissions
                                    : $child->allpermissions;
                            @endphp
                            <div class="d-flex flex-wrap align-items-center gap-3">
                                @if($childPermissions->contains(fn($permission) => $permission->is_admin === null))
                                    <h3 class="permission-title">
                                        <i class="fas fa-check"></i>
                                        {{ $child->{'name_' . trans('admin.lang')} }}
                                    </h3>
                                @endif
                                <div class="permissions">
                                    @foreach($childPermissions as $permission)
                                        @if($permission->is_admin === null)
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input permissions-child" type="checkbox"
                                                       id="permissions{{ $permission->id }}"
                                                       name="permissions[]" value="{{ $permission->id }}"
                                                       {{ in_array($permission->id, array_column($role_permissions, 'permission_id')) ? 'checked' : '' }}>
                                                <label class="form-check-label" for="permissions{{ $permission->id }}">
                                                    {{ trans('permissions.'.$permission->name) }}
                                                </label>
                                            </div>
                                        @endif
                                    @endforeach
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endforeach
        </div>
        <div class="notes__buttons d-flex justify-content-end gap-3 pt-4">
            <div class="dashboard__btn-outline">
                <a href="{{ route('roles.view') }}">@lang('admin.cancel')</a>
            </div>
            <div class="dashboard__btn-fill">
                <button type="submit">@lang('admin.save')</button>
            </div>
        </div>
    </form>
@stop
@section('js')
    <script>
        $(document).ready(function () {
            var opened = '';
            $('.main-category').on('click', function (event) {
                if (event.target.type === 'checkbox') return;
                var id = '#' + $(this).data('id');
                $('.sub-category').not(id).hide();
                $(id).toggle();
                opened = opened === id ? '' : id;
                $('.main-category .fa-minus-circle').removeClass('fa-minus-circle').addClass('fa-plus-circle');
                if (opened) {
                    $(this).find('.fa-plus-circle').removeClass('fa-plus-circle').addClass('fa-minus-circle');
                }
            });
            $('#toggleCheckboxes').on('click', function (event) {
                event.preventDefault();
                $('.form-check-input').each(function () {
                    $(this).prop('checked', !$(this).prop('checked'));
                });
            });
            $('#checkall').on('click', function (event) {
                event.preventDefault();
                $('.form-check-input').prop('checked', true);
            });
            $('#uncheckall').on('click', function (event) {
                event.preventDefault();
                $('.form-check-input').prop('checked', false);
            });
            $(document).on('change', '.permissions-parent', function () {
                $('#' + $(this).data('category')).find('input[type=checkbox]').prop('checked', this.checked);
            });
        });
    </script>
@stop