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

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset('admin_assets/vendor/libs/select2/select2.css') }}"/>
    <link rel="stylesheet" href="{{ asset('admin_assets/vendor/libs/@form-validation/form-validation.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.users_list'), 'url' => route("admin.user.index") ],
            [ 'data' => trans('admin.create_new_user'), 'url' => null ],
         ]
    ])
    <div class="row">
        <div class="col-md-9">
            <form class="needs-validation" data-form="true" action="{{ route('admin.user.create') }}" method="POST" novalidate>
                @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_user') }}</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
                                :label="trans('admin.full_name')"
                                id="fullname"
                                type="text"
                                :placeholder="trans('admin.please_enter_full_name')"
                                name="name"
                                :value="old('name')"
                                addAttribute="required"
                            />

                            <x-input-component
                                :label="trans('admin.username')"
                                id="username"
                                type="text"
                                :placeholder="trans('admin.please_enter_username')"
                                name="username"
                                :value="old('username')"
                                addAttribute="required"
                            />

                            <x-input-component
                                :label="trans('admin.password')"
                                id="password"
                                type="password"
                                :placeholder="trans('admin.please_enter_password')"
                                name="password"
                                addAttribute="required autocomplete=new-password"
                                :validationAttributes="['minlength' => 6]"
                            />

                            <x-input-component
                                :label="trans('admin.password_confirmation')"
                                id="password_confirmation"
                                type="password"
                                :placeholder="trans('admin.please_enter_password_confirmation')"
                                name="password_confirmation"
                                addAttribute="required"
                                :validationAttributes="['minlength' => 6, 'equalTo' => '#password']"
                            />

                            <div class="col-md-6 mb-3">
                                <label class="form-label" for="roles">{{ trans('admin.roles') }} <span class="text-danger">*</span></label>
                                <div class="input-group input-group-merge">
                                    <select
                                        id="roles"
                                        class="form-select form-select-lg"
                                        data-allow-clear="true"
                                        name="roles[]"
                                        required
                                        multiple
                                    >
                                        @foreach($roles as $role)
                                            @php ($rolePermissions = [])
                                            @foreach($role->permissions as $rolePermission)
                                                @php ($rolePermissions[] = $rolePermission->name)
                                            @endforeach

                                            <option
                                                value="{{ $role->name }}"
                                                {{ old('roles') == $role->name ? 'selected' : '' }}
                                                data-permissions='{{json_encode($rolePermissions, true)}}'
                                            >{{ $role->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="form-check-label">{{ trans('admin.user_status') }}</label>
                                <div class="col mt-2">
                                    <div class="form-check form-check-inline">
                                        <input
                                            name="active"
                                            class="form-check-input"
                                            type="radio"
                                            value="1"
                                            id="collapsible-type-first"
                                            {{ old('active') == '1' || old('active') == null ? 'checked' : '' }} />
                                        <label class="form-check-label" for="collapsible-type-first">
                                            {{ trans('admin.active') }}
                                        </label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input
                                            name="active"
                                            class="form-check-input"
                                            type="radio"
                                            value="0"
                                            id="collapsible-type-office-second"
                                            {{ old('active') == '0' ? 'checked' : '' }} />
                                        <label class="form-check-label" for="collapsible-type-office-second">
                                            {{ trans('admin.not_active') }}
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </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 }}"
                                                                       data-permission-input="true"
                                                                       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')
    @include("user._form_js")
@endsection