@extends('frontend.layouts.app')

@section('title', app_name() . ' | ' . __('navs.frontend.dashboard') )
{{--Scripts for this page--}}
@push('after-scripts')
    <script type="text/javascript">
        var currenteditingid = -1;
        var currentdeletingid = -1;

        $(document).ready(function () {
            $('a[data-toggle=modal], button[data-toggle=modal]').click(function () {
                currenteditingid = $(this).data('id');
                switch ($(this).data('target')) {
                    case '#addreplydialog':
                        break;
                    case '#editreplydialog':
                        if ($(this).data('id') > -1) {
                            getReplyDetails($(this).data('id'));
                        }
                        break;
                    default:
                        currenteditingid = -1;
                        currentdeletingid = -1;
                        break;
                }
            })


            $('#addreplydialog').submit(function (event) {
                // cancels the form submission
                console.log('addreplydialog submitted');
                event.preventDefault();
                //$(this).modal('hide');
                var vars = $(this).find("form").serializeArray();

                // waitingDialog.show();
                 submitNewReplyForm(vars);
            });

            $('#editreplydialog').submit(function (event) {
                // cancels the form submission
                console.log('editreplydialog submitted');
                event.preventDefault();
                //$(this).modal('hide');
                var vars = $(this).find("form").serializeArray();

                // waitingDialog.show();
                submitUpdateReplyForm(currenteditingid, vars);
            });
        });

        function getReplyDetails(id) {
            console.log('getReplyDetails:' + id);
            $.ajax({
                url: '{!! URL::to('forum/forumreply')!!}/' + id,
                type: 'GET',
                error: function (jqXHR, textStatus, errorThrown) {
                    alert(errorThrown);
                },
                success: function (data) {
                    //  console.log(data);
                    //$("#editcontactdialog").find("form").values(data);
                    populate($("#editreplydialog"), data);
                    // changevalidation('edituserform');
                    //waitingDialog.hide();
                }
            });
        }



        function submitNewReplyForm(vars) {
            $.ajax({
                url: '{!! URL::to('')!!}/forum/forumreply/create',
                type: 'get',
                data: vars,
                error: function (jqXHR, textStatus, errorThrown) {
                    //   waitingDialog.hide();
                    alert(errorThrown);
                },
                success: function (data) {
                    //   waitingDialog.hide();
                    if (data.status.toString() == "0") {
                        location.reload();
                    } else {
                     //   waitingDialog.hide();
                        alert('something went wrong with the update');
                    }
                }
            });
        }

        function submitUpdateReplyForm(id, vars) {
            vars.push({name: '_method', value: 'PUT'});
            $.ajax({
                url: '{!! URL::to('forum/forumreply/')!!}/'+id,
                type: 'POST',
                data: vars,
                error: function (jqXHR, textStatus, errorThrown) {
                    //     waitingDialog.hide();
                    alert(errorThrown);
                },
                success: function (data) {
                    //   waitingDialog.hide();
                    if (data.status.toString() == "0") {
                        location.reload();
                    } else {
                        //    waitingDialog.hide();
                        alert('something went wrong with the update');
                    }
                }
            });
        }

        // populates a form with data returned from Laravel
        function populate(frm, data) {
            $.each(data, function (key, value) {
                var $ctrl = $('[name=' + key + ']', frm);
                if ($ctrl.is("select")) {
                    $ctrl.select2('val', value);
                } else {

                    switch ($ctrl.attr("type")) {
                        case "text" :
                        case "hidden":
                            $ctrl.val(value);
                            break;
                        case "radio" :
                        case "checkbox":
                            $ctrl.each(function () {
                                if ($(this).attr('value') == value) {
                                    $(this).attr("checked", value);
                                }
                            });
                            break;

                        default:
                            $ctrl.val(value);
                    }

                }
            });
        }
    </script>
@endpush

@section('content')
    {{--    Top row: user info, icons of lab groups--}}

{{--    <div class="d-flex">--}}
{{--        <div class="mr-auto p-2">--}}
{{--            <div class="row">--}}
{{--                --}}{{--        Profile picture--}}
{{--                <div class="col-sm-3" style="margin-right: 10px">--}}
{{--                    <a href="{{route('frontend.user.account')}}"> <img src="{{ $logged_in_user->getPicture(80) }}"--}}
{{--                                                                       alt="Profile Picture"--}}
{{--                                                                       style="border-radius: 10px 0px 10px 10px; height: 80px"></a>--}}
{{--                </div>--}}
{{--                --}}{{--        User info--}}
{{--                <div class="col-sm-8"><a href="{{route('frontend.user.account')}}"><p--}}
{{--                            class="g_et_al_header2">   {{ $logged_in_user->name }}</p></a>--}}
{{--                    <p class="g_et_al_paragraph2">Devil may care flying fool</p></div>--}}
{{--            </div>--}}
{{--        </div>--}}


{{--    </div>--}}

    {{-- Forum threads display--}}
    <div class="row" style="margin-top: 10px; min-height: 500px">
        <div class="col"
             style="margin-left:20px; background-color: whitesmoke; border: 1px solid #2aa8cc; border-radius: 0px 10px 10px 10px; margin-right: 5px">
            <div class="g_et_al_header2" style="border-bottom: 2px solid grey; padding-bottom: 5px">Replies to
                thread: {{$thread->title}} by {{$thread->user->name}}
            </div>
            <div class=".g_et_al_paragraph2"> {{$thread->body}}
            </div>
            <table class="table table-hover">
                @foreach($thread->replies as $reply)
                    <tr id="reply_{{$reply->id}}">
                        <td>
                            <div class="d-flex">

                                <div class="mr-auto p-2"><span class="g_et_al_paragraph2">#hastags</span></div>
                                <div class="p-2 g_et_al_paragraph2"
                                     style="padding-top: 0 !important;">{{$reply->user->name}} <span
                                        class="g_et_al_timecell">{{$reply->created_at->diffForHumans()}}</span></div>
                            </div>
                            <div class="d-flex">
                                <div class="p-2 g_et_al_listtitle"
                                     style="padding-top: 0 !important;">{{$reply->title}}</div>
                            </div>
                            <div class="d-flex p-2 g_et_al_listtext" style="padding-top: 0 !important;"
                                 id="reply_body_{{$reply->id}}">
                                {{$reply->body}}
                            </div>
                            <div class="d-flex p-2 g_et_al_listtext" style="padding-top: 0 !important;">
                                <a href="#" data-toggle="modal" data-id="{{$reply->id}}"
                                   data-target="#editreplydialog">
                                    <i class="far fa-edit"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                @endforeach
            </table>
        </div>


    </div>

    <div class="row" style="padding-top: 20px">
        <div class="col-md-8 col-md-offset-2">
            <button class="btn btn-info" data-toggle="modal"
                    data-target="#addreplydialog">Reply
            </button>
        </div>
    </div>

@endsection
@section('dialogs')
    <div id="addreplydialog" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="additemtitle">Add reply</h4>

                </div>
                <div class="modal-body">
                    {!! Form::open( ['class'=>'form-horizontal', 'id'=>'addreplyform'])!!}

                    @include('frontend.forum.thread.form.replyform', ['submitButtonText'=>'Add reply'])

                    {!! Form::close() !!}
                </div>
            </div>
        </div>
    </div>

    <div id="editreplydialog" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Edit reply</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    {!! Form::open( ['class'=>'form-horizontal', 'id'=>'editreplyform'])!!}

                    @include('frontend.forum.thread.form.replyform', ['submitButtonText'=>'Update reply'])

                    {!! Form::close() !!}
                </div>
            </div>
        </div>
    </div>
@endsection