//
<?php

namespace App\Http\Controllers;

use App\Models\Comment;
use App\Models\Question;
use Illuminate\Http\Request;

class CommentController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        //
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        //
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        //
        $comment = Comment::create([
            'body' => $request->body,
            'user_id' => $request->user_id,
            'question_id' => $request->question_id
        ]);
        $question = Question::find($request->question_id);
        $question->comments()->save($comment);
        return response()->json([
            'success' => true
        ]);
    }

    /**
     * Display the specified resource.
     *
     * @param  \App\Models\Comment  $comment
     * @return \Illuminate\Http\Response
     */
    public function show(Comment $comment)
    {
        //
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  \App\Models\Comment  $comment
     * @return \Illuminate\Http\Response
     */
    public function edit(Comment $comment)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \App\Models\Comment  $comment
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, Comment $comment)
    {
        //
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  \App\Models\Comment  $comment
     * @return \Illuminate\Http\Response
     */
    public function destroy(Comment $comment)
    {
        //
    }
}
                                                    
                                                

                                                        
                                                            //
<template>
    <div class="row my-3">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    comments
                </div>
                <div class="card-body">
                    <div v-if="user_id && verified_user">
                        <div class="form-group mb-3">
                            <textarea v-model="body" class="form-control"
                            cols="30" rows="2"
                            placeholder="Type here...."></textarea>
                        </div>
                        <div class="form-group mb-3">
                            <button class="btn btn-sm btn-dark"
                                v-show="body.length"
                                @click="addComment">
                                submit
                            </button>
                        </div>
                    </div>
                    <div v-else>
                        <a :href="to" class="btn btn-link">
                            Login to comment / Verify your account
                        </a>
                    </div>
                    <ul class="list-group" v-if="comments.length">
                        <li class="list-group-item d-flex flex-column"
                            v-for="(comment,index) in comments" :key="index">
                            <span><b>{{comment.user.name}}:</b> <i>{{comment.body}}</i></span>
                            <span>{{comment.created_at}}</span>
                        </li>
                    </ul>
                    <div class="alert alert-dark" v-else>
                        No comments yet !
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props:['question_id','user_id','verified_user'],
    data() {
        return {
            body: '',
            comments: [],
            to: !this.user_id && !this.verified_user ? '/login' : '/email/verify'
        }
    },
    mounted(){
        this.getComments();
    },
    methods : {
        addComment(){
            const comment = {
                            body: this.body,
                            question_id: this.question_id,
                            user_id: this.user_id
                        };
            axios.post('/api/comments/add',comment)
                .then(res => {
                    if(res.data.success){
                        this.body = '';
                        this.getComments();
                    }
                }).catch(err => console.log(err));
        },
        getComments(){
            axios.get(`/api/question/${this.question_id}/comments`)
                .then(res => {
                    this.comments = res.data;
                }).catch(err => console.log(err));
        }
    }
}
</script>
                                                        
                                                    

                                                        
                                                            //
<template>
    <div class="col-md-2">
        <div class="card">
            <div class="card-header text-center">
                <i class="fas fa-chevron-up fw-bold"
                style="cursor:pointer" @click="voteUp"></i>
            </div>
            <div class="card-body text-center">
                <span class="fw-bold">
                    {{ questionVotes }}
                </span>
            </div>
            <div class="card-footer text-center">
                <i class="fas fa-chevron-down fw-bold"
                style="cursor:pointer" @click="voteDown"></i>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props:['votes','id'],
        data() {
            return {
                questionVotes : 0
            }
        },
        mounted() {
            this.questionVotes = this.votes;
        },
        methods : {
            voteUp(){
                axios.get(`/api/questions/${this.id}/voteup`)
                    .then(res => {
                        this.questionVotes++;
                    }).catch(err => console.log(err));
            },
            voteDown(){
                axios.get(`/api/questions/${this.id}/votedown`)
                    .then(res => {
                        this.questionVotes--;
                    }).catch(err => console.log(err));
            }
        }
    }
</script>