@extends('layouts.master')
@section('title', trans('admin.create_new_role'))

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset('admin_assets/vendor/libs/select2/select2.css') }}" />
    <style>
        .roles-list {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            /* Adjust the gap between columns */
        }

        @media (max-width: 1800px) {

            /* Adjust the breakpoint to your liking */
            .roles-list {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        @media (max-width: 1400px) {

            /* Adjust the breakpoint to your liking */
            .roles-list {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 768px) {

            /* Adjust the breakpoint to your liking */
            .roles-list {
                grid-template-columns: repeat(1, 1fr);
            }
        }
    </style>
@endsection

@section('content')
    @include('layouts._breadcrumb', [
        'list' => [
            ['data' => trans('admin.dashboard'), 'url' => route('admin.landing')],
            ['data' => trans('admin.roles_list'), 'url' => route('admin.role.index')],
            ['data' => trans('admin.create_new_role'), 'url' => null],
        ],
    ])
    <div class="row">
        <div class="col-md-9">
            <form class="needs-validation" novalidate method="POST">
                @CSRF
                <div class="card mb-4">
                    <div
                        class="card-header sticky-element bg-label-primary d-flex justify-content-sm-between align-items-sm-center flex-column flex-sm-row">
                        <h5 class="card-title mb-sm-0 me-2">{{ trans('admin.create_new_role') }}</h5>
                        <div class="action-btns">
                            <button type="submit" class="btn btn-success data-submit">{{ trans('admin.save') }}</button>
                            <button type="reset" class="btn btn-secondary">{{ __('admin.reset') }}</button>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <x-input-component divClass="col-md-4" :label="trans('admin.name')" id="name" type="text"
                                :placeholder="trans('admin.please_enter_full_name')" name="name" :value="old('name')" addAttribute="required" />
                        </div>
                        <div class="row">
                            <div class="col-md mt-5">
                                <h5>{{ __('admin.permissions') }}</h5>
                                <div class="table-responsive">
                                    <table class="table table-flush-spacing">
                                        <tbody>
                                            <tr>
                                                <td class="text-nowrap fw-medium">{{ trans('admin.administrator_access') }}
                                                    <i class="ti ti-info-circle" data-bs-toggle="tooltip"
                                                        data-bs-placement="top"
                                                        aria-label="Allows a full access to the system"
                                                        data-bs-original-title="Allows a full access to the system"></i>
                                                </td>
                                                <td>
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" id="selectAll">
                                                        <label class="form-check-label" for="selectAll">
                                                            {{ trans('admin.select_all') }}
                                                        </label>
                                                    </div>
                                                </td>
                                            </tr>

                                            @foreach ($permissionGroups as $permissionGroup)
                                                @if (!array_key_exists('permissions', $permissionGroup))
                                                    <tr>
                                                        <td colspan="2"
                                                            class="text-nowrap fw-bold text-center table-secondary">
                                                            {{ $permissionGroup['name'] }}</td>
                                                    </tr>
                                                    @continue
                                                @endif
                                                <tr>
                                                    <td class="text-nowrap fw-medium">{{ $permissionGroup['name'] }}</td>
                                                    <td>
                                                        <div class="roles-list">
                                                            @foreach ($permissionGroup['permissions'] as $permission)
                                                                <div class="form-check">
                                                                    <input class="form-check-input" type="checkbox"
                                                                        id="permission_{{ $permission->value }}"
                                                                        name="permissions[{{ $permission->value }}]"
                                                                        value="{{ $permission->value }}"
                                                                        @checked(is_array(old('permissions')) and array_key_exists($permission->value, old('permissions')))>
                                                                    <label class="form-check-label"
                                                                        for="permission_{{ $permission->value }}">
                                                                        {{ $permission->name() }}
                                                                    </label>
                                                                </div>
                                                            @endforeach
                                                        </div>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="col-md-3">
            <x-create-update-date-component />
        </div>
    </div>
@endsection

@section('vendor-script')
    <script src="{{ asset('admin_assets/vendor/libs/jquery-sticky/jquery-sticky.js') }}"></script>
    <script src="{{ asset('admin_assets/vendor/libs/select2/select2.js') }}"></script>
    @include('layouts._form_validation_script')
@endsection

@section('page-script')
    <script>
        const selectAll = document.querySelector('#selectAll');
        const checkboxList = document.querySelectorAll('[type="checkbox"]');
        selectAll.addEventListener('change', t => {
            checkboxList.forEach(e => {
                e.checked = t.target.checked;
            });
        })
    </script>
@endsection