@extends('layouts.contentNavbarLayoutBackend')

@section('title', 'Create User Role')

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset('backend-assets/vendor/libs/@form-validation/form-validation.css') }}"/>
@endsection

@section('vendor-script')
    <script src="{{ asset('backend-assets/vendor/libs/@form-validation/popular.js') }}"></script>
    <script src="{{ asset('backend-assets/vendor/libs/@form-validation/bootstrap5.js') }}"></script>
    <script src="{{ asset('backend-assets/vendor/libs/@form-validation/auto-focus.js') }}"></script>
@endsection

@section('page-script')
    <script type="text/javascript">
        $(document).ready(function () {
            const formValidation = document.getElementById('userRoleForm');
            FormValidation.formValidation(formValidation, {
                fields: {
                    name: {
                        validators: {
                            notEmpty: {
                                message: 'Please enter role name'
                            }
                        }
                    },
                },
                plugins: {
                    trigger: new FormValidation.plugins.Trigger(),
                    bootstrap5: new FormValidation.plugins.Bootstrap5({
                        // Use this for enabling/changing valid/invalid class
                        // eleInvalidClass: '',
                        eleValidClass: '',
                        rowSelector: function(field, ele) {
                            // field is the field name & ele is the field element
                            switch (field) {
                                case 'name':
                                default:
                                    return '.row';
                            }
                        }
                    }),
                    submitButton: new FormValidation.plugins.SubmitButton(),
                    // Submit the form when all fields are valid
                    defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
                    autoFocus: new FormValidation.plugins.AutoFocus()
                },
                init: instance => {
                    instance.on('plugins.message.placed', function(e) {
                        //* Move the error message out of the `input-group` element
                        if (e.element.parentElement.classList.contains('input-group')) {
                            // `e.field`: The field name
                            // `e.messageElement`: The message element
                            // `e.element`: The field element
                            e.element.parentElement.insertAdjacentElement('afterend', e.messageElement);
                        }
                        //* Move the error message out of the `row` element for custom-options
                        if (e.element.parentElement.parentElement.classList.contains('custom-option')) {
                            e.element.closest('.row').insertAdjacentElement('afterend', e.messageElement);
                        }
                    });
                }
            });

            // Check to select all checkbox
            selectAll.click(function () {
                if ($(this).is(':checked')) {
                    singleSelect.prop('checked', true);
                } else {
                    singleSelect.prop('checked', false);
                }
            });
        });

        // Initialize global variables
        const selectAll = $('#selectAll');
        const singleSelect = $('input[name="permissions[]"]');
    </script>
@endsection

@section('content')
    <form id="userRoleForm" action="{{ route('user.role.store') }}" method="POST" autocomplete="off">
        @csrf
        <div class="d-flex flex-wrap justify-content-between align-items-center mb-3">
            <div class="d-flex flex-column justify-content-center">
                <h4 class="mb-1 mt-3">Add a new User Role</h4>
                <p class="text-muted">Enter user role data</p>
            </div>
            <div class="d-flex align-content-center flex-wrap gap-3">
                <a href="{{ route('user.role') }}" class="btn btn-label-secondary">Back</a>
                <button type="submit" class="btn btn-primary">Save</button>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-12 mb-4">
                        <label class="form-label" for="name">Role Name</label>
                        <input type="text" id="name" name="name" class="form-control" placeholder="Enter a role name" tabindex="-1" />
                    </div>
                    <div class="col-12">
                        <h4>Role Permissions</h4>
                        <!-- Permission table -->
                        <div class="table-responsive border rounded-3">
                            <table class="table">
                                <tbody>
                                <tr>
                                    <td class="text-nowrap fw-medium">Administrator Access <i class="bx bx-info-circle bx-xs" data-bs-toggle="tooltip" data-bs-placement="top" title="Allows a full access to the system"></i></td>
                                    <td colspan="5">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="selectAll" />
                                            <label class="form-check-label" for="selectAll">
                                                Select All
                                            </label>
                                        </div>
                                    </td>
                                </tr>
                                @foreach($permissionsGroups as $permissionsGroup)
                                    <tr>
                                        <td class="text-nowrap fw-medium">
                                            {{ $permissionsGroup->group_name }}
                                        </td>
                                        @php
                                            $permissions = \App\Models\User::getPermissionGroupName($permissionsGroup->group_name);
                                        @endphp
                                        @foreach($permissions as $permission)
                                            <td>
                                                <div class="d-flex">
                                                    <div class="form-check me-3 me-lg-5">
                                                        <input class="form-check-input" type="checkbox" id="{{ $permission->id }}" name="permissions[]" value="{{ $permission->id }}" />
                                                        <label class="form-check-label" for="{{ $permission->id }}">
                                                            {{ Str::of($permission->name)->explode('.')[1] ?? null }}
                                                        </label>
                                                    </div>
                                                </div>
                                            </td>
                                        @endforeach
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                        <!-- Permission table -->
                    </div>
                </div>
            </div>
        </div>
    </form>
@endsection