@extends('layout.master')
@section('title', 'Manage COVID19 Updates')
@section('updates', 'active')
@section('manageUpdates', '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">

                @if(count($updates)>0)
                    <table class="table table-striped table-bordered">
                        <thead>
                        <tr>
                            <th>SN</th>
                            <th>TITLE</th>
                            <th>CONTENT EXCERPT</th>
                            <th>COVER</th>
                            <th>MANAGE</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($updates as $key => $u)
                            <tr id="item{{$u->id}}">
                                <td>{{$key+1}}</td>
                                <td>{{$u->title}}</td>
                                <td>{!! $u->content !!}</td>
                                <td><img src="{{$u->image_path}}" class="img-thumbnail" alt=""></td>
                                <td>
                                    <a href="{{route('/edit_update')}}/{{$u->title_slug}}" title="Edit"><button class="btn btn-sm btn-success"><i class="mdi mdi-content-save-edit"></i></button></a>
                                    <a href="{{route('/delete_update')}}" class="deleteItem" data-id="{{$u->id}}" data-msg="DELETE THIS UPDATE?" data-callback="" title="Delete"><button class="btn btn-sm btn-danger"><i class="mdi mdi-delete"></i></button></a>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                @endif

            </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('PUSH UPDATES');
                    if(response.statusText==='OK')
                    {
                        $.toast({text: response.data.done, icon: 'success', position: 'top-right'});
                        $('#aboutForm')[0].reset();
                        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('PUSH UPDATES');
                });
        });
    </script>
@endsection