@extends('layouts.app')

@section('cssExternal')
    <link rel="stylesheet" href="{{ asset('css/thread.css') }}">
@endsection
@section('title', 'Detail Forum | GrowUp')

@include('forum.editQuestionModal')
@include('forum.editAnswerModal')

@section('content')
    <div class="container main-container">
        <div class="heading">
            <h1><i class="uil uil-comments-alt me-1"></i>{{ $forum->title }}</h1>
            <hr>
        </div>
        <div class="row">
            {{-- BUAT PERTANYAAN --}}
            <div class="col-md-6 thread-left">
                <div class="section-heading">
                    <h2>Buat Pertanyaan <i class="uil uil-plus-circle ms-1"></i></h2>
                </div>
                <form class="post-thread-container" method="POST" action="{{ route('createQuestion') }}">
                    @csrf
                    <div class="input-group mb-3">
                        <span class="input-group-text" id="basic-addon1">Judul</span>
                        <input name="title" type="text" class="form-control"
                            placeholder="Contoh: Syntax apa yang digunakan untuk membuat class Java?" aria-label="Username"
                            aria-describedby="basic-addon1">
                    </div>
                    @error('title')
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                    <div class="form-floating">
                        <textarea name="content" class="form-control text-area-form" placeholder="Masukkan pertanyaan kamu"
                            id="floatingTextarea"></textarea>
                        <label for="floatingTextarea">Masukkan pertanyaan kamu</label>
                    </div>
                    @error('content')
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                    <div class="button-container">
                        <button class="btn btn-sm bg-red">Posting Pertanyaan</button>
                    </div>
                </form>
            </div>

            {{-- FORUM QUESTIONS --}}
            <div class="col-md-6 thread-right">
                @if (count($forum->questions) != 0)
                    <div class="section-heading">
                        <h2>Thread <i class="uil uil-comment-alt-chart-lines ms-1"></i></h2>
                    </div>
                    @foreach ($forum->questions as $question)
                        <div class="thread-wrapper">
                            <div class="main-thread">
                                <h3>{{ $question->title }}</h3>
                                <p>{{ $question->content }}</p>
                                <div class="action-wrapper d-flex gap-4">
                                    <p class="text-green">{{ $question->user->name }}</p>
                                    @if ($question->user_id == Auth::user()->id)
                                        <a class="thread-edit text-decoration-none"
                                            href="{{ route('editQuestion', $question->id) }}" data-bs-toggle="modal"
                                            data-bs-target="#editQuestionModal">
                                            <i class="uil uil-edit me-1"></i>
                                            Edit
                                        </a>
                                        <a href="#" data-uri="{{ route('deleteQuestion', $question->id) }}"
                                            class="text-danger text-decoration-none" data-bs-toggle="modal"
                                            data-bs-target="#confirmDeleteModal">
                                            <i class="uil uil-trash-alt me-1"></i>
                                            Delete
                                        </a>
                                    @endif
                                </div>
                            </div>
                            @if (count($question->answers) != 0)
                                @foreach ($question->answers as $answer)
                                    <div class="replies">
                                        <p>{{ $answer->content }}</p>
                                        <div class="action-wrapper d-flex gap-4">
                                            <p class="text-green">{{ $answer->user->name }}</p>
                                            @if ($answer->user_id == Auth::user()->id)
                                                <a class="reply-edit text-decoration-none"
                                                    href="{{ route('editAnswer', $answer->id) }}" data-bs-toggle="modal"
                                                    data-bs-target="#editAnswerModal">
                                                    <i class="uil uil-edit me-1"></i>
                                                    Edit
                                                </a>
                                                <a href="#" data-uri="{{ route('deleteAnswer', $answer->id) }}"
                                                    class="text-danger text-decoration-none" data-bs-toggle="modal"
                                                    data-bs-target="#confirmDeleteModal">
                                                    <i class="uil uil-trash-alt me-1"></i>
                                                    Delete
                                                </a>
                                            @endif
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                            <form method="POST" action="{{ route('createAnswer', $question->id) }}">
                                @csrf
                                <div class="form-floating">
                                    <textarea name="answer" class="form-control text-area-form" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
                                    <label for="floatingTextarea">Jawab</label>
                                </div>
                                @error('answer')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                                <div class="button-container">
                                    <button class="btn btn-sm bg-green">Posting Jawaban</button>
                                </div>
                            </form>
                        </div>
                    @endforeach
                @endif
            </div>
        </div>
    </div>
@endsection

@section('jsExternal')
    <script>
        const threadForm = document.getElementById('editQuestionForm')
        const threadIn = document.getElementsByClassName('thread-in')
        const threadList = document.getElementsByClassName('thread-edit')

        const replyForm = document.getElementById('editAnswerForm')
        const repIn = document.getElementsByClassName('reply-in')
        const replyList = document.getElementsByClassName('reply-edit')

        for (let i = 0; i < threadList.length; i++) {
            threadList[i].addEventListener('click', () => {
                const newAction = threadList[i].href
                threadForm.setAttribute('action', newAction)

                let title = threadList[i].parentElement.parentElement.previousElementSibling.previousElementSibling
                    .textContent
                let content = threadList[i].parentElement.parentElement.previousElementSibling.textContent

                threadIn[0].value = title
                threadIn[1].value = content

            })
        }

        for (let i = 0; i < replyList.length; i++) {
            replyList[i].addEventListener('click', () => {
                const newAction = replyList[i].href
                replyForm.setAttribute('action', newAction)

                let content = replyList[i].parentElement.previousElementSibling.textContent

                repIn[0].value = content
            })
        }
    </script>
@endsection