@extends('layout.master')
@section('title', 'About COVID-19')
@section('about', 'active')
@section('levelCSS')

@endsection

@section('body')

    <div class="col-md-12">
        <div class="tab-content tab-transparent-content pb-0">
            <div class="tab-pane fade show active" id="overview" role="tabpanel" aria-labelledby="overview-tab">

                <form action="{{route('/aboutCovid19')}}" method="post" id="aboutForm">

                    <div class="card">
                        <div class="card-body">
                            <div class="form-group">
                                <h6 class="float-right text-danger">Version @if(isset($info)) {{$info->version}} @else 1 @endif</h6>
                            </div>
                            {{--<h4 class="card-title">About COVID-19</h4>--}}
                            <input type="hidden" name="id" @if(isset($info)) value="{{$info->id}}" @endif>
                            <input type="hidden" name="version" @if(isset($info)) value="{{$info->version+1}}" @else value="1" @endif>
                            <div class="form-group">
                                <textarea name="about_context" required id="summernote" cols="30" rows="10">@if(isset($info)) {!! $info->about_context !!} @endif</textarea>
                            </div>
                            {{ csrf_field() }}
                            <input type="hidden" name="last_updated_by" value="{{currentUser()->id}}">

                            <div class="form-group">
                                <button class="btn btn-md btn-primary" id="aboutBtn">SAVE INFORMATION</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

@section('levelJS')
    <script !src="">
        $('#aboutForm').submit(function (e) {
            e.preventDefault();

            $('#aboutBtn').prop('disabled', true).html("Saving <i class='fa fa-spin fa-spinner'></i>");

            var formData = $(this).serialize();
            var url = $(this).attr('action');

            axios({
                method: 'post',
                url: url,
                data: formData
            })
                .then(function (response) {
                    $('#aboutBtn').prop('disabled', false).html('SAVE INFORMATION');
                    if(response.statusText==='OK')
                    {
                        $.toast({text: response.data.done, icon: 'success', position: 'top-right'});
                        location.reload();
                    } else{
                        $.toast({text: response.data.error, icon: 'error', position: 'top-right'});
                    }
                })
                .catch(function (data) {
                    console.log('Oops!: '+data.error);
                    $('#aboutBtn').prop('disabled', false).html('SAVE INFORMATION');
                });
        });
    </script>
@endsection