{{-- role/add_modal/component --}}

<div class="modal fade text-left modal-borderless" id="add-modal" role="dialog" aria-labelledby="add-modal"
    aria-hidden="true" data-backdrop="false">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <form id="add-form" autocomplete="off">
                    <div class="row">

                        {{-- name --}}
                        <div class="col-12">
                            <fieldset class="form-group">
                                <label class="form-label">Name *</label>

                                <input type="text" class="name-field form-control form-control-sm" name="name"
                                    placeholder="Enter Name" />

                                <div class="name-validation invalid-feedback" style="display: none;">
                                    <i class="bx bx-radio-circle"></i>
                                    <span></span>
                                </div>
                            </fieldset>
                        </div>

                        {{-- guard_name --}}
                        <div class="col-12">
                            <fieldset class="form-group">
                                <label class="form-label">Guard Name *</label>

                                <select class="guard_name-field form-control" name="guard_name" data-placeholder="Select Guard Name"></select>

                                <div class="guard_name-validation invalid-feedback" style="display: none;">
                                    <i class="bx bx-radio-circle"></i>
                                    <span></span>
                                </div>
                            </fieldset>
                        </div>

                    </div>

                    @component('admin.role.add_modal.permission_table_component', [
                        // table config here
                    ])
                        {{-- slot --}}
                    @endcomponent

                </form>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-light-primary" data-dismiss="modal">
                    <i class="bx bx-x d-block d-sm-none"></i>
                    <span class="d-none d-sm-block">Close</span>
                </button>

                <button id="add-form-submit" form="add-form" type="submit" class="btn btn-sm btn-primary">
                    <span class="spinner-border spinner-border-sm btn-spinner" role="status" aria-hidden="true"
                        style="display: none;"></span>
                    Save
                </button>
            </div>
        </div>
    </div>
</div>

@push('script-after-global')
    <script>
        // guard_name
        renderSelect2('#add-form select[name=guard_name]', {
            data: [
                { id: 'web', text: 'web' },
                { id: 'api', text: 'api' },
            ],
            minimumResultsForSearch: Infinity,
            dropdownAutoWidth: true,
            width: '100%',
            containerCssClass: 'guard_name-field',
        });

        $('#add-form select[name=guard_name]').on('change', function() {
            const guardName = $(this).val();

            addFormResetPermissionTable(guardName);
        });

        $('#add-modal').on('hidden.bs.modal', function() {
            $(this).find('input[name=name]').val(null);
            $(this).find('select[name=guard_name]').val(null).trigger('change');

            addFormResetPermissionTable();
        });

        $('#add-form').submit(function(event) {
            event.preventDefault();

            const spin = spinButton({ id: '#add-form-submit' });
            spin.start();

            const name = $(this).find('input[name=name]').val();
            const guard_name = $(this).find('select[name=guard_name]').val();

            const permissions = getItems('addFormPermissions', []).filter(permission => permission.assign).map(permission => {
                return permission.name;
            });

            axios({
                method: 'post',
                url: '{{ url('api/admin/role') }}',
                data: { name, guard_name, permissions },
                headers: {
                    Authorization: `Bearer ${getItems('token')}`,
                    Accept: 'application/json',
                },
            }).then((res) => {
                const { message } = res.data;

                setNotify({ content: message, type: 'success' });

                hideModal('#add-modal');
                roleTable.clearPipeline().draw(false);

                spin.stop();
            }).catch((err) => {
                handleErrorResponse(err.response, '#add-form');
                spin.stop();
            });
        });
    </script>
@endpush