@extends('layouts.dashboard')

@section('container')
    <div class="p-4 sm:ml-64">
        <div class="mt-16">
            <div class="grid grid-cols-12 gap-4 mb-4">
                <div class="col-span-12">
                    <div class="border rounded-md p-6 bg-white">
                        <!-- POST -->
                        <div class="header flex flex-col md:flex-row gap-2 align-middle justify-between mb-5">
                            <div class="flex gap-4 mb-6">
                                <img class="w-10 h-10 rounded-full" src="{{ url('img/default.png') }}" alt="Rounded avatar" />

                                <div>
                                    <p class="text-sm font-semibold h-fit text-secondary-700">
                                        {{ $post->user->name }}
                                    </p>
                                    <p class="font-normal text-xs text-secondary-400">
                                        {{ $post->created_at }}
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div>
                            <p class="text-2xl font-semibold mb-4">
                                {{ $post->title }}
                            </p>
                            <p class="font-light text-gray-500">
                                {!! $post->body !!}
                            </p>
                            @if ($post->attachment)
                                <div
                                    class="w-full bg-gray-200 p-4 flex place-content-center rounded-lg mt-8 relative overflow-hidden">
                                    <div class="hidden hover:flex w-full h-full absolute z-10 top-0 left-0 items-center justify-center "
                                        style="background: rgba(0, 0, 0, 0.5);">

                                        <button data-modal-target="image-modal" data-modal-toggle="image-modal"
                                            class="btn-link bg-gray-800 mb-4" type="button">
                                            Lihat gambar penuh
                                        </button>
                                    </div>
                                    <img class="w-11/12" src="{{ asset('storage/' . $post->attachment) }}" alt="">
                                </div>
                            @endif
                        </div>
                        <div class="flex flex-col md:flex-row mt-6 gap-4 justify-between md:items-center">
                            <div class="flex justify-between gap-5">
                                <span class="flex items-center text-xs md:text-sm font-normal text-gray-500"><span
                                        class="flex w-3 h-3 bg-primary-500 rounded-full mr-2 flex-shrink-0"></span>{{ $post->category->name }}</span>
                                <span class="flex items-center text-xs md:text-sm font-normal text-gray-500"><span
                                        class="flex w-3 h-3 bg-indigo-500 rounded-full mr-2 flex-shrink-0"></span>{{ $post->topic->title }}</span>
                            </div>


                            @if ($post->is_finished == 0)
                                <span
                                    class="bg-red-100 text-red-800 text-xs md:text-sm font-medium px-3 py-2 md:py-1 text-center rounded h-fit">Diskusi
                                    Belum
                                    Selesai</span>
                            @else
                                <span
                                    class="bg-green-100 text-green-800 text-xs md:text-sm font-medium px-3 py-2 md:py-1 text-center rounded h-fit">
                                    Diskusi Selesai</span>
                            @endif

                        </div>
                        <!-- END POST -->
                    </div>

                    <!-- COMMENT -->

                    <!-- COMMENT INPUT -->
                    @include('layouts.components.comments.forum.input')

                    <!-- END COMMENT INPUT -->

                    @if (count($post_comments))
                        @include('layouts.components.comments.forum.comment')
                    @else
                        <div class="flex place-content-center py-10">
                            <p class="text-gray-600">Belum ada komentar</p>
                        </div>
                    @endif

                    <!-- END COMMENT -->
                </div>
            </div>
        </div>
    @endsection