@extends('user.layout.app')

@section('content')
    <!-- Dashboard Start -->
    <div class="container-fluid pt-4 px-4">
        <div class="row g-4">

            <!-- Questions Asked Section -->
            <div class="col-sm-12 col-xl-12">
                <div class="bg-light rounded shadow-sm d-flex align-items-center justify-content-between p-4">
                    <div class="ms-3">
                        <p class="mb-2 text-muted">Questions Asked</p>
                        <h5 class="mb-0 text-primary">{{ $postCount ?? '0' }}</h5> <!-- Static Total Number of Questions -->
                    </div>
                    <div class="icon-box bg-warning text-white rounded-circle d-flex align-items-center justify-content-center"
                        style="width: 50px; height: 50px;">
                        <i class="fas fa-question"></i>
                    </div>
                </div>
            </div>

            <!-- My Questions Section -->
            <div class="col-sm-12 col-xl-12">
                <div class="bg-light rounded shadow-sm p-4">
                    <h5 class="mb-4 text-primary">My Questions</h5>
                    <ul class="list-group">
                        @forelse ($userQuestions->posts as $item)
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <div>
                                    <strong>{{ $item->title }}</strong>

                                    <p class="mb-0 text-muted">Status:
                                        {{ $item->comments->isNotEmpty() ? 'Answered' : 'Pending' }}</p>

{{--                                    @if ($latestComment = $item->comments->sortByDesc('created_at')->first())--}}
{{--                                        <p class="mb-0">--}}
{{--                                            <strong>Admin Response:</strong>--}}
{{--                                            {{ $latestComment->comment }}--}}
{{--                                        </p>--}}
{{--                                    @else--}}
{{--                                        <p class="mb-0">No comments yet.</p>--}}
{{--                                    @endif--}}
                                </div>
                                <span
                                    class="badge text-dark {{ $item->comments->isNotEmpty() ? 'bg-success'  : 'bg-warning' }}">{{ $item->comments->isNotEmpty() ? 'Answered' : 'Pending' }}</span>
                            </li>
                        @empty
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <div>
                                    <strong>When will I get my 401k returns?</strong>
                                    <p class="mb-0 text-muted">Status: Answered</p>
                                    <p class="mb-0"><strong>Admin Response:</strong> The returns will be available within
                                        30
                                        days.</p>
                                </div>
                                <span class="badge bg-success">Answered</span>
                            </li>
                        @endforelse
                    </ul>
                </div>
            </div>

        </div>
    </div>
    <!-- Dashboard End -->
@endsection