@extends('layouts.front')
@section('content')
    <section class="wrapper bg-light comment-page">1
        <div class="container pt-6 pb-14 pb-md-0">
            <div class="row mb-3">
                <div class="col-md-10 col-lg-12 col-xl-10 col-xxl-9 mx-auto item-center">
                    <header class="header">
                        <h1 class="title">{{$data->title}}</h1>
                    </header>

                    <div class="paginaSesizare">
                        <section class="section">
                            <p><i fill="currentColor" style="display: inline-block;">
                                    <svg fill="currentColor" height="20" width="20" viewBox="0 0 24 24"
                                         style="display: inline-block; vertical-align: middle;">
                                        <path d="M0 0h24v24H0z" fill="none"></path>
                                        <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"></path>
                                    </svg>
                                </i> {{$data->location}}</p>
                        </section>
                        <section class="section">
                            <p class="descriptionText">
                                {{$data->description}}
                            </p>
                            @if($data->images)
                                @php
                                    $images = $data->images;
                                    $imagess = explode('|', $images);
                                @endphp
                                <div class="row g-6 mt-3 mb-10">
                                    @if($imagess)
                                        @foreach($imagess as $item)
                                            <div class="col-md-4">
                                                <figure class="hover-scale rounded cursor-dark"><a
                                                            href="{{URL::to($item)}}" data-glightbox=""
                                                            data-gallery="post"> <img src="{{URL::to($item)}}"
                                                                                      alt=""></a></figure>
                                            </div>
                                            <!--/column -->
                                        @endforeach
                                    @endif
                                </div>
                            @endif


                                <!-- Main Body -->
                                <section>
                                    <div class="container">
                                        <div class="row">
                                            @if(count($comments))
                                                <div class="col-sm-5 col-md-6 col-12 pb-4">
                                                    <h2 class="sectionTitle">Comentarii ({{count($comments)}}):</h2>
                                                    @foreach($comments as $comment)
                                                        <div class="comment mt-4 text-justify float-left">
                                                            <div class="comment-header d-flex align-items-center">
                                                                <div class="icon red-color fs-22 mt-1 me-2"><i
                                                                            class="uil uil-user customIconRedBorderRounded"></i>
                                                                </div>
                                                                <h4 class="m-0"> @if(!$comment->isAnonymous)
                                                                        {{$comment->user->name}}
                                                                    @else
                                                                        Utilizator anonim
                                                                    @endif </h4>
                                                                <span class="date"
                                                                      style="margin-left: auto"> {{\Illuminate\Support\Carbon::parse($comment->created_at)->format('d.m.Y')}}</span>
                                                            </div>
                                                            <br>
                                                            <p>{{$comment->comment}}</p>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            @endif
                                            <div class="col-sm-5 col-md-6 col-12 pb-4">
                                                <form method="POST" action="{{route('comment.create', $data->id)}}">
                                                    @csrf
                                                    <div class="form-group">
                                                        <h4>Lasa un comentariu</h4>
                                                        <label for="message">Comentariu</label>
                                                        <input type="hidden" name="problem_id" value="{{$data->id}}">
                                                        <textarea name="comment" id="" cols="30" rows="5"
                                                                  class="form-control"></textarea>
                                                    </div>

                                                    <div class="form-group">
                                                        <p class="text-secondary"></p>
                                                    </div>
                                                    <div class="form-inline">
                                                        <input type="checkbox" name="isAnonymous" id="isAnonymous"
                                                               class="mr-1">
                                                        <label for="isAnonymous">Ascunde-mi numele, plaseaza ca
                                                            anonim</label>
                                                    </div>

                                                    <div class="form-group text-right">
                                                        <button type="submit" id="add-comment"
                                                                class="btn btn-primary mt-7 addBtn">Adauga Comentariu
                                                        </button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </section>
                        </section>

                    </div>


                </div>
                <!--/column -->
            </div>
        </div>
    </section>
@endsection