@extends('layouts.admin.app')

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

@section('content')
    <form id="work_badge_update_form" method="post" action="{{ route('admin.badge.store') }}">
        @csrf
        <div class="box_general padding_bottom">
            <div class="header_box version_2" style="position: relative;">
                <h2><i class="fa fa-file"></i>Edit Badge</h2>
                <a href="{{ route('admin.badge') }}" 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">Badge Name</label>
                                            <input id="name" name="name" type="text" value="{{ old('name', $badge->name) }}" class="form-control" placeholder="Language e.g Git">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="language">Language</label>
                                            <div class="styled-select">
                                                <select id="language" name="language">
                                                    <option value="" selected>-- Select Language --</option>
                                                    @if(isset($languages))
                                                        @foreach($languages as $language)
                                                            @if($badge->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-12">
                                        <div class="form-group">
                                            <label for="description">Description</label>
                                            <textarea id="description" name="description" class="editor">{{ old('description', $badge->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>
    <!-- /box_general-->
@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
            });

            $('#language').on('change', function(){
                // Department id
                var id = $(this).val();

                var url = '{{ route('admin.language.option.get', "sid") }}';
                url = url.replace('sid', id)

                // Empty the dropdown
                $('#language_option').find('option').not(':first').remove();

                // AJAX request
                $.ajax({
                    url: url,
                    type: 'get',
                    dataType: 'json',
                    beforeSend: function() {
                        $("#language_option").html('<option> Please wait ...</option>');
                        $("#language_option").prop('disabled', true); // disable button
                    },
                    success: function(response){

                        $("#language_option").html("<option value='0'> Select Language Option ...</option>");
                        var len = 0;
                        if(response['data'] != null){
                            len = response['data'].length;
                        }

                        if(len > 0){

                            // Read data and create <option >
                            for(var i=0; i<len; i++){

                                var id = response['data'][i].id;
                                var name = response['data'][i].name;

                                var option = "<option value='"+id+"'>"+name+"</option>";

                                $("#language_option").append(option);

                                $("#language_option").prop('disabled', false); // disable button
                            }
                        }

                    }
                });
            });

            // Variable to hold request
            var langRequest;
            $('#work_badge_update_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.badge.update', $badge->id) }}',
                    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
                                location.reload();
                            });
                    }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