@extends('admin.layouts.master')

@section('title')
    Post Details
@endsection

@section('content')
<style>
    .review-card {
        background: white;
        padding: 20px;
        /*max-width: 800px;*/
        margin: 20px auto;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    .user-info {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }

    .avatar {
        width: 60px;
        height: 60px;
        background: #ccc;
        border-radius: 50%;
        background-size: cover;
        background-position: center;
    }

    .user-details {
        margin-left: 15px;
    }

    .name {
        font-weight: bold;
        font-size: 18px;
        display: flex;
        align-items: center;
    }

    .verified-icon {
        width: 16px;
        height: 16px;
        margin-left: 5px;
    }

    .stats span {
        font-size: 13px;
        margin-right: 12px;
        color: #555;
    }

    .rating-date {
        display: flex;
        align-items: center;
        margin: 15px 0;
    }

    .date {
        color: #555;
        font-size: 14px;
    }

    .review-text {
        font-size: 15px;
        margin-bottom: 15px;
        color: #333;
        white-space: pre-line;
    }

    .image-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 6px;
        margin-bottom: 20px;
    }

    .image-grid img {
        width: 100%;
        height: 80px;
        object-fit: cover;
        border-radius: 5px;
        cursor: pointer;
    }

    .reactions {
        display: flex;
        justify-content: flex-start; /* Left aligned */
        align-items: center;
        gap: 40px;
        padding-top: 10px;
        border-top: 1px solid #ddd;
    }

    .reaction {
        text-align: center;
        font-size: 14px;
        color: #555;
    }

    .reaction span {
        font-size: 22px;
        display: block;
        margin-bottom: 4px;
    }

    .reaction b {
        font-weight: bold;
    }

    .comments-section {
        margin-top: 20px;
        border-top: 1px solid #ddd;
        padding-top: 15px;
    }

    .comment {
        display: flex;
        margin-bottom: 15px;
    }

    .comment-avatar {
        width: 40px;
        height: 40px;
        background: #ccc;
        border-radius: 50%;
        background-size: cover;
        background-position: center;
        margin-right: 10px;
    }

    .comment-content {
        flex: 1;
    }

    .comment-user {
        font-weight: bold;
        font-size: 14px;
        margin-bottom: 5px;
    }

    .comment-text {
        font-size: 14px;
        color: #333;
        margin-bottom: 5px;
        white-space: pre-line;
    }

    .comment-date {
        font-size: 12px;
        color: #888;
    }

    .reply {
        margin-left: 30px;
        margin-top: 10px;
        padding-left: 10px;
        border-left: 2px solid #eee;
    }

    .back-button {
        margin: 20px 0;
    }
</style>


<section class="section">
    <div class="section-body">
        <div class="container">
            <div class="card-header d-flex justify-content-between align-items-center">
                <!--<h4>Communities</h4>-->
                <a href="{{ route('posts.index') }}" class="btn btn-secondary back-button">
                    <i class="fas fa-arrow-left"></i> Back to Posts
                </a>
            </div>

    <div class="review-card">
        <div class="user-info">
            <div class="avatar" style="background-image: url('{{ $post->user->image }}')"></div>
            <div class="user-details">
                <div class="name">{{ $post->user->name }} 
                    <!--<img src="{{ asset('verified-icon.png') }}" alt="verified" class="verified-icon">-->
                </div>
                <!--<div class="stats">-->
                <!--    <span>📷 {{ $post->images->count() }}</span>-->
                <!--    <span>💬 {{ $commentsCount }}</span>-->
                <!--</div>-->
                <div class="date">{{ $post->created_at }}</div>
            </div>
        </div>

        <!--<div class="rating-date">-->
        <!--    <div class="date">{{ $post->created_at }}</div>-->
        <!--</div>-->

        <p class="review-text">
            {{ $post->description }}
        </p>

        @if($post->images->count() > 0)
        <div class="image-grid">
            @foreach($post->images as $image)
                <img src="{{ $image->image }}" alt="Post image" onclick="window.open('{{ $image->image }}', '_blank')">
            @endforeach
        </div>
        @endif

        <div class="reactions">
            <div class="reaction">
                <span>👍</span>
                <p>Like<br><b>{{ $likesCount }}</b></p>
            </div>
            <div class="reaction">
                <span>👎</span>
                <p>Dislike<br><b>0</b></p>
            </div>
        </div>

        @if($post->comments->count() > 0)
        <div class="comments-section">
            <h3>Comments ({{ $commentsCount }})</h3>
            
            @foreach($post->comments as $comment)
            <div class="comment">
                <div class="comment-avatar" style="background-image: url('{{ $comment->user->image }}')"></div>
                <div class="comment-content">
                    <div class="comment-user">{{ $comment->user->name }}</div>
                    <div class="comment-text">{{ $comment->content }}</div>
                    <div class="comment-date">{{ $comment->created_at }}</div>
                    
                    @foreach($comment->replies as $reply)
                    <div class="reply">
                        <div class="comment-avatar" style="background-image: url('{{ $reply->user->image }}')"></div>
                        <div class="comment-content">
                            <div class="comment-user">{{ $reply->user->name }}</div>
                            <div class="comment-text">{{ $reply->content }}</div>
                            <div class="comment-date">{{ $reply->created_at }}</div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
            @endforeach
        </div>
        @endif
    </div>
</div>
</div>
</section>
@endsection