@extends('layout.master')
@section('title', 'Updates on COVID-19')
@section('updates', 'active')
@section('newUpdate', '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('/update_on_covid')}}" data-callback="{{route('/manage_updates')}}" method="post" id="aboutForm">

                    <div class="card">
                        <div class="card-body">
                            <div class="form-group">
                                <div class="col-sm-12">
                                    <div class="row">
                                        <div class="col-sm-7">
                                            <input type="hidden" name="id"  @if(isset($info)) value="{{$info->id}}" @endif id="id">
                                            <input type="text" autofocus name="title" id="title" class="form-control" required placeholder="Update Title *" @if(isset($info)) value="{{$info->title}}" @endif>
                                        </div>
                                        <div class="col-sm-4 col-xs-18">
                                            <input type="text" name="image_path" id="image_path" required class="form-control" placeholder="Cover Picture Url *" @if(isset($info)) value="{{$info->image_path}}" @endif>
                                        </div>
                                        <div class="col-sm-1 col-xs-2">
                                            <a href="{{route('/image')}}" target="_blank"><i class="mdi mdi-image"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                            </div>
                            <h4 class="card-title">News Update on COVID-19 *</h4>
                            <div class="form-group">
                                <textarea name="content" required id="summernote" cols="30" rows="10">@if(isset($info)) {!! $info->content !!} @endif</textarea>
                            </div>
                            {{ csrf_field() }}
                            <input type="hidden" name="created_by" value="{{currentUser()->id}}">

                            <div class="form-group">
                                <button class="btn btn-md btn-primary" id="aboutBtn">PUSH UPDATES</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');
            var callback = $(this).attr('data-callback');

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