@extends('layout.app', ['title' => 'Forum', 'isRoomAndForum' => true])

@push('style')
  <link rel="stylesheet" href="{{ URL::asset('/plugins/summernote/summernote-bs4.min.css') }}">
  @vite('resources/css/forum.css')
@endpush

@section('content')
  <section class="forum col-8 col-md-9 col-xl-10 flex-grow-1 h-100">
    @include('custom_errors.session-errors')
    <div class="row h-100">
      <div class="col-4 search-forum">
        <form action="{{ route('forum.index', ['id' => 1]) }}" method="GET">
          <div class="search-input">
            <input class="forum-search" type="text" name="search" placeholder="Tìm kiếm"
              value="{{ request()->search ? request()->search : '' }}">
          </div>
        </form>
        <div class="forum-list-group">
          <div class="forum-list border-padding-forum">
            <div class="d-flex justify-content-between">
              <span class="fs-5 fw-semibold text-white">
                Diễn đàn
              </span>
              <button type="button" class="btn" data-bs-toggle="modal" data-bs-target="#createForumModal">
                <span><svg width="30" height="30" viewBox="0 0 30 30" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="M15 27.5C21.9036 27.5 27.5 21.9036 27.5 15C27.5 8.09644 21.9036 2.5 15 2.5C8.09644 2.5 2.5 8.09644 2.5 15C2.5 21.9036 8.09644 27.5 15 27.5Z"
                      stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M15 10V20" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M10 15H20" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                  </svg>
                </span>
              </button>
              @include('forum.create_forum_modal')
            </div>
            <ul class="forum-list-ul">
              @foreach ($forumData as $forum)
                <li>
                  <a href="{{ route('forum.index', ['id' => $forum->id, 'search' => request()->search ? request()->search : '']) }}"
                    class="forum-item d-flex align-items-center {{ request('id') == $forum->id ? 'active' : '' }} flex-row gap-4">
                    <div class="item-img">
                      <img
                        src={{ $forum->avatar == null ? asset('img/forum/avatar_forum1.png') : Storage::url($forum->avatar) }}
                        alt="avatar forum" class="w-100">
                    </div>
                    <div class="d-flex flex-column">
                      <span class="fs-15 fw-semibold text-white">{{ $forum->title }}</span>
                      <span class="text-neutral-11 fs-10">
                        Last post - {{ $forum->last_action != '' ? $forum->last_action : 'no action' }}
                      </span>
                    </div>
                  </a>
                  <hr class="border-bottom-forum-item">
                </li>
              @endforeach
            </ul>
          </div>
        </div>
      </div>
      <div class="col-8 forum-content">
        <div class="d-flex flex-column border-padding-forum-detail h-100">
          <div class="forum-comment-group">
            <div class="forum-comment">
              <div class="forum-comment-content">
                @if ($forumDetail == null)
                  Please choose any forum
                @else
                  @if ($forumDetail->isEmpty())
                    <span>No comment</span>
                  @endif
                  @foreach ($forumDetail as $comment)
                    <div class="comment-item {{ Str::contains($comment->path, '.') ? 'child-1-comment' : '' }}">
                      <div class="comment-avatar">
                        <img
                          src="{{ $comment->user_avatar == null ? asset('img/avatardefault.jpg') : Storage::url($comment->user_avatar) }}"
                          alt="">
                      </div>
                      <div class="d-flex flex-column w-100 comment-group" alt={{ $comment->comment_id }}>
                        <div class="d-flex flex-column comment-name-content gap-2">
                          <span class="comment-name-text text-neutral-05 fs-14 fw-semibold mb-1">
                            {{ $comment->fullname }}
                          </span>
                          <span class="comment-content-text fs-13 text-neutral-03 text-break">
                            {!! $comment->content !!}
                          </span>
                        </div>
                        <div class="d-flex justify-content-end reply-button">
                          <button>
                            PHẢN HỒI
                          </button>
                        </div>
                      </div>
                    </div>
                  @endforeach
                @endif
              </div>
            </div>
          </div>

          <form enctype="multipart/form-data" method="POST" action="{{ route('forum.createComment') }}"
            class="form-comment-group">
            @csrf
            <div class="reply-group-input position-relative">
              <div class="d-flex gap-3">
                <span><i class="fa-solid fa-reply"></i></span>
                <div class="reply-content d-flex flex-column">
                  <span class="reply-name"></span>
                  <span class="reply-comment"></span>
                </div>
              </div>
              <div class="close-reply-comment">
                <span><i class="fa-solid fa-x"></i></span>
              </div>
            </div>
            <input type="hidden" name="parent_comment_id" class="parent-id-input">
            <input type="hidden" name="forum_id" value={{ request('id') }}>
            <div class="form-comment mb-3">
              <div id="emojiPicker">
              </div>
              <textarea name="comment" id="summernote" class="d-none"></textarea>
            </div>
            <div class="d-flex justify-content-end reply-button mb-1 ">
              <button type="submit" class="btn-4 btn-4-fill fs-10 fw-semibold">
                Gửi phản hồi
              </button>
            </div>
          </form>

        </div>
      </div>
    </div>
  </section>
@endsection

@push('script')
  <script src="{{ URL::asset('/plugins/summernote/summernote-bs4.min.js') }}"></script>
  <script src="{{ URL::asset('/plugins/summernote-emoji-mart/emoji-mart.js') }}"></script>
  @vite(['resources/js/forum.js', 'resources/js/forum_emoji.js'])
@endpush