@extends('layouts.app')

@section('content')
    <div class="content-section">
        <div class="content-block questions-page">

            @include('sections.breadcrumbs')

            <div class="question-block">
                <h1 class="page-title">{{$question->title}}</h1>
                <div class="title-info">
                    <p class="marker">вопрос</p>
                    <p class="name"><span>Задает:</span> {{$question->asking}}, г. {{$question->asking_city}}</p>
                    <p class="date"><span>{{$question->created_at->format('d.m.Y')}}</span></p>
                    <p class="views"><i class="fas fa-eye"></i>{{$question->seen_count}}</p>
                </div>
                <div class="text">{!!$question->text!!}</div>
                <br />
                @if(isset($question->tags) && count($question->tags) > 0)
                    <div class="tags">
                        <p>Теги:</p>
                        @foreach($question->tags as $tag)
                        <div class="tags-item">{{$tag->title}}</div>
                        @endforeach
                    </div>
                @endif
            </div>
            <br/>
            @if(isset($question->answers))
                @foreach($question->answers as $answer)
                    <div class="answer-block">
                        <div class="title-info">
                            <img src="{{asset("/storage/".$answer->author->img)}}" alt="">
                            <div class="name">
                                <span>Отвечает:</span>
                                <p><a href="{{route('show.author',['slug'=>$answer->author->slug])}}">{{$answer->author->name}}</a></p>
                            </div>
                            <p class="date"><span>{{$answer->created_at->format('d.m.Y')}}</span></p>
                        </div>
                        <div class="text">{!!$answer->text!!}</div>
                        <br />
                    </div>

                    @if(isset($answer->reviews) && count($answer->reviews) > 0)
                        <div class="comments-questions comments-div-{{$answer->id}}">
                            <h2>Комментарии к ответу</h2>
                            @foreach($answer->reviews as $review)
                                <div class="comments-questions-row">
                                    <div class="comments-item">
                                        <div class="title-block">
                                            <p class="name">{{$review->name}}</p>
                                            <p class="date">{{\Carbon\Carbon::parse($review->created_at)->format('h:i')}}</p>
                                        </div>
                                        <p class="text">{{$review->text}}</p>
{{--                                                <a href="">Ответить</a>--}}
                                    </div>
                                </div>
                            @endforeach
                        </div>

                    @endif
                    <button class="btn modal-btn button-{{$answer->id}}" data-toggle="modal" data-target="#commentModal" data-answer-id="{{$answer->id}}">Оставить комментарий</button>
                @endforeach
            @endif


            <div class="modal fade" id="commentModal">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">Оставить комментарий</h4>
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                        </div>
                        <div class="modal-body">
                            <form class="feedback-form">
                                <label><input class="review_name form-control" type="text" name="name" placeholder="Имя"  required=""></label>
                                <label><input class="review_surname form-control" type="text" name="surname" placeholder="Фамилия"  required=""></label>
                                <label class="textarea w-100"><textarea class="review_text form-control" name="text"  placeholder="Ваш комментарий"  required=""></textarea></label>
                                <div class="form__item form__item--agree">
                                    <input type="checkbox" name="apply" id="question-form_apply" required="" />
                                    <label for="question-form_apply">
                                        Я принимаю условия <a href="/polzovatelskoe-soglashenie" rel="nofollow" target="_blank">Пользовательского соглашения</a> и даю свое согласие на обработку моих персональных данных в соответствии с <a href="/politika-konfidencialnosti" rel="nofollow" target="_blank">Политикой конфиденциальности</a>
                                    </label>
                                </div>                                 
                                <button class="btn btn-yellow leave-feedback d-block" type="button">Отправить</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <div class="theme-questions">
                <h2>Другие вопросы по теме</h2>
                @foreach($other_questions as $question)
                    <div class="questions-all-row">
                        <div class="questions-item">
                            <a href="{{route('show.question',['slug'=>$question->slug])}}"><p class="item-title">{{$question->title}}</p></a>
                            <div class="info">
                                <p class="date">{{$question->created_at->format('d.m.Y')}}</p>
                                <p class="name">Задает: {{$question->asking}}, г. {{$question->asking_city}}</p>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="theme-articles">
                <h2>Статьи по теме</h2>
                @foreach($articles as $article)
                    <div class="articles-row">
                        <div class="image-column">
                            @if ($article->thumb)
                                <img src="{{asset("$article->thumb")}}" alt="">
                            @elseif ($article->img)
                                <img src="{{asset("/storage/$article->img")}}" alt="">
                            @endif
                        </div>
                        <div class="info">
                            <p class="date">{{$article->created_at->format('d.m.Y')}}</p>
                            <a href="{{route('show.article',['slug'=>$article->slug])}}" class="title">{{$article->title}}</a>
                            <p class="description">{{$article->short_text}}</p>
                        </div>
                    </div>
                @endforeach
            </div>

        </div>
    </div>

@endsection

@section('script')
    <script>
        function prettyDate(time) {
            var date = new Date(time);

            return date.toLocaleTimeString('en-GB', {
                hour: '2-digit',
                minute:'2-digit'
            });
        }

        $(function () {
            var answer_id

            $('.modal-btn').on('click',function () {
               answer_id = $(this).attr('data-answer-id')
            })

            $('.leave-feedback').on('click',function () {

                var f_name = $('.review_name').val()
                var l_name = $('.review_surname').val()
                var text = $('.review_text').val()

                if(f_name.length > 3 || l_name.length > 3 || text.length > 10) {
                    $.ajax({
                        url: `/store/question/review/${answer_id}`,
                        type:"POST",
                        data:{"_token": "{{ csrf_token() }}",
                            f_name,l_name,text}
                    }).done(function(response) {
                        // $('#commentModal').modal('hide')
                        //
                        // $('.comments-div-'+answer_id).append(`
                        //     <div class="comments-questions-row">
                        //         <div class="comments-item">
                        //             <div class="title-block">
                        //                 <p class="name">${response.name}</p>
                        //                 <p class="date">${prettyDate(response.created_at)}</p>
                        //             </div>
                        //             <p class="text">${response.text}</p>
                        //         </div>
                        //     </div>
                        // `)
                        location.reload();
                    });
                }else{
                    alert('Все поля обязательны для заполнения')
                }
            })
        })
    </script>
@endsection