@extends('admin.layouts.app')

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

@section('content')
    <form id="work_language_option_update_form" method="post" action="{{ route('admin.language.option.update', $languageOption->id) }}">
        @csrf
        <div class="box_general padding_bottom">
            <div class="header_box version_2">
                <h2><i class="fa fa-file"></i>Edit Language Option</h2>
            </div>
            <div class="row col-md-10">
                <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-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="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)
                                                            @if($languageOption->language_id === $language->id)
                                                                <option selected value="{{ $language->id }}">{{ $language->name }}</option>
                                                            @else
                                                                <option value="{{ $language->id }}">{{ $language->name }}</option>
                                                            @endif
                                                        @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', $languageOption->name) }}" class="form-control" placeholder="Language e.g Symfony">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        @if(!empty($languageOption))
                                            <img src="{{ $languageOption->image }}" height="90" alt="">
                                        @else
                                            No Image added Yet
                                        @endif
                                        <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', $languageOption->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 langUpdateRequest;
            $('#work_language_option_update_form').on('submit', function (e) {

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

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

                //Disable
                // var formElements = $("form :input")
                // formElements.attr("disabled", true);

                var formData = new FormData(this);

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

                // Callback handler that will be called on success
                langUpdateRequest.done(function (response, textStatus, jqXHR){

                    // formElements.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
                                location.reload();
                            });
                    }else{
                        printErrorMsg(response.error, 'work-experience-error');
                    }
                });

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

                // Callback handler that will be called regardless
                // if the request failed or succeeded
                langUpdateRequest.always(function () {
                    // Reenable the inputs
                });

            });

            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