@extends('German.layout.main')

@section('content')
<!-- ============================================================= Content Start ============================================================= -->
<div class="xg-main">
<!-- START: Breadcrumbs -->
<div class="xg-gap-1"></div>
<div class="container">
    <ul class="xg-breadcrumbs">
        <li><a href="{{ url('/') }}">Zuhause</a></li>
        <li><span class="fa fa-angle-right"></span></li>
        <!-- ================ Content =========================== -->
         @if(isset($Game->Category->title))
         <li><a>{{ $Game->Category->title }}</a></li>
         <!-- ================ Content =========================== -->
         @else
         <li><a>Keine Kategorie</a></li>
         @endif
        <li><span class="fa fa-angle-right"></span></li>
        <li><span>{{ $Game->Title_gr }}</span></li>
    </ul>
</div>
<div class="xg-gap-1"></div>
<!-- END: Breadcrumbs -->
<div class="container">
    <div class="row vertical-gap">
        <div class="col-lg-12">
            <div class="xg-store-product">
                <div class="row vertical-gap">
                    <div class="col-md-6">
                        <!-- START: Product Photos -->
                        <div class="xg-popup-gallery">
                            <div class="xg-gallery-item-box">
                                <a href="{{ asset($Game->image) }}" class="xg-gallery-item" data-size="1200x554">
                                    <div class="xg-gallery-item-overlay"><span class=" icon-feather-eye"></span></div>
                                    <img src="{{ asset($Game->image) }}" alt="">
                                </a>
                            </div>
                            <div class="xg-gap-1"></div>
                        </div>
                        <!-- END: Product Photos -->
                    </div>
                    <div class="col-md-6">
                        <h2 class="xg-product-title h3">{{ $Game->Title_gr }}</h2>
                        <div class="xg-product-description" style="color: #fff">
                            {{ $Game->body_gr }}
                        </div>
                        <div class="xg-gap-1"></div>  
                            <div class="input-group">
                                <a href="{{ asset($Game->seo_title) }}" target="_blank" download="" class="xg-btn xg-btn-rounded  xg-btn-x4 xg-btn-color-main-1">Herunterladen {{ $Game->excerpt }} GB</a>
                            </div>
                        <!-- END: Add to Cart -->
                    </div>
                </div>
                <div class="xg-gap-1"></div>
                <h3 class="xg-decorated-h"><span><span class="text-main-1">Beschreibung</span> <i class=" icon-line-awesome-certificate"></i></span></h3>
                <!-- START: Tabs -->
                <div class="xg-tabs">
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" href="#tab-description" role="tab" data-toggle="tab">Beschreibung</a>
                        </li>
                        <li class="nav-item">
                            <!-- =============================== Comments Game ======================================== -->
                            @if(isset($Game->Comments))
                            <a class="nav-link" href="#tab-reviews" role="tab" data-toggle="tab">{{ count($Game->Comments) }} Bemerkungen</a>
                            @else
                            <a class="nav-link" href="#tab-reviews" role="tab" data-toggle="tab">0 Bemerkungen</a>
                            @endif
                            <!-- =============================== Comments Game ======================================== -->
                        </li>
                    </ul>
                    <div class="tab-content">
                        <!-- START: Tab Description -->
                        <div role="tabpanel" class="tab-pane fade show active" id="tab-description" style="color: #fff">
                            <div class="xg-gap"></div>
                           {{ $Game->body_gr }}
                        </div>
                        <!-- END: Tab Description -->
                        <div role="tabpanel" class="tab-pane fade" id="tab-reviews">
                            <div class="xg-gap-2"></div>
                            <!-- START: Reply -->
                            <h3 class="h4">Einen Kommentar hinzufügen</h3>
                             <!--   ================  Messagge ================  -->
                              @if(session('Messagge'))
                              <div class="alert alert-success" role="alert">
                                Herzliche Glückwünsche. Ihr Kommentar wurde erfolgreich gesendet
                              </div>
                              @endif
                              <!--   ================  Messagge ================  -->
                            <div class="xg-reply">
                              <form class="xg-form" method="post" action="{{ route('Comments.store')}}" enctype="multipart/form-data">
                              {{ csrf_field() }}
                              <input type="text" name="Post_id" hidden="" value="{{ $Game->id }}">
                              <textarea class="form-control required" name="Comment" cols="10" rows="3" placeholder="Kommentar schreiben" aria-required="true"></textarea>
                              <div class="xg-gap-1"></div>  
                              <button class="xg-btn xg-btn-rounded xg-btn-color-dark-3 float-right">Kommentar</button>
                              </form>
                            </div>
                            <!-- END: Reply -->
                            <div class="clearfix"></div>
                            <div class="xg-gap-2"></div>
                            <div class="xg-comments">
                                <!-- =========================================== Game Comments ============================ -->
                                @foreach($Comments as $comment)
                                <!-- START: Review -->
                                <div class="xg-comment">
                                    <div class="xg-comment-meta">
                                        <img src="{{ asset($comment->User->avatar) }}" class="rounded-circle" width="35"> by
                                        <a>{{ $comment->User->name }}</a> {{ date('M j, Y', strtotime($comment->created_at)) }}
                                    </div>
                                    <div class="xg-comment-text">
                                        <p>{{ $comment->Comment }}</p>
                                    </div>
                                </div>
                                <!-- END: Review -->
                                @endforeach
                                <!-- =========================================== Post Comments ============================ -->
                            </div>
                        </div>
                        <!-- END: Tab Reviews -->
                    </div>
                </div>
                <!-- END: Tabs -->
            </div>
        </div>
    </div>
</div>
<div class="xg-gap-1"></div>
<!-- ============================================================= Content end   ============================================================= -->
@endsection