@extends('admin.layouts.app')

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

@section('content')
    <form id="work_language_form" method="post" action="{{ route('admin.language.store') }}">
        @csrf
        <div class="box_general padding_bottom">
            <div class="header_box version_2">
                <h2><i class="fa fa-file"></i>New Language</h2>
            </div>
            <div class="row">
                <div class="col-md-12">
                    @if(Session::has('message'))
                        <div class="alert alert-success">
                            {{ Session::get('message') }}
                        </div>
                    @endif
                    <div class="alert alert-danger work-experience-error" style="display:none">
                        <ul></ul>
                    </div>
                    <table id="pricing-list-container" style="width:100%;">
                        <tr class="pricing-list-item">
                            <td>
                                <div class="row col-md-10">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="name">Language Name</label>
                                            <input id="name" name="name" type="text" value="{{ old('name') }}" class="form-control" placeholder="Language e.g C++">
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="description">Description</label>
                                            <textarea id="description" name="description" class="editor">{{ old('description') }}</textarea>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <!-- /row-->
        </div>
        <!-- /box_general-->

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

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

        $(document).ready(function(){
            //WYSIWYG editor
            $('.editor').summernote({
                fontSizes: ['10', '14'],
                toolbar: [
                    // [groupName, [list of button]]
                    ['style', ['bold', 'italic', 'underline', 'clear']],
                    ['font', ['strikethrough']],
                    ['fontsize', ['fontsize']],
                    ['para', ['ul', 'ol', 'paragraph']]
                ],
                placeholder: 'Write here ....',
                tabsize: 2,
                height: 150
            });

            // Variable to hold request
            var langRequest;
            $('#work_language_form').on('submit', function (e) {

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

                // Abort any pending request
                if (langRequest) {
                    langRequest.abort();
                }

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

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

                // 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
                langRequest = $.ajax({
                    url: '{{ route('admin.language.store') }}',
                    type: "post",
                    data: serializedData
                });

                // Callback handler that will be called on success
                langRequest.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(response.title, response.text, response.type)
                            .then((result) => {
                                // Reload the Page
                                window.location = "{{ route('admin.language') }}";
                            });
                    }else{
                        printErrorMsg(response.error, 'work-experience-error');
                    }
                });

                // Callback handler that will be called on failure
                langRequest.fail(function (jqXHR, textStatus, errorThrown){
                    // Log the error to the console
                    console.error(
                        "The following error occurred: "+
                        textStatus, errorThrown
                    );
                });

                // Callback handler that will be called regardless
                // if the request failed or succeeded
                langRequest.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