{{-- role/update_modal_component --}}

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

                        {{-- id --}}
                        <input type="hidden" name="id" />

                        {{-- 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.update_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="update-form-submit" form="update-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>
        let updateFormPermissions = null;

        // guard_name
        renderSelect2('#update-form select[name=guard_name]', {
            data: [
                { id: 'web', text: 'web' },
                { id: 'api', text: 'api' },
            ],
            minimumResultsForSearch: Infinity,
            dropdownAutoWidth: true,
            width: '100%',
            containerCssClass: 'guard_name-field',
        });

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

            updateFormResetPermissionTable(guardName);
        });

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

            updateFormResetPermissionTable();
        });

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

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

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

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

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

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

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

                spin.stop();
            }).catch((err) => {
                handleErrorResponse(err.response, '#update-form');
                spin.stop();
            });
        });

        // function expression
        const updateRole = (id) => {
            const spin = spinButton({ id: `#update-action-${id}`, isIconButton: true });
            spin.start();

            axios({
                method: 'get',
                url: '{{ url('api/admin/role') }}',
                params: { id },
                headers: {
                    Authorization: `Bearer ${getItems('token')}`,
                    Accept: 'application/json',
                },
            }).then((res) => {
                const { role } = res.data;
                const form = '#update-form';

                updateFormPermissions = role.permissions;

                $(form).find('input[name=id]').val(role.id);
                $(form).find('input[name=name]').val(role.name);
                $(form).find('select[name=guard_name]').val(role.guard_name).trigger('change');

                showModal('#update-modal');
                spin.stop();
            }).catch((err) => {
                handleErrorResponse(err.response);
                spin.stop();
            });
        };
    </script>
@endpush