@extends('frontend.layouts.app')

@section('title', app_name() . ' | ' . __('navs.frontend.dashboard') )

@push('after-scripts')
    <script type="text/javascript">
        var currenteditingid = -1;
        var currentdeletingid = -1;

        $(document).ready(function () {
            $('select').select2({
                placeholder: 'Select an option'
            });
            $('a[data-toggle=modal], button[data-toggle=modal]').click(function () {
                currenteditingid = $(this).data('id');
                switch ($(this).data('target')) {
                    case '#addthreaddialog':
                        break;
                    case '#editthreaddialog':
                        if ($(this).data('id') > -1) {
                            getThreadDetails($(this).data('id'));
                        }
                        break;
                    default:
                        currenteditingid = -1;
                        currentdeletingid = -1;
                        break;
                }
            });

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

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

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

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


        });

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


        function submitNewThreadForm(vars) {
            $.ajax({
                url: '{!! URL::to('forum/threads/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 submitUpdateThreadForm(id, vars) {
            console.log('submitUpdateThreadForm');
            vars.push({name: '_method', value: 'PUT'});
            $.ajax({
                url: '{!! URL::to('forum/threads/')!!}/' + 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")) {
                    if (Array.isArray(value)) {
                        if (value.length > 0) {
                            value.forEach(function (val) {

                                $ctrl.val(val.id).trigger('change');

                            })
                        } else {
                            $ctrl.val(-1).trigger('change');
                        }

                    } else {
                        $ctrl.val(value).trigger('change');
                    }

                    //    console.log('select2 value is: ' + value[0].id);
                } 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">Forum threads
            </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="#addthreaddialog">New
                    </button>
                </div>
            </div>
            <table class="table table-hover">
                @foreach($threads as $thread)
                    <tr>
                        <td>
                            <div class="d-flex">
                                <div class="mr-auto p-2"><span class="g_et_al_paragraph2">
                                            @foreach($thread->channels as $channel)
                                            @if(isset($channel))
                                                #{{$channel->name}}
                                            @endif
                                        @endforeach

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

    </div>
@endsection
@section('dialogs')
    <div id="addthreaddialog" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="additemtitle">Add thread</h4>
                </div>
                <div class="modal-body">
                    {!! Form::open( ['class'=>'form-horizontal', 'id'=>'addthreadform'])!!}

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

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

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

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

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