@extends('site.layouts.master')
@section('content')
    <style>
        @media screen and (max-width: 760px) {
            body {
                /*background: linear-gradient(-284deg, #194db4, #b667df);*/
                overflow: hidden;
                background-repeat: no-repeat;
            }
        }

        .main {
            background: url("site/img/paracivil/5.jpg");
            background-repeat: no-repeat;
            background-size: contain;
            margin-top: 4.5em;
            overflow-y: hidden;
        }
        .new-question {
            background: rgba(255, 255, 255, 0.03);
            margin-top: -6px;
            color: white;
            border: 1px solid;

        }
    </style>
    <div class="container">
        <div class="row">
            <div class="col-6">
                <h4 class="text-white">تاریخچه سوالات شما</h4>
            </div>
            <div class="col-6 text-right" style="text-align: left">
                <a href="{{ route('chatgpt', ['course'=>$course->id]) }}" class="btn new-question">ایجاد سوال جدید</a>
            </div>
            @foreach ($course->chatgpts()->whereUserId($authUser->id)->orderByDesc('id')->get() as $item)
                @php
                    if($item->answers){
                        $unreadAnswersPm = $item->answers()->whereNull('read_at')->count();
                    }
                @endphp
                <div class="col-12">
                    <a href="{{ route('chatgpt', ['course' => $course->id, 'chat' => $item->id]) }}">
                        <div class="shadow bg-white my-2 pl-4 pr-2 py-4 rounded">
                            <p>سوال : {{ substr($item->answers()->first()->question ?? 'سوالی مطرح نشده', 0, 80) }}...
                                @if ($item->adviser_id != null)
                                    <span class="msg-counter" style="position: relative; float: left; width: 20px; height: 20px; justify-content: center">{{ $unreadAnswersPm ?? 0 }}</span>
                                @endif
                            </p>
                        </div>
                    </a>
                </div>
            @endforeach
        </div>
    </div>

@endsection