@extends('layouts.admin.app')

@section('title','New role')

@section('content')
    <form id="role_form" method="post" action="{{ route('admin.role.store') }}">
        @csrf
        <div class="box_general padding_bottom">
            <div class="header_box version_2" style="position: relative;">
                <h2><i class="fa fa-file"></i>Role</h2>
                <a href="{{ route('admin.role') }}" class="wlc btn btn-sm btn-primary"><i class="fa fa-arrow-left"></i> {{ __('Back') }}</a>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="alert alert-danger language-and-option-error" style="display:none">
                        <ul></ul>
                    </div>
                    <table id="pricing-list-container" style="width:100%;">
                        <tr class="pricing-list-item">
                            <td>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="name">Role Name</label>
                                            <input id="role" name="name" type="text" value="{{ old('name') }}" class="form-control" placeholder="e.g admin,dev,company etc">
                                        </div>
                                    </div>
{{--                                    <div class="col-md-6">--}}
{{--                                        <div class="form-group">--}}
{{--                                            <label for="guard">Guard</label>--}}
{{--                                            <input id="guard" name="guard" type="text" value="{{ old('guard') }}" class="form-control" placeholder="e.g guard">--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <!-- /row-->
        </div>
        <!-- /box_general-->

        <p><button type="submit" class="btn_1 medium">Save</button></p>
    </form>
    <!-- /box_general-->
@endsection

@section('js')
    <!-- Script -->
    <script type='text/javascript'>

        $(document).ready(function(){

            $('#role_form').on('submit', function (e) {

                // Prevent posting in case of errors
                e.preventDefault();

                // setup some local variables
                var $form = $(this);

                // Let's select and cache all the fields
                var $inputs = $form.find("input, button");

                // Serialize the data in the form
                var serializedData = $form.serialize();

                // Let's disable the inputs for the duration of the Ajax request.
                // Note: we disable elements AFTER the form data has been serialized.
                // Disabled form elements will not be serialized.
                $inputs.prop("disabled", true);

                // Fire off the request to /form.php
                var roleRequest = $.ajax({
                    url: '{{ route('admin.role.store') }}',
                    type: "post",
                    data: serializedData
                });

                // Callback handler that will be called on success
                roleRequest.done(function (response, textStatus, jqXHR){
                    if($.isEmptyObject(response.error)){
                        //var title = "<div class='alert alert-danger work-experience-error' style='display:none'><ul></ul></div>";
                        swal.fire({
                            icon: response.type,
                            title: response.title,
                            text: response.text,
                        })
                            .then((result) => {
                                // Reload the Page
                                window.location = "{{ route('admin.role') }}";
                            });
                    }else{
                        printErrorMsg(response.error, 'language-and-option-error');
                    }
                });

                // Callback handler that will be called on failure
                roleRequest.fail(function (jqXHR, textStatus, errorThrown){
                    printErrorMsg(response.error, 'language-and-option-error');
                });

                // Callback handler that will be called regardless
                // if the request failed or succeeded
                roleRequest.always(function () {
                    // Reenable the inputs
                    $inputs.prop("disabled", false);
                });

            });

            function printErrorMsg (msg, className) {
                swal.fire({icon: 'warning', title: 'Validation error', text: "Kindly check for errors"});
                $("." + className).find("ul").html('');
                $("." + className).css('display','block');
                $.each( msg, function( key, value ) {
                    $("." + className).find("ul").append('<li>'+value+'</li>');
                });

                $([document.documentElement, document.body]).animate({
                    scrollTop: $("." + className).offset().top
                }, 2000);
            }

        });

    </script>
@endsection