@extends('admin.layouts.app')
@section('title','New Language Option')
@section('content')
    <form id="work_language_option_form" method="post" enctype="multipart/form-data"
          action="{{ route('admin.language.option.store') }}">
        @csrf
        <div class="box_general padding_bottom">
            <div class="header_box version_2">
                <h2><i class="fa fa-file"></i>New Language Option</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 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 col-md-10">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="language">Skill</label>
                                            <div class="styled-select">
                                                <select id="language" name="language">
                                                    <option disabled selected>-- Select Language --</option>
                                                    @if(isset($languages))
                                                        @foreach($languages as $language)
                                                            <option value="{{ $language->id }}">{{ $language->name }}</option>
                                                        @endforeach
                                                    @endif
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="name">Option Name</label>
                                            <input id="name" name="name" type="text" value="{{ old('name') }}" class="form-control" placeholder="Language e.g Symfony">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="file">Option Image</label>
                                            <input id="file" name="file" type="file" value="{{ old('file') }}" class="form-control" placeholder="Select image">
                                        </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 btn_submit">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_option_form').on('submit', function (e) {

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

                //var btn = $('.btn_submit');
                $(this).prop("disabled",true)

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

                var formData = new FormData(this);

                // Fire off the request to /form.php
                langRequest = $.ajax({
                    url: $(this).attr('action'),
                    type: "post",
                    data: formData,
                    cache:false,
                    contentType: false,
                    processData: false,
                });

                // Callback handler that will be called on success
                langRequest.done(function (response, textStatus, jqXHR){
                    $(this).prop("disabled",false)
                    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.option') }}";
                            });
                    }else{
                        printErrorMsg(response.error, 'language-and-option-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